Show game number and add custom game feature

index.html

@@ -15,6 +15,7 @@
 
   <div class="container">
     <header>
+      <h1>Teblak #<span name=teblakNumber></span></h1>
       <select name="lang" id="lang">
         <option value="id">Bahasa Indonesia</option>
         <option value="jv">Basa Jawa</option>
@@ -30,6 +31,7 @@
       <div class="kbrow kb-row-1"></div>
       <div class="kbrow kb-row-2"></div>
       <div class="kbrow kb-row-3"></div>
+      <div>Custom game <input type="text" name="customGameNum"> <button type="button" name="goCustomGame">Go</button></div>
       <div class="about"><a href="https://github.com/wildtype/teblak">Source &amp; issues</a></div>
     </footer>
   </div>
@@ -47,6 +49,8 @@
   height: 100%;
   font-family: monospace;
   text-align: center;
+  margin: auto;
+  max-width: 720px;
 }
 
 header {
@@ -122,6 +126,7 @@
   text-transform: uppercase;
   color: black;
   font-size: 16px !important;
+  flex: 1;
 }
 
 button, select {
@@ -144,6 +149,30 @@
   </style>
 
   <script>
+class Pubsub {
+  static bind(event, callback) {
+    if (!window.pubSubHandler) {
+      window.pubSubHandler = {};
+    }
+
+    if (!window.pubSubHandler[event]) {
+      window.pubSubHandler[event] = [];
+    }
+
+    window.pubSubHandler[event].push(callback);
+  }
+
+  static dispatchEvent(event, data) {
+    if (
+      window.pubSubHandler &&
+      Array.isArray(window.pubSubHandler[event])
+    ) {
+      window.pubSubHandler[event].forEach((handler) => {
+        handler(data);
+      });
+    }
+  }
+}
 class Cell {
   constructor(options) {
     this.container = options.container;
@@ -329,6 +358,9 @@
 
   input(key) {
     if (this.finished) {
+      if (key == 'enter') {
+        Pubsub.dispatchEvent('restart', {});
+      }
       return;
     }
 
@@ -437,6 +469,9 @@
 const statusElement = document.querySelector('.status');
 const restartButton = document.querySelector('button[name="restart"]');
 const selectLanguage = document.querySelector('select#lang');
+const customGameNum = document.querySelector('input[name="customGameNum"]');
+const customGameButton = document.querySelector('button[name="goCustomGame"]');
+const teblakNumber = document.querySelector('span[name="teblakNumber"]');
 
 const dictionaryTemplates = document.querySelectorAll('template.dictionary');
 window.dictionaries = [];
@@ -451,9 +486,8 @@
 const lang = selectLanguage.value;
 const dictionary = window.dictionaries[lang];
 
-const chosenWord = dictionary[
-  Math.floor(Math.random() * dictionary.length)
-];
+const wordNum = Math.floor(Math.random() * dictionary.length);
+const chosenWord = dictionary[wordNum];
 
 const game = window.game = new Game({
   body: document.body,
@@ -475,18 +509,33 @@
 game.init();
 game.bindInput();
 
-restart = () => {
+window.addEventListener('load', () => {
+  showWordNum(wordNum);
+});
+
+showWordNum = (wordNum) => {
+  teblakNumber.textContent = wordNum;
+};
+
+newGame = (wordNum) => {
   const lang = selectLanguage.value;
   const chosenDictionary = window.dictionaries[lang];
 
-  const newChosenWord = chosenDictionary[
-    Math.floor(Math.random() * chosenDictionary.length)
-  ];
+  const newChosenWord = chosenDictionary[wordNum];
 
   keyboard.clear();
   game.restart(newChosenWord, chosenDictionary);
+  showWordNum(wordNum);
+};
+
+restart = () => {
+  newGame(Math.floor(Math.random() * dictionary.length));
 };
 
+customGame = (wordNum) => {
+  newGame(wordNum);
+}
+
 selectLanguage.addEventListener('change', () => {
   restart();
   selectLanguage.blur();
@@ -497,6 +546,11 @@
   restartButton.blur();
 });
 
+Pubsub.bind('restart', restart);
+customGameButton.addEventListener('click', () => {
+  customGame(customGameNum.value);
+});
+
   </script>
 </body>
 </html>

src/index.html.m4

@@ -9,6 +9,7 @@
 include(src/dictionaries.html)
   <div class="container">
     <header>
+      <h1>Teblak #<span name=teblakNumber></span></h1>
       <select name="lang" id="lang">
         <option value="id">Bahasa Indonesia</option>
         <option value="jv">Basa Jawa</option>
@@ -24,6 +25,7 @@ include(src/dictionaries.html)
       <div class="kbrow kb-row-1"></div>
       <div class="kbrow kb-row-2"></div>
       <div class="kbrow kb-row-3"></div>
+      <div>Custom game <input type="text" name="customGameNum"> <button type="button" name="goCustomGame">Go</button></div>
       <div class="about"><a href="https://github.com/wildtype/teblak">Source &amp; issues</a></div>
     </footer>
   </div>
@@ -33,6 +35,7 @@ include(src/style.css)
   </style>
 
   <script>
+include(src/js/pubsub.js)
 include(src/js/cell.js)
 include(src/js/guess.js)
 include(src/js/game.js)

src/js/game.js

@@ -27,6 +27,9 @@ class Game {
 
   input(key) {
     if (this.finished) {
+      if (key == 'enter') {
+        Pubsub.dispatchEvent('restart', {});
+      }
       return;
     }
 

src/js/main.js

@@ -2,6 +2,9 @@ const cellContainer = document.querySelector('.cell-container');
 const statusElement = document.querySelector('.status');
 const restartButton = document.querySelector('button[name="restart"]');
 const selectLanguage = document.querySelector('select#lang');
+const customGameNum = document.querySelector('input[name="customGameNum"]');
+const customGameButton = document.querySelector('button[name="goCustomGame"]');
+const teblakNumber = document.querySelector('span[name="teblakNumber"]');
 
 const dictionaryTemplates = document.querySelectorAll('template.dictionary');
 window.dictionaries = [];
@@ -16,9 +19,8 @@ window.dictionaries = [];
 const lang = selectLanguage.value;
 const dictionary = window.dictionaries[lang];
 
-const chosenWord = dictionary[
-  Math.floor(Math.random() * dictionary.length)
-];
+const wordNum = Math.floor(Math.random() * dictionary.length);
+const chosenWord = dictionary[wordNum];
 
 const game = window.game = new Game({
   body: document.body,
@@ -40,18 +42,33 @@ keyboard.bindKbEval();
 game.init();
 game.bindInput();
 
-restart = () => {
+window.addEventListener('load', () => {
+  showWordNum(wordNum);
+});
+
+showWordNum = (wordNum) => {
+  teblakNumber.textContent = wordNum;
+};
+
+newGame = (wordNum) => {
   const lang = selectLanguage.value;
   const chosenDictionary = window.dictionaries[lang];
 
-  const newChosenWord = chosenDictionary[
-    Math.floor(Math.random() * chosenDictionary.length)
-  ];
+  const newChosenWord = chosenDictionary[wordNum];
 
   keyboard.clear();
   game.restart(newChosenWord, chosenDictionary);
+  showWordNum(wordNum);
 };
 
+restart = () => {
+  newGame(Math.floor(Math.random() * dictionary.length));
+};
+
+customGame = (wordNum) => {
+  newGame(wordNum);
+}
+
 selectLanguage.addEventListener('change', () => {
   restart();
   selectLanguage.blur();
@@ -61,3 +78,8 @@ restartButton.addEventListener('click', () => {
   restart();
   restartButton.blur();
 });
+
+Pubsub.bind('restart', restart);
+customGameButton.addEventListener('click', () => {
+  customGame(customGameNum.value);
+});

src/js/pubsub.js

@@ -0,0 +1,24 @@
+class Pubsub {
+  static bind(event, callback) {
+    if (!window.pubSubHandler) {
+      window.pubSubHandler = {};
+    }
+
+    if (!window.pubSubHandler[event]) {
+      window.pubSubHandler[event] = [];
+    }
+
+    window.pubSubHandler[event].push(callback);
+  }
+
+  static dispatchEvent(event, data) {
+    if (
+      window.pubSubHandler &&
+      Array.isArray(window.pubSubHandler[event])
+    ) {
+      window.pubSubHandler[event].forEach((handler) => {
+        handler(data);
+      });
+    }
+  }
+}

src/style.css

@@ -10,6 +10,8 @@ html, body {
   height: 100%;
   font-family: monospace;
   text-align: center;
+  margin: auto;
+  max-width: 720px;
 }
 
 header {
@@ -85,6 +87,7 @@ footer {
   text-transform: uppercase;
   color: black;
   font-size: 16px !important;
+  flex: 1;
 }
 
 button, select {