diff --git a/audio.js b/audio.js index 383fb2cc..60fb802f 100644 --- a/audio.js +++ b/audio.js @@ -17,7 +17,7 @@ function playAudio(item, audio, volume) { difficulty.forEach(item => { item.addEventListener("click", () => { knife.play(); - knife.volume = .1; + knife.volume = .5; }); }); diff --git a/index.html b/index.html index 38972350..1997918d 100644 --- a/index.html +++ b/index.html @@ -86,8 +86,8 @@
- mythicCardBackground + mythicCardBackground
diff --git a/index.js b/index.js index 47a780eb..09bc7657 100644 --- a/index.js +++ b/index.js @@ -1,26 +1,13 @@ +//----------IMPORT import cardsDataGreen from './data/mythicCards/green/indexGreen.js'; import cardsDataBrown from './data/mythicCards/brown/indexBrown.js'; import cardsDataBlue from './data/mythicCards/blue/indexBlue.js'; +//---------------- -// --------------------------------------- +//----------VARIABLES const cards = document.querySelectorAll('.blood'); const deck = document.querySelector('.deck-of-cards'); const difficulty = document.querySelectorAll(".difficulty"); - -cards.forEach(card => { - card.addEventListener('click', () => { - leaveUsedCard(card); - }) -}); - -difficulty.forEach(item => { - item.addEventListener('click', () => { - leaveUsedDifficulty(item); - deck.classList.add('show'); - }) -}); - -// --------------------------------------- const card1 = document.querySelector('.ancients-cards__card1'); const card2 = document.querySelector('.ancients-cards__card2'); const card3 = document.querySelector('.ancients-cards__card3'); @@ -46,12 +33,69 @@ const thirdBlueValue = document.querySelector('.third-blue'); const randomCard = document.querySelector('.random-card'); -function shuffle(array) { +let allCards = cardsDataGreen.concat(cardsDataBrown, cardsDataBlue); +let arrayEasyNormalGreen = createArrayWithColorAndDifficult('green', 'easy').concat(createArrayWithColorAndDifficult('green', 'normal')); +let arrayEasyNormalBrown = createArrayWithColorAndDifficult('brown', 'easy').concat(createArrayWithColorAndDifficult('brown', 'normal')); +let arrayEasyNormalBlue = createArrayWithColorAndDifficult('blue', 'easy').concat(createArrayWithColorAndDifficult('blue', 'normal')); +let arrayHardNormalGreen = createArrayWithColorAndDifficult('green', 'hard').concat(createArrayWithColorAndDifficult('green', 'normal')); +let arrayHardNormalBrown = createArrayWithColorAndDifficult('brown', 'hard').concat(createArrayWithColorAndDifficult('brown', 'normal')); +let arrayHardNormalBlue = createArrayWithColorAndDifficult('blue', 'hard').concat(createArrayWithColorAndDifficult('blue', 'normal')); + +let green_values_1 = []; +let brown_values_1 = []; +let blue_values_1 = []; + +let green_values_2 = []; +let brown_values_2 = []; +let blue_values_2 = []; + +let green_values_3 = []; +let brown_values_3 = []; +let blue_values_3 = []; + +let array1 = []; +let array2 = []; +let array3 = []; +//---------------- + +function leaveUsedCard() { + cards.forEach(card => { + card.addEventListener('click', () => { + leaveCard(card); + }); + }); +}; +leaveUsedCard(); + +function showDifficulties() { + document.querySelector('.difficulty-level').classList.add('show'); +} + +function showBlockOfDificultiesOnClick() { + cards.forEach(card => { + card.addEventListener('click', () => { + showDifficulties() + }); + }); +}; +showBlockOfDificultiesOnClick(); + +function leaveUsedDifficulty() { + difficulty.forEach(item => { + item.addEventListener('click', () => { + leaveDifficulty(item); + deck.classList.add('show'); + }) + }); +}; +leaveUsedDifficulty(); + +function shuffleArray(array) { array.sort(() => Math.random() - 0.5); return array; }; -function cardsColorValue(value_1, value_2, value_3, value_4, value_5, value_6, value_7, value_8, value_9) { +function appointValuesToEveryStage(value_1, value_2, value_3, value_4, value_5, value_6, value_7, value_8, value_9) { document.querySelector('.first-green').value = value_1; document.querySelector('.first-brown').value = value_2; document.querySelector('.first-blue').value = value_3; @@ -64,8 +108,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; }; -let allCards = cardsDataGreen.concat(cardsDataBrown, cardsDataBlue); - function createArrayWithColorAndDifficult(color, difficulty) { let array = []; for (let i = 0; i < allCards.length; i++) { @@ -76,17 +118,9 @@ function createArrayWithColorAndDifficult(color, difficulty) { return array; } -let arrayEasyNormalGreen = createArrayWithColorAndDifficult('green', 'easy').concat(createArrayWithColorAndDifficult('green', 'normal')); -let arrayEasyNormalBrown = createArrayWithColorAndDifficult('brown', 'easy').concat(createArrayWithColorAndDifficult('brown', 'normal')); -let arrayEasyNormalBlue = createArrayWithColorAndDifficult('blue', 'easy').concat(createArrayWithColorAndDifficult('blue', 'normal')); - -let arrayHardNormalGreen = createArrayWithColorAndDifficult('green', 'hard').concat(createArrayWithColorAndDifficult('green', 'normal')); -let arrayHardNormalBrown = createArrayWithColorAndDifficult('brown', 'hard').concat(createArrayWithColorAndDifficult('brown', 'normal')); -let arrayHardNormalBlue = createArrayWithColorAndDifficult('blue', 'hard').concat(createArrayWithColorAndDifficult('blue', 'normal')); - -function pushFromArray_1(dif, stage, value, array, dif_1) { +function pushFromArray(dif, stage, value, array, dif_1) { if (dif == 'simple') { - shuffle(array); + shuffleArray(array); for (let i = 0; i < value; i++) { stage.push(array[0]); array.shift(); @@ -98,7 +132,7 @@ function pushFromArray_1(dif, stage, value, array, dif_1) { stage.push(array[0]); array.shift(); } else if (array[0].difficulty === 'normal') { - shuffle(array); + shuffleArray(array); stage.push(array[0]); array.shift(); } @@ -111,31 +145,19 @@ function createArrayOfStage(dif, arr_1, arr_2, arr_3, val_1, val_2, val_3, val_4 let stage_4 = []; let stage_5 = []; let stage_6 = []; let stage_7 = []; let stage_8 = []; let stage_9 = []; - pushFromArray_1(dif, stage_1, val_1, arr_1, dif_1); - pushFromArray_1(dif, stage_2, val_2, arr_2, dif_1); - pushFromArray_1(dif, stage_3, val_3, arr_3, dif_1); - pushFromArray_1(dif, stage_4, val_4, arr_1, dif_1); - pushFromArray_1(dif, stage_5, val_5, arr_2, dif_1); - pushFromArray_1(dif, stage_6, val_6, arr_3, dif_1); - pushFromArray_1(dif, stage_7, val_7, arr_1, dif_1); - pushFromArray_1(dif, stage_8, val_8, arr_2, dif_1); - pushFromArray_1(dif, stage_9, val_9, arr_3, dif_1); - - return shuffle(stage_1.concat(stage_2, stage_3, stage_4, stage_5, stage_6, stage_7, stage_8, stage_9)); + pushFromArray(dif, stage_1, val_1, arr_1, dif_1); + pushFromArray(dif, stage_2, val_2, arr_2, dif_1); + pushFromArray(dif, stage_3, val_3, arr_3, dif_1); + pushFromArray(dif, stage_4, val_4, arr_1, dif_1); + pushFromArray(dif, stage_5, val_5, arr_2, dif_1); + pushFromArray(dif, stage_6, val_6, arr_3, dif_1); + pushFromArray(dif, stage_7, val_7, arr_1, dif_1); + pushFromArray(dif, stage_8, val_8, arr_2, dif_1); + pushFromArray(dif, stage_9, val_9, arr_3, dif_1); + + return shuffleArray(stage_1.concat(stage_2, stage_3, stage_4, stage_5, stage_6, stage_7, stage_8, stage_9)); }; -let green_1 = []; -let brown_1 = []; -let blue_1 = []; - -let green_2 = []; -let brown_2 = []; -let blue_2 = []; - -let green_3 = []; -let brown_3 = []; -let blue_3 = []; - function splitArrayOfCards(cards, array, color, value) { for (let i = 0; i < cards.length; i++) { if (cards[i].color === color) { @@ -149,47 +171,76 @@ function splitArrayOfCards(cards, array, color, value) { cards.splice(myIndex, 1); } } - return shuffle(array); + return shuffleArray(array); }; -let array1 = []; -let array2 = []; -let array3 = []; +function combineValuesOfOneStage(value_1, value_2, value_3) { + return value_1.concat(value_2, value_3); +} function divisionToCircles(cards, array) { - splitArrayOfCards(cards, green_1, 'green', array[0]); - splitArrayOfCards(cards, brown_1, 'brown', array[1]); - splitArrayOfCards(cards, blue_1, 'blue', array[2]); - splitArrayOfCards(cards, green_2, 'green', array[3]); - splitArrayOfCards(cards, brown_2, 'brown', array[4]); - splitArrayOfCards(cards, blue_2, 'blue', array[5]); - splitArrayOfCards(cards, green_3, 'green', array[6]); - splitArrayOfCards(cards, brown_3, 'brown', array[7]); - splitArrayOfCards(cards, blue_3, 'blue', array[8]); - array1 = sumValuesCirclesOneStage(green_1, brown_1, blue_1); - array2 = sumValuesCirclesOneStage(green_2, brown_2, blue_2); - array3 = sumValuesCirclesOneStage(green_3, brown_3, blue_3); + splitArrayOfCards(cards, green_values_1, 'green', array[0]); + splitArrayOfCards(cards, brown_values_1, 'brown', array[1]); + splitArrayOfCards(cards, blue_values_1, 'blue', array[2]); + splitArrayOfCards(cards, green_values_2, 'green', array[3]); + splitArrayOfCards(cards, brown_values_2, 'brown', array[4]); + splitArrayOfCards(cards, blue_values_2, 'blue', array[5]); + splitArrayOfCards(cards, green_values_3, 'green', array[6]); + splitArrayOfCards(cards, brown_values_3, 'brown', array[7]); + splitArrayOfCards(cards, blue_values_3, 'blue', array[8]); + array1 = combineValuesOfOneStage(green_values_1, brown_values_1, blue_values_1); + array2 = combineValuesOfOneStage(green_values_2, brown_values_2, blue_values_2); + array3 = combineValuesOfOneStage(green_values_3, brown_values_3, blue_values_3); }; -function leaveUsedDifficulty(dif) { +function leaveDifficulty(dif) { difficulty.forEach(item => { item.classList.add('hide'); }); dif.classList.remove('hide'); dif.classList.add('show'); -} +}; -function leaveUsedCard(card) { +function leaveCard(card) { cards.forEach(item => { item.classList.add('hide'); }); card.classList.remove('hide'); card.classList.add('show'); -} +}; + +function addClass(item, className) { + item.classList.add(className); +}; + +function changeBackground(card) { + randomCard.style.background = `url(${card[0].cardFace}) center/cover`; +}; + +function hideBlocksThroughTime() { + document.querySelector('.difficulty-level').classList.remove('show'); + document.querySelector('.deck-of-cards').classList.remove('show'); +}; + +function reloadPage() { + location.reload(); +}; + +function reduceTheNumberOfValues(array, value_1, value_2, value_3) { + if (array[0].color === 'green') { + value_1.value--; + } + if (array[0].color === 'brown') { + value_2.value--; + } + if (array[0].color === 'blue') { + value_3.value--; + } + array.shift(); +}; card1.addEventListener('click', () => { - document.querySelector('.difficulty-level').classList.add('show'); - cardsColorValue(0, 2, 2, 1, 3, 0, 3, 4, 0); + appointValuesToEveryStage(0, 2, 2, 1, 3, 0, 3, 4, 0); let array = [0, 2, 2, 1, 3, 0, 3, 4, 0]; veryEasy.addEventListener('click', () => { let cards = createArrayOfStage('complex', arrayEasyNormalGreen, arrayEasyNormalBrown, arrayEasyNormalBlue, 0, 2, 2, 1, 3, 0, 3, 4, 0, 'easy'); @@ -215,8 +266,7 @@ card1.addEventListener('click', () => { }); card2.addEventListener('click', () => { - document.querySelector('.difficulty-level').classList.add('show'); - cardsColorValue(1, 2, 1, 3, 2, 1, 2, 4, 0); + appointValuesToEveryStage(1, 2, 1, 3, 2, 1, 2, 4, 0); let array = [1, 2, 1, 3, 2, 1, 2, 4, 0]; veryEasy.addEventListener('click', () => { let cards = createArrayOfStage('complex', arrayEasyNormalGreen, arrayEasyNormalBrown, arrayEasyNormalBlue, 1, 2, 1, 3, 2, 1, 2, 4, 0, 'easy'); @@ -241,8 +291,7 @@ card2.addEventListener('click', () => { }); card3.addEventListener('click', () => { - document.querySelector('.difficulty-level').classList.add('show'); - cardsColorValue(0, 2, 1, 2, 3, 1, 3, 4, 0); + appointValuesToEveryStage(0, 2, 1, 2, 3, 1, 3, 4, 0); let array = [0, 2, 1, 2, 3, 1, 3, 4, 0]; veryEasy.addEventListener('click', () => { let cards = createArrayOfStage('complex', arrayEasyNormalGreen, arrayEasyNormalBrown, arrayEasyNormalBlue, 0, 2, 1, 2, 3, 1, 3, 4, 0, 'easy'); @@ -267,23 +316,22 @@ card3.addEventListener('click', () => { }); card4.addEventListener('click', () => { - document.querySelector('.difficulty-level').classList.add('show'); - cardsColorValue(1, 2, 1, 2, 3, 1, 2, 4, 0); + appointValuesToEveryStage(1, 2, 1, 2, 3, 1, 2, 4, 0); let array = [1, 2, 1, 2, 3, 1, 2, 4, 0]; veryEasy.addEventListener('click', () => { let cards = createArrayOfStage('complex', arrayEasyNormalGreen, arrayEasyNormalBrown, arrayEasyNormalBlue, 1, 2, 1, 2, 3, 1, 2, 4, 0, 'easy'); divisionToCircles(cards, array); }) easy.addEventListener('click', () => { - let cards = createArrayOfStage(arrayEasyNormalGreen, arrayEasyNormalBrown, arrayEasyNormalBlue, 1, 2, 1, 2, 3, 1, 2, 4, 0); + let cards = createArrayOfStage('simple', arrayEasyNormalGreen, arrayEasyNormalBrown, arrayEasyNormalBlue, 1, 2, 1, 2, 3, 1, 2, 4, 0); divisionToCircles(cards, array); }) normal.addEventListener('click', () => { - let cards = createArrayOfStage(cardsDataGreen, cardsDataBrown, cardsDataBlue, 1, 2, 1, 2, 3, 1, 2, 4, 0); + let cards = createArrayOfStage('simple', cardsDataGreen, cardsDataBrown, cardsDataBlue, 1, 2, 1, 2, 3, 1, 2, 4, 0); divisionToCircles(cards, array); }) hard.addEventListener('click', () => { - let cards = createArrayOfStage(arrayHardNormalGreen, arrayHardNormalBrown, arrayHardNormalBlue, 1, 2, 1, 2, 3, 1, 2, 4, 0); + let cards = createArrayOfStage('simple', arrayHardNormalGreen, arrayHardNormalBrown, arrayHardNormalBlue, 1, 2, 1, 2, 3, 1, 2, 4, 0); divisionToCircles(cards, array); }) veryHard.addEventListener('click', () => { @@ -292,67 +340,31 @@ card4.addEventListener('click', () => { }) }); -function sumValuesCirclesOneStage(circle_1, circle_2, circle_3) { - return circle_1.concat(circle_2, circle_3); -} - document.querySelector('.deck').addEventListener('click', () => { - - randomCard.classList.add('show'); - shuffle(array1); - shuffle(array2); - shuffle(array3); + addClass(randomCard, 'show'); + shuffleArray(array1); + shuffleArray(array2); + shuffleArray(array3); if (array1.length > 0) { - randomCard.style.background = `url(${array1[0].cardFace}) center/cover`; - if (array1[0].color === 'green') { - firstGreenValue.value--; - } - if (array1[0].color === 'brown') { - firstBrownValue.value--; - } - if (array1[0].color === 'blue') { - firstBlueValue.value--; - } - array1.shift(); + changeBackground(array1); + reduceTheNumberOfValues(array1, firstGreenValue, firstBrownValue, firstBlueValue); } 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--; - } - if (array2[0].color === 'brown') { - secondBrownValue.value--; - } - if (array2[0].color === 'blue') { - secondBlueValue.value--; - } - array2.shift(); + addClass(document.querySelector('.first-stage'), 'through'); + changeBackground(array2); + reduceTheNumberOfValues(array2, secondGreenValue, secondBrownValue, secondBlueValue); } 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--; - } - if (array3[0].color === 'brown') { - thirdBrownValue.value--; - } - if (array3[0].color === 'blue') { - thirdBlueValue.value--; - } - array3.shift(); + addClass(document.querySelector('.second-stage'), 'through'); + changeBackground(array3); + reduceTheNumberOfValues(array3, thirdGreenValue, thirdBrownValue, thirdBlueValue); } 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); + addClass(document.querySelector('.third-stage'), 'through'); + addClass(document.querySelector('.deck'), 'hide'); + setTimeout(hideBlocksThroughTime, 5000); setTimeout(reloadPage, 10000); new Audio('./assets/Audio/film-ujasov-kino.mp3').play(); } -}); \ No newline at end of file +}); + +console.log('- На выбор предоставляется минимум четыре карты древнего - 20 баллов; \n- На выбор пять уровней сложности - 25 баллов; \n- Карты замешиваются согласно правилам игры - 40 баллов; \n- Есть трекер текущего состояния колоды - 20 баллов.'); +console.log('Моя оценка: 100 баллов.') \ No newline at end of file diff --git a/style.css b/style.css index afefcae3..c5cbd783 100644 --- a/style.css +++ b/style.css @@ -216,8 +216,8 @@ body { .random-card { position: relative; z-index: 1; - width: 200px; - height: 280px; + width: 210px; + height: 320px; border-radius: 30px; opacity: 0.8; transition-duration: 0.5s; diff --git a/style.scss b/style.scss index df16eb79..f154a5a2 100644 --- a/style.scss +++ b/style.scss @@ -223,8 +223,8 @@ body { .random-card { position: relative; z-index: 1; - width: 200px; - height: 280px; + width: 210px; + height: 320px; border-radius: 30px; opacity: .8; transition-duration: .5s;