From feb56f8b94f8c108432c5ca878b199eef989e34b Mon Sep 17 00:00:00 2001
From: Muhammad Refa Utama Putra <m.r3f4.u.p@gmail.com>
Date: Fri, 4 Mar 2022 18:56:07 +0700
Subject: [PATCH 1/5] Show game number and add custom game feature

---
 index.html | 36 +++++++++++++++++++++++++++++-------
 1 file changed, 29 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 5c21b87..390e651 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,7 @@
 
   <div class="container">
     <header>
+      <h1>Teblak #<span id=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" id="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>
@@ -437,6 +439,7 @@
 const statusElement = document.querySelector('.status');
 const restartButton = document.querySelector('button[name="restart"]');
 const selectLanguage = document.querySelector('select#lang');
+const customGameButton = document.querySelector('button[name="goCustomGame"]')
 
 const dictionaryTemplates = document.querySelectorAll('template.dictionary');
 window.dictionaries = [];
@@ -451,9 +454,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 +477,33 @@
 game.init();
 game.bindInput();
 
-restart = () => {
+window.addEventListener('load', () => {
+  showWordNum(wordNum);
+});
+
+showWordNum = (wordNum) => {
+  document.getElementById("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 +514,11 @@
   restartButton.blur();
 });
 
+customGameButton.addEventListener('click', () => {
+  var customGameNum = document.getElementById("customGameNum").value;
+  customGame(customGameNum);
+});
+
   </script>
 </body>
 </html>

From 5d76ad8c882b3c51a2a4266e6cebd676d0b83c79 Mon Sep 17 00:00:00 2001
From: Muhammad Refa Utama Putra <m.r3f4.u.p@gmail.com>
Date: Fri, 4 Mar 2022 19:33:59 +0700
Subject: [PATCH 2/5] Move changes to src and rebuild

---
 index.html        | 13 +++++++------
 src/index.html.m4 |  2 ++
 src/js/main.js    | 35 ++++++++++++++++++++++++++++-------
 3 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 390e651..66c6316 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
 
   <div class="container">
     <header>
-      <h1>Teblak #<span id=teblakNumber></span></h1>
+      <h1>Teblak #<span name=teblakNumber></span></h1>
       <select name="lang" id="lang">
         <option value="id">Bahasa Indonesia</option>
         <option value="jv">Basa Jawa</option>
@@ -31,7 +31,7 @@ <h1>Teblak #<span id=teblakNumber></span></h1>
       <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" id="customGameNum"> <button type="button" name="goCustomGame">Go</button></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>
@@ -439,7 +439,9 @@ <h1>Teblak #<span id=teblakNumber></span></h1>
 const statusElement = document.querySelector('.status');
 const restartButton = document.querySelector('button[name="restart"]');
 const selectLanguage = document.querySelector('select#lang');
-const customGameButton = document.querySelector('button[name="goCustomGame"]')
+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 = [];
@@ -482,7 +484,7 @@ <h1>Teblak #<span id=teblakNumber></span></h1>
 });
 
 showWordNum = (wordNum) => {
-  document.getElementById("teblakNumber").textContent = wordNum;
+  teblakNumber.textContent = wordNum;
 };
 
 newGame = (wordNum) => {
@@ -515,8 +517,7 @@ <h1>Teblak #<span id=teblakNumber></span></h1>
 });
 
 customGameButton.addEventListener('click', () => {
-  var customGameNum = document.getElementById("customGameNum").value;
-  customGame(customGameNum);
+  customGame(customGameNum.value);
 });
 
   </script>
diff --git a/src/index.html.m4 b/src/index.html.m4
index 067f62d..a5a8d28 100644
--- a/src/index.html.m4
+++ b/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>
diff --git a/src/js/main.js b/src/js/main.js
index d7ef679..46c4462 100644
--- a/src/js/main.js
+++ b/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,7 @@ restartButton.addEventListener('click', () => {
   restart();
   restartButton.blur();
 });
+
+customGameButton.addEventListener('click', () => {
+  customGame(customGameNum.value);
+});

From bc47a2d8a8cd1e210308af8c58377cbb3b6cf599 Mon Sep 17 00:00:00 2001
From: Mufti <iwak.sotong@gmail.com>
Date: Sat, 5 Mar 2022 00:40:17 +0700
Subject: [PATCH 3/5] Pubsub-kinda-like "architecture". Enlarge keyboard.
 Restart game when press enter after game finished.

---
 index.html        | 31 +++++++++++++++++++++++++++++++
 src/index.html.m4 |  1 +
 src/js/game.js    |  3 +++
 src/js/main.js    |  2 ++
 src/js/pubsub.js  | 24 ++++++++++++++++++++++++
 src/style.css     |  3 +++
 6 files changed, 64 insertions(+)
 create mode 100644 src/js/pubsub.js

diff --git a/index.html b/index.html
index 5c21b87..7af2bb2 100644
--- a/index.html
+++ b/index.html
@@ -47,6 +47,8 @@
   height: 100%;
   font-family: monospace;
   text-align: center;
+  margin: auto;
+  max-width: 720px;
 }
 
 header {
@@ -122,6 +124,7 @@
   text-transform: uppercase;
   color: black;
   font-size: 16px !important;
+  flex: 1;
 }
 
 button, select {
@@ -144,6 +147,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 +356,9 @@
 
   input(key) {
     if (this.finished) {
+      if (key == 'enter') {
+        Pubsub.dispatchEvent('restart', {});
+      }
       return;
     }
 
@@ -497,6 +527,7 @@
   restartButton.blur();
 });
 
+Pubsub.bind('restart', restart);
   </script>
 </body>
 </html>
diff --git a/src/index.html.m4 b/src/index.html.m4
index 067f62d..eb07994 100644
--- a/src/index.html.m4
+++ b/src/index.html.m4
@@ -33,6 +33,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)
diff --git a/src/js/game.js b/src/js/game.js
index 925ec28..fe34552 100644
--- a/src/js/game.js
+++ b/src/js/game.js
@@ -27,6 +27,9 @@ class Game {
 
   input(key) {
     if (this.finished) {
+      if (key == 'enter') {
+        Pubsub.dispatchEvent('restart', {});
+      }
       return;
     }
 
diff --git a/src/js/main.js b/src/js/main.js
index d7ef679..597a0b7 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -61,3 +61,5 @@ restartButton.addEventListener('click', () => {
   restart();
   restartButton.blur();
 });
+
+Pubsub.bind('restart', restart);
\ No newline at end of file
diff --git a/src/js/pubsub.js b/src/js/pubsub.js
new file mode 100644
index 0000000..c7f18fa
--- /dev/null
+++ b/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);
+      });
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index b6918b2..1c751ea 100644
--- a/src/style.css
+++ b/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 {

From a3d842c2ec653137b5d2aa610716c69bb1bb2297 Mon Sep 17 00:00:00 2001
From: Muhammad Refa Utama Putra <m.r3f4.u.p@gmail.com>
Date: Fri, 4 Mar 2022 18:56:07 +0700
Subject: [PATCH 4/5] Show game number and add custom game feature

---
 index.html | 36 +++++++++++++++++++++++++++++-------
 1 file changed, 29 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 7af2bb2..8a1df83 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,7 @@
 
   <div class="container">
     <header>
+      <h1>Teblak #<span id=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" id="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>
@@ -467,6 +469,7 @@
 const statusElement = document.querySelector('.status');
 const restartButton = document.querySelector('button[name="restart"]');
 const selectLanguage = document.querySelector('select#lang');
+const customGameButton = document.querySelector('button[name="goCustomGame"]')
 
 const dictionaryTemplates = document.querySelectorAll('template.dictionary');
 window.dictionaries = [];
@@ -481,9 +484,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,
@@ -505,18 +507,33 @@
 game.init();
 game.bindInput();
 
-restart = () => {
+window.addEventListener('load', () => {
+  showWordNum(wordNum);
+});
+
+showWordNum = (wordNum) => {
+  document.getElementById("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();
@@ -528,6 +545,11 @@
 });
 
 Pubsub.bind('restart', restart);
+customGameButton.addEventListener('click', () => {
+  var customGameNum = document.getElementById("customGameNum").value;
+  customGame(customGameNum);
+});
+
   </script>
 </body>
 </html>

From 74efa95af3f2e6b7db45569d61d4429063b4e6cd Mon Sep 17 00:00:00 2001
From: Muhammad Refa Utama Putra <m.r3f4.u.p@gmail.com>
Date: Fri, 4 Mar 2022 19:33:59 +0700
Subject: [PATCH 5/5] Move changes to src and rebuild

---
 index.html        | 13 +++++++------
 src/index.html.m4 |  2 ++
 src/js/main.js    | 36 ++++++++++++++++++++++++++++--------
 3 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index 8a1df83..7a8a7a0 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
 
   <div class="container">
     <header>
-      <h1>Teblak #<span id=teblakNumber></span></h1>
+      <h1>Teblak #<span name=teblakNumber></span></h1>
       <select name="lang" id="lang">
         <option value="id">Bahasa Indonesia</option>
         <option value="jv">Basa Jawa</option>
@@ -31,7 +31,7 @@ <h1>Teblak #<span id=teblakNumber></span></h1>
       <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" id="customGameNum"> <button type="button" name="goCustomGame">Go</button></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>
@@ -469,7 +469,9 @@ <h1>Teblak #<span id=teblakNumber></span></h1>
 const statusElement = document.querySelector('.status');
 const restartButton = document.querySelector('button[name="restart"]');
 const selectLanguage = document.querySelector('select#lang');
-const customGameButton = document.querySelector('button[name="goCustomGame"]')
+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 = [];
@@ -512,7 +514,7 @@ <h1>Teblak #<span id=teblakNumber></span></h1>
 });
 
 showWordNum = (wordNum) => {
-  document.getElementById("teblakNumber").textContent = wordNum;
+  teblakNumber.textContent = wordNum;
 };
 
 newGame = (wordNum) => {
@@ -546,8 +548,7 @@ <h1>Teblak #<span id=teblakNumber></span></h1>
 
 Pubsub.bind('restart', restart);
 customGameButton.addEventListener('click', () => {
-  var customGameNum = document.getElementById("customGameNum").value;
-  customGame(customGameNum);
+  customGame(customGameNum.value);
 });
 
   </script>
diff --git a/src/index.html.m4 b/src/index.html.m4
index eb07994..7655c45 100644
--- a/src/index.html.m4
+++ b/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>
diff --git a/src/js/main.js b/src/js/main.js
index 597a0b7..0cf87e8 100644
--- a/src/js/main.js
+++ b/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();
@@ -62,4 +79,7 @@ restartButton.addEventListener('click', () => {
   restartButton.blur();
 });
 
-Pubsub.bind('restart', restart);
\ No newline at end of file
+Pubsub.bind('restart', restart);
+customGameButton.addEventListener('click', () => {
+  customGame(customGameNum.value);
+});