.

shwet46 · Oct 19, 2024 · f316729 · f316729
1 parent e5a29d9
commit f316729
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 36 deletions.
diff --git a/images/bg.mp4 b/images/bg.mp4
diff --git a/index.html b/index.html
@@ -1,20 +1,30 @@
+<!-- index.html -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Planet Sudoku 9x9</title>
+    <title>Planet Sudoku</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
+
+    <video autoplay muted loop id="video-background">
+        <source src="images/bg.mp4" type="video/mp4">
+        Your browser does not support the video tag.
+    </video>
+
+
+    <main id="content">
+
     <div class="nav-bar">
-        <button id="new-game" class="button">NEW GAME</button>
+        <button class="button" id="new-game">NEW GAME</button>
         <h1>PLANET SUDOKU</h1>
-        <button id="solve" class="button">SOLVE</button>
+        <button class="button" id="solve">SOLVE</button>
     </div>
 
     <div class="message">
-        <h2 id="game-status">Anyone wondering where pluto is ? solve this to know by keeping an empty space for pluto :)</h2>
+        <h2 id="game-status">Anyone wondering where pluto is? solve this to know by keeping an empty space for pluto :)</h2>
     </div>
 
     <div class="container">
@@ -23,16 +33,17 @@ <h2 id="game-status">Anyone wondering where pluto is ? solve this to know by kee
         <button id="clear">CLEAR</button>
     </div>
 
-    <!-- Orbit and Pluto -->
     <div class="orbit-container">
         <div class="pluto-container">
             <div class="pluto"></div>
-            <p class="pluto-text">anyone wondering where Pluto is, here it is!</p>
+            <p>anyone wondering where Pluto is, here it is!</p>
         </div>
         <div class="orbit"></div>
     </div>
 
+    </main>
+
     <script src="script.js"></script>
     <script src="sudoku.js"></script>
 </body>
-</html>
+</html>
diff --git a/script.js b/script.js
@@ -1,3 +1,4 @@
+// script.js
 const planets = ['mercury', 'venus', 'earth', 'mars', 'jupiter', 'saturn', 'uranus', 'neptune', 'pluto'];
 let grid = [];
 let finalGrid = [];
@@ -56,7 +57,7 @@ function makeUnique() {
 function solver() {
     let emptySpot = findEmptySpot();
     if (!emptySpot) {
-        return true; 
+        return true;
     }
 
     let [row, col] = emptySpot;
@@ -69,11 +70,11 @@ function solver() {
                 return true;
             }
 
-            grid[row][col] = empty; // backtrack
+            grid[row][col] = empty;
         }
     }
 
-    return false; // no solution exists
+    return false;
 }
 
 function findEmptySpot() {
@@ -84,7 +85,7 @@ function findEmptySpot() {
             }
         }
     }
-    return null; // no empty spots
+    return null;
 }
 
 function setGame() {

diff --git a/style.css b/style.css
@@ -1,19 +1,35 @@
+/* style.css */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
 body {
-    background-image: url('images/bg.jpg');
+   /* background-image: url('images/bg.jpg');
     background-attachment: fixed;
-    background-size: cover;
+    background-size: cover;*/
     align-items: center;
     text-align: center;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     color: #FFFFFF;
 }
 
+#video-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: -1;
+  }
+
+  #content {
+    text-align: center;
+    z-index: 1;
+  }
+
 .nav-bar {
     max-height: 30px;
     max-width: 90vw;
@@ -61,19 +77,6 @@ body {
     padding-top: 25px;
 }
 
-/*#board {
-    width: 450px;
-    height: 450px;
-    display: grid;
-    grid-template-columns: repeat(9, 1fr);
-    grid-template-rows: repeat(9, 1fr);
-    gap: 1px;
-    margin: 20px auto;
-    background-color: #FFFFFF;
-    padding: 2px;
-    border-radius: 8px;
-}*/
-
 #board {
     width: 450px;
     height: 450px;
@@ -82,7 +85,7 @@ body {
     grid-template-rows: repeat(9, 1fr);
     gap: 1px;
     margin: 20px auto;
-    background-color: rgba(0, 0, 15, 0.7);
+   /* background-color: rgba(0, 0, 15, 0.7);*/
     padding: 10px;
     border-radius: 10px;
 }
@@ -105,6 +108,7 @@ body {
     border: 2px solid #FFD369;
     box-shadow: 0 0 10px #FFD369;
 }
+
 .top-left-corner-tile {
     border-top-left-radius: 6px;
 }
@@ -133,11 +137,6 @@ body {
     border-right: 2px solid #FFFFFF;
 }
 
-.tile-selected {
-    border: 2px solid #FFD369;
-    box-shadow: 0 0 10px #FFD369;
-}
-
 #keypad {
     width: 450px;
     height: 100px;
@@ -187,6 +186,14 @@ body {
     width: 100%;
     height: 200px;
     margin-top: 20px;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.5s ease-in-out;
+}
+
+.orbit-container.visible {
+    opacity: 1;
+    visibility: visible;
 }
 
 .orbit {
@@ -215,7 +222,7 @@ body {
 .pluto {
     width: 42px;
     height: 42px;
-    background-image: url('images/dwarf.png'); /* Replace with the correct path */
+    background-image: url('images/dwarf.png');
     background-size: cover;
     background-position: center;
     border-radius: 50%;

diff --git a/sudoku.js b/sudoku.js
@@ -1,3 +1,4 @@
+// sudoku.js
 let errase = document.getElementById('clear');
 let solve = document.getElementById('solve');
 let newG = document.getElementById('new-game');
@@ -95,9 +96,11 @@ function remove() {
 
 function checkWin() {
     if (checkSolution()) {
-        document.getElementById("game-status").innerText = 'YOU WIN!';
+        document.getElementById("game-status").innerText = 'YOU WIN! Scroll down to see where Pluto is!';
+        document.querySelector('.orbit-container').classList.add('visible');
     } else {
         document.getElementById("game-status").innerText = 'TRY AGAIN';
+        document.querySelector('.orbit-container').classList.remove('visible');
     }
 }
 
@@ -121,9 +124,11 @@ function autoSolver() {
                 }
             }
         }
-        document.getElementById("game-status").innerText = 'Scroll down to find something :)';
+        document.getElementById("game-status").innerText = 'Solved! Scroll down to see where Pluto is!';
+        document.querySelector('.orbit-container').classList.add('visible');
     } else {
         document.getElementById("game-status").innerText = 'NO SOLUTION EXISTS!';
+        document.querySelector('.orbit-container').classList.remove('visible');
     }
 }
 
@@ -144,5 +149,6 @@ function newGame() {
         selected.classList.remove("tile-selected");
         selected = null;
     }
-    document.getElementById("game-status").innerText = 'Anyone wondering where pluto is ? solve this to know by keeping an empty space for pluto :)';
+    document.getElementById("game-status").innerText = 'Anyone wondering where pluto is? solve this to know by keeping an empty space for pluto :)';
+    document.querySelector('.orbit-container').classList.remove('visible');
 }