skib

WebGames-master/WebGames-master/games2/rps/app.js

@@ -0,0 +1,69 @@
+let wins = parseInt(localStorage.getItem("wins")) || 0;
+let losses = parseInt(localStorage.getItem("losses")) || 0;
+
+const choices = document.querySelectorAll(".choice");
+const msg = document.querySelector("#msg");
+
+const winsPara = document.querySelector("#wins");
+const lossesPara = document.querySelector("#losses");
+
+// Initialize the UI with saved values
+winsPara.innerText = wins;
+lossesPara.innerText = losses;
+
+const genCompChoice = () => {
+  const options = ["rock", "paper", "scissors"];
+  const randIdx = Math.floor(Math.random() * 3);
+  return options[randIdx];
+};
+
+const drawGame = () => {
+  msg.innerText = "Game was Draw. Play again.";
+  msg.style.backgroundColor = "#081b31";
+};
+
+const showWinner = (userWin, userChoice, compChoice) => {
+  if (userWin) {
+    wins++;
+    localStorage.setItem("wins", wins); // Save wins to localStorage
+    winsPara.innerText = wins;
+    msg.innerText = `You win! Your ${userChoice} beats ${compChoice}`;
+    msg.style.backgroundColor = "green";
+  } else {
+    losses++;
+    localStorage.setItem("losses", losses); // Save losses to localStorage
+    lossesPara.innerText = losses;
+    msg.innerText = `You lost. ${compChoice} beats your ${userChoice}`;
+    msg.style.backgroundColor = "red";
+  }
+};
+
+const playGame = (userChoice) => {
+  //Generate computer choice
+  const compChoice = genCompChoice();
+
+  if (userChoice === compChoice) {
+    //Draw Game
+    drawGame();
+  } else {
+    let userWin = true;
+    if (userChoice === "rock") {
+      //scissors, paper
+      userWin = compChoice === "paper" ? false : true;
+    } else if (userChoice === "paper") {
+      //rock, scissors
+      userWin = compChoice === "scissors" ? false : true;
+    } else {
+      //rock, paper
+      userWin = compChoice === "rock" ? false : true;
+    }
+    showWinner(userWin, userChoice, compChoice);
+  }
+};
+
+choices.forEach((choice) => {
+  choice.addEventListener("click", () => {
+    const userChoice = choice.getAttribute("id");
+    playGame(userChoice);
+  });
+});

index.css

@@ -206,6 +206,7 @@ h1 {
     font-size: 3rem;
     text-transform: uppercase;
     animation: glow 1.5s infinite alternate;
+    text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
 }
 
 @keyframes glow {

index.html

@@ -8,6 +8,59 @@
     <link rel="stylesheet" href="/index.css">
     <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Press+Start+2P&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer">
+    <style>
+        body {
+            background-color: #282c34;
+            color: #ffffff;
+            font-family: 'Orbitron', sans-serif;
+            text-align: center;
+            margin: 0;
+            padding: 0;
+        }
+
+        h1 {
+            font-size: 3rem;
+            margin-top: 20px;
+            text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
+        }
+
+        .button-container {
+            margin-top: 50px;
+        }
+
+        .button {
+            background-color: #61dafb;
+            color: #282c34;
+            border: none;
+            border-radius: 5px;
+            padding: 15px 30px;
+            font-size: 1.2rem;
+            cursor: pointer;
+            margin: 10px;
+            transition: background-color 0.3s;
+        }
+
+        .button:hover {
+            background-color: #21a1f1;
+        }
+
+        .top-left-button {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            width: 60px;
+            height: 60px;
+            background: url('hihihi.jpeg') no-repeat center center;
+            background-size: cover;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+
+        .light-mode .top-left-button {
+            filter: invert(1);
+        }
+    </style>
 </head>
 <body>
     <h1>Moon Gaming</h1>
@@ -38,32 +91,6 @@
             return null;
         }
 
-        // Apply dark or light mode based on cookie
-        function applyDarkMode(enabled) {
-            if (enabled) {
-                document.body.style.setProperty('--background-color', 'var(--background-color-dark)');
-                document.body.style.setProperty('--text-color', 'var(--text-color-dark)');
-                document.body.style.setProperty('--button-bg', 'var(--button-bg-dark)');
-                document.body.style.setProperty('--button-hover-bg', 'var(--button-hover-bg-dark)');
-                document.body.style.setProperty('--button-hover-text', 'var(--button-hover-text-dark)');
-            } else {
-                document.body.style.setProperty('--background-color', 'var(--background-color-light)');
-                document.body.style.setProperty('--text-color', 'var(--text-color-light)');
-                document.body.style.setProperty('--button-bg', 'var(--button-bg-light)');
-                document.body.style.setProperty('--button-hover-bg', 'var(--button-hover-bg-light)');
-                document.body.style.setProperty('--button-hover-text', 'var(--button-hover-text-light)');
-            }
-        }
-
-        // Ensure dark mode is the default
-        if (getCookie('darkMode') === null) {
-            setCookie('darkMode', 'true', 30); // Default to dark mode
-        }
-
-        // Apply saved mode on load
-        const darkModeEnabled = getCookie('darkMode') === 'true';
-        applyDarkMode(darkModeEnabled);
-
         // Clock Functionality
         function updateClock() {
             const now = new Date();

setting.html

@@ -137,10 +137,10 @@
             return null;
         }
 
-        // Dark Mode Toggle
+        // Remove the toggle button from other pages
         const toggleDarkModeButton = document.getElementById('toggleDarkMode');
-        const darkModeEnabled = getCookie('darkMode') === 'true';
 
+        // Ensure this button is the only one controlling dark mode
         function applyDarkMode(enabled) {
             if (enabled) {
                 document.body.style.setProperty('--background-color', '#121212');
@@ -162,6 +162,7 @@
         });
 
         // Apply saved dark mode preference on load
+        const darkModeEnabled = getCookie('darkMode') === 'true';
         applyDarkMode(darkModeEnabled);
 
         // Clear Cookies Button