digitalinnovationone · iamfabiuu · Nov 27, 2024
diff --git a/index.html b/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Funnel+Display:[email protected]&family=Outfit:[email protected]&family=Press+Start+2P&display=swap"
+      rel="stylesheet"
+    />
+
+    <!-- favicon -->
+    <link
+      rel="shortcut icon"
+      href="./src/assets/favicon/Favicon.ico"
+      type="image/x-icon"
+    />
+
+    <!-- Reset -->
+    <link rel="stylesheet" href="./src/styles/reset.css" />
+
+    <!-- Main -->
+    <link rel="stylesheet" href="./src/styles/main.css" />
+
+    <!-- Buttons -->
+    <link rel="stylesheet" href="./src/styles/buttons.css" />
+
+    <!-- Containers -->
+    <link rel="stylesheet" href="./src/styles/containers_and_frames.css" />
+    <title>Yu-Gi-Yo | Game Edition</title>
+  </head>
+  <body>
+    <audio id="bgm" loop>
+      <source src="./src/assets/audios/egyptian_duel.mp3" type="audio/mp3" />
+    </audio>
+
+    <div class="bg-video">
+      <video class="video" autoplay loop muted>
+        <source src="./src/assets/video/yugi.mp4" type="video/mp4" />
+      </video>
+    </div>
+
+    <div class="container">
+      <div class="container__left framed-golden-2">
+        <div class="score_box frame">
+          <span id="score_points">Win : 0 | Lose : 0</span>
+        </div>
+        <div class="menu_avatar">
+          <img id="card-image" />
+        </div>
+        <div class="card_details frame">
+          <p id="card-name">Select</p>
+          <p id="card-type">Your Champion</p>
+        </div>
+      </div>
+      <div class="container__right">
+        <div class="card-box__container">
+          <div class="card-box framed" id="computer-cards"></div>
+          <div class="card-versus__container debug">
+            <div class="versus-top">
+              <div class="card-infield">
+                <img id="player-field-card" height="180px" width="125px" />
+              </div>
+              <img height="100px" src="./src/assets/icons/millenium2.png" />
+              <div class="card-infield">
+                <img id="computer-field-card" height="180px" width="125px" />
+              </div>
+            </div>
+            <div class="versus-bottom">
+              <button id="next-duel" class="rpgui-button" onclick="resetDuel()">
+                GANHOU
+              </button>
+            </div>
+          </div>
+          <div class="card-box framed" id="player-cards"></div>
+        </div>
+      </div>
+    </div>
+
+    <script src="./src/scripts/engine.js" defer></script>
+  </body>
+</html>
diff --git a/src/scripts/engine.js b/src/scripts/engine.js
@@ -0,0 +1,179 @@
+const state = {
+  score: {
+    playerScore: 0,
+    computerScore: 0,
+    scoreBox: document.getElementById("score_points"),
+  },
+  cardSprites: {
+    avatar: document.getElementById("card-image"),
+    name: document.getElementById("card-name"),
+    type: document.getElementById("card-type"),
+  },
+  fieldCards: {
+    player: document.getElementById("player-field-card"),
+    computer: document.getElementById("computer-field-card"),
+  },
+  actions: {
+    button: document.getElementById("next-duel"),
+  },
+};
+
+const playerSides = {
+  player1: "player-cards",
+  player2: "computer-cards",
+};
+
+const pathImages = "./src/assets/icons/";
+
+const cardData = [
+  {
+    id: 0,
+    name: "Blue Eyes White Dragon",
+    type: "Paper",
+    img: `${pathImages}dragon.png`,
+    WinOf: [1],
+    LoseOf: [2],
+  },
+  {
+    id: 1,
+    name: "Dark Magician",
+    type: "Rock",
+    img: `${pathImages}magician.png`,
+    WinOf: [2],
+    LoseOf: [0],
+  },
+  {
+    id: 2,
+    name: "Exodia",
+    type: "Scissors",
+    img: `${pathImages}exodia.png`,
+    WinOf: [0],
+    LoseOf: [1],
+  },
+];
+
+async function getRandomCards() {
+  const randomIndex = Math.floor(Math.random() * cardData.length);
+  return cardData[randomIndex].id;
+}
+
+async function createCardImage(IdCard, fieldSide) {
+  const cardImage = document.createElement("img");
+  cardImage.setAttribute("height", "100px");
+  cardImage.setAttribute("src", "./src/assets/icons/card-back.png");
+  cardImage.setAttribute("data-id", IdCard);
+  cardImage.classList.add("cards");
+
+  if (fieldSide === playerSides.player1) {
+    cardImage.addEventListener("click", () => {
+      setCardsField(cardImage.getAttribute("data-id"));
+    });
+
+    cardImage.addEventListener("mouseover", () => {
+      drawSelectCard(IdCard);
+    });
+  }
+
+  return cardImage;
+}
+
+async function setCardsField(cardId) {
+  await removeAllCardsImages();
+
+  let computerCardId = await getRandomCards();
+
+  state.fieldCards.player.style.display = "block";
+  state.fieldCards.computer.style.display = "block";
+
+  state.cardSprites.avatar.src = "";
+  state.cardSprites.name.innerText = "";
+  state.cardSprites.type.innerText = "";
+
+  state.fieldCards.player.src = cardData[cardId].img;
+  state.fieldCards.computer.src = cardData[computerCardId].img;
+
+  let duelResults = await checkDuelResults(cardId, computerCardId);
+
+  await updateScore();
+  await drawButton(duelResults);
+}
+
+async function updateScore() {
+  state.score.scoreBox.innerText = `Win: ${state.score.playerScore} | Lose: ${state.score.computerScore}`;
+}
+
+async function drawButton(text) {
+  state.actions.button.innerText = text;
+  state.actions.button.style.display = "block";
+}
+
+async function checkDuelResults(playerCardId, computerCardId) {
+  let duelResults = "Draw";
+  let playerCard = cardData[playerCardId];
+
+  if (playerCard.WinOf.includes(computerCardId)) {
+    duelResults = "Win";
+    await playAudio(duelResults);
+    state.score.playerScore++;
+  }
+
+  if (playerCard.LoseOf.includes(computerCardId)) {
+    duelResults = "Lose";
+    await playAudio(duelResults);
+    state.score.computerScore++;
+  }
+
+  return duelResults;
+}
+
+async function removeAllCardsImages() {
+  let cards = document.querySelector("#computer-cards");
+  let imgElements = cards.querySelectorAll("img");
+  imgElements.forEach((img) => img.remove());
+
+  cards = document.querySelector("#player-cards");
+  imgElements = cards.querySelectorAll("img");
+  imgElements.forEach((img) => img.remove());
+}
+
+async function drawSelectCard(index) {
+  state.cardSprites.avatar.src = cardData[index].img;
+  state.cardSprites.name.innerText = cardData[index].name;
+  state.cardSprites.type.innerText = "Attribute : " + cardData[index].type;
+}
+
+async function drawCards(cardNumbers, fieldSide) {
+  for (let i = 0; i < cardNumbers; i++) {
+    const randomIdCard = await getRandomCards();
+    const cardImage = await createCardImage(randomIdCard, fieldSide);
+
+    console.log(fieldSide);
+
+    document.getElementById(fieldSide).appendChild(cardImage);
+  }
+}
+
+async function resetDuel() {
+  (state.cardSprites.avatar.src = ""),
+    (state.actions.button.style.display = "none");
+
+  state.fieldCards.player.style.display = "none";
+  state.fieldCards.computer.style.display = "none";
+
+  init();
+}
+
+async function playAudio(status) {
+  const audio = new Audio(`./src/assets/audios/${status}.wav`);
+  audio.play();
+}
+
+function init() {
+  drawCards(5, playerSides.player1);
+  drawCards(5, playerSides.player2);
+
+  const bgm = document.getElementById("bgm");
+  bgm.play();
+}
+
+init();