From ea1901eeb2bd193a0fb900a3766662d681e63bd7 Mon Sep 17 00:00:00 2001
From: kelvinkamau <kamaucodes@gmail.com>
Date: Thu, 6 Jun 2024 14:35:45 +0300
Subject: [PATCH] algo updates to improve gameplay

---
 index.html |  79 +---------
 script.js  | 447 ++++++++++++++++++-----------------------------------
 style.css  |  71 +++++++++
 3 files changed, 226 insertions(+), 371 deletions(-)
diff --git a/index.html b/index.html
index f9516a0..dcb5c8a 100644
--- a/index.html
+++ b/index.html
@@ -21,78 +21,7 @@
     <script type="text/javascript" src="script.js"></script>
     <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
 
-    <style>
-        html {
-            font-family: 'Ubuntu', sans-serif;
-            font-weight: 400;
-            font-size: 14px;
-            color: white;
-        }
-
-        .container {
-            max-width: 400px;
-            margin: 2em auto;
-            text-align: center;
-            line-height: 1.5;
-        }
-
-        h1 {
-            margin: 1em auto;
-        }
-
-        a {
-            text-decoration: none;
-            color: pink;
-            font-weight: 700;
-        }
-
-        span.purple {
-            color: purple;
-            font-weight: 700;
-        }
-
-        span.black {
-            color: black;
-            font-weight: 700;
-        }
-
-        .tic-tac-toe {
-            width: 315px;
-            height: auto;
-            margin: 0 auto;
-
-        }
-
-        .tile {
-            height: 100px;
-            width: 100px;
-            display: inline-block;
-            cursor: pointer;
-
-            position: relative;
-            vertical-align: top;
-
-            padding: 15px;
-            margin-bottom: 5px;
-            box-sizing: border-box;
-
-            color: #fff;
-            font-size: 60px;
-            text-align: center;
-        }
-
-        .free {
-            background-color: #fff;
-        }
-
-        .O-play {
-            background-color: black;
-        }
-
-        .X-play {
-            background-color: purple;
-        }
-    </style>
+    
 </head>
 <body>
 
@@ -104,7 +33,8 @@ <h1>TicTacToe</h1>
     <p>You play as <span class="purple">X</span> and the computer plays as <span class="black">O</span><br/>
         Start by selecting a square to play</p>
 
-    <p class="scoreset">X | O</p>
+        <p id="score-display" class="scoreset">[ You: 0 / Computer: 0 ]</p>
+
 </div>
 
 <div class="tic-tac-toe">
@@ -119,9 +49,6 @@ <h1>TicTacToe</h1>
     <div id="square9" class="tile free"></div>
 </div>
 
-<div>
-    <button >Reset</button>
-</div>
 <script>
 
     if ('serviceWorker' in navigator) {
diff --git a/script.js b/script.js
index 0cdb507..aa96b6d 100644
--- a/script.js
+++ b/script.js
@@ -1,297 +1,154 @@
 $(document).ready(function () {
 
-var sq1 = $('#square1');
-var sq2 = $('#square2');
-var sq3 = $('#square3');
-var sq4 = $('#square4');
-var sq5 = $('#square5');
-var sq6 = $('#square6');
-var sq7 = $('#square7');
-var sq8 = $('#square8');
-var sq9 = $('#square9');
-
-var scorex = 0;
-var scoreo = 0;
-var playValid = false;
-var win = false;
-
-
-function validatePlay(squareplayed) {
-	if ( $(squareplayed).hasClass('free') ) {
-		playValid = true;
-	} else {
-		playValid = false;
-		return false;
-	}
-}
-
-function clearBoard() {
-	$('.tile').removeClass('played');
-	$('.tile').removeClass('O-play');
-	$('.tile').removeClass('X-play');
-	$('.tile').html('');
-	$('.tile').addClass('free');
-}
-
-function winAlert(player) {
-	win = true;
-
-	if (player == "X") {
-		scorex ++;
-		alert("Yay, you beat the computer! Your score is " + scorex + " Computer score is " + scoreo)
-	} else {
-		scoreo ++;
-		alert("You lost! Computer score is " + scoreo + " Your score is " + scorex)
-
-	}
-	clearBoard();
-}
-
-function reset() {
-	clearBoard();
-
-}
-function checkWin() {
-
-	if ( sq1.hasClass('X-play') && sq2.hasClass('X-play') && sq3.hasClass('X-play') ) {
-		winAlert("X");
-	} else if ( sq1.hasClass('O-play') && sq2.hasClass('O-play') && sq3.hasClass('O-play') ) {
-		winAlert("O");
-	}
-
-	else if ( sq4.hasClass('X-play') && sq5.hasClass('X-play') && sq6.hasClass('X-play') ) {
-		winAlert("X");
-	} else if ( sq4.hasClass('O-play') && sq5.hasClass('O-play') && sq6.hasClass('O-play') ) {
-		winAlert("O");
-	}
-
-	else if ( sq7.hasClass('X-play') && sq8.hasClass('X-play') && sq9.hasClass('X-play') ) {
-		winAlert("X");
-	} else if ( sq7.hasClass('O-play') && sq8.hasClass('O-play') && sq9.hasClass('O-play') ) {
-		winAlert("O");
-	}
-
-	else if ( sq1.hasClass('X-play') && sq4.hasClass('X-play') && sq7.hasClass('X-play') ) {
-		winAlert("X");
-	} else if ( sq1.hasClass('O-play') && sq4.hasClass('O-play') && sq7.hasClass('O-play') ) {
-		winAlert("O");
-	}
-
-	else if ( sq5.hasClass('X-play') && sq2.hasClass('X-play') && sq8.hasClass('X-play') ) {
-		winAlert("X");
-	} else if ( sq5.hasClass('O-play') && sq2.hasClass('O-play') && sq8.hasClass('O-play') ) {
-		winAlert("O");
-	}
-
-	else if ( sq6.hasClass('X-play') && sq9.hasClass('X-play') && sq3.hasClass('X-play') ) {
-		winAlert("X");
-	} else if ( sq6.hasClass('O-play') && sq9.hasClass('O-play') && sq3.hasClass('O-play') ) {
-		winAlert("O");
-	}
-
-	else if ( sq1.hasClass('X-play') && sq5.hasClass('X-play') && sq9.hasClass('X-play') ) {
-		winAlert("X");
-	} else if ( sq1.hasClass('O-play') && sq5.hasClass('O-play') && sq9.hasClass('O-play') ) {
-		winAlert("O");
-	}
-
-	else if ( sq5.hasClass('X-play') && sq7.hasClass('X-play') && sq3.hasClass('X-play') ) {
-		winAlert("X");
-	} else if ( sq5.hasClass('O-play') && sq7.hasClass('O-play') && sq3.hasClass('O-play') ) {
-		winAlert("O");
-	}
-}
-
-function checkDraw() {
-
-	if ( !($('.tile').hasClass('free')) ) {
-		alert("Draw! Try playing again!");
-		clearBoard();
-	}
-}
-//todo reset game
-
-function Oplay() {
-
-	// Function for when O plays tactically
-	// todo add new service workers
-	function Oplaying(square) {
-
-		validatePlay(square)
-
-		if (playValid) {
-			square.removeClass('free');
-			square.addClass('played');
-			square.addClass('O-play');
-			square.html("O");
-		} else {
-			Orandomplay()
-		}
-
-	}
-
-	// Function for when O plays randomly
-	function Orandomplay() {
-		for (var i = 0; i < 10; i++) {
-		// Loop to find a valid play
-		
-			var randomNumber = Math.floor((Math.random() * 9) + 1);
-			var randomSquare = $('#square'+randomNumber);
-			validatePlay(randomSquare);
-
-			if (playValid) {
-
-				randomSquare.removeClass('free');
-				randomSquare.addClass('played');
-				randomSquare.addClass('O-play');
-				randomSquare.html("O");
-				break;
-			} 
-		}
-	}
-
-
-	// Tactical Plays
-
-	win123_sq3 = ( sq1.hasClass('X-play') && sq2.hasClass('X-play') || sq1.hasClass('O-play') && sq2.hasClass('O-play') ) && !(sq3.hasClass('played'))
-	win123_sq2 = ( sq1.hasClass('X-play') && sq3.hasClass('X-play') || sq1.hasClass('O-play') && sq3.hasClass('O-play') ) && !(sq2.hasClass('played'))
-	win123_sq1 = ( sq3.hasClass('X-play') && sq2.hasClass('X-play') || sq3.hasClass('O-play') && sq2.hasClass('O-play') ) && !(sq1.hasClass('played'))
-
-	win456_sq6 = ( sq4.hasClass('X-play') && sq5.hasClass('X-play') || sq4.hasClass('O-play') && sq5.hasClass('O-play') ) && !(sq6.hasClass('played'))
-	win456_sq5 = ( sq4.hasClass('X-play') && sq6.hasClass('X-play') || sq4.hasClass('O-play') && sq6.hasClass('O-play') ) && !(sq5.hasClass('played'))
-	win456_sq4 = ( sq5.hasClass('X-play') && sq6.hasClass('X-play') || sq5.hasClass('O-play') && sq6.hasClass('O-play') ) && !(sq4.hasClass('played'))
-
-	win789_sq9 = ( sq7.hasClass('X-play') && sq8.hasClass('X-play') || sq7.hasClass('O-play') && sq8.hasClass('O-play') ) && !(sq9.hasClass('played'))
-	win789_sq8 = ( sq7.hasClass('X-play') && sq9.hasClass('X-play') || sq7.hasClass('O-play') && sq9.hasClass('O-play') ) && !(sq8.hasClass('played'))
-	win789_sq7 = ( sq8.hasClass('X-play') && sq9.hasClass('X-play') || sq8.hasClass('O-play') && sq9.hasClass('O-play') ) && !(sq7.hasClass('played'))
-
-	win147_sq7 = ( sq1.hasClass('X-play') && sq4.hasClass('X-play') || sq1.hasClass('O-play') && sq4.hasClass('O-play') ) && !(sq7.hasClass('played'))
-	win147_sq4 = ( sq1.hasClass('X-play') && sq7.hasClass('X-play') || sq1.hasClass('O-play') && sq7.hasClass('O-play') ) && !(sq4.hasClass('played'))
-	win147_sq1 = ( sq4.hasClass('X-play') && sq7.hasClass('X-play') || sq4.hasClass('O-play') && sq7.hasClass('O-play') ) && !(sq1.hasClass('played'))
-
-	win528_sq8 = ( sq5.hasClass('X-play') && sq2.hasClass('X-play') || sq5.hasClass('O-play') && sq2.hasClass('O-play') ) && !(sq8.hasClass('played'))
-	win528_sq2 = ( sq5.hasClass('X-play') && sq8.hasClass('X-play') || sq5.hasClass('O-play') && sq8.hasClass('O-play') ) && !(sq2.hasClass('played'))
-	win528_sq5 = ( sq2.hasClass('X-play') && sq8.hasClass('X-play') || sq2.hasClass('O-play') && sq8.hasClass('O-play') ) && !(sq5.hasClass('played'))
-
-	win693_sq3 = ( sq6.hasClass('X-play') && sq9.hasClass('X-play') || sq6.hasClass('O-play') && sq9.hasClass('O-play') ) && !(sq3.hasClass('played'))
-	win693_sq9 = ( sq6.hasClass('X-play') && sq3.hasClass('X-play') || sq6.hasClass('O-play') && sq3.hasClass('O-play') ) && !(sq9.hasClass('played'))
-	win693_sq6 = ( sq9.hasClass('X-play') && sq3.hasClass('X-play') || sq9.hasClass('O-play') && sq3.hasClass('O-play') ) && !(sq6.hasClass('played'))
-
-	win159_sq9 = ( sq1.hasClass('X-play') && sq5.hasClass('X-play') || sq1.hasClass('O-play') && sq5.hasClass('O-play') ) && !(sq9.hasClass('played'))
-	win159_sq5 = ( sq1.hasClass('X-play') && sq9.hasClass('X-play') || sq1.hasClass('O-play') && sq9.hasClass('O-play') ) && !(sq5.hasClass('played'))
-	win159_sq1 = ( sq5.hasClass('X-play') && sq9.hasClass('X-play') || sq5.hasClass('O-play') && sq9.hasClass('O-play') ) && !(sq1.hasClass('played'))
-
-	win573_sq3 = ( sq5.hasClass('X-play') && sq7.hasClass('X-play') || sq5.hasClass('O-play') && sq7.hasClass('O-play') ) && !(sq3.hasClass('played'))
-	win573_sq5 = ( sq5.hasClass('X-play') && sq3.hasClass('X-play') || sq5.hasClass('O-play') && sq3.hasClass('O-play') ) && !(sq5.hasClass('played'))
-	win573_sq7 = ( sq7.hasClass('X-play') && sq3.hasClass('X-play') || sq7.hasClass('O-play') && sq3.hasClass('O-play') ) && !(sq7.hasClass('played'))
-
-
-
-	//Win 1 2 3
-	if ( win123_sq3 ) {
-		Oplaying(sq3)
-	} else if ( win123_sq2 ) {
-		Oplaying(sq2)
-	} else if ( win123_sq1 )  {
-		Oplaying(sq1)
-	} 
-	
-	//Win 4 5 6
-	else if ( win456_sq6 ) {
-		Oplaying(sq6)
-	} else if ( win456_sq5 ) {
-		Oplaying(sq5)
-	} else if ( win456_sq4 ) {
-		Oplaying(sq4)
-	} 
-
-	//Win 7 8 9 
-	else if ( win789_sq9 ) {
-		Oplaying(sq9)
-	} else if ( win789_sq8 ) {
-		Oplaying(sq8)
-	} else if ( win789_sq7 ) {
-		Oplaying(sq7)
-	}
-
-	//Win 1 4 7
-	else if ( win147_sq7 ) {
-		Oplaying(sq7)
-	} else if ( win147_sq4 ) {
-		Oplaying(sq4)
-	} else if ( win147_sq1 ) {
-		Oplaying(sq1)
-	}
-
-	//Win 5 2 8
-	else if ( win528_sq8 ) {
-		Oplaying(sq8)
-	} else if ( win528_sq2 ) {
-		Oplaying(sq2)
-	} else if ( win528_sq5 ) {
-		Oplaying(sq5)
-	} 
-
-	//Win 6 9 3
-	else if ( win693_sq3 ) {
-		Oplaying(sq3)
-	} else if ( win693_sq9 ) {
-		Oplaying(sq9)
-	} else if ( win693_sq6 ) {
-		Oplaying(sq6)
-	}
-
-	//Win 1 5 9
-	else if ( win159_sq9 ) {
-		Oplaying(sq9)
-	} else if ( win159_sq5 ) {
-		Oplaying(sq5)
-	} else if ( win159_sq1 ) {
-		Oplaying(sq1)
-	} 
-
-	//Win 5 7 3
-	else if ( win573_sq3 ) {
-		Oplaying(sq3)
-	} else if ( win573_sq7 ) {
-		Oplaying(sq7)
-	} else if ( win573_sq5 ) {
-		Oplaying(sq5)
-	} 
-
-
-	else {
-		Orandomplay();
-	}
-	checkDraw();
-	checkWin();
-}
-
-
-
-
-
-$('.tile').on('click', function Xplay() {
-
-	validatePlay(this);
-
-	if (playValid) {
-		$(this).removeClass('free');
-		$(this).addClass('played');
-		$(this).addClass('X-play');
-		$(this).html("X");
-
-		checkDraw();
-		checkWin();
-		Oplay();
-
-	} else {
-		alert("That square has already been played. Please choose another square");
-	}
-	
-})
-
-$('#reset-button').on('click', function() {
-	clearBoard();
-})
-})
+    var sq1 = $('#square1');
+    var sq2 = $('#square2');
+    var sq3 = $('#square3');
+    var sq4 = $('#square4');
+    var sq5 = $('#square5');
+    var sq6 = $('#square6');
+    var sq7 = $('#square7');
+    var sq8 = $('#square8');
+    var sq9 = $('#square9');
+
+    var scorex = 0;
+    var scoreo = 0;
+    var playValid = false;
+    var win = false;
+
+    function validatePlay(squareplayed) {
+        if ($(squareplayed).hasClass('free')) {
+            playValid = true;
+        } else {
+            playValid = false;
+        }
+    }
+
+    function clearBoard() {
+        $('.tile').removeClass('played O-play X-play');
+        $('.tile').html('');
+        $('.tile').addClass('free');
+        win = false;
+    }
+
+    function updateScoreDisplay() {
+        $('#score-display').text("[ You: " + scorex + " / Computer: " + scoreo + " ]");
+    }
+
+    function winAlert(player) {
+        win = true;
+        if (player == "X") {
+            scorex++;
+            alert("Yay, you beat the computer! Your score is " + scorex + " Computer score is " + scoreo);
+        } else {
+            scoreo++;
+            alert("You lost! Computer score is " + scoreo + " Your score is " + scorex);
+        }
+        updateScoreDisplay();
+        clearBoard();
+    }
+
+    function checkWin() {
+        var winConditions = [
+            [sq1, sq2, sq3],
+            [sq4, sq5, sq6],
+            [sq7, sq8, sq9],
+            [sq1, sq4, sq7],
+            [sq2, sq5, sq8],
+            [sq3, sq6, sq9],
+            [sq1, sq5, sq9],
+            [sq3, sq5, sq7]
+        ];
+
+        for (var i = 0; i < winConditions.length; i++) {
+            if (winConditions[i][0].hasClass('X-play') && winConditions[i][1].hasClass('X-play') && winConditions[i][2].hasClass('X-play')) {
+                winAlert("X");
+                return true;
+            } else if (winConditions[i][0].hasClass('O-play') && winConditions[i][1].hasClass('O-play') && winConditions[i][2].hasClass('O-play')) {
+                winAlert("O");
+                return true;
+            }
+        }
+        return false;
+    }
+
+    function checkDraw() {
+        if (!$('.tile').hasClass('free') && !win) {
+            alert("Draw! Try playing again!");
+            clearBoard();
+            return true;
+        }
+        return false;
+    }
+
+    function Oplay() {
+        function Oplaying(square) {
+            validatePlay(square);
+            if (playValid) {
+                square.removeClass('free').addClass('played O-play').html("O");
+                if (checkWin()) return;
+                if (checkDraw()) return;
+                return true;
+            }
+            return false;
+        }
+
+        function Orandomplay() {
+            for (var i = 0; i < 10; i++) {
+                var randomNumber = Math.floor((Math.random() * 9) + 1);
+                var randomSquare = $('#square' + randomNumber);
+                if (Oplaying(randomSquare)) {
+                    return true;
+                }
+            }
+            return false;
+        }
+
+        var winConditions = [
+            [[sq1, sq2, sq3], sq3, sq2, sq1],
+            [[sq4, sq5, sq6], sq6, sq5, sq4],
+            [[sq7, sq8, sq9], sq9, sq8, sq7],
+            [[sq1, sq4, sq7], sq7, sq4, sq1],
+            [[sq2, sq5, sq8], sq8, sq2, sq5],
+            [[sq3, sq6, sq9], sq9, sq6, sq3],
+            [[sq1, sq5, sq9], sq9, sq5, sq1],
+            [[sq3, sq5, sq7], sq7, sq5, sq3]
+        ];
+
+        for (var i = 0; i < winConditions.length; i++) {
+            if ((winConditions[i][0][0].hasClass('X-play') && winConditions[i][0][1].hasClass('X-play') && !winConditions[i][1].hasClass('played')) ||
+                (winConditions[i][0][0].hasClass('O-play') && winConditions[i][0][1].hasClass('O-play') && !winConditions[i][1].hasClass('played'))) {
+                if (Oplaying(winConditions[i][1])) return;
+            } else if ((winConditions[i][0][0].hasClass('X-play') && winConditions[i][0][2].hasClass('X-play') && !winConditions[i][2].hasClass('played')) ||
+                (winConditions[i][0][0].hasClass('O-play') && winConditions[i][0][2].hasClass('O-play') && !winConditions[i][2].hasClass('played'))) {
+                if (Oplaying(winConditions[i][2])) return;
+            } else if ((winConditions[i][0][1].hasClass('X-play') && winConditions[i][0][2].hasClass('X-play') && !winConditions[i][3].hasClass('played')) ||
+                (winConditions[i][0][1].hasClass('O-play') && winConditions[i][0][2].hasClass('O-play') && !winConditions[i][3].hasClass('played'))) {
+                if (Oplaying(winConditions[i][3])) return;
+            }
+        }
+
+        Orandomplay();
+        checkWin();
+        checkDraw();
+    }
+
+    $('.tile').on('click', function () {
+        validatePlay(this);
+        if (playValid) {
+            $(this).removeClass('free').addClass('played X-play').html("X");
+            if (!checkWin() && !checkDraw()) {
+                Oplay();
+            }
+        } else {
+            alert("That square has already been played. Please choose another square");
+        }
+    });
+
+    $('#reset-button').on('click', function () {
+        clearBoard();
+    });
+
+    // Initial display of scores
+    updateScoreDisplay();
+
+});
diff --git a/style.css b/style.css
index c273284..4be1c75 100644
--- a/style.css
+++ b/style.css
@@ -12,6 +12,77 @@ body{
     animation: 10s linear 0s normal none infinite animate;
     }
 
+    html {
+        font-family: 'Ubuntu', sans-serif;
+        font-weight: 400;
+        font-size: 14px;
+        color: white;
+    }
+
+    .container {
+        max-width: 400px;
+        margin: 2em auto;
+        text-align: center;
+        line-height: 1.5;
+    }
+
+    h1 {
+        margin: 7em 1em auto;
+    }
+
+    a {
+        text-decoration: none;
+        color: pink;
+        font-weight: 700;
+    }
+
+    span.purple {
+        color: purple;
+        font-weight: 700;
+    }
+
+    span.black {
+        color: black;
+        font-weight: 700;
+    }
+
+    .tic-tac-toe {
+        width: 315px;
+        height: auto;
+        margin: 0 auto;
+
+    }
+
+    .tile {
+        height: 100px;
+        width: 100px;
+        display: inline-block;
+        cursor: pointer;
+
+        position: relative;
+        vertical-align: top;
+
+        padding: 15px;
+        margin-bottom: 5px;
+        box-sizing: border-box;
+
+        color: #fff;
+        font-size: 60px;
+        text-align: center;
+    }
+
+    .free {
+        background-color: #fff;
+    }
+
+    .O-play {
+        background-color: black;
+    }
+
+    .X-play {
+        background-color: purple;
+    }
+
     @-webkit-keyframes animate {
     from {background-position:0 0;}
     to {background-position: 500px 0;}
