From 288433789e457e986567bab3afd952565069ffa3 Mon Sep 17 00:00:00 2001 From: Bruna Date: Thu, 21 Aug 2025 17:25:23 -0300 Subject: [PATCH 1/5] test --- cor.css | 1 + 1 file changed, 1 insertion(+) create mode 100644 cor.css diff --git a/cor.css b/cor.css new file mode 100644 index 00000000..e8df6434 --- /dev/null +++ b/cor.css @@ -0,0 +1 @@ +lilas From 6856dbb1af6ac0e3d815020a8cbac872f98bafa7 Mon Sep 17 00:00:00 2001 From: Bruna Date: Thu, 21 Aug 2025 17:28:11 -0300 Subject: [PATCH 2/5] test --- cor.css | 1 - index.html | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) delete mode 100644 cor.css diff --git a/cor.css b/cor.css deleted file mode 100644 index e8df6434..00000000 --- a/cor.css +++ /dev/null @@ -1 +0,0 @@ -lilas diff --git a/index.html b/index.html index e69de29b..71f357ef 100644 --- a/index.html +++ b/index.html @@ -0,0 +1 @@ +

cor

\ No newline at end of file From f994352d99588a5fcf2000fd0cefc41f2b352537 Mon Sep 17 00:00:00 2001 From: Bruna Date: Thu, 21 Aug 2025 17:30:14 -0300 Subject: [PATCH 3/5] text2 --- index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 71f357ef..c6606d3a 100644 --- a/index.html +++ b/index.html @@ -1 +1,2 @@ -

cor

\ No newline at end of file +

cor

+

é roxo

\ No newline at end of file From d987099159524adeafa1bda77e8fe937e806050c Mon Sep 17 00:00:00 2001 From: Bruna Date: Sun, 24 Aug 2025 18:19:10 -0300 Subject: [PATCH 4/5] add html --- index.html | 71 ++++++++++++++++++++++- src/scripts/engine.js | 70 ++++++++++++++++++++++ src/styles/main.css | 131 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 270 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index c6606d3a..77bd22d3 100644 --- a/index.html +++ b/index.html @@ -1,2 +1,69 @@ -

cor

-

é roxo

\ No newline at end of file + + + + + + Yu-Gi-Oh Jo-Ken-po + + + + + + + + + + + + + + +
+ +
+ +
+
+
+ Win: 0 | Lose: 0 +
+ +
+ +
+ +
+

a

+

a

+
+
+ +
+
+
+ +
+
+
+ +
+ +
+ +
+
+ +
+ +
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/src/scripts/engine.js b/src/scripts/engine.js index e69de29b..389642f3 100644 --- a/src/scripts/engine.js +++ b/src/scripts/engine.js @@ -0,0 +1,70 @@ +const state ={ //objeto de objetos + score:{ + playerScore: 0, + computerScore: 0, + scoreBox: document.getElementById ("score_points") + }, + cardSprites:{ + avatar: documente.getElementById ("card_image"), + name: documente.getElementById ("card-name"), + type: documente.getElementById ("card_type"), + }, + fieldCards:{ + player: documente.getElementById ("player-field-card"), + computer: documente.getElementById ("computer-field-card"), + }, + actions:{ + button:document.getElementById("next-duel"), + }, +}; + +const playerSides = { + player1: "player-field-card", + computer: "computer-field-card", +} +const pathImages = ".src/assets/icons"; + +const cardData =[ //O pedra, papel ou tesoura + { + 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: "Exodian", + type: "Scissors", + img: `${pathImages}exodia.png`, + WinOf: [0], + LoseOf:[1], + } +] + +async function drawCards(cardNumbers, fieldSide){ + for(let i = 0; i < cardNumbers; i++){ + const randomIdCard = await getRandomCardId(); + const cardImage = await creatCardImage(randomIdcard, fieldSide); + + documente.getElementById(fieldSide).appendChild(cardImage) + } +} + +function init(){ + drawCards(5, "playerSides.player1"); //quantas cartas vai sacar + drawCards(5, "playerSides.computer"); +} + +init(); \ No newline at end of file diff --git a/src/styles/main.css b/src/styles/main.css index e69de29b..262e0145 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -0,0 +1,131 @@ +.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; + align-items: center; + align-items: flex-start; +} + +.container__left{ + width: 35%; + min-width: 300px; + flex-direction: column; + justify-content: space-around; + align-items: center; +} + +.score_box{ + background-color: #fff; + padding: 30px; +} + +.frame{ + border: 3px solid #000; + border-radius: 5px; + height: 77vh;/* isso deixa o fundo laranja em toda area lateral*/ +} + +.card_details{ + background-color: #fff; + border: 3px solid #000; + border-radius: 5px; + padding: 1rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + height: 6rem; + width: 100%; +} + +#card-name{ + font-size: 0.8rem; +} + +#card-type{ + font-size: 1reem; +} + +.container__right{ + width: 65%; + margin-left: 2rem; + display: flex; + flex-direction: column; + height: 100vh; +} + +.card-box__container{ + height: 100vh; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 0.5rem; +} + +.card-versus__container{ + display: flex; + flex-direction: column; + padding-top: 1rem; + height: 300px; +} + +.versus-top, .vesus-bottom{ + display: flex; + align-items: center; + justify-content: center; +} + +.vesus-bottom{ + margin-top: 1rem; +} + +#next-duel{ + display: none; +} + +.card-box__container{ + height: 9rem; + width: 100vw; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + margin-top: 2rem; +} + +.card-infield{ + height: 11.2rem; + width: 8rem; + border-radius: 8px; +} \ No newline at end of file From 5423bb91cce58a22e61770ef4935549495e4584a Mon Sep 17 00:00:00 2001 From: Bruna Date: Tue, 26 Aug 2025 22:42:19 -0300 Subject: [PATCH 5/5] final --- index.html | 11 +++- src/scripts/engine.js | 148 ++++++++++++++++++++++++++++++++++++++++-- src/styles/main.css | 28 +++++++- 3 files changed, 178 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 77bd22d3..4aaff609 100644 --- a/index.html +++ b/index.html @@ -14,10 +14,17 @@ + + + + +
-

a

-

a

+

Selecione

+

Uma carta

diff --git a/src/scripts/engine.js b/src/scripts/engine.js index 389642f3..b37fd8a7 100644 --- a/src/scripts/engine.js +++ b/src/scripts/engine.js @@ -13,16 +13,22 @@ const state ={ //objeto de objetos player: documente.getElementById ("player-field-card"), computer: documente.getElementById ("computer-field-card"), }, + playerSides: { + player1: "player-cards", + player1BOX: document.querySelector("#player-cards"), + computer: "computer-cards", + computerBOX: document.querySelector("#computer-cards") + }, actions:{ button:document.getElementById("next-duel"), }, }; const playerSides = { - player1: "player-field-card", - computer: "computer-field-card", + player1: "player-cards", + computer: "computer-cards", } -const pathImages = ".src/assets/icons"; +const pathImages = "./src/assets/icons"; const cardData =[ //O pedra, papel ou tesoura { @@ -51,7 +57,115 @@ const cardData =[ //O pedra, papel ou tesoura WinOf: [0], LoseOf:[1], } -] +]; + +async function getRandomCardId(){ + const randomIndex = Math.floor(Math.random() * cardData.length); + return cardData [randomIndex].id; +} + +async function creatCardImage(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("card"); + + + if(fieldSide === playerSides.player1){ + cardImage.addEventListener("mouseover", ()=>{ + drawSelectCard(IdCard); + + + cardImage.addEventListener("click", ()=> { + setCardsField(cardImage.getAttribute("data-id")); + }); + }); + } + + + return cardImage; +} + +async function setCardsField(cardId){ + await removeAllCardsImage(); //remove todas a cartas antes + + let computerCardId = await getRandomCardId(); //sorteia carta aleatoria para o computador + + await showhiddenCardFieldImages(true) + + await hiddenCardDetails(); + + state.fieldCards.player.src = cardData[cardId].img; + state.fieldCards.computer.src = cardData[computerCardId].img; + + let duelResults = await checkDuelResults(cardId, computerCardId); //checa os resultados comparando os id's das cartas + + await updateScore(); + await drawButton(duelResults) +} + +async function showhiddenCardFieldImages (value) { + + if (value === true){ + state.fieldCards.player.style.display = "block"; + state.fieldCards.computer.style.display = "block"; + } + + if (value === false){ + state.fieldCards.player.style.display = "none" + state.fieldCards.computer.style.display = "none" + } +} +async function hiddenCardDetails() { + state.cardSprites.avatar.src = ""; + state.cardSprites.name.innerText = ""; + state.cardSprites.type.innerText = ""; +} + +async function drawButton(text){ + state.actions.button.innerText = text + state.actions.button.style.display = "block"; +} + +async function updateScore(){ + state.score.scoreBox.innerText = `Win: ${state.score.playerScore} | Lose ${state.score.computercore}` +} + +async function checkDuelResults(playerCardId, computerCardId){ + let duelResults = "DRAW"; + let playerCard = cardData[playerCardId]; + + if(playerCard.WinOf.includes(computerCardId)){ + duelResults = "WIN" + state.score.playerScore++; + } + + if(playerCard.LoseOf.includes(computerCardId)){ + duelResults = "LOSE"; + state.score.computerScore++; + } + + await playAudio("duelResults"); + + return duelResults +} + +async function removeAllCardsImage(){ + let cards = state.playerSides.computerBOX; //recupera as cartas do jogador + let imgElements = cards.querySelectorAll("img") //pega cada uma das imagens + imgElements.forEach((img) => img.remove()); //remove a carta do jogador + + cards = state.playerSides.playerBOX; + 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++){ @@ -62,9 +176,33 @@ async function drawCards(cardNumbers, fieldSide){ } } +//resetar duelo +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(); +} + +//audio para se perder ou ganhar +async function playAudio(status) { + const audio = new Audio(`./src/assets/audios/${status}.wav`) + audio.play(); +} + function init(){ - drawCards(5, "playerSides.player1"); //quantas cartas vai sacar + showhiddenCardFieldImages(false) + + //quantas cartas vai sacar + drawCards(5, "playerSides.player1"); drawCards(5, "playerSides.computer"); + + //tocar musica de fundo + const bgm = document.getElementById("bgm"); + bgm.play(); } init(); \ No newline at end of file diff --git a/src/styles/main.css b/src/styles/main.css index 262e0145..cb94e823 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -1,3 +1,15 @@ +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; @@ -38,6 +50,7 @@ } .container__left{ + display: flex; width: 35%; min-width: 300px; flex-direction: column; @@ -53,7 +66,7 @@ .frame{ border: 3px solid #000; border-radius: 5px; - height: 77vh;/* isso deixa o fundo laranja em toda area lateral*/ + /* height: 77vh;/* isso deixa o fundo laranja em toda area lateral*/ } .card_details{ @@ -96,8 +109,11 @@ .card-versus__container{ display: flex; flex-direction: column; - padding-top: 1rem; + padding-top: 0.1rem; height: 300px; + justify-items: center; + align-items: center; + align-content: center; } .versus-top, .vesus-bottom{ @@ -128,4 +144,12 @@ height: 11.2rem; width: 8rem; border-radius: 8px; +} + +.card{ + transition: transform 0.2s; +} + +.card:hover{ + transform: scale(1.2); } \ No newline at end of file