xo color xmmt

mr-hrr-harry · Mar 26, 2023 · 34168a3 · 34168a3
1 parent b854bb3
commit 34168a3
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 35 deletions.
diff --git a/index.html b/index.html
@@ -12,7 +12,7 @@
 </head>
 <body>
     <header id="hdr">
-        <h1>Horror XO</h1>
+        <h1> - - Horror XO - - </h1>
     </header>
 
     <Section id="main">
@@ -37,11 +37,10 @@ <h1>Horror XO</h1>
         </div> 
         <p id="notator" onclick="start()">
         Start
-        <span id="turn"></span>
         </p>
-        <label id="refresh" onclick="reload()" style="display: none">
+        <div id="refresh" onclick="reload()" style="display: none">
             <i class='bx bx-refresh'></i>
-        </label>
+        </div>
 
     </Section>
 

diff --git a/script.js b/script.js
@@ -1,10 +1,16 @@
+let mssg;
 let tblSec = document.getElementById("tableSec");
 function start(){
     tblSec.removeAttribute("hidden");
     document.getElementById("refresh").removeAttribute("style");
+
+    notor.innerHTML="'s turn";
+    mssg = document.createElement("SPAN");
+    mssg.id = "mssg";
+    mssg.innerHTML = "X";
+    notor.prepend(mssg);
+
     notor.removeAttribute("onclick");
-    notor.innerHTML="Player turn";
-    turn.textContent="X";
     return;
 }
 
@@ -18,17 +24,15 @@ let mat=[[0,0,0],
 var flag=0, ctr=0;
 
 const notor = document.getElementById("notator");
-const turn = document.getElementById("turn");
-var end=0;
 
 function xORo(event){
 
 
-    var id = event.target.id;
-
-    const cell = document.getElementById(id);
-    var row = parseInt(id[0]);
-    var col = parseInt(id[1]);
+    let cellId = event.target.id;
+    console.log(cellId);
+    let cell = document.getElementById(cellId);
+    var row = parseInt(cellId[0]);
+    var col = parseInt(cellId[1]);
 
 
     if(cell.innerHTML==""){
@@ -37,36 +41,43 @@ function xORo(event){
             ctr++;
             cell.innerHTML="X";
             mat[row][col]=1;
-            turn.innerHTML="O's";
+            mssg.innerHTML="O";
+            cell.setAttribute("style", "color:#CA2A2A");
         }
         else{
             flag=0;
             ctr++;
             cell.innerHTML="O";
             mat[row][col]=2;
-            turn.innerHTML="X's";
+            mssg.innerHTML="X";
+            cell.setAttribute("style", "color:#FFFF00");
         }
+
+        if(row==0 && col==0){
+            if(mat[0][0]==mat[0][1]==mat[0][2]
+                || mat[0][0]==mat[1][1]==mat[2][2]
+                    || mat[0][0]==mat[1][0]==mat[2][0]){
+
+                        if(mat[0][0]==1){
+
+                        }
+            }
+        }
+
     }
     else{
-        alert("You cant replace the filled boxes!");
+        alert("You can't replace the filled boxes!");
         return;
     }
 
     console.log("clicked");
     console.log(ctr);
 
-    for(i=0; i<3; i++){
-        for(j=0; j<3; j++){
-            if(mat[i][j]!=0){
-                if(i==0 && j==0){
-                }
-            }
-        }
-    }
 
     if(ctr==9){
-        notor.innerHTML="Oops Match Draw!";
-
+        notor.innerHTML="🤧 Oops Match Draw! Start Over";
+        mssg.innerHTML="";
+        notor.onclick = reload;
     }
 
     console.log(mat);

diff --git a/styles.css b/styles.css
@@ -88,12 +88,10 @@ body > *{
     font-weight: bolder;
 }
 
-td.xAttr{
-    color: #f40000;
-}
-
-#turn{
-    color: #f40000;
+#mssg{
+    font-size: 30px;
+    -webkit-text-stroke: 1px #fff;
+    -webkit-text-fill-color: #e4e4e4;
 }
 
 #notator{
@@ -103,6 +101,7 @@ td.xAttr{
     display: inline-block;
     position: relative;
 
+    color: #fff;
     border: 3px solid #000;
     border-radius: 30px;
     background: linear-gradient(135deg, #CA2A2A, #FFFF00);
@@ -121,13 +120,28 @@ td.xAttr{
 }
 
 #refresh{
-    padding: 20px;
-    margin-left: 30px;
+    padding: 5px;
+    margin: 30px;
+    height: 30px;
+    width: 30px;
     display: inline-block;
+
+    box-shadow: 0 0 10px #000;
+    border-radius: 50%;
 
-    font-size: 20px;
+    font-size: 30px;
     font: 600;
+
     cursor: pointer;
+    transition: 0.5s ease-out;
+}
+#refresh:hover{
+    transform: scale(1.001);
+    color: #fff;
+    box-shadow: 0 0 15px #000;
+
+    background:  linear-gradient(45deg, #FFFF00, #CA2A2A);
+    rotate: 90deg;
 }
 
 /* Footer */