Skip to content

feat: work with code + a little adaptive #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MaestroFront merged 1 commit into from
Aug 27, 2022
Merged

feat: work with code + a little adaptive #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added assets/Blood/blood.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed assets/EndGame/you-died.gif
View file
Open in desktop
Binary file not shown.
Binary file removed assets/EndGame/you-died.png
View file
Open in desktop
Binary file not shown.
6 changes: 4 additions & 2 deletions audio.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const knife = new Audio('./assets/Audio/6802dff441a6d4e (mp3cut.net).mp3');
const rain = document.querySelector('audio');
const rain = new Audio('./assets/Audio/01890.mp3');
const takeCard = document.querySelector(".deck");
const card1 = document.querySelector('.card1');
const card2 = document.querySelector('.card2');
Expand Down Expand Up @@ -27,4 +27,6 @@ playAudio(card3, new Audio('./assets/Audio/monster3.mp3'), .5);
playAudio(card4, new Audio('./assets/Audio/monster4.mp3'), .5);
playAudio(takeCard, new Audio('./assets/Audio/mb_card_deal_08.mp3'), .5);

document.querySelector('.rain').volume = .4;
rain.play();
rain.loop = true;
rain.volume = .5;
59 changes: 42 additions & 17 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,46 +12,71 @@
</head>

<body>
<audio class="rain" src="./assets/Audio/01890.mp3" autoplay loop></audio>
<!-- <audio class="rain" src="./assets/Audio/01890.mp3" autoplay loop></audio> -->
<div class="background">
<div class="water">
<section class="ancient-cards">
<img class="cards card1" src="./assets/Ancients/Cthulthu.png" width="250" height="330" alt="Cthulthu">
<img class="cards card2" src="./assets/Ancients/ShubNiggurath.png" width="250" height="330"
alt="ShubNiggurath">
<img class="cards card3" src="./assets/Ancients/IogSothoth.png" width="250" height="330"
alt="IogSothoth">
<img class="cards card4" src="./assets/Ancients/Azathoth.png" width="250" height="330" alt="Azathoth">
<div class="blood ancients-cards__card1">
<img class="blood-top" src="./assets/Blood/blood.gif" alt="blood">
<img class="cards card1" src="./assets/Ancients/Cthulthu.png" width="230" height="310"
alt="Cthulthu">
</div>
<div class="blood ancients-cards__card2">
<img class="blood-top" src="./assets/Blood/blood.gif" alt="blood">
<img class="cards card2" src="./assets/Ancients/ShubNiggurath.png" width="230" height="310"
alt="ShubNiggurath">
</div>
<div class="blood ancients-cards__card3">
<img class="blood-top" src="./assets/Blood/blood.gif" alt="blood">
<img class="cards card3" src="./assets/Ancients/IogSothoth.png" width="230" height="310"
alt="IogSothoth">
</div>
<div class="blood ancients-cards__card4">
<img class="blood-top" src="./assets/Blood/blood.gif" alt="blood">
<img class="cards card4" src="./assets/Ancients/Azathoth.png" width="230" height="310"
alt="Azathoth">
</div>

</section>

<section class="difficulty-level">
<div class="difficulty very-easy">Очень легкий</div>
<div class="difficulty easy">Легкий</div>
<div class="difficulty normal">Обычный</div>
<div class="difficulty hard">Высокий</div>
<div class="difficulty very-hard">Очень высокий</div>
<div class="difficulty very-easy">Очень легкий
<img class="blood-top" src="./assets/Blood/blood.gif" alt="blood">
</div>
<div class="difficulty easy">Легкий
<img class="blood-top" src="./assets/Blood/blood.gif" alt="blood">
</div>
<div class="difficulty normal">Обычный
<img class="blood-top" src="./assets/Blood/blood.gif" alt="blood">
</div>
<div class="difficulty hard">Высокий
<img class="blood-top" src="./assets/Blood/blood.gif" alt="blood">
</div>
<div class="difficulty very-hard">Очень высокий
<img class="blood-top" src="./assets/Blood/blood.gif" alt="blood">
</div>
</section>

<section class="deck-of-cards">
<div class="working-stages">
<div class="stages">
<div class="stages__title">Первая стадия</div>
<div class="stages__title first-stage">Первая стадия</div>
<div class="stages__quantity">
<input class="first green first-green" type="text" value="0">
<input class="first brown first-brown" type="text" value="0">
<input class="first blue first-blue" type="text" value="0">
</div>
</div>
<div class="stages">
<div class="stages__title">Вторая стадия</div>
<div class="stages__title second-stage">Вторая стадия</div>
<div class="stages__quantity">
<input class="second green second-green" type="text" value="0">
<input class="second brown second-brown" type="text" value="0">
<input class="second blue second-blue" type="text" value="0">
</div>
</div>
<div class="stages">
<div class="stages__title">Третья стадия</div>
<div class="stages__title third-stage">Третья стадия</div>
<div class="stages__quantity">
<input class="third green third-green" type="text" value="0">
<input class="third brown third-brown" type="text" value="0">
Expand All @@ -61,8 +86,8 @@
</div>
<div class="working">
<div class="inverted-deck">
<img class="deck" src="./assets/mythicCardBackground.png" alt="mythicCardBackground" width="200"
height="280">
<img class="deck" src="./assets/mythicCardBackground.png" alt="mythicCardBackground" width="220"
height="330">
</div>
<div class="random-card"></div>
</div>
Expand Down
64 changes: 32 additions & 32 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,28 @@ import cardsDataBrown from './data/mythicCards/brown/indexBrown.js';
import cardsDataBlue from './data/mythicCards/blue/indexBlue.js';

// ---------------------------------------
const cards = document.querySelectorAll('.ancient-cards img');
const cards = document.querySelectorAll('.blood');
const deck = document.querySelector('.deck-of-cards');
const difficulty = document.querySelectorAll(".difficulty");

cards.forEach(card => {
card.addEventListener('click', () => {
cards.forEach(card => card.classList.remove('fire-border'));
card.classList.add('fire-border');
leaveUsedCard(card);
})
});

difficulty.forEach(item => {
item.addEventListener('click', () => {
difficulty.forEach(item => item.classList.remove('fire-border'));
item.classList.add('fire-border');
leaveUsedDifficulty(item);
deck.classList.add('show');
})
});

// ---------------------------------------
const card1 = document.querySelector('.card1');
const card2 = document.querySelector('.card2');
const card3 = document.querySelector('.card3');
const card4 = document.querySelector('.card4');
const card1 = document.querySelector('.ancients-cards__card1');
const card2 = document.querySelector('.ancients-cards__card2');
const card3 = document.querySelector('.ancients-cards__card3');
const card4 = document.querySelector('.ancients-cards__card4');

const veryEasy = document.querySelector('.very-easy');
const easy = document.querySelector('.easy');
Expand Down Expand Up @@ -66,21 +64,6 @@ function cardsColorValue(value_1, value_2, value_3, value_4, value_5, value_6, v
return value_1 + +value_2 + +value_3 + +value_4 + +value_5 + +value_6 + +value_7 + +value_8 + +value_9;
};

function sumValues(card) {
if (card === 'card1') {
return cardsColorValue(0, 2, 2, 1, 3, 0, 3, 4, 0);
}
if (card === 'card2') {
return cardsColorValue(1, 2, 1, 3, 2, 1, 2, 4, 0);
}
if (card === 'card3') {
return cardsColorValue(0, 2, 1, 2, 3, 1, 3, 4, 0);
}
if (card === 'card4') {
return cardsColorValue(1, 2, 1, 2, 3, 1, 2, 4, 0);
}
};

let allCards = cardsDataGreen.concat(cardsDataBrown, cardsDataBlue);

function createArrayWithColorAndDifficult(color, difficulty) {
Expand Down Expand Up @@ -188,6 +171,22 @@ function divisionToCircles(cards, array) {
array3 = sumValuesCirclesOneStage(green_3, brown_3, blue_3);
};

function leaveUsedDifficulty(dif) {
difficulty.forEach(item => {
item.classList.add('hide');
});
dif.classList.remove('hide');
dif.classList.add('show');
}

function leaveUsedCard(card) {
cards.forEach(item => {
item.classList.add('hide');
});
card.classList.remove('hide');
card.classList.add('show');
}

card1.addEventListener('click', () => {
document.querySelector('.difficulty-level').classList.add('show');
cardsColorValue(0, 2, 2, 1, 3, 0, 3, 4, 0);
Expand Down Expand Up @@ -316,6 +315,7 @@ document.querySelector('.deck').addEventListener('click', () => {
}
array1.shift();
} else if (array1.length === 0 && array2.length > 0) {
document.querySelector('.first-stage').classList.add('through');
randomCard.style.background = `url(${array2[0].cardFace}) center/cover`;
if (array2[0].color === 'green') {
secondGreenValue.value--;
Expand All @@ -328,6 +328,7 @@ document.querySelector('.deck').addEventListener('click', () => {
}
array2.shift();
} else if (array2.length === 0 && array3.length > 0) {
document.querySelector('.second-stage').classList.add('through');
randomCard.style.background = `url(${array3[0].cardFace}) center/cover`;
if (array3[0].color === 'green') {
thirdGreenValue.value--;
Expand All @@ -341,18 +342,17 @@ document.querySelector('.deck').addEventListener('click', () => {
array3.shift();
}
if (thirdGreenValue.value == 0 && thirdBrownValue.value == 0 && thirdBlueValue.value == 0) {
document.querySelector('.third-stage').classList.add('through');
document.querySelector('.deck').classList.add('hide');
function hideBlock() {
document.querySelector('.difficulty-level').classList.remove('show');
document.querySelector('.deck-of-cards').classList.remove('show');
}
function reloadPage() {
location.reload();
}
setTimeout(hideBlock, 5000);
cards.forEach(card => {
card.classList.remove('fire-border');
});

difficulty.forEach(item => {
item.classList.remove('fire-border');
});
setTimeout(reloadPage, 10000);
new Audio('./assets/Audio/film-ujasov-kino.mp3').play();
}
});
});
Loading