Merge pull request #12 from jrsmth/feature/ultimate/UMA-21

Feature/ultimate/uma 21

CHANGELOG.md

@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - UMA-17: Give the user the option of standard or ultimate tic-tac-toe
 - UMA-19: Create interactive 9x9 board and allow player to make a turn
 - UMA-20: Force ultimate players to play in the correct square after a move is placed
+- UMA-21: Make game completable through correct outer square selection and evaluation
 
 ## [0.2.1] - 07/11/2023
 - UMA-11: Allow players to make their turns

src/app/game/game.py

@@ -1,5 +1,6 @@
 from flask import render_template, url_for, redirect, Blueprint
 
+from src.app.model.board.threeboard import ThreeBoard
 from src.app.model.mood import Mood
 from src.app.model.status import Status
 from src.version.version import __version__
@@ -128,7 +129,12 @@ def place_ultimate_move(game_id, user_id, outer_square, inner_square):
         print(board)
 
         # Set next playable outer square
-        redis.set("playableSquare", inner_square)
+        if get_game_state(redis, board[int(inner_square)]) != Status.IN_PROGRESS:
+            redis.set("playableSquare", "-1")  # -1 is all squares...
+        else:
+            redis.set("playableSquare", inner_square)
+
+        print("[place_ultimate_move] playableSquare: " + redis.get("playableSquare"))
 
         # Switch player turn
         if redis.get("whoseTurn") == 'player1':
@@ -143,18 +149,6 @@ def place_ultimate_move(game_id, user_id, outer_square, inner_square):
 
 
 def get_game_state(redis, board):
-
-    if isinstance(board[0], list):
-        print("[get_game_state] board[0]: " + str(board[0]))
-        outer_state = Status.IN_PROGRESS
-        inner_states = []
-        for outer_square in board:
-            inner_state = get_game_state(redis, outer_square)
-            inner_states.append(inner_state.value)
-            print("[get_game_state] inner_states: " + str(inner_states))
-        redis.set_complex("innerStates", inner_states)
-        return Status.IN_PROGRESS
-
     winning_combos = [
         [0, 1, 2],
         [3, 4, 5],
@@ -166,6 +160,19 @@ def get_game_state(redis, board):
         [2, 4, 6]
     ]
 
+    if isinstance(board[0], list):
+        print("[get_game_state] board[0]: " + str(board[0]))
+        outer_state = Status.IN_PROGRESS
+        inner_states = []
+        for outer_square in board:
+            inner_state = get_game_state(redis, outer_square)
+            inner_states.append(inner_state.value)
+            print("[get_game_state] inner_states: " + str(inner_states))
+            if inner_states.count('1') == 0:
+                return Status.DRAW
+        redis.set_complex("innerStates", inner_states)
+        return get_game_state(redis, create_false_board(inner_states))
+
     if board.count(0) == 0:
         return Status.DRAW
         # FixMe :: this check needs to happen after test each player has won...
@@ -196,3 +203,26 @@ def get_player_moves(player, board):
             player_moves.append(index)
 
     return player_moves
+
+
+def convert_states_to_symbols(state):
+    if state == 1: return 0
+    if state == 2: return 0
+    if state == 3: return 1
+    if state == 4: return 2
+
+
+def create_false_board(states):
+    board = ThreeBoard()
+    board.top_lhs = convert_states_to_symbols(states[0])
+    board.top_mid = convert_states_to_symbols(states[1])
+    board.top_rhs = convert_states_to_symbols(states[2])
+    board.mid_lhs = convert_states_to_symbols(states[3])
+    board.mid_mid = convert_states_to_symbols(states[4])
+    board.mid_rhs = convert_states_to_symbols(states[5])
+    board.bot_lhs = convert_states_to_symbols(states[6])
+    board.bot_mid = convert_states_to_symbols(states[7])
+    board.bot_rhs = convert_states_to_symbols(states[8])
+
+    print("[create_false_board] board: " + str(board.list()))
+    return board.list()

src/resources/static/scripts/game.js

@@ -39,12 +39,16 @@ function initUltimate(thisUserId, thisSymbol) {
 
     for (let i = 0; i < 9; i++) {
         const outerSquare = document.getElementById(`nine-square-${i}`);
-        if (playableSquare === "-1" || playableSquare === i.toString()) outerSquare.classList.add("playable")
 
         if (innerStates[i] === 2) { outerSquare.classList.add("draw") }
         if (innerStates[i] === 3) { outerSquare.classList.add(thisSymbol === '1' ? "this-user" : "opponent-user"); console.log(i) }
         if (innerStates[i] === 4) { outerSquare.classList.add(thisSymbol === '2' ? "this-user" : "opponent-user") }
 
+        if (
+            (playableSquare === "-1" || playableSquare === i.toString()) &&
+            (!outerSquare.classList.contains("this-user") && !outerSquare.classList.contains("opponent-user") && !outerSquare.classList.contains("draw"))
+        ) { outerSquare.classList.add("playable") }
+
         let outerBoard = []
         for (let j = 0; j < 9; j++) {
             const innerSquare = document.getElementById(`nine-square-${i}-${j}`).getElementsByClassName("square")[0];

src/resources/static/styles/scss/game.scss

@@ -9,15 +9,6 @@ header {
     height: 2.25rem;
     margin: .5rem;
   }
-
-  h1 {
-    margin: .5rem;
-    text-transform: uppercase;
-    letter-spacing: .25rem;
-    font-weight: 200;
-    font-size: 1.5rem;
-    line-height: 2.25rem;
-  }
 }
 
 /** Tooltip */
@@ -264,6 +255,10 @@ header {
         cursor: default !important;
       }
     }
+
+    &.draw .shadow-square.inner {
+      opacity: .1;
+    }
   }
 
   .shadow-square.inner {

src/resources/templates/game.html

@@ -20,9 +20,10 @@
         <header>
             <div class="tooltip">
                 <a href="https://github.com/jrsmth/ultima" target="_blank"><img id="badge" alt="badge" src="{{ url_for('static', filename='img/badge.png') }}"></a>
-                <div class="tooltip-text"><span>{{ version }}</span></div>
+                <div class="tooltip-text">
+                    <span>{{ version }}</span>
+                </div>
             </div>
-            <h1>Ultima</h1>
         </header>
         <section id="content">
             <section class="side-bar left">