Optimisations d'UI pre-p0ka-et-Hugo

.gitignore

@@ -1,3 +1,5 @@
 .env
 cache/
 tests/
+minelife.html
+vendors/keygen/__pycache__

farfetched.php

@@ -7,17 +7,24 @@ $gchange = new Gchange();
 
 $javascripts['header'][] = 'lib/js/farfetched.js';
 
+$bodyIds = 'farfetched';
 include_once('header.php');
 
 ?>
 
-<h2>Envoi possible</h2>
-<ul id="shippable">
-</ul>
+<section id="shippable">
+
+	<h2>Envoi possible</h2>
+	<ul id="shippable-offers" class="offers-list">
+	</ul>
+</section>
+
+<section id="immaterial">
+	<h2>Offres immatérielles</h2>
+	<ul id="immaterial-offers" class="offers-list">
+	</ul>
+</section>
 
-<h2>Offres immatérielles</h2>
-<ul id="immaterial">
-</ul>
 <?php
 
 include_once('footer.php');

home.php

@@ -2,21 +2,29 @@
 
 require_once('config.php');
 require_once('lib/Gchange.class.php');
+require_once('lib/Keygen.class.php');
 
 $bodyIds = 'home';
 include_once('header.php');
 
 $gchange  = new Gchange();
 
+$keygen  = new Keygen();
+
+$ipfsHost = 'http://astroport.localhost:8080';
+
 try {
 
 	$player = $gchange->getUser($_SESSION['player_pubkey']);
 
+	$twLink = $ipfsHost . '/ipns/' . $keygen->getIPNSPub($_SESSION['salt'], $_SESSION['pepper']);
+
 } catch (Exception $errMsg) {
 
 	ErrorsHandler::kaput($errMsg);
 }
 
+
 echo '
 <header>
 	Bienvenue '. $player->getUserName() . ' ! 
@@ -50,12 +58,20 @@ echo '
 	</li>
 
 	<li id="dashboard-minelife">
-		<a href="minelife.html">
+		<a href="minelife/index.html">
 			<span>
 				Manuel
 			</span>
 		</a>
 	</li>
+
+	<li id="dashboard-tiddlywiki">
+		<a href="'. $twLink .'">
+			<span>
+				'. ('Mon TiddlyWiki') .'
+			</span>
+		</a>
+	</li>
 </ul>
 
 

lib/Fred.class.php

@@ -4,15 +4,15 @@ class Fred {
 	
 	private $gatewayProtocol = 'http';
 
-	private $gatewayDomain = 'libra.copylaradio.com';
+	// private $gatewayDomain = 'libra.copylaradio.com';
 	// private $gatewayDomain = 'aries.copylaradio.com';
-	// private $gatewayDomain = 'astroport.localhost';
+	private $gatewayDomain = 'astroport.localhost';
 
 	private $gatewayPort = '1234';
 
 	private $gatewayDelay = 3;
 
-	private $gatewayMaxRounds = 1;
+	private $gatewayMaxRounds = 20;
 
 	public function __construct () {
 
@@ -40,6 +40,7 @@ class Fred {
 
 		$url = $matches[1];
 
+		die($url);
 		$opts2 = array(
 			'http'=>array(
 				'method'=>"GET",
@@ -48,6 +49,8 @@ class Fred {
 			)
 		);
 
+		echo 'fred 2';
+
 		$context2 = stream_context_create($opts2);
 
 		$page2 = false;

lib/Keygen.class.php

@@ -24,7 +24,7 @@ class Keygen {
 		$cmd .= ' -t duniter';
 		$cmd .= ' "'. $salt .'"';
 		$cmd .= ' -p "'. $pepper .'"';
-
+		
 		$output=null;
 		$result_code=null;
 		exec($cmd, $output, $result_code);

lib/js/farfetched.js

@@ -4,6 +4,7 @@ const nodes = {
 	]
 }
 
+let gameId = 'spationaute'
 
 async function fetchShippable (n) {
 
@@ -17,6 +18,8 @@ async function fetchShippable (n) {
 			  'title'
 			, 'description'
 			, 'id'
+			, 'picturesCount'
+			, 'pictures'
 		]
 		, query: {
 			bool: {
@@ -63,24 +66,6 @@ async function fetchShippable (n) {
 
 }
 
-function displayShippable (records) {
-
-	let shippableElt = document.getElementById('shippable');
-
-	for (record of records) {
-
-		offerLi = document.createElement('li')
-
-		offerLink = document.createElement('a')
-
-		offerLink.innerHTML = record._source.title
-		offerLink.href = 'https://www.gchange.fr/#/app/market/view/' + record._id + '/'
-
-		offerLi.append(offerLink)
-		shippableElt.append(offerLi)
-	}
-}
-
 
 async function fetchImmaterial (n) {
 
@@ -94,6 +79,8 @@ async function fetchImmaterial (n) {
 			  'title'
 			, 'description'
 			, 'id'
+			, 'picturesCount'
+			, 'pictures'
 		]
 		, query: {
 			nested: {
@@ -137,7 +124,7 @@ async function fetchImmaterial (n) {
 	if (r.ok === true) {
 
 		var obj = r.json()
-		storeAtFreds(obj)
+		// storeAtFreds(obj)
 		return obj
 	}
 
@@ -229,9 +216,9 @@ function storeAtFreds (json) {
 	// JSON.stringify(json)
 }
 
-function displayImmaterial (records) {
+function displayShippable (records) {
 
-	let shippableElt = document.getElementById('immaterial');
+	let offersElt = document.getElementById('shippable-offers');
 
 	for (record of records) {
 
@@ -239,15 +226,69 @@ function displayImmaterial (records) {
 
 		offerLink = document.createElement('a')
 
-		offerLink.innerHTML = record._source.title
+		offerSpan = document.createElement('span')
+
+		offerImg = document.createElement('img')
+
+		if (record._source.picturesCount > 0) {
+			
+			offerImg.src = 'data:' + (record._source.pictures[0].file._content_type) + ';base64,' + (record._source.pictures[0].file._content)
+		
+		} else {
+
+			offerImg.src = 'themes/' + gameId + '/default-shippable.256.png'
+		}
+
+		offerImg.alt = record._source.title
+		offerImg.title = record._source.title
+
+		// offerLink.innerHTML = record._source.title
 		offerLink.href = 'https://www.gchange.fr/#/app/market/view/' + record._id + '/'
 
+		offerSpan.append(offerImg)
+		offerLink.append(offerSpan)
 		offerLi.append(offerLink)
-		shippableElt.append(offerLi)
+		offersElt.append(offerLi)
 	}
 }
 
-fetchImmaterial(30)
+function displayImmaterial (records) {
+
+	let offersElt = document.getElementById('immaterial-offers');
+
+	for (record of records) {
+
+		offerLi = document.createElement('li')
+
+		offerLink = document.createElement('a')
+
+		offerSpan = document.createElement('span')
+
+		offerImg = document.createElement('img')
+
+		if (record._source.picturesCount > 0) {
+			
+			offerImg.src = 'data:' + (record._source.pictures[0].file._content_type) + ';base64,' + (record._source.pictures[0].file._content)
+		
+		} else {
+
+			offerImg.src = 'themes/' + gameId + '/default-immaterial.256.png'
+		}
+
+		offerImg.alt = record._source.title
+		offerImg.title = record._source.title
+
+		// offerLink.innerHTML = record._source.title
+		offerLink.href = 'https://www.gchange.fr/#/app/market/view/' + record._id + '/'
+
+		offerSpan.append(offerImg)
+		offerLink.append(offerSpan)
+		offerLi.append(offerLink)
+		offersElt.append(offerLi)
+	}
+}
+
+fetchImmaterial(18)
 	.then(records => {
 		
 		displayImmaterial(records.hits.hits)
@@ -259,7 +300,7 @@ fetchImmaterial(30)
 			console.error(error)
 	})
 
-fetchShippable(30)
+fetchShippable(18)
 	.then(records => {
 		
 		displayShippable(records.hits.hits)

login.php

@@ -11,13 +11,12 @@ $boris = '25zB1gSC7Qhwnx463cuDLDCKLRVieLAgFiPbYq6jVHG9';
 $playerG1Id = null;
 
 if (isset($_POST['salt'], $_POST['pepper'])) {
-
-	$fred = new Fred();
+	
 	$keygen = new Keygen();
 
 	try {
 
-		$playerG1Id = $fred->donneMoiSaPutaindeG1Pub($_POST['salt'], $_POST['pepper']);
+		$playerG1Id = $keygen->getG1Pub($_POST['salt'], $_POST['pepper']);
 		$keygen->generatePubsec($_POST['salt'], $_POST['pepper']);
 
 	} catch (Exception $errMsg) {

messenger.php

@@ -7,6 +7,8 @@ require_once('lib/Gchange.class.php');
 require_once('lib/Jaklis.class.php');
 require_once('lib/ErrorsHandler.class.php');
 
+$javascripts['header'][] = 'lib/js/messenger.js';
+
 $gchange = new Gchange();
 $messenger = new Messenger($gchange);
 $fred = new Fred();
@@ -153,7 +155,9 @@ if (isset($_GET['penpal'])) {
 
 		<input type="hidden" name="title" value="'. htmlspecialchars($displayedConv->getConvTitle()) .'" />
 
-		<input type="submit" value="'. 'Envoyer' .'" />
+		<p class="submit-button-wrapper">
+			<input type="submit" value="'. 'Envoyer' .'" />
+		</p>
 	</form>
 	';
 }

minelife

@@ -0,0 +1 @@
+Subproject commit 1621fbcbc0525eb5b3c6ef80525d66c2e388dd68

themes/spationaute/css/dashboard.deco.css

@@ -41,4 +41,16 @@
 
 	border-style: outset;
 	border-color: red;
+}
+
+#dashboard-minelife {
+
+	background-image: url('../img/dashboard-minelife.png');
+	background-size: cover;
+}
+
+#dashboard-tiddlywiki {
+
+	background-image: url('../img/dashboard-tiddlywiki.png');
+	background-size: cover;
 }

themes/spationaute/css/dashboard.layout.css

@@ -1,7 +1,15 @@
+body#home header {
+
+	font-size: 2rem;
+	text-align: center;
+	margin-top: 2rem;
+	margin-bottom: 3rem;
+}
+
 body#home nav {
 
 	display: flex;
-	align-items: center;
+	align-items: flex-start;
 	height: 100vh;
 }
 
@@ -13,6 +21,14 @@ body#home nav ul {
 	padding: 0;
 	display: flex;
 	justify-content: space-evenly;
+	flex-wrap: wrap;
+}
+
+body#home nav ul > * {
+
+	margin-bottom: 3rem;
+	margin-left: 5vw;
+	margin-right: 5vw;
 }
 
 #dashboard-map {
@@ -22,17 +38,21 @@ body#home nav ul {
 
 #dashboard-map a span, 
 #dashboard-messenger a span, 
-#dashboard-farfetched a span {
+#dashboard-farfetched a span, 
+#dashboard-minelife a span , 
+#dashboard-tiddlywiki a span {
 
 	display: none;
 }
 
 #dashboard-map a, 
 #dashboard-messenger a, 
-#dashboard-farfetched a {
+#dashboard-farfetched a, 
+#dashboard-minelife a , 
+#dashboard-tiddlywiki a {
 
-	width:  25vw;
-	height:  25vw;
+	width:  15vw;
+	height:  15vw;
 	display: block;
 
 }

themes/spationaute/css/deco.css

@@ -341,6 +341,10 @@ body#sonar {
 	color: hsl(132.2, 59.8%, 75.2%);
 }
 
+#messenger-page #conversations-list {
+
+	background-color: hsl(0, 27.8%, 12.1%);
+}
 
 #messenger-page #conversations-list .conversation time {
 
@@ -368,4 +372,21 @@ body#sonar {
 #messenger-page #conversations-list .conversation:hover {
 
 	background-color: hsl(0, 27.8%, 24.2%);
-}
+}
+
+#messenger-page #conversation form, 
+#messenger-page #conversation textarea {
+
+	background-color: hsl(0, 50.8%, 95.1%);
+}
+
+#messenger-page #conversation textarea, 
+#messenger-page #conversation .submit-button-wrapper input {
+
+	font-size: 1.5rem;
+}
+
+#messenger-page #conversation .submit-button-wrapper input {
+
+	background-color: transparent;
+}

themes/spationaute/css/farfetched.layout.css

@@ -0,0 +1,75 @@
+body#farfetched main  {
+
+	display: flex;
+	justify-content: space-evenly;
+	margin-top: 1.5rem;
+}
+
+
+body#farfetched main > section h2 {
+
+	text-align: center;
+	background-color: white;
+	color: black;
+	margin-top: 0;
+	padding-top: 1rem;
+	padding-bottom: 1rem;
+}
+body#farfetched main > section {
+
+	width: 48%;
+	/*overflow: hidden;*/
+	border: 0.125rem;
+
+	border-style: solid;
+	border-color: white;
+}
+
+body#farfetched main > section ul {
+
+	list-style: none;
+	margin:  0;
+	padding: 0;
+}
+
+body#farfetched main > section ul li {
+
+	margin:  0;
+	padding: 0;
+}
+
+body#farfetched main > section .offers-list {
+
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+}
+
+
+
+body#farfetched main > section .offers-list > * {
+
+	margin: 0.5rem;
+
+}
+
+body#farfetched main > section .offers-list a {
+
+	display: block;
+	width: 5rem;
+	height:  5rem;
+
+	overflow: hidden;
+}
+
+body#farfetched main > section .offers-list a span {
+
+	display: block;
+	
+	overflow: visible;
+}
+
+body#farfetched main > section .offers-list a span img {
+
+	width: 100%;
+}

themes/spationaute/css/layout.css

@@ -222,16 +222,22 @@ main {
 
 
 
+
+
+#messenger-page > footer {
+	display: none;
+}
 
 #messenger-page main {
 
   display: flex;
+  height: 100vh;
 }
 
 #messenger-page #conversations-list {
 
   width: 33.333vw;
-  height:  100vh;
+  height:  100%;
   overflow-y: auto;
 }
 
@@ -286,6 +292,8 @@ main {
 	position:  absolute;
 	top: 0;
 	right: 0;
+	padding-right: 0.5rem;
+	padding-top: 0.5rem;
 }
 
 
@@ -293,6 +301,8 @@ main {
 
 #messenger-page #conversation {
 
+	height: 100vh;
+	overflow-y: auto;
   width: 66.666vw;
 }
 
@@ -345,6 +355,61 @@ main {
 	text-align: right;
 }
 
+#messenger-page #conversation {
+
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+#messenger-page #conversation #msgList {
+
+	overflow-y: auto;
+	flex-grow: 1;
+}
+
+#messenger-page #conversation form {
+
+	align-self: flex-end;
+
+	display: flex;
+	width: 100%;
+	padding-top: 1rem;
+	padding-bottom: 1rem;
+}
+
+#messenger-page #conversation label {
+
+	display: none;
+}
+
+#messenger-page #conversation textarea {
+
+	flex-basis: 100%;
+	flex-grow: 1;
+	margin-left: 1rem;
+	margin-right: 1rem;
+	border: 0;
+}
+
+#messenger-page #conversation textarea:focus {
+
+	outline: 0;
+}
+
+#messenger-page #conversation .submit-button-wrapper {
+
+	margin-left: 1rem;
+	margin-right: 1rem;
+	display: flex;
+	align-items: center;
+}
+
+#messenger-page #conversation .submit-button-wrapper input {
+
+	border: 0;
+}
+
 
 
 

themes/spationaute/js/messenger/messenger.js

@@ -0,0 +1,7 @@
+
+/*
+
+var form = document.querySelector('#messenger-page #conversation > form');
+
+form.addEventListener
+*/