Merge pull request #183 from nneka-nu/add-recent-boards

Show a list of recent boards on the home page

client-data/index.css

@@ -49,7 +49,8 @@ main {
 	justify-content: space-around; 
 }
 
-#description{
+#description,
+#recent-boards {
 	flex: 100%;
 }
 
@@ -117,6 +118,24 @@ input {
 	width: 75%;
 }
 
+#recent-boards.hidden {
+	display: none;
+}
+
+#recent-boards ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+#recent-boards li {
+	margin-bottom: 8px;
+}
+
+#recent-boards li:last-child {
+	margin-bottom: 0;
+}
+
 footer {
 	text-align: center;
 	flex-shrink: 0;

client-data/index.html

@@ -59,6 +59,10 @@
 				<input type="submit" value="Go">
 			</form>
 		</div>
+
+		<div id="recent-boards" class="hidden">
+			<h3>{{{translations.recent_boards}}}</h3>
+		</div>
 	</main>
 
 
@@ -71,4 +75,6 @@
 	</footer>
 </body>
 
+<script src="../js/index.js" async defer></script>
+
 </html>

client-data/js/board.js

@@ -93,6 +93,28 @@ Tools.boardName = (function () {
 //Get the board as soon as the page is loaded
 Tools.socket.emit("getboard", Tools.boardName);
 
+function saveBoardNametoLocalStorage() {
+	var boardName = Tools.boardName;
+	if (boardName.toLowerCase() === 'anonymous') return;
+	var recentBoards, key = "recent-boards";
+	try {
+		recentBoards = JSON.parse(localStorage.getItem(key));
+		if (!Array.isArray(recentBoards)) throw new Error("Invalid type");
+	} catch(e) {
+		// On localstorage or json error, reset board list
+		recentBoards = [];
+		console.log("Board history loading error", e);
+	}
+	recentBoards = recentBoards.filter(function (name) {
+		return name !== boardName;
+	});
+	recentBoards.unshift(boardName);
+	recentBoards = recentBoards.slice(0, 20);
+	localStorage.setItem(key, JSON.stringify(recentBoards));
+}
+// Refresh recent boards list on each page show
+window.addEventListener("pageshow", saveBoardNametoLocalStorage);
+
 Tools.HTML = {
 	template: new Minitpl("#tools > .tool"),
 	addShortcut: function addShortcut(key, callback) {

client-data/js/index.js

@@ -0,0 +1,25 @@
+function showRecentBoards() {
+  var parent = document.getElementById("recent-boards");
+  var ul = document.querySelector("#recent-boards ul");
+  ul && parent.removeChild(ul);
+  parent.classList.add("hidden");
+
+  var recentBoards = JSON.parse(localStorage.getItem("recent-boards")) || [];
+  if (recentBoards.length === 0) return;
+
+  var list = document.createElement("ul");
+
+  recentBoards.forEach(function(name) {
+    var listItem = document.createElement("li");
+    var link = document.createElement("a");
+    link.setAttribute("href", `/boards/${encodeURIComponent(name)}`);
+    link.textContent = name;
+    listItem.appendChild(link);
+    list.appendChild(listItem);
+  });
+
+  parent.appendChild(list);
+  parent.classList.remove("hidden");
+}
+
+window.addEventListener("pageshow", showRecentBoards);

server/translations.json

@@ -25,6 +25,7 @@
     "pencil": "Stift",
     "private_board_description": "Du kannst ein <b>privates Whiteboard</b> mit einem zufälligen Namen erstellen, welches man nur mit seinem Link öffnen kann. Benutze dies wenn du private Informationen teilen möchtest.",
     "public_board_description": " Das <b>öffentliche Whiteboard</b> kann von jedem geöffnet werden. Es ein fröhliches unorganisiertes Chaos wo du zusammen mit anonymen Fremden malen kannst. Alles dort ist vergänglich.",
+    "recent_boards": "Neueste Whiteboards",
     "rectangle": "Rechteck",
     "share_instructions": "Um mit jemanden zusammen an einem Whiteboard zu arbeiten teile einfach die jeweilige URL.",
     "size": "Größe",
@@ -64,6 +65,7 @@
     "pencil": "Pencil",
     "private_board_description": "You can create a <b>private board</b> with a random name, that will be accessible only by its link. Use this if you want to share private information.",
     "public_board_description": "The <b>public board</b> is accessible to everyone. It is a happily disorganized mess where you can meet with anonymous strangers and draw together. Everything there is ephemeral.",
+    "recent_boards": "Recent Boards",
     "rectangle": "Rectangle",
     "share_instructions": "To collaborate on a drawing in real time with someone, just send them its URL.",
     "size": "Size",
@@ -101,6 +103,7 @@
     "pencil": "Lápiz",
     "private_board_description": "Puede crear una <b>pizarra privada</b> con un nombre aleatorio, al que solo se podrá acceder mediante su enlace. Úselo si desea compartir información privada.",
     "public_board_description": "La <b>pizarra pública</b> es accesible para todos. Es un desastre felizmente desorganizado donde puedes reunirte con extraños anónimos. Todo lo que hay es efímero.",
+    "recent_boards": "Pizarras recientes",
     "rectangle": "Rectángulo",
     "share_instructions": "Para colaborar en un dibujo en tiempo real con alguien, simplemente envíele la <abbr title=\"un enlace tipo: https://wbo.ophir.dev/boards/el-codigo-de-tu-pizarra\">URL</abbr> de la pizarra que ya creaste.",
     "size": "Tamaño",
@@ -138,6 +141,7 @@
     "pencil": "Crayon",
     "private_board_description": "Vous pouvez créer un <b>tableau privé</b> dont le nom sera aléatoire. Il sera accessible uniquement à ceux avec qui vous partagerez son adresse. À utiliser lorsque vous voulez partager des informations confidentielles.",
     "public_board_description": "Le <b>tableau anonyme</b> est accessible publiquement. C'est un joyeux bazar où vous pourrez rencontrer des étrangers anonymes, et dessiner avec eux. Tout ce que vous y inscrivez est éphémère.",
+    "recent_boards": "Tableaux récents",
     "rectangle": "Rectangle",
     "share_instructions": "Pour collaborer sur un tableau avec quelqu'un, envoyez-lui simplement son URL.",
     "size": "Taille",
@@ -176,6 +180,7 @@
     "pencil": "Ceruza",
     "private_board_description": "Készíthet egy <b>saját táblát</b> véletlenszerű névvel, amely csak a linkjével lesz elérhető. Használja ezt, ha személyes adatokat szeretne megosztani.",
     "public_board_description": "A <b>nyilvános tábla</b> mindenki számára elérhető. Ez egy boldog szervezetlen rendetlenség, ahol találkozhat a névtelen ismeretlenek és dolgozhat együtt. Minden ott rövid távú.",
+    "recent_boards": "Recent Boards",
     "rectangle": "Téglalap",
     "share_instructions": "Ha valakivel valós időben szeretne együttműködni egy rajzon, küldje el neki az URL-jét.",
     "size": "Méret",
@@ -213,6 +218,7 @@
     "pencil": "Matita",
     "private_board_description": "Puoi creare una <b>lavagna privata</b> con un nome casuale, che sarà accessibile solo dal suo URL. Usalo se vuoi condividere informazioni private.",
     "public_board_description": "La <b>lavagna pubblica</b> è accessibile a tutti. È un disastro felicemente disorganizzato dove puoi incontrare sconosciuti anonimi e disegnare insieme. Tutto in questo spazio è effimero.",
+    "recent_boards": "Lavagne recenti",
     "rectangle": "Rettangolo",
     "share_instructions": "Per collaborare a un disegno in tempo reale con qualcuno, basta condividere l'<abbr title=\"un link tipo https://wbo.ophir.dev/boards/il-codice-della-tua-lavagna\">URL della lavagna</abbr>.",
     "size": "Dimensione",
@@ -251,6 +257,7 @@
     "pencil": "ペン",
     "private_board_description": "プライベートな情報を共有したいときは、ランダムな名前を持つ、<b>プライベートボード</b>を作成できます。このボードはリンクを知っている人がアクセスできます。",
     "public_board_description": "<b>公開ボード</b>は、WBOにアクセスできる人であれば誰でも参加できますが、これは一時的な用途に向いています。",
+    "recent_boards": "Recent Boards",
     "rectangle": "矩形",
     "share_instructions": "URLを送るだけで、リアルタイムな共同作業ができます。",
     "size": "サイズ",
@@ -290,6 +297,7 @@
     "pencil": "Lápis",
     "private_board_description": "Você pode criar um <b> fórum privado </b> com um nome aleatório, que será acessível apenas por seu link. Use-o se quiser compartilhar informações privadas.",
     "public_board_description": "O <b> quadro público </b> está acessível a todos. É uma bagunça felizmente desorganizada, onde você pode se encontrar com estranhos anônimos e se reunir. Tudo ali é efêmero.",
+    "recent_boards": "Recent Boards",
     "rectangle": "Retângulo",
     "share_instructions": "Para colaborar em um desenho em tempo real com alguém, basta compartilhar sua URL.",
     "size": "Tamanho",
@@ -326,6 +334,7 @@
     "pencil": "Карандаш",
     "private_board_description": "<b>Приватная доска</b> обладает тем же функционалом, что и анонимная доска. Разница в том, что приватную доску могут видеть только те пользователи, у которых на нее есть ссылка. Используйте приватную онлайн доску в рабочих целях, проводите онлайн уроки, рисуйте с детьми или друзьями. Другие пользователи не смогут удалять или менять ваши работы без вашего разрешения.",
     "public_board_description": "<b>Анонимная доска</b> позволяет рисовать вместе онлайн. Используйте этот формат для творчества и кучи разных идей. Вдохновляйтесь уже существующими рисунками, дополняйте их и создавайте совместные работы с другими посетителями. Любой пользователь может удалять уже существующие элементы и рисунки.",
+    "recent_boards": "Недавние доски",
     "rectangle": "Прямоугольник",
     "share_instructions": "Использовать платформу для совместного творчества очень просто. Достаточно поделиться ссылкой URL с теми, кто хочет с вами порисовать. Как только они получат URL они смогут к вам присоединиться.",
     "size": "Размер",
@@ -365,6 +374,7 @@
     "pencil": "Олівець",
     "private_board_description": "Ви можете створити <b>особисту дошку</b> з випадковою назвою, яка буде доступна лише за відповідним посиланням. Користуйтесь нею, якшо Вам потрібно ділитись особистою інформацією.",
     "public_board_description": "<b>Публічна дошка</b> доступна для всіх. Там панує повний безлад, де Ви можете зустріти анонімних незнайомців та малювати разом. Тут все ефемерне.",
+    "recent_boards": "Recent Boards",
     "rectangle": "Прямокутник",
     "share_instructions": "Для спільної роботи на дошці досить повідомити іншій особі адресу URL.",
     "size": "Розмір",
@@ -403,6 +413,7 @@
     "pencil": "Gạch ngang",
     "private_board_description": "Bạn có thể tạo một <b> bảng riêng </b> với một tên ngẫu nhiên, chỉ có thể truy cập được bằng liên kết của nó. Sử dụng cái này nếu bạn muốn chia sẻ thông tin cá nhân.",
     "public_board_description": "Tất cả mọi người đều có thể truy cập <b> bảng công khai </b>. Đó là một mớ hỗn độn vô tổ chức vui vẻ, nơi bạn có thể gặp gỡ những người lạ vô danh và cùng nhau vẽ. Mọi thứ ở đó là phù du.",
+    "recent_boards": "Recent Boards",
     "rectangle": "Chữ nhật",
     "share_instructions": "Để cộng tác trên một bản vẽ trong thời gian thực với ai đó, chỉ cần gửi cho họ URL của bản vẽ đó.",
     "size": "Size",
@@ -440,6 +451,7 @@
     "pencil": "铅笔",
     "private_board_description": "您可以创建一个带有随机名称的私有白板，该白板只能通过其链接访问。如果要共享私人信息，请使用此选项。",
     "public_board_description": "每个人都可以使用公共白板。这是一个令人愉快的混乱的地方，你可以会见匿名陌生人，并在一起。那里的一切都是短暂的。",
+    "recent_boards": "Recent Boards",
     "rectangle": "矩形",
     "share_instructions": "要与某人实时协作绘制图形，只需向他们发送白板的URL。",
     "size": "尺寸",