Game Win History and UI

dist/index.html

@@ -13,8 +13,7 @@
         <div id=opponent></div>
         <div id="message"></div>
         <div id=status></div>
-        <div id="tally"></div>
-        <div id=gameTable class=hide>
+        <div id=gameTable class="gameTable hide">
             <table>
                 <tr>
                     <td id=pos_0 class=tile>T</td>
@@ -33,6 +32,7 @@
                 </tr>
             </table>
         </div>
+        <div id="tally"></div>
         <div id=instructions>
             <p>Share this link with a friend to begin:</p>
             <div class=link>

dist/main.css

@@ -33,27 +33,39 @@ input#shareLink {
 #status {
   font: normal normal bold 16px/20px 'Lato', sans-serif; }
 
-#tally .gameTable tr td {
-  height: 10px;
-  width: 10px;
-  content: ""; }
+#tally {
+  height: 40px;
+  overflow: auto;
+  white-space: nowrap; }
+  #tally .gameTable {
+    display: inline-block;
+    padding-right: 13.5px; }
+    #tally .gameTable:last-child {
+      padding-right: 0px; }
+    #tally .gameTable tr td {
+      font-size: 0;
+      line-height: 0;
+      height: 8px;
+      width: 8px;
+      content: ""; }
 
-#gameTable tr td {
+.gameTable tr td {
+  font: normal normal bold 30px/30px 'Lato', sans-serif;
   border-bottom: 1px solid #333;
   border-right: 1px solid #333;
   height: 160px;
   width: 160px;
   text-align: center; }
-  #gameTable tr td:last-child {
+  .gameTable tr td:last-child {
     border-right: none; }
-  #gameTable tr td.dim {
+  .gameTable tr td.dim {
     opacity: 0.3; }
-    #gameTable tr td.dim.highlight {
+    .gameTable tr td.dim.highlight {
       opacity: 1; }
-  #gameTable tr td.highlight {
+  .gameTable tr td.highlight {
     opacity: 1; }
 
-#gameTable tr:last-child td {
+.gameTable tr:last-child td {
   border-bottom: none; }
 
 .hide {

src/classes.js

@@ -1,5 +1,7 @@
 'use strict'
 
+import * as lib from "./services"
+
 /**
  * Logging
  * Set to true to enable console.debug() messages
@@ -8,15 +10,6 @@ const Logging = true
 
 class BaseUtils {
     constructor() {}
-    generateRandom (len) {
-        let chars = "023456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghikmnopqrstuvwxyz"
-        let randomstring = ''
-        for (var i = 0; i < len; i++) {
-            var rnum = Math.floor(Math.random() * chars.length)
-            randomstring += chars.substring(rnum, rnum + 1)
-        }
-        return randomstring
-    }
     getUUID () {
         function s4 () {
             return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1)
@@ -86,14 +79,14 @@ export class Player extends BaseUtils {
 export class Series extends BaseUtils {
     constructor() {
         super()
-        this.setId((new URLSearchParams(window.location.search)).get('sid') || this.generateRandom(6))
+        this.setId((new URLSearchParams(window.location.search)).get('sid') || lib.generateRandom(6))
         this.gameMatrix = [
             null, null, null,
             null, null, null,
             null, null, null
         ]
         this.turn = undefined
-        this.tally = []
+        this.gameMatrixHistory = []
         this.log()
         return this
     }
@@ -114,6 +107,12 @@ export class Series extends BaseUtils {
         this.gameMatrix = matrix
         return this
     }
+    getGameMatrixHistory() {
+        return this.gameMatrixHistory
+    }
+    setGameMatrixHistory(history) {
+        this.gameMatrixHistory = history
+    }
     emptyGameMatrix() {
         this.gameMatrix = [
             null, null, null,
@@ -181,6 +180,16 @@ export class Payload extends BaseUtils {
         this.log("setMatrix")
         return this
     }
+    /**
+     * Set the payload game matrix history array
+     * @param {PlayerID[]} history - An array of arrays containing the Game Matrix
+     * @returns Payload object
+     */
+    setMatrixHistory (history) {
+        this.MatrixHistory = history
+        this.log("setMatrixHistory")
+        return this
+    }
     /**
      * Set the payload chat message
      * @param {string} message - Chat Message

src/index.js

@@ -60,6 +60,7 @@ if (window.WebSocket) {
                                 .setEventType(EventEnum.IAMHERE)
                                 .setMessage(player.getName())
                                 .setMatrix(series.getGameMatrix())
+                                .setMatrixHistory(series.getGameMatrixHistory())
                                 .serialize()
                             conn.send(payload)
                         } else {
@@ -80,6 +81,7 @@ if (window.WebSocket) {
                         series.setTurn(player.getId())
                         status.innerText = "Your Turn"
                         series.setGameMatrix(data.Matrix)
+                        series.setGameMatrixHistory(data.MatrixHistory)
                         _renderGame()
                         break;
                     case EventEnum.CHAT:
@@ -93,6 +95,7 @@ if (window.WebSocket) {
                         break;
                     case EventEnum.NEW:
                         series.logGame()
+                        _appendGameHistory()
                         series.emptyGameMatrix()
                         series.setTurn(player.getId())
                         status.innerText = "Your Turn"
@@ -185,13 +188,16 @@ function _renderGame () {
         }
     }
     let [me, positions] = _analyzeBoard()
-    if (positions)
+    if (positions) {
         _highlightBoard(positions)
+    }
     if (me) {
+        status.innerText = "YOU WIN!!!"
         setTimeout(() => {
             let playagain = confirm("Play another round?")
             if (playagain) {
                 series.logGame()
+                _appendGameHistory()
                 series.emptyGameMatrix()
                 _renderGame()
                 payload = new Payload(series.getId(), player.getId())
@@ -200,8 +206,40 @@ function _renderGame () {
                 conn.send(payload)
             }
         }, 1000)
+    } else if (positions) {
+        status.innerText = "LOSER"
+    }
+    if (_draw()) {
+        if (series.getTurn() == player.getId()) {
+            setTimeout(() => {
+                let playagain = confirm("Play another round?")
+                if (playagain) {
+                    series.logGame()
+                    _appendGameHistory()
+                    series.emptyGameMatrix()
+                    _renderGame()
+                    payload = new Payload(series.getId(), player.getId())
+                        .setEventType(EventEnum.NEW)
+                        .serialize()
+                    conn.send(payload)
+                }
+            }, 1000)
+        }
+        document.querySelectorAll('#gameTable td').forEach(el => el.classList.add("dim"))
+        status.innerText = "Its a draw!"
     }
 }
+function _appendGameHistory() {
+    let gameTableClone = gameTable.cloneNode(true)
+    gameTableClone.id = lib.generateRandom(6)
+    gameTableClone.querySelectorAll("td").forEach(el => {
+        el.id = ""
+    })
+    // if (tally.childNodes.length >= 7) {
+    //     tally.firstChild.remove()
+    // }
+    tally.appendChild(gameTableClone)
+}
 function _analyzeBoard() {
     let matrix = series.getGameMatrix()
     for (let i = 0; i <= 8; i) {
@@ -223,6 +261,15 @@ function _analyzeBoard() {
     }
     return [false, null]
 }
+function _draw() {
+    let matrix = series.getGameMatrix()
+    for (let i = 0; i < matrix.length; i++) {
+        if (!matrix[i]) {
+            return false
+        }
+    }
+    return true
+}
 function _highlightBoard(positions) {
     document.querySelectorAll('#gameTable td').forEach(el => el.classList.add("dim"))
     for (let pos of positions) {
@@ -347,14 +394,6 @@ function _threeInARow() {
     }
     return [false, null, null]
 }
-function _draw() {
-    for (let i = 0; i < game.matrix.length; i++) {
-        if (!game.matrix[i]) {
-            return false
-        }
-    }
-    return true
-}
 function _dimBoard(reverse) {
     if (reverse) {
         document.querySelectorAll('td').forEach(el => el.classList.remove("dim"))

src/services.js

@@ -1,5 +1,7 @@
 'use strict'
 
+const _chars = "023456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghikmnopqrstuvwxyz"
+
 export function GET (theUrl) {
     return new Promise((resolve, reject) => {
         var req = new XMLHttpRequest()
@@ -31,7 +33,7 @@ export function POST (theUrl, data) {
         req.send(data)
     })
 }
-export function _parseOrNot(str) {
+export function parseOrNot(str) {
     let data = str
     try {
         data = JSON.parse(str)
@@ -39,4 +41,12 @@ export function _parseOrNot(str) {
         console.debug("Error Parsing JSON:", str)
     }
     return data
+}
+export function generateRandom(len) {
+    let randomstring = ''
+    for (var i = 0; i < len; i++) {
+        var rnum = Math.floor(Math.random() * _chars.length)
+        randomstring += _chars.substring(rnum, rnum + 1)
+    }
+    return randomstring
 }

src/style.scss

@@ -37,19 +37,30 @@ input#shareLink {
     font: normal normal bold 16px/20px 'Lato', sans-serif;
 }
 #tally {
+    height: 40px;
+    overflow: auto;
+    white-space: nowrap;
     .gameTable {
+        display: inline-block;
+        padding-right: 13.5px;
+        &:last-child {
+            padding-right: 0px;
+        }
         tr {
             td {
-                height: 10px;
-                width: 10px;
+                font-size: 0;
+                line-height: 0;
+                height: 8px;
+                width: 8px;
                 content: "";
             }
         }
     }
 }
-#gameTable {
+.gameTable {
     tr {
         td {
+            font: normal normal bold 30px/30px 'Lato', sans-serif;
             border-bottom: 1px solid #333;
             border-right: 1px solid #333;
             height: 160px;