La Bureautique est maîtresse de l'univers

2022-10-22 18:35:53 +02:00 · 2022-10-22 18:35:53 +02:00 · 08d55f366b
parent 833b9147c1
commit 08d55f366b
16 changed files with 841 additions and 70 deletions
--- a/assets/img/avatars/128/mouse.png
+++ b/assets/img/avatars/128/mouse.png
--- a/assets/img/avatars/32/asterix.png
+++ b/assets/img/avatars/32/asterix.png
--- a/assets/img/avatars/32/mouse.png
+++ b/assets/img/avatars/32/mouse.png
--- a/config.php
+++ b/config.php
@ -8,7 +8,7 @@ error_reporting(E_ALL);

 session_start();

-define('DEFAULT_RADIUS', 50);
+define('DEFAULT_RADIUS', 10);

 define('TAILLE_SPRITE', 32);
 define('DEMI_TAILLE_SPRITE', (TAILLE_SPRITE/2));
@ -44,13 +44,16 @@ class Player {

 $players = [

+	new Player('2iqUybqeYhX2MvNVZsKYQ59FNAm6wAukpUsfJKFsC4Aw', 'Joe (Astérix)'), 
+	new Player('FR1UMmvimmxEBeghy1Fsizqen3Wse5hYUZU9VnHFPtN8', 'Eva Zykejtepousse'), 
+	new Player('QP1VkfaFUMdHZmHgPMi7q5wJJHaQhZcEqs5A86NigKr', 'Toto du 56'), 
+	new Player('7jikBcC2Cd89SGGDuMXNPqyBXn2FeBFY1XnKAQgyAxeA', 'Astronaut astro'), 
 	new Player('2L8vaYixCf97DMT8SistvQFeBj7vb6RQL7tvwyiv1XVH', 'Fred'),
 	new Player('25zB1gSC7Qhwnx463cuDLDCKLRVieLAgFiPbYq6jVHG9', 'Boris'),
 	new Player('u3rNW7CzqDC5V4L3FGVbSPsrBd78y8pkRACKHtBtCPx', 'Syoul'), 
 	new Player('8PTThXiUSwwuPoqQWw3tuAn4MpvzQzpKhs6LMuiozS7Z', 'kimamila')
 ];

-
 if (!isset($_SESSION['radius'])) {

 	$_SESSION['radius'] = DEFAULT_RADIUS;
@ -70,16 +73,20 @@ $games = [
 	'spationaute' => [

 		'title' => 'SpaceĞ1',
-		'description' => 'Les extraterrestres viennent terraformer ta planète'
+		'description' => 'Les extraterrestres viennent terraformer ta planète', 
+		'default_avatar' => 'assets/img/avatars/32/et-in-flying-saucer.png'
 	],

 	'magie' => [

 		'title' => 'Ğ1Quest',
-		'description' => 'Ğarry Potier à l\'école des sourciers.'
+		'description' => 'Ğarry Potier à l\'école des sourciers.', 
+		'default_avatar' => 'assets/img/avatars/32/wizard.png'
 	]
 ];

+$radiuses = [5, 10, 20, 50, 100];
+
 define('DEFAULT_GAME', 'spationaute');

 if (!isset($_SESSION['gameId'])) {
--- a/geoloc.php
+++ b/geoloc.php
@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<title>Geoloc</title>
-	<meta name="viewport" content="width=device-width, initial-scale=1" />
-<body>
-
-
-<button onclick="getLocation()">Me géolocaliser</button>
-
-<p id="result">
-</p>
-
-<script>
-	
-	var result = document.getElementById('result');
-
-	function getLocation() {
-
-		if (navigator.geolocation) {
-			navigator.geolocation.getCurrentPosition(showPosition);
-		} else {
-			result.innerHTML = "Geolocation is not supported by this browser.";
-		}
-	}
-
-	function showPosition(position) {
-
-		result.innerHTML = "Latitude: " + position.coords.latitude +
-		"<br>Longitude: " + position.coords.longitude;
-	}
-	
-</script> 
-</body>
-</html>
--- a/lib/Conversation.class.php
+++ b/lib/Conversation.class.php
@ -0,0 +1,91 @@
+<?php
+
+require_once('Message.class.php');
+
+function compareMsgDate ($msg1, $msg2) {
+
+	return ($msg1->getDate() < $msg2->getDate()) ? false : true;
+}
+
+class Conversation {
+
+	private $messages = [];
+
+	private $firstMessage;
+
+	private $lastMessage;
+
+	private $convTitle;
+
+	private $penpalPubkey;
+
+
+
+	public function __construct () {
+
+	}
+
+	public function addMessage ($msg) {
+
+		$this->messages[] = $msg;
+
+		if (!isset($this->lastMessage, $this->firstMessage)) {
+
+			$this->lastMessage = $msg;
+			$this->firstMessage = $msg;
+
+		} else {
+
+			if ($msg->getDate() > $this->lastMessage->getDate()) {
+
+				$this->lastMessage = $msg;
+			}
+
+			if ($msg->getDate() < $this->firstMessage->getDate()) {
+
+				$this->firstMessage = $msg;
+			}
+		}
+	}
+
+	public function sortMessages () {
+
+		uasort($this->messages, 'compareMsgDate');
+
+	}
+
+	public function getConvTitle () {
+
+		if (!isset($this->convTitle)) {
+			
+			$this->convTitle = $this->getFirstMessage()->getTitle();
+		}
+
+		return $this->convTitle; 
+	}
+
+	public function getPenpalPubkey () {
+
+		if (!isset($this->penpalPubkey)) {
+
+			$this->penpalPubkey = $this->getFirstMessage()->getPenpalPubkey();
+		}
+
+		return $this->penpalPubkey; 
+	}
+
+	public function getMessages () {
+
+		return $this->messages;
+	}
+
+	public function getFirstMessage () {
+
+		return $this->firstMessage;
+	}
+
+	public function getLastMessage () {
+
+		return $this->lastMessage;
+	}
+}
--- a/lib/Fred.class.php
+++ b/lib/Fred.class.php
@ -40,28 +40,71 @@ class Fred {
 		return $ipnsKey;
 	}

-	public function donneMoiSesPutainDeMessagesGchange ($prenomNom, $nomDuChienSuivieDeLaDateDeNaissanceDeJohnnyHallyday, $gchangeId) {
+	public function donneMoiSesPutainDeMessagesGchange ($prenomNom, $nomDuChienSuivieDeLaDateDeNaissanceDeJohnnyHallyday, $gchangeName) {


 		$salt = $prenomNom;
 		$pepper = $nomDuChienSuivieDeLaDateDeNaissanceDeJohnnyHallyday;

-		$query = 'salt='. $salt .'&pepper='. $pepper . '&messaging=' . $gchangeId;
+		$query = 'salt='. $salt .'&pepper='. $pepper . '&messaging=' . $gchangeName;

 		$url = $this->gatewayProtocol . '://'. $this->gatewayDomain .':' . $this->gatewayPort . '/?' . $query;

-		echo '<pre>'; var_dump(htmlspecialchars($url)); echo '</pre>';
+		// echo '<pre>'; var_dump(htmlspecialchars($url)); echo '</pre>';

 		$page1 = file_get_contents($url) 
 		         or die('<p>On a fait du sale.</p>');

-		echo '<pre>'; var_dump(htmlspecialchars($page1)); echo '</pre>';
+		// echo '<pre>'; var_dump(htmlspecialchars($page1)); echo '</pre>';

 		preg_match("`url='([^']+)'`isU", $page1, $matches);

-		$url = $matches[0];
+		$url = $matches[1];
 		
-		echo '<pre>'; var_dump($url); echo '</pre>';
+		// echo '<pre>'; var_dump($url); echo '</pre>';
+
+		$page2 = '';
+
+		while (empty($page2)) {
+
+			sleep($this->gatewayDelay);
+			$page2 = @file_get_contents($url);
+		}
+		
+		// echo '<pre>'; var_dump(htmlspecialchars($page2)); echo '</pre>';
+
+		$json = $page2;
+		
+		return json_decode($json);
+
+	}
+	public function donneMoiSaPutaindeG1Pub ($prenomNom, $nomDuChienSuivieDeLaDateDeNaissanceDeJohnnyHallyday) {
+
+
+		$salt = $prenomNom;
+		$pepper = $nomDuChienSuivieDeLaDateDeNaissanceDeJohnnyHallyday;
+
+		$query = 'salt='. $salt .'&pepper='. $pepper . '&g1pub=on';
+
+		$url = $this->gatewayProtocol . '://'. $this->gatewayDomain .':' . $this->gatewayPort . '/?' . $query;
+
+		// echo '<pre>'; var_dump(htmlspecialchars($url)); echo '</pre>';
+
+		$page1 = file_get_contents($url) 
+		         or die('<p>On a fait du sale.</p>');
+
+		// die('<pre>' . htmlspecialchars($page1) . '</pre>');
+
+		preg_match("`url='([^']+)'`isU", $page1, $matches);
+
+		// die(
+		// 	'<pre>' . htmlspecialchars($page1) . '</pre>' . 
+		// 	'<pre>' . print_r($matches, true) . '</pre>'
+		// );
+
+		$url = $matches[1];
+
+		// die('<pre>' . var_dump($url, true) . '</pre>');

 		$page2 = '';

@ -71,14 +114,12 @@ class Fred {

 			$page2 = @file_get_contents($url);
 		}
-		
-		echo '<pre>'; var_dump($page2); echo '</pre>';

-		die();
+		preg_match("`url='.*/user/([^']+)/'`isU", $page2, $matches);

-		$json = $page2;
+		$gchangeId = $matches[1];

-		return $page1;
+		return $gchangeId;

 	}
 }
--- a/lib/Gchange.class.php
+++ b/lib/Gchange.class.php
@ -1,6 +1,7 @@
 <?php

 require_once('DAO.class.php');
+require_once('GchangeUser.class.php');

 class Gchange {
 	
@ -118,19 +119,19 @@ class Gchange {

 		$result = json_decode($json);
 		
-		return $result;
+		return new GchangeUser($result);
 	}

 	public function getPlacesNearUser ($user, $radius) {

 		$placesCacheDir = 'places-nearby/user/';
-		$placesCacheFile = $user->_id . '.json';
+		$placesCacheFile = $user->getUserGchangeId() . '.json';

 		$json = $this->getJsonFromCache($placesCacheDir, $placesCacheFile, $this->cacheLongevity['placesNearby']);

 		if (empty($json)) {
 			
-			$json = $this->getNearbyPlacesJson($user->_source->geoPoint->lat, $user->_source->geoPoint->lon, RADIUS);
+			$json = $this->getNearbyPlacesJson($user->getLat(), $user->getLon(), $radius);
 			
 			$this->cacheJson($placesCacheDir, $placesCacheFile, $json);

@ -142,7 +143,7 @@ class Gchange {
 	}

 	public function getNearbyPlaces ($lat, $lon, $maxDistance, $minDistance = NULL) {
-
+		
 		$json = $this->getNearbyPlacesJson($lat, $lon, $maxDistance, $minDistance);

 		$result = json_decode($json);
--- a/lib/GchangeUser.class.php
+++ b/lib/GchangeUser.class.php
@ -0,0 +1,60 @@
+<?php
+
+class GchangeUser {
+
+	private $userGchangeId;
+
+	private $userName;
+
+	private $lat = null;
+
+	private $lon = null;
+
+	private $avatarImgSrc = null;
+
+
+	public function __construct ($gchangeObject) {
+
+		$this->userGchangeId = $gchangeObject->_id;
+
+		$this->userName = $gchangeObject->_source->title;
+
+		if (isset($gchangeObject->_source->geoPoint->lat, $gchangeObject->_source->geoPoint->lon)) {
+
+			$this->lat = $gchangeObject->_source->geoPoint->lat;
+			$this->lon = $gchangeObject->_source->geoPoint->lon;
+		}
+
+		if (isset($gchangeObject->_source->avatar->_content) and 
+			!empty($gchangeObject->_source->avatar->_content)) {
+
+
+			$this->avatarImgSrc = 'data:'. $gchangeObject->_source->avatar->_content_type .';base64,' . $gchangeObject->_source->avatar->_content;
+		}
+	}
+
+	public function getUserGchangeId () {
+
+		return $this->userGchangeId;
+	}
+
+	public function getUserName () {
+
+		return $this->userName;
+	}
+
+	public function getLat () {
+
+		return $this->lat;
+	}
+
+	public function getLon () {
+
+		return $this->lon;
+	}
+
+	public function getAvatarImgSrc () {
+
+		return $this->avatarImgSrc;
+	}
+}
--- a/lib/Message.class.php
+++ b/lib/Message.class.php
@ -0,0 +1,71 @@
+<?php
+
+class Message {
+	
+	private $direction;
+
+	private $title;
+
+	private $date;
+
+	private $contents;
+
+	private $gchangeId;
+
+	private $penpalPubkey;
+
+
+
+	public function __construct ($jaklisObject, $direction) {
+
+		$this->direction = $direction;
+
+		$this->title = $jaklisObject->title;
+
+		$this->date = $jaklisObject->date;
+
+		$contents = preg_replace("`(?<!\S)>[^\n]*`", '', $jaklisObject->content);
+		$contents = preg_replace("`(\n\s?){2,}`", '', $contents);
+		$contents = preg_replace("`^(\n\s?)+`", '', $contents);
+		$this->contents = $contents;
+
+		$this->gchangeId = $jaklisObject->id;
+
+		$this->penpalPubkey = $jaklisObject->pubkey;
+	}
+
+	public function getDirection () {
+
+		return $this->direction;
+	}
+
+	public function getMessage () {
+
+		return $this->msg;
+	}
+
+	public function getTitle () {
+
+		return $this->title;
+	}
+
+	public function getDate () {
+
+		return $this->date;
+	}
+
+	public function getPenpalPubkey () {
+
+		return $this->penpalPubkey;
+	}
+
+	public function getGchangeId() {
+
+		return $this->gchangeId;
+	}
+
+	public function getContents() {
+
+		return $this->contents;
+	}
+}
--- a/lib/Messenger.class.php
+++ b/lib/Messenger.class.php
@ -0,0 +1,106 @@
+<?php
+
+require_once('Conversation.class.php');
+require_once('Message.class.php');
+
+class Messenger {
+	
+	private $gchange;
+	
+	private $users = [];
+
+	private $conversations = [];
+
+	private $latestMessage;
+
+	public function __construct (&$gchange) {
+
+		$this->gchange = $gchange;
+	}
+
+	public function addMessages ($msgIn, $msgOut) {
+
+		foreach ($msgIn as $m) {
+
+			if (!isset($this->conversations[$m->pubkey])) {
+				
+				$this->conversations[$m->pubkey] = new Conversation();
+			}
+
+			$msg = new Message($m, 'in');
+
+			$this->conversations[$msg->getPenpalPubkey()]->addMessage($msg);
+
+			$this->feedUserBase($msg->getPenpalPubkey());
+		}
+
+		foreach ($msgOut as $m) {
+			
+			if (!isset($this->conversations[$m->pubkey])) {
+				
+				$this->conversations[$m->pubkey] = new Conversation();
+			}
+
+			$msg = new Message($m, 'out');
+
+			$this->conversations[$m->pubkey]->addMessage($msg);
+
+			$this->feedUserBase($msg->getPenpalPubkey());
+		}
+
+		foreach ($this->conversations as $conv) {
+
+			$conv->sortMessages();
+
+			$this->checkIfIsLatestMessage($conv->getLastMessage());
+		}
+	}
+
+	public function checkIfIsLatestMessage ($msg) {
+
+		if (!isset($this->latestMessage)) {
+
+			$this->latestMessage = $msg;
+		
+		} else {
+
+			if ($msg->getDate() > $this->getLatestMessage()->getDate()) {
+
+				$this->latestMessage = $msg;
+			}
+
+		}
+	}
+
+	public function getLatestMessage () {
+
+		return $this->latestMessage;
+	}
+
+	public function feedUserBase ($penpalPubkey) {
+
+		if (!isset($users[$penpalPubkey])) {
+
+			$this->users[$penpalPubkey] = $this->gchange->getUser($penpalPubkey);
+		}
+	}
+	public function getConversation ($penpalGchangeId) {
+
+		return $this->conversations[$penpalGchangeId];
+	}
+
+	public function getConversations () {
+
+		return $this->conversations;
+	}
+
+	public function getUser ($pubkey) {
+
+		return $this->users[$pubkey];
+	}
+
+	public function getLastConversation () {
+
+		return array_reverse($this->conversations)[0];
+	}
+}
--- a/login.php
+++ b/login.php
@ -1,17 +1,25 @@
 <?php
 require_once('config.php');
 require_once('lib/Gchange.class.php');
+require_once('lib/Fred.class.php');


-if (isset($_POST['player'])) {
+if (isset($_POST['salt'], $_POST['pepper'])) {

-	$_SESSION['player_pubkey'] = $_POST['player'];
+	$fred = new Fred();
+	$playerG1Id = $fred->donneMoiSaPutaindeG1Pub($_POST['salt'], $_POST['pepper']);
+
+	$_SESSION['player_pubkey'] = $playerG1Id;
 	
 	$gchange  = new Gchange();
 	$user = $gchange->getUser($_SESSION['player_pubkey']);

 	$_SESSION['player_lat'] = $user->_source->geoPoint->lat;
 	$_SESSION['player_lon'] = $user->_source->geoPoint->lon;
+	$_SESSION['radius'] = DEFAULT_RADIUS;
+
+	$_SESSION['salt'] = $_POST['salt'];
+	$_SESSION['pepper'] = $_POST['pepper'];

 	header('Location:map.php');

@ -22,7 +30,9 @@ if (isset($_POST['player'])) {
 	include_once('header.php');

 	echo '
-	<form method="post" action="">
+	<form method="post" action="">';
+
+		/*
 		
 		<p>
 			<label>Joueur&nbsp;: 
@ -38,7 +48,9 @@ if (isset($_POST['player'])) {
 				</select>
 			</label>
 		</p>
+		*/

+		echo '
 		<p>
 			<label>
 				Sel : 
--- a/map.php
+++ b/map.php
@ -9,6 +9,11 @@ if (!isset($_SESSION['player_pubkey'])) {
 	header('Location: index.php');
 }

+if (isset($_GET['r']) and in_array($_GET['r'], $radiuses)) {
+
+	$_SESSION['radius'] = $_GET['r'];
+}
+
 $bodyIds = 'sonar';
 include_once('header.php');

@ -18,8 +23,10 @@ $gchange  = new Gchange();

 $player = $gchange->getUser($_SESSION['player_pubkey']);

-$origLat = $player->_source->geoPoint->lat;
-$origLon = $player->_source->geoPoint->lon;
+// die('<pre>' . print_r($player, true) . '</pre>');
+
+$origLat = $player->getLat();
+$origLon = $player->getLon();

 $origLoc = new Location();
 $origLoc->setPosition($origLat, $origLon);
@ -33,6 +40,20 @@ echo '
 	<a href=".">'. $origLat . ' , ' . $origLon .'</a>
 </aside>

+<nav id="zoom">
+	';
+
+	foreach ($radiuses as $r) {
+
+		echo '
+		<a href="?r='. $r .'">
+			'. $r . 'km
+		</a>';
+		
+	}
+	echo '
+</nav>
+
 <div
     id="map"
     data-orig-lat="'. $origLat .'" 
@ -43,18 +64,13 @@ echo '

 	<section class="player" style="left: calc(50% - '. DEMI_TAILLE_SPRITE . 'px); top: calc(50% - '. DEMI_TAILLE_SPRITE . 'px);">';

-		if (isset($player->_source->avatar->_content) and !empty($player->_source->avatar->_content)) {
-
-			$src = 'data:'. $player->_source->avatar->_content_type .';base64,' . $player->_source->avatar->_content;
-
-		} else {
-
-			$src = 'assets/img/avatars/32/et-in-flying-saucer.png.png';
-		}
+		$avatarSrc = $player->getAvatarImgSrc();
+		$src = !empty($avatarSrc) ? $avatarSrc : $games[$_SESSION['gameId']]['default_avatar'];

 		echo '
 		<img src="'. $src . '" 
-		     alt="'. $player->_source->title .'" 
+		     alt="'. $player->getUserName() .'" 
+		     title="'. $player->getUserName() .'" 
 		     width="'. TAILLE_SPRITE .'" 
 		     height="'. TAILLE_SPRITE .'" />
 	</section>
--- a/messenger.php
+++ b/messenger.php
@ -0,0 +1,122 @@
+<?php
+
+require_once('config.php');
+require_once('lib/Fred.class.php');
+require_once('lib/Messenger.class.php');
+require_once('lib/Gchange.class.php');
+
+$gchange = new Gchange();
+$messenger = new Messenger($gchange);
+$fred = new Fred();
+list($msgIn, $msgOut) = $fred->donneMoiSesPutainDeMessagesGchange($_SESSION['salt'], $_SESSION['pepper'], 'coucou');
+
+
+// echo '<pre>'; var_dump($msgIn); echo '</pre>';
+// echo '<pre>'; var_dump($msgOut); echo '</pre>';
+
+$messenger->addMessages($msgIn, $msgOut);
+
+// echo '<pre>'; var_dump($messenger->getConversations()); echo '</pre>';
+
+/*
+if (!isset($_GET['penpal'])) {
+
+	header('Location: messenger.php?paypal=' . $messenger->getLatestMessage()->getPenpalPubkey());
+}
+*/
+$bodyIds = 'messenger-page';
+
+include_once('header.php');
+
+echo '
+
+<ul id="conversations-list">
+';
+foreach ($messenger->getConversations() as $conv) {
+
+	// echo '<pre>'; var_dump($conv->getLastMessage()); echo '</pre>';
+
+	$lastMsg = $conv->getLastMessage();
+
+	echo '
+	<li class="conversation">
+		<p class="conv-link">
+			<a href="?penpal='. $conv->getPenpalPubkey() . '">
+				<span>'. $messenger->getUser($conv->getPenpalPubkey())->getUserName() . '</span>
+			</a>
+		</p>';
+
+		$penpal = $messenger->getUser($conv->getPenpalPubkey());
+
+		echo '
+		<blockquote>
+			<img class="avatar" 
+			     height="64"
+			     width="64" 
+			     src="'. $penpal->getAvatarImgSrc() .'" />
+
+			<cite>
+				'. $penpal->getUserName() . '
+			</cite>
+
+			<time>
+				'. date('d-m-Y à h:m', $lastMsg->getDate()) . '
+			</time>
+			
+			<p class="contents-preview">
+			';
+				if ($lastMsg->getDirection() == 'out') {
+					echo 'Moi : ';
+				}
+
+				echo $lastMsg->getContents() .'
+
+			</p>
+		</blockquote>
+
+	</li>
+	';
+
+}
+echo '
+</ul>
+
+
+<section id="conversation">
+';
+
+if (isset($_GET['penpal'])) {
+
+	$displayedConv = $messenger->getConversation($_GET['penpal']);
+
+	echo '
+	<h2 class="penpal">
+		'. $messenger->getUser($displayedConv->getPenpalPubkey())->getUserName() . '
+	</h2>
+
+	<ul id="msgList">';
+
+	foreach ($displayedConv->getMessages() as $msg) {
+		
+		echo '
+		<li class="message '. $msg->getDirection() .'">
+			
+			<p class="content">
+				'. nl2br($msg->getContents()) . '
+			</p>
+
+			<p class="date">
+				'. date('d-m-Y à h:m', $msg->getDate()) . '
+			</p>
+		</li>
+		';
+
+	}
+	echo '
+	</ul>';
+}
+
+echo '
+</section>';
+
+include_once('footer.php');
--- a/themes/spationaute/deco.css
+++ b/themes/spationaute/deco.css
@ -52,6 +52,27 @@ body#sonar {

 #map {

+	border-style:  solid;
+	border-color:  hsl(132.2, 59.8%, 74.2%);
+}
+
+
+#map[data-radius="100"] {
+
+	background: 
+		linear-gradient(  0deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%),
+		linear-gradient( 90deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%), 
+		linear-gradient( 45deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%), 
+		linear-gradient(135deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%), 
+		repeating-radial-gradient(transparent 0, transparent 5%, hsl(132.2, 59.8%, 74.2%) 5%, hsl(132.2, 59.8%, 74.2%) 5.4%), 
+		/*radial-gradient(circle at center, hsl(132.2, 59.8%, 37.1%) 0%, hsl(132.2, 59.8%, 74.2%) 50%, hsl(132.2, 59.8%, 37.1%) 100%), */
+		hsla(132.2, 59.8%, 37.1%, 0.8);
+
+}
+
+
+#map[data-radius="50"] {
+
 	background: 
 		linear-gradient(  0deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%),
 		linear-gradient( 90deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%), 
@ -61,11 +82,52 @@ body#sonar {
 		/*radial-gradient(circle at center, hsl(132.2, 59.8%, 37.1%) 0%, hsl(132.2, 59.8%, 74.2%) 50%, hsl(132.2, 59.8%, 37.1%) 100%), */
 		hsla(132.2, 59.8%, 37.1%, 0.8);

-	border-style:  solid;
-	border-color:  hsl(132.2, 59.8%, 74.2%);
+}
+
+
+#map[data-radius="20"] {
+
+	background: 
+		linear-gradient(  0deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%),
+		linear-gradient( 90deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%), 
+		linear-gradient( 45deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%), 
+		linear-gradient(135deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%), 
+		repeating-radial-gradient(transparent 0, transparent 12.5%, hsl(132.2, 59.8%, 74.2%) 12.5%, hsl(132.2, 59.8%, 74.2%) 12.9%), 
+		/*radial-gradient(circle at center, hsl(132.2, 59.8%, 37.1%) 0%, hsl(132.2, 59.8%, 74.2%) 50%, hsl(132.2, 59.8%, 37.1%) 100%), */
+		hsla(132.2, 59.8%, 37.1%, 0.8);

 }

+
+#map[data-radius="10"] {
+
+	background: 
+		linear-gradient(  0deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%),
+		linear-gradient( 90deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%), 
+		linear-gradient( 45deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%), 
+		linear-gradient(135deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%), 
+		repeating-radial-gradient(transparent 0, transparent 25%, hsl(132.2, 59.8%, 74.2%) 25%, hsl(132.2, 59.8%, 74.2%) 25.4%), 
+		/*radial-gradient(circle at center, hsl(132.2, 59.8%, 37.1%) 0%, hsl(132.2, 59.8%, 74.2%) 50%, hsl(132.2, 59.8%, 37.1%) 100%), */
+		hsla(132.2, 59.8%, 37.1%, 0.8);
+
+}
+
+
+#map[data-radius="5"] {
+
+	background: 
+		linear-gradient(  0deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%),
+		linear-gradient( 90deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%), 
+		linear-gradient( 45deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%), 
+		linear-gradient(135deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%), 
+		repeating-radial-gradient(transparent 0, transparent 50%, hsl(132.2, 59.8%, 74.2%) 100%, hsl(132.2, 59.8%, 74.2%) 100%), 
+		/*radial-gradient(circle at center, hsl(132.2, 59.8%, 37.1%) 0%, hsl(132.2, 59.8%, 74.2%) 50%, hsl(132.2, 59.8%, 37.1%) 100%), */
+		hsla(132.2, 59.8%, 37.1%, 0.8);
+
+}
+
+
+
 #map-deco {

 	background: 
@ -103,6 +165,11 @@ body#sonar {
 	}
 }

+#map .place img {
+	
+	border-radius:  50%;
+}
+

 #map .place, 
 #map .player {
@ -110,6 +177,17 @@ body#sonar {
 	cursor:  pointer;
 }

+#mapview #zoom {
+	
+	background-color: black;
+}
+
+#mapview #zoom a, 
+#mapview #zoom a:visited {
+	
+	color:  white;
+	text-decoration: none;
+}



@ -190,3 +268,72 @@ body#sonar {
 	color:  inherit;
 	text-decoration:  none;
 }
+
+
+
+
+
+#messenger-page {
+
+	background-color: black;
+	color:  white;
+}
+
+
+
+#messenger-page .penpal {
+
+	background: hsl(0, 100%, 50%);
+	color:  white;
+	font-weight:  bold;
+}
+
+#messenger-page #msgList .message {
+
+	color:  white;
+}
+
+#messenger-page #msgList .message.in {
+
+	background-color: hsl(132.2, 59.8%, 12.1%);
+}
+
+#messenger-page #msgList .message.out {
+
+	background-color: hsl(132.2, 59.8%, 12.1%);
+}
+
+
+#messenger-page #msgList .message .date {
+
+	color: hsl(132.2, 59.8%, 75.2%);
+}
+
+
+#messenger-page #conversations-list .conversation time {
+
+	font-weight: normal;
+	color: hsl(0, 27.8%, 82.1%);
+}
+
+#messenger-page #conversations-list .conversation cite {
+
+	font-style: normal;
+	font-weight: bold;
+}
+
+#messenger-page #conversations-list .conversation .contents-preview {
+
+	height:  1rem;
+	overflow: hidden;
+}
+
+#messenger-page #conversations-list .conversation {
+
+	background-color: hsl(0, 27.8%, 12.1%);
+}
+
+#messenger-page #conversations-list .conversation:hover {
+
+	background-color: hsl(0, 27.8%, 24.2%);
+}
--- a/themes/spationaute/layout.css
+++ b/themes/spationaute/layout.css
@ -64,6 +64,19 @@ main {
 }


+#mapview {
+
+	position: relative;
+}
+
+#mapview #zoom {
+
+	position: absolute;
+	bottom: 0;
+	right: 0;
+
+	padding:  0.5rem 1rem;
+}

 #map .place, 
 #map .player {
@ -144,3 +157,122 @@ main {
 	background: var(--panel-place-name-bg-color);
 }

+
+
+#messenger-page main {
+
+  display: flex;
+}
+
+#messenger-page #conversations-list {
+
+  width: 33.333vw;
+}
+
+#messenger-page #conversation {
+
+  width: 66.666vw;
+}
+
+#messenger-page #msgList {
+
+	overflow: hidden;
+}
+
+#messenger-page ul#msgList {
+
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+#messenger-page ul#msgList li {
+
+	margin: 0;
+	padding: 0;
+	margin-bottom: 2rem;
+	width:  50%;
+}
+
+#messenger-page .penpal {
+
+	padding: 1rem 1rem;
+	margin-top: 0;
+}
+
+#messenger-page #msgList .message.in {
+
+	float: left;
+	margin-left: 2%;
+}
+
+#messenger-page #msgList .message.out {
+
+	float: right;
+	margin-right: 2%;
+}
+
+#messenger-page #msgList .message > * {
+
+	margin-left: 1rem;
+	margin-right: 1rem;
+}
+
+#messenger-page #msgList .message .date {
+
+	text-align: right;
+}
+
+
+#messenger-page ul#conversations-list {
+
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+#messenger-page ul#conversations-list li {
+
+	margin: 0;
+	padding: 0.5rem 1rem;
+}
+
+#messenger-page #conversations-list .conversation {
+
+	position: relative;
+}
+
+#messenger-page #conversations-list .conversation .conv-link, 
+#messenger-page #conversations-list .conversation .conv-link a {
+
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+#messenger-page #conversations-list .conversation .avatar {
+
+	float:  left;
+}
+
+#messenger-page #conversations-list .conversation .conv-link a span {
+
+	display: none;
+}
+
+
+#messenger-page #conversations-list .conversation blockquote {
+
+	margin:  0;
+}
+
+
+#messenger-page #conversations-list .conversation blockquote time {
+
+	position:  absolute;
+	top: 0;
+	right: 0;
+}
+