diff --git a/index.html b/index.html index e69de29b..fb61dbf7 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + + + + + + + + + Yu-Gi-Yo | Game Edition + + + + +
+ +
+ +
+
+
+ Win : 0 | Lose : 0 +
+
+ +
+
+

Select

+

Your Champion

+
+
+
+
+
+
+
+
+ +
+ +
+ +
+
+
+ +
+
+
+
+
+
+ + + + diff --git a/src/scripts/engine.js b/src/scripts/engine.js index e69de29b..7e26ece1 100644 --- 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(); diff --git a/src/styles/main.css b/src/styles/main.css index e69de29b..c1cd9a1e 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -0,0 +1,145 @@ +body { + cursor: url("../assets/cursor/yugicursor.png"), default; +} + +button, +a, +img:hover, +button:hover, +a:hover { + cursor: url("../assets/cursor/yamiyugicursorGLOW.png"), auto; +} + +.bg-video { + position: absolute; + z-index: -2; + width: 100vw; + height: 100vh; + overflow: hidden; + display: flex; + justify-content: center; +} + +.bg-video .video { + height: 100vh; +} + +.bg-video::after { + content: ""; + position: absolute; + top: 0; + left: 0; + height: 100vh; + width: 100vw; + background: linear-gradient( + 90deg, + rgba(0, 0, 0, 1) 0%, + rgba(0, 0, 0, 0.8) 50%, + rgba(0, 0, 0, 1) 100% + ); +} + +.container { + position: relative; + z-index: 3; + display: flex; + height: 100vh; +} + +.container__left { + width: 35%; + border: 1px solid red; + max-width: 450px; + flex-direction: column; + align-items: center; + justify-content: space-around; + display: flex; +} + +.container__right { + width: 65%; +} + +.score_box { + background-color: #fff; + padding: 30px; +} + +.frame { + border: 3px solid #000; + border-radius: 8px; +} + +.card_details { + background-color: #fff; + padding: 1.6rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + height: 5rem; + width: 85%; +} + +#card-name { + font-size: 0.8rem; +} + +#card-type { + font-size: 1rem; +} + +.card-box__container { + height: 100vh; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 1px; +} + +.card-versus__container { + display: flex; + flex-direction: column; + padding-top: 0.1rem; + height: 300px; + justify-items: center; + align-content: center; +} + +.versus-top, +.versus-bottom { + display: flex; + align-items: center; + justify-content: center; +} + +.versus-bottom { + margin-top: 1rem; +} + +#next-duel { + display: none; +} + +.card-box { + height: 9rem; + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; +} + +.card-infield { + height: 11.2rem; + width: 8rem; + border-radius: 8px; +} + +.cards { + transition: transform 0.2s; +} + +.cards:hover { + transform: scale(1.2); +} diff --git a/src/styles/reset.css b/src/styles/reset.css index 29747c5d..0f9ba689 100644 --- a/src/styles/reset.css +++ b/src/styles/reset.css @@ -1,5 +1,4 @@ * { - box-sizing: border-box; margin: 0; padding: 0; border: 0;