suka izi

public/css/style.css

@@ -0,0 +1,130 @@
+@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
+
+* {
+  font-family: "Oswald", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+}
+
+body {
+  margin: 0px;
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+}
+
+#cards {
+  border: 2px #187092 solid;
+  border-radius: 24px;
+  width: 600px;
+  height: 400px;
+  margin: auto;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.game-header {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+}
+
+.game-header-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+#timer {
+  text-align: center;
+}
+/* 
+#difficulty-select {
+  display: flex;
+  justify-content: center;
+} */
+
+#difficulty-select p {
+  text-align: center;
+  padding: 0px;
+  margin: 0px;
+}
+
+#difficulty-select div {
+  margin-bottom: 24pt;
+}
+
+h1 {
+  text-align: center;
+}
+
+button {
+  width: 120px;
+  padding: 12px;
+  max-height: 48px;
+  border-radius: 45px;
+  background-color: #1bb0eb;
+  color: white;
+  font-weight: 400;
+  font-size: 16px;
+  border: none;
+}
+
+button:hover {
+  cursor: pointer;
+  background-color: #5ecbf7;
+}
+
+.header1 {
+  display: flex;
+  justify-content: space-between;
+  padding: 12px;
+}
+
+h3 {
+  margin: 0px;
+  padding: 0px;
+}
+
+.message-box {
+  background-color: #4ae284;
+  border-radius: 12px;
+  padding: 8px;
+  display: none;
+}
+
+.sub {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.card {
+  width: 33.33%;
+  position: relative;
+  transition: transform 1s;
+  perspective: 1000px;
+  transform-style: preserve-3d;
+}
+
+img {
+  width: 100%
+}
+
+.front_face,
+.back_face {
+  position: absolute;
+  backface-visibility: hidden;
+}
+
+.flip {
+  transform: rotateY(180deg);
+}
+
+
+.front_face {
+  transform: rotateY(180deg);
+}

public/scripts/script.js

@@ -0,0 +1,162 @@
+async function render(pokemon) {  
+    pokemon.forEach((poke) => {
+        let card = document.getElementById("card-template").content.cloneNode(true);
+        card.querySelector(".front_face").src = poke.sprites.other['official-artwork'].front_default;
+        if (pokemon.length == 12) {
+            card.querySelector(".card").style.width = "25%";
+            document.getElementById("cards").style.width = "800px";
+            document.getElementById("cards").style.height = "600px";
+        } else if (pokemon.length == 24) {
+            card.querySelector(".card").style.width = "16.66%";
+            document.getElementById("cards").style.width = "800px";
+            document.getElementById("cards").style.height = "600px";
+        }
+        document.getElementById("cards").appendChild(card);
+    });
+}
+
+async function loadPokemon(difficulty) {
+    let offset = Math.floor((Math.random() * 1000) + 1);
+    let response = await fetch(`https://pokeapi.co/api/v2/pokemon?offset=${offset}&limit=${difficulty}`);
+    let data = await response.json();
+
+    let pokemon = [];
+
+    for (let i = 0; i < data.results.length; i++) {
+        let poke = data.results[i];
+    
+        let pokeResponse = await fetch(`https://pokeapi.co/api/v2/pokemon/${poke.name}`);
+        let pokeObj = await pokeResponse.json();
+    
+        pokemon.push(pokeObj);
+        pokemon.push(pokeObj);
+    }
+
+    return pokemon;
+}
+
+function shuffle(array) {
+    for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
+    }
+}
+
+let gameLocked = false;
+let countdown;
+
+function start(total) {
+    document.getElementById("remaining").innerHTML = total;
+    let first;
+    let second;
+    let correct = 0;
+    let clicks = 0;
+    let remaining = total;
+    let lastCorrect = false;
+
+    // Display initial timer
+    let time = 5 * (total * 1); // seconds
+    let minutes = Math.floor(time / 60);
+    let seconds = time % 60;
+    document.getElementById("timer").innerHTML = `${minutes > 0 ? '' + minutes + 'm ' : ''} ${seconds}s`;
+
+    countdown = setInterval(() => {
+        time--;
+
+        minutes = Math.floor(time / 60);
+        seconds = time % 60;
+
+        document.getElementById("timer").innerHTML = `${minutes > 0 ? '' + minutes + 'm ' : ''} ${seconds}s`;
+
+        if (time <= 0) {
+            clearInterval(countdown);
+            alert("You lost!");
+        }
+    }, 1000);
+
+    document.querySelectorAll(".card").forEach((card) => {
+        card.addEventListener("click", (event) => {
+            if ((first && second) && (first != card && second != card)) return;
+            if (card.querySelector(".status").value == "locked") return;
+            clicks++;
+            document.getElementById("clicks").innerHTML = clicks;
+            card.querySelector(".status").value = "locked";
+            card.classList.toggle('flip');
+
+            if (!first) {
+                first = card;
+            } else {
+                second = card;
+                if (first.querySelector(".front_face").src === card.querySelector(".front_face").src) {
+                    if (lastCorrect) {
+                        time += 5; // add 5 seconds if 2 in a row correct
+                        document.getElementById("message").innerHTML = "+5 Seconds"
+                        document.getElementById("message-box").style.display = "block";
+                        setTimeout(() => { document.getElementById("message-box").style.display = "none" }, 2500);
+                    }
+                    lastCorrect = true;
+                    correct++;
+                    remaining--;
+                    document.getElementById("matched").innerHTML = correct;
+                    document.getElementById("remaining").innerHTML = remaining;
+                    if (correct == total) {
+                        gameLocked = false;
+                        clearInterval(countdown);
+                        setTimeout(() => {
+                            alert(`You won with ${time} seconds remaining. Completed in ${clicks} clicks.`);
+                        }, 750);
+                    }
+                    first = undefined;
+                    second = undefined;
+                } else {
+                    lastCorrect = false;
+                    setTimeout(() => {
+                        first.classList.toggle("flip");
+                        card.classList.toggle("flip");
+                        first.querySelector(".status").value = "unlocked";
+                        card.querySelector(".status").value = "unlocked";
+                        first = undefined;
+                        second = undefined;
+                    }, 750);
+                }
+            }
+        });
+    });
+}
+
+async function select(difficulty) {
+    if (gameLocked) return;
+    else gameLocked = true;
+    let pokemon = await loadPokemon(difficulty).then((pokemon) => (pokemon));
+    shuffle(pokemon);
+    render(pokemon).then(() => {
+        document.getElementById("difficulty-select").style.display = "none";
+        document.getElementById("game").style.display = "block";
+        start(difficulty);
+    });
+}
+
+function reset() {
+    gameLocked = false;
+    clearInterval(countdown);
+    document.getElementById("cards").innerHTML = "";
+    document.getElementById("game").style.display = "none";
+    document.getElementById("difficulty-select").style.display = "block";
+}
+
+let light = true;
+function toggleTheme() {
+    if (light) {
+        document.getElementById("body").style.backgroundColor = "#2f3233";
+        document.querySelectorAll(".theme-text").forEach((e) => {
+            e.style.color = "white";
+        });
+        light = false;
+    } else {
+        document.getElementById("body").style.backgroundColor = "white";
+        document.querySelectorAll(".theme-text").forEach((e) => {
+            e.style.color = "black";
+        });
+        light = true;
+    }
+}