build: updated web app

mrdcvlsc · Jul 1, 2023 · 8e282fa · 8e282fa
1 parent 3f38847
commit 8e282fa
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 43 deletions.
diff --git a/public/index.html b/public/index.html
@@ -20,26 +20,44 @@
     <h2>MiniMax with TicTacToe</h2>
   </div>
   <div class="main">
-    <div >
-      <span>Grid Size :
-        <select class="grid-size">
-        <option label="3" value="3">
-        <option label="4" value="4">
-        <option label="5" value="5">
-        <option label="6" value="6">
-        <option label="7" value="7">
-        <option label="8" value="8">
-        <option label="9" value="9">
-        <option label="10" value="10">
-      </select></span>
-      <span>Max Depth :
-        <input class="input-fields depth-value" type="number" value="10">
-      </span>
+    <div>
+      <div class="drop-selections">
+        <p>Grid :
+          <select class="grid-size">
+            <option label="3" value="3">
+            <option label="4" value="4">
+            <option label="5" value="5">
+            <option label="6" value="6">
+            <option label="7" value="7">
+            <option label="8" value="8">
+            <option label="9" value="9">
+            <option label="10" value="10">
+          </select>
+        </p>
+        <p>Piece win count :
+          <select class="win-piece-count">
+            <option label="3" value="3">
+            <option label="2" value="2">
+          </select>
+        </p>
+      </div>
+      <div class="drop-selections">
+        <p>Play as :
+          <select class="player-select">
+            <option label="X" value="1">
+            <option label="O" value="2">
+            <option label="Com" value="0">
+          </select>
+        </p>
+        <p>Max Depth :
+          <input class="input-fields depth-value" type="number" value="10">
+        </p>
+      </div>
     </div>
     <div id="board" class="board"></div>
     <button class="new-game">New Game</button>
     <p class="message"></p>
+    <a class="ghlink" href="https://github.com/mrdcvlsc/minimax-tic-tac-toe">source code - licence MIT</a>
   </div>
-  <a class="ghlink" href="https://github.com/mrdcvlsc/minimax-tic-tac-toe">source code - licence MIT</a>
 </body>
 </html>
diff --git a/public/script.js b/public/script.js
@@ -1,8 +1,18 @@
-// =================== tic-tac-toe minimax ===================
+// =================== html initialization ===================
+const PIECE = [' ', '&#10005;', '&#9711;'];
+
+const htmlBoard = document.querySelector('.board');
+const htmlGridSelect = document.querySelector('.grid-size');
+const htmlWinCountSelect = document.querySelector('.win-piece-count');
+const htmlPlayerSelect = document.querySelector('.player-select');
+const htmlNewGameBtn = document.querySelector('.new-game');
+const htmlMessage = document.querySelector('.message');
+
+// =================== tic-tac-toe minimax integration ===================
 import { TicTacToe } from './TicTacToe.js';
-let game = new TicTacToe(3);
 
-const PIECE = [' ', '&#10005;', '&#9711;'];
+let game;
+setNewGame('Click a square');
 
 const SUCCESS = 1;
 const INVALID = 0;
@@ -22,8 +32,6 @@ function announceResult(flag) {
   }
 }
 
-const htmlMessage = document.querySelector('.message');
-
 function makeMove(i, j, moveComputer = true) {
   if (!game.isFinish()) {
     htmlMessage.innerText = '';
@@ -65,13 +73,28 @@ function makeMove(i, j, moveComputer = true) {
   game.display();
 }
 
-// =================== html initialization ===================
-const htmlBoard = document.querySelector('.board');
-const htmlGridSize = document.querySelector('.grid-size');
+htmlPlayerSelect.addEventListener('change', () => {
+  const selectedPlayer = Number(htmlPlayerSelect.value);
+  if (selectedPlayer === 0) {
+    setNewGame('New game, both computer playing');
+  } else if (selectedPlayer === 1) {
+    setNewGame('New game, you are playing as X');
+  } else {
+    setNewGame('New game, you are playing as O');
+  }
+});
+
+htmlWinCountSelect.addEventListener('change', () => {
+  setNewGame('New game, with new piece win count');
+});
+
+htmlWinCountSelect.addEventListener('change', () => {
+  setNewGame('New game, with new piece win count');
+});
 
 // grid size selector
-htmlGridSize.addEventListener('change', () => {
-  const newGridSize = Number(htmlGridSize.value);
+htmlGridSelect.addEventListener('change', () => {
+  const newGridSize = Number(htmlGridSelect.value);
   if (newGridSize === 3) {
     document.querySelector('.depth-value').value = 10;
   } else if (newGridSize === 4) {
@@ -82,12 +105,19 @@ htmlGridSize.addEventListener('change', () => {
     document.querySelector('.depth-value').value = 3;
   }
 
+  htmlWinCountSelect.innerHTML = '';
+  for (let i = newGridSize; i > 1; --i) {
+    const newOptions = document.createElement('option');
+    newOptions.label = i;
+    newOptions.value = i;
+    htmlWinCountSelect.appendChild(newOptions);
+  }
+
   setNewGame(
-    newGridSize,
     'The depth was changed for optimal calculation speed. ' +
-      'You can change the depth on your own, but keep in mind ' +
-      'a higher "depth and grid" values will cause the computer to take ' +
-      'more time to move.'
+    'You can change the depth on your own, but keep in mind ' +
+    'a higher "depth and grid" values will cause the computer to take ' +
+    'more time to move.'
   );
 });
 
@@ -99,27 +129,45 @@ function generateCells() {
       const htmlSpan = document.createElement('span');
       htmlSpan.addEventListener('click', () => makeMove(i, j));
       htmlSpan.className = 'cell';
-      htmlSpan.innerHTML = '&#8203;';
+
+      if (game.board[i * game.grid + j] !== '') {
+        htmlSpan.innerHTML = PIECE[game.board[i * game.grid + j]];
+      } else {
+        htmlSpan.innerHTML = '&#8203;';
+      }
       htmlBoard.appendChild(htmlSpan);
     }
   }
 
   htmlBoard.style.gridTemplateColumns = `repeat(${game.grid}, 1fr)`;
+  htmlBoard.style.gridTemplateRows = `repeat(${game.grid}, 1fr)`;
 }
 
 generateCells();
 
-// new game button
-const htmlNewGameBtn = document.querySelector('.new-game');
-
 htmlNewGameBtn.addEventListener('click', () => {
-  setNewGame(game.grid);
+  setNewGame();
 });
 
-function setNewGame(gridSize, msg = '') {
+function setNewGame(msg = '') {
+  console.log('====== NEW GAME ======');
   htmlMessage.innerText = msg;
   htmlMessage.style.fontSize = '0.9em';
   htmlMessage.style.color = 'white';
-  game = new TicTacToe(gridSize);
+
+  game = new TicTacToe({
+    gridLength: Number(htmlGridSelect.value),
+    winCount: Number(htmlWinCountSelect.value),
+    player: Number(htmlPlayerSelect.value)
+  });
+
+  console.log('script.js' +
+    `gridLength = ${Number(htmlGridSelect.value)}\n` +
+    `winCount = ${Number(htmlWinCountSelect.value)}\n` +
+    `player = ${Number(htmlPlayerSelect.value)}`
+  );
+
+  console.log('script.js: setNewGame = ', game.currentPlayer, game.player);
+
   generateCells();
 }
diff --git a/public/style.css b/public/style.css
@@ -31,6 +31,13 @@ body {
   gap: 1em;
 }
 
+.drop-selections {
+  display: flex;
+  justify-content: space-evenly;
+  width: 50vmin;
+  padding: 0.1em;
+}
+
 .board {
   background-color: black;
 
@@ -40,13 +47,15 @@ body {
   border-radius: 4%;
   overflow: hidden;
 
-  grid-template-columns: repeat(4, 1fr);
+  /* make cells fixed square */
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
 
   justify-items: center;
   align-items: center;
 
-  width: min(50vh, 50vw);
-  height: min(50vh, 50vw);
+  width: 50vmin;
+  height: 50vmin;
 }
 
 .cell {
@@ -68,7 +77,7 @@ body {
 
 .cell {
   font-weight: bolder;
-  font-size: 2.5em;
+  font-size: 2em;
 }
 
 .cell:active {
@@ -144,11 +153,15 @@ a {
     height: 90%;
   }
 
+  .drop-selections {
+    width: 95vmin;
+  }
+
   .board {
     outline-width: thick;
 
-    width: min(80vh, 80vw);
-    height: min(80vh, 80vw);
+    width: 80vmin;
+    height: 80vmin;
   }
 
   .message {