diff --git a/README.md b/README.md index d7892eab..5d8e8de8 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ +Deploy: https://spectacular-cactus-16993b.netlify.app + # Eldritch Horror Codejam ## Описание проекта diff --git a/assets/Audio/01890.mp3 b/assets/Audio/01890.mp3 new file mode 100644 index 00000000..4a68e4ab Binary files /dev/null and b/assets/Audio/01890.mp3 differ diff --git a/assets/Audio/6802dff441a6d4e (mp3cut.net).mp3 b/assets/Audio/6802dff441a6d4e (mp3cut.net).mp3 new file mode 100644 index 00000000..56fe79b0 Binary files /dev/null and b/assets/Audio/6802dff441a6d4e (mp3cut.net).mp3 differ diff --git a/assets/Audio/film-ujasov-kino.mp3 b/assets/Audio/film-ujasov-kino.mp3 new file mode 100644 index 00000000..176c2bc5 Binary files /dev/null and b/assets/Audio/film-ujasov-kino.mp3 differ diff --git a/assets/Audio/mb_card_deal_08.mp3 b/assets/Audio/mb_card_deal_08.mp3 new file mode 100644 index 00000000..1d914683 Binary files /dev/null and b/assets/Audio/mb_card_deal_08.mp3 differ diff --git a/assets/Audio/monster1.mp3 b/assets/Audio/monster1.mp3 new file mode 100644 index 00000000..712235b1 Binary files /dev/null and b/assets/Audio/monster1.mp3 differ diff --git a/assets/Audio/monster2.mp3 b/assets/Audio/monster2.mp3 new file mode 100644 index 00000000..dfc7c5c6 Binary files /dev/null and b/assets/Audio/monster2.mp3 differ diff --git a/assets/Audio/monster3.mp3 b/assets/Audio/monster3.mp3 new file mode 100644 index 00000000..ca2bce34 Binary files /dev/null and b/assets/Audio/monster3.mp3 differ diff --git a/assets/Audio/monster4.mp3 b/assets/Audio/monster4.mp3 new file mode 100644 index 00000000..c3806eff Binary files /dev/null and b/assets/Audio/monster4.mp3 differ diff --git a/assets/Background/background.jpg b/assets/Background/background.jpg new file mode 100644 index 00000000..f71734d3 Binary files /dev/null and b/assets/Background/background.jpg differ diff --git a/assets/Blood/blood.gif b/assets/Blood/blood.gif new file mode 100644 index 00000000..51a17941 Binary files /dev/null and b/assets/Blood/blood.gif differ diff --git a/assets/Favicon/FavIcon.png b/assets/Favicon/FavIcon.png new file mode 100644 index 00000000..d1e96a4a Binary files /dev/null and b/assets/Favicon/FavIcon.png differ diff --git a/assets/Font/ofont.ru_Old Horror Films.ttf b/assets/Font/ofont.ru_Old Horror Films.ttf new file mode 100644 index 00000000..c4dbb5e2 Binary files /dev/null and b/assets/Font/ofont.ru_Old Horror Films.ttf differ diff --git a/assets/Gif/fire-65.gif b/assets/Gif/fire-65.gif new file mode 100644 index 00000000..c616680c Binary files /dev/null and b/assets/Gif/fire-65.gif differ diff --git a/assets/Gif/you-died.gif b/assets/Gif/you-died.gif new file mode 100644 index 00000000..9cb4395a Binary files /dev/null and b/assets/Gif/you-died.gif differ diff --git a/assets/Rain/water.png b/assets/Rain/water.png new file mode 100644 index 00000000..9b8de338 Binary files /dev/null and b/assets/Rain/water.png differ diff --git a/assets/Scroll/scroll.png b/assets/Scroll/scroll.png new file mode 100644 index 00000000..34346ca4 Binary files /dev/null and b/assets/Scroll/scroll.png differ diff --git a/assets/Stages/blue.png b/assets/Stages/blue.png new file mode 100644 index 00000000..277b1bb4 Binary files /dev/null and b/assets/Stages/blue.png differ diff --git a/assets/Stages/brown.png b/assets/Stages/brown.png new file mode 100644 index 00000000..f8b989fb Binary files /dev/null and b/assets/Stages/brown.png differ diff --git a/assets/Stages/green.png b/assets/Stages/green.png new file mode 100644 index 00000000..12626c01 Binary files /dev/null and b/assets/Stages/green.png differ diff --git a/assets/home.png b/assets/home.png deleted file mode 100644 index cdc7792d..00000000 Binary files a/assets/home.png and /dev/null differ diff --git a/audio.js b/audio.js new file mode 100644 index 00000000..60fb802f --- /dev/null +++ b/audio.js @@ -0,0 +1,32 @@ +const knife = new Audio('./assets/Audio/6802dff441a6d4e (mp3cut.net).mp3'); +const rain = new Audio('./assets/Audio/01890.mp3'); +const takeCard = document.querySelector(".deck"); +const card1 = document.querySelector('.card1'); +const card2 = document.querySelector('.card2'); +const card3 = document.querySelector('.card3'); +const card4 = document.querySelector('.card4'); +const difficulty = document.querySelectorAll(".difficulty"); + +function playAudio(item, audio, volume) { + item.addEventListener("click", () => { + audio.play(); + }); + audio.volume = volume; +} + +difficulty.forEach(item => { + item.addEventListener("click", () => { + knife.play(); + knife.volume = .5; + }); +}); + +playAudio(card1, new Audio('./assets/Audio/monster1.mp3'), .5); +playAudio(card2, new Audio('./assets/Audio/monster2.mp3'), .5); +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); + +rain.play(); +rain.loop = true; +rain.volume = .5; \ No newline at end of file diff --git a/data/ancients.js b/data/ancients.js index e19926c1..b4a5cd11 100644 --- a/data/ancients.js +++ b/data/ancients.js @@ -1,5 +1,3 @@ -import Ancients from '../assets/Ancients/index' - const ancientsData = [ { id: 'azathoth', @@ -81,6 +79,4 @@ const ancientsData = [ brownCards: 4, }, }, -] - -export default ancientsData \ No newline at end of file +]; \ No newline at end of file diff --git a/data/difficulties.js b/data/difficulties.js index 34102556..e4687573 100644 --- a/data/difficulties.js +++ b/data/difficulties.js @@ -11,6 +11,4 @@ const difficulties = [ id: 'hard', name: 'Высокая' }, -] - -export default difficulties \ No newline at end of file +] \ No newline at end of file diff --git a/data/mythicCards/blue/index.js b/data/mythicCards/blue/index.js deleted file mode 100644 index 6439ca19..00000000 --- a/data/mythicCards/blue/index.js +++ /dev/null @@ -1,78 +0,0 @@ -import blueCardsAssets from '../../../assets/MythicCards/blue'; - -const cardsData = [ - { - id: 'blue1', - cardFace: blueCardsAssets.blue1, - difficulty: 'hard', - color:'blue' - }, - { - id: 'blue2', - cardFace: blueCardsAssets.blue2, - difficulty: 'hard', - color:'blue' - }, - { - id: 'blue3', - cardFace: blueCardsAssets.blue3, - difficulty: 'easy', - color:'blue' - }, - { - id: 'blue4', - cardFace: blueCardsAssets.blue4, - difficulty: 'easy', - color:'blue' - }, - { - id: 'blue5', - cardFace: blueCardsAssets.blue5, - difficulty: 'easy', - color:'blue' - }, - { - id: 'blue6', - cardFace: blueCardsAssets.blue6, - difficulty: 'hard', - color:'blue' - }, - { - id: 'blue7', - cardFace: blueCardsAssets.blue7, - difficulty: 'normal', - color:'blue' - }, - { - id: 'blue8', - cardFace: blueCardsAssets.blue8, - difficulty: 'hard', - color:'blue' - }, - { - id: 'blue9', - cardFace: blueCardsAssets.blue9, - difficulty: 'normal', - color:'blue' - }, - { - id: 'blue10', - cardFace: blueCardsAssets.blue10, - difficulty: 'easy', - color:'blue' - }, - { - id: 'blue11', - cardFace: blueCardsAssets.blue11, - difficulty: 'normal', - color:'blue' - }, - { - id: 'blue12', - cardFace: blueCardsAssets.blue12, - difficulty: 'normal', - color:'blue' - }, -] - -export default cardsData \ No newline at end of file diff --git a/data/mythicCards/blue/indexBlue.js b/data/mythicCards/blue/indexBlue.js new file mode 100644 index 00000000..84a05b2c --- /dev/null +++ b/data/mythicCards/blue/indexBlue.js @@ -0,0 +1,88 @@ +const cardsDataBlue = [ + { + number: 1, + id: 'blue1', + cardFace: './assets/MythicCards/blue/blue1.png', + difficulty: 'hard', + color:'blue' + }, + { + number: 2, + id: 'blue2', + cardFace: './assets/MythicCards/blue/blue2.png', + difficulty: 'hard', + color:'blue' + }, + { + number: 3, + id: 'blue3', + cardFace: './assets/MythicCards/blue/blue3.png', + difficulty: 'easy', + color:'blue' + }, + { + number: 4, + id: 'blue4', + cardFace: './assets/MythicCards/blue/blue4.png', + difficulty: 'easy', + color:'blue' + }, + { + number: 5, + id: 'blue5', + cardFace: './assets/MythicCards/blue/blue5.png', + difficulty: 'easy', + color:'blue' + }, + { + number: 6, + id: 'blue6', + cardFace: './assets/MythicCards/blue/blue6.png', + difficulty: 'hard', + color:'blue' + }, + { + number: 7, + id: 'blue7', + cardFace: './assets/MythicCards/blue/blue7.png', + difficulty: 'normal', + color:'blue' + }, + { + number: 8, + id: 'blue8', + cardFace: './assets/MythicCards/blue/blue8.png', + difficulty: 'hard', + color:'blue' + }, + { + number: 9, + id: 'blue9', + cardFace: './assets/MythicCards/blue/blue9.png', + difficulty: 'normal', + color:'blue' + }, + { + number: 10, + id: 'blue10', + cardFace: './assets/MythicCards/blue/blue10.png', + difficulty: 'easy', + color:'blue' + }, + { + number: 11, + id: 'blue11', + cardFace: './assets/MythicCards/blue/blue11.png', + difficulty: 'normal', + color:'blue' + }, + { + number: 12, + id: 'blue12', + cardFace: './assets/MythicCards/blue/blue12.png', + difficulty: 'normal', + color:'blue' + }, +] + +export default cardsDataBlue; \ No newline at end of file diff --git a/data/mythicCards/brown/index.js b/data/mythicCards/brown/index.js deleted file mode 100644 index 0bce7522..00000000 --- a/data/mythicCards/brown/index.js +++ /dev/null @@ -1,132 +0,0 @@ -import brownCardsAssets from '../../../assets/MythicCards/brown'; - -const cardsData = [ - { - id: 'brown1', - cardFace: brownCardsAssets.brown1, - difficulty: 'normal', - color:'brown' - }, - { - id: 'brown2', - cardFace: brownCardsAssets.brown2, - difficulty: 'normal', - color:'brown' - }, - { - id: 'brown3', - cardFace: brownCardsAssets.brown3, - difficulty: 'normal', - color:'brown' - }, - { - id: 'brown4', - cardFace: brownCardsAssets.brown4, - difficulty: 'normal', - color:'brown' - }, - { - id: 'brown5', - cardFace: brownCardsAssets.brown5, - difficulty: 'normal', - color:'brown' - }, - { - id: 'brown6', - cardFace: brownCardsAssets.brown6, - difficulty: 'hard', - color:'brown' - }, - { - id: 'brown7', - cardFace: brownCardsAssets.brown7, - difficulty: 'hard', - color:'brown' - }, - { - id: 'brown8', - cardFace: brownCardsAssets.brown8, - difficulty: 'hard', - color:'brown' - }, - { - id: 'brown9', - cardFace: brownCardsAssets.brown9, - difficulty: 'hard', - color:'brown' - }, - { - id: 'brown10', - cardFace: brownCardsAssets.brown10, - difficulty: 'hard', - color:'brown' - }, - { - id: 'brown11', - cardFace: brownCardsAssets.brown11, - difficulty: 'easy', - color:'brown' - }, - { - id: 'brown12', - cardFace: brownCardsAssets.brown12, - difficulty: 'easy', - color:'brown' - }, - { - id: 'brown13', - cardFace: brownCardsAssets.brown13, - difficulty: 'easy', - color:'brown' - }, - { - id: 'brown14', - cardFace: brownCardsAssets.brown14, - difficulty: 'easy', - color:'brown' - }, - { - id: 'brown15', - cardFace: brownCardsAssets.brown15, - difficulty: 'normal', - color:'brown' - }, - { - id: 'brown16', - cardFace: brownCardsAssets.brown16, - difficulty: 'normal', - color:'brown' - }, - { - id: 'brown17', - cardFace: brownCardsAssets.brown17, - difficulty: 'normal', - color:'brown' - }, - { - id: 'brown18', - cardFace: brownCardsAssets.brown18, - difficulty: 'normal', - color:'brown' - }, - { - id: 'brown19', - cardFace: brownCardsAssets.brown19, - difficulty: 'normal', - color:'brown' - }, - { - id: 'brown20', - cardFace: brownCardsAssets.brown20, - difficulty: 'normal', - color:'brown' - }, - { - id: 'brown21', - cardFace: brownCardsAssets.brown21, - difficulty: 'easy', - color:'brown' - }, -] - -export default cardsData \ No newline at end of file diff --git a/data/mythicCards/brown/indexBrown.js b/data/mythicCards/brown/indexBrown.js new file mode 100644 index 00000000..2013f803 --- /dev/null +++ b/data/mythicCards/brown/indexBrown.js @@ -0,0 +1,151 @@ +const cardsDataBrown = [ + { + number: 1, + id: 'brown1', + cardFace: './assets/MythicCards/brown/brown1.png', + difficulty: 'normal', + color:'brown' + }, + { + number: 2, + id: 'brown2', + cardFace: './assets/MythicCards/brown/brown2.png', + difficulty: 'normal', + color:'brown' + }, + { + number: 3, + id: 'brown3', + cardFace: './assets/MythicCards/brown/brown3.png', + difficulty: 'normal', + color:'brown' + }, + { + number: 4, + id: 'brown4', + cardFace: './assets/MythicCards/brown/brown4.png', + difficulty: 'normal', + color:'brown' + }, + { + number: 5, + id: 'brown5', + cardFace: './assets/MythicCards/brown/brown5.png', + difficulty: 'normal', + color:'brown' + }, + { + number: 6, + id: 'brown6', + cardFace: './assets/MythicCards/brown/brown6.png', + difficulty: 'hard', + color:'brown' + }, + { + number: 7, + id: 'brown7', + cardFace: './assets/MythicCards/brown/brown7.png', + difficulty: 'hard', + color:'brown' + }, + { + number: 8, + id: 'brown8', + cardFace: './assets/MythicCards/brown/brown8.png', + difficulty: 'hard', + color:'brown' + }, + { + number: 9, + id: 'brown9', + cardFace: './assets/MythicCards/brown/brown9.png', + difficulty: 'hard', + color:'brown' + }, + { + number: 10, + id: 'brown10', + cardFace: './assets/MythicCards/brown/brown10.png', + difficulty: 'hard', + color:'brown' + }, + { + number: 11, + id: 'brown11', + cardFace: './assets/MythicCards/brown/brown11.png', + difficulty: 'easy', + color:'brown' + }, + { + number: 12, + id: 'brown12', + cardFace: './assets/MythicCards/brown/brown12.png', + difficulty: 'easy', + color:'brown' + }, + { + number: 13, + id: 'brown13', + cardFace: './assets/MythicCards/brown/brown13.png', + difficulty: 'easy', + color:'brown' + }, + { + number: 14, + id: 'brown14', + cardFace: './assets/MythicCards/brown/brown14.png', + difficulty: 'easy', + color:'brown' + }, + { + number: 15, + id: 'brown15', + cardFace: './assets/MythicCards/brown/brown15.png', + difficulty: 'normal', + color:'brown' + }, + { + number: 16, + id: 'brown16', + cardFace: './assets/MythicCards/brown/brown16.png', + difficulty: 'normal', + color:'brown' + }, + { + number: 17, + id: 'brown17', + cardFace: './assets/MythicCards/brown/brown17.png', + difficulty: 'normal', + color:'brown' + }, + { + number: 18, + id: 'brown18', + cardFace: './assets/MythicCards/brown/brown18.png', + difficulty: 'normal', + color:'brown' + }, + { + number: 19, + id: 'brown19', + cardFace: './assets/MythicCards/brown/brown19.png', + difficulty: 'normal', + color:'brown' + }, + { + number: 20, + id: 'brown20', + cardFace: './assets/MythicCards/brown/brown20.png', + difficulty: 'normal', + color:'brown' + }, + { + number: 21, + id: 'brown21', + cardFace: './assets/MythicCards/brown/brown21.png', + difficulty: 'easy', + color:'brown' + }, +] + +export default cardsDataBrown; \ No newline at end of file diff --git a/data/mythicCards/green/index.js b/data/mythicCards/green/index.js deleted file mode 100644 index cca6e9df..00000000 --- a/data/mythicCards/green/index.js +++ /dev/null @@ -1,114 +0,0 @@ -import greenCardsAssets from '../../../assets/MythicCards/green'; - -const cardsData = [ - { - id: 'green1', - cardFace: greenCardsAssets.green1, - difficulty: 'easy', - color:'green' - }, - { - id: 'green2', - cardFace: greenCardsAssets.green2, - difficulty: 'hard', - color:'green' - }, - { - id: 'green3', - cardFace: greenCardsAssets.green3, - difficulty: 'hard', - color:'green' - }, - { - id: 'green4', - cardFace: greenCardsAssets.green4, - difficulty: 'hard', - color:'green' - }, - { - id: 'green5', - cardFace: greenCardsAssets.green5, - difficulty: 'hard', - color:'green' - }, - { - id: 'green6', - cardFace: greenCardsAssets.green6, - difficulty: 'hard', - color:'green' - }, - { - id: 'green7', - cardFace: greenCardsAssets.green7, - difficulty: 'normal', - color:'green' - }, - { - id: 'green8', - cardFace: greenCardsAssets.green8, - difficulty: 'normal', - color:'green' - }, - { - id: 'green9', - cardFace: greenCardsAssets.green9, - difficulty: 'normal', - color:'green' - }, - { - id: 'green10', - cardFace: greenCardsAssets.green10, - difficulty: 'normal', - color:'green' - }, - { - id: 'green11', - cardFace: greenCardsAssets.green11, - difficulty: 'normal', - color:'green' - }, - { - id: 'green12', - cardFace: greenCardsAssets.green12, - difficulty: 'easy', - color:'green' - }, - { - id: 'green13', - cardFace: greenCardsAssets.green13, - difficulty: 'normal', - color:'green' - }, - { - id: 'green14', - cardFace: greenCardsAssets.green14, - difficulty: 'normal', - color:'green' - }, - { - id: 'green15', - cardFace: greenCardsAssets.green15, - difficulty: 'normal', - color:'green' - }, - { - id: 'green16', - cardFace: greenCardsAssets.green16, - difficulty: 'easy', - color:'green' - }, - { - id: 'green17', - cardFace: greenCardsAssets.green17, - difficulty: 'easy', - color:'green' - }, - { - id: 'green18', - cardFace: greenCardsAssets.green18, - difficulty: 'easy', - color:'green' - }, -] - -export default cardsData \ No newline at end of file diff --git a/data/mythicCards/green/indexGreen.js b/data/mythicCards/green/indexGreen.js new file mode 100644 index 00000000..dab9c4d4 --- /dev/null +++ b/data/mythicCards/green/indexGreen.js @@ -0,0 +1,130 @@ +const cardsDataGreen = [ + { + number: 1, + id: 'green1', + cardFace: './assets/MythicCards/green/green1.png', + difficulty: 'easy', + color:'green' + }, + { + number: 2, + id: 'green2', + cardFace: './assets/MythicCards/green/green2.png', + difficulty: 'hard', + color:'green' + }, + { + number: 3, + id: 'green3', + cardFace: './assets/MythicCards/green/green3.png', + difficulty: 'hard', + color:'green' + }, + { + number: 4, + id: 'green4', + cardFace: './assets/MythicCards/green/green4.png', + difficulty: 'hard', + color:'green' + }, + { + number: 5, + id: 'green5', + cardFace: './assets/MythicCards/green/green5.png', + difficulty: 'hard', + color:'green' + }, + { + number: 6, + id: 'green6', + cardFace: './assets/MythicCards/green/green6.png', + difficulty: 'hard', + color:'green' + }, + { + number: 7, + id: 'green7', + cardFace: './assets/MythicCards/green/green7.png', + difficulty: 'normal', + color:'green' + }, + { + number: 8, + id: 'green8', + cardFace: './assets/MythicCards/green/green8.png', + difficulty: 'normal', + color:'green' + }, + { + number: 9, + id: 'green9', + cardFace: './assets/MythicCards/green/green9.png', + difficulty: 'normal', + color:'green' + }, + { + number: 10, + id: 'green10', + cardFace: './assets/MythicCards/green/green10.png', + difficulty: 'normal', + color:'green' + }, + { + number: 11, + id: 'green11', + cardFace: './assets/MythicCards/green/green11.png', + difficulty: 'normal', + color:'green' + }, + { + number: 12, + id: 'green12', + cardFace: './assets/MythicCards/green/green12.png', + difficulty: 'easy', + color:'green' + }, + { + number: 13, + id: 'green13', + cardFace: './assets/MythicCards/green/green13.png', + difficulty: 'normal', + color:'green' + }, + { + number: 14, + id: 'green14', + cardFace: './assets/MythicCards/green/green14.png', + difficulty: 'normal', + color:'green' + }, + { + number: 15, + id: 'green15', + cardFace: './assets/MythicCards/green/green15.png', + difficulty: 'normal', + color:'green' + }, + { + number: 16, + id: 'green16', + cardFace: './assets/MythicCards/green/green16.png', + difficulty: 'easy', + color:'green' + }, + { + number: 17, + id: 'green17', + cardFace: './assets/MythicCards/green/green17.png', + difficulty: 'easy', + color:'green' + }, + { + number: 18, + id: 'green18', + cardFace: './assets/MythicCards/green/green18.png', + difficulty: 'easy', + color:'green' + }, +] + +export default cardsDataGreen; \ No newline at end of file diff --git a/data/mythicCards/index.js b/data/mythicCards/index.js index f11a5592..f698acc4 100644 --- a/data/mythicCards/index.js +++ b/data/mythicCards/index.js @@ -1,6 +1,6 @@ import brownCards from './brown'; import blueCards from './blue'; -import greenCards from './green'; +import greenCards from './green/indexGreen'; export { brownCards, diff --git a/index.html b/index.html new file mode 100644 index 00000000..1997918d --- /dev/null +++ b/index.html @@ -0,0 +1,104 @@ + + + + + + + + + + + Codejam + + + + +
+
+
+
+ blood + Cthulthu +
+
+ blood + ShubNiggurath +
+
+ blood + IogSothoth +
+
+ blood + Azathoth +
+ +
+ +
+
Очень легкий + blood +
+
Легкий + blood +
+
Обычный + blood +
+
Высокий + blood +
+
Очень высокий + blood +
+
+ +
+
+
+
Первая стадия
+
+ + + +
+
+
+
Вторая стадия
+
+ + + +
+
+
+
Третья стадия
+
+ + + +
+
+
+
+
+ mythicCardBackground +
+
+
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 00000000..09bc7657 --- /dev/null +++ b/index.js @@ -0,0 +1,370 @@ +//----------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"); +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'); +const normal = document.querySelector('.normal'); +const hard = document.querySelector('.hard'); +const veryHard = document.querySelector('.very-hard'); + +const firstGreenValue = document.querySelector('.first-green'); +const firstBrownValue = document.querySelector('.first-brown'); +const firstBlueValue = document.querySelector('.first-blue'); + +const secondGreenValue = document.querySelector('.second-green'); +const secondBrownValue = document.querySelector('.second-brown'); +const secondBlueValue = document.querySelector('.second-blue'); + +const thirdGreenValue = document.querySelector('.third-green'); +const thirdBrownValue = document.querySelector('.third-brown'); +const thirdBlueValue = document.querySelector('.third-blue'); + +const randomCard = document.querySelector('.random-card'); + +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 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; + document.querySelector('.second-green').value = value_4; + document.querySelector('.second-brown').value = value_5; + document.querySelector('.second-blue').value = value_6; + document.querySelector('.third-green').value = value_7; + document.querySelector('.third-brown').value = value_8; + document.querySelector('.third-blue').value = value_9; + return value_1 + +value_2 + +value_3 + +value_4 + +value_5 + +value_6 + +value_7 + +value_8 + +value_9; +}; + +function createArrayWithColorAndDifficult(color, difficulty) { + let array = []; + for (let i = 0; i < allCards.length; i++) { + if (allCards[i].color === color && allCards[i].difficulty === difficulty) { + array.push(allCards[i]); + } + } + return array; +} + +function pushFromArray(dif, stage, value, array, dif_1) { + if (dif == 'simple') { + shuffleArray(array); + for (let i = 0; i < value; i++) { + stage.push(array[0]); + array.shift(); + } + } + if (dif == 'complex') { + for (let i = 0; i < value; i++) { + if (array[0].difficulty === dif_1) { + stage.push(array[0]); + array.shift(); + } else if (array[0].difficulty === 'normal') { + shuffleArray(array); + stage.push(array[0]); + array.shift(); + } + } + } +} + +function createArrayOfStage(dif, arr_1, arr_2, arr_3, val_1, val_2, val_3, val_4, val_5, val_6, val_7, val_8, val_9, dif_1) { + let stage_1 = []; let stage_2 = []; let stage_3 = []; + let stage_4 = []; let stage_5 = []; let stage_6 = []; + let stage_7 = []; let stage_8 = []; let 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)); +}; + +function splitArrayOfCards(cards, array, color, value) { + for (let i = 0; i < cards.length; i++) { + if (cards[i].color === color) { + array.push(cards[i]); + } + } + array.length = value; + for (let i = 0; i < cards.length; i++) { + let myIndex = cards.indexOf(array[i]); + if (myIndex !== -1) { + cards.splice(myIndex, 1); + } + } + return shuffleArray(array); +}; + +function combineValuesOfOneStage(value_1, value_2, value_3) { + return value_1.concat(value_2, value_3); +} + +function divisionToCircles(cards, array) { + 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 leaveDifficulty(dif) { + difficulty.forEach(item => { + item.classList.add('hide'); + }); + dif.classList.remove('hide'); + dif.classList.add('show'); +}; + +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', () => { + 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'); + divisionToCircles(cards, array); + }) + easy.addEventListener('click', () => { + let cards = createArrayOfStage('simple', arrayEasyNormalGreen, arrayEasyNormalBrown, arrayEasyNormalBlue, 0, 2, 2, 1, 3, 0, 3, 4, 0); + divisionToCircles(cards, array); + }) + normal.addEventListener('click', () => { + let cards = createArrayOfStage('simple', cardsDataGreen, cardsDataBrown, cardsDataBlue, 0, 2, 2, 1, 3, 0, 3, 4, 0); + divisionToCircles(cards, array); + }) + hard.addEventListener('click', () => { + let cards = createArrayOfStage('simple', arrayHardNormalGreen, arrayHardNormalBrown, arrayHardNormalBlue, 0, 2, 2, 1, 3, 0, 3, 4, 0); + divisionToCircles(cards, array); + }) + veryHard.addEventListener('click', () => { + let cards = createArrayOfStage('complex', arrayHardNormalGreen, arrayHardNormalBrown, arrayHardNormalBlue, 0, 2, 2, 1, 3, 0, 3, 4, 0, 'hard'); + divisionToCircles(cards, array); + }) + +}); + +card2.addEventListener('click', () => { + 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'); + divisionToCircles(cards, array); + }) + easy.addEventListener('click', () => { + let cards = createArrayOfStage('simple', arrayEasyNormalGreen, arrayEasyNormalBrown, arrayEasyNormalBlue, 1, 2, 1, 3, 2, 1, 2, 4, 0); + divisionToCircles(cards, array); + }) + normal.addEventListener('click', () => { + let cards = createArrayOfStage('simple', cardsDataGreen, cardsDataBrown, cardsDataBlue, 1, 2, 1, 3, 2, 1, 2, 4, 0); + divisionToCircles(cards, array); + }) + hard.addEventListener('click', () => { + let cards = createArrayOfStage('simple', arrayHardNormalGreen, arrayHardNormalBrown, arrayHardNormalBlue, 1, 2, 1, 3, 2, 1, 2, 4, 0); + divisionToCircles(cards, array); + }) + veryHard.addEventListener('click', () => { + let cards = createArrayOfStage('complex', arrayHardNormalGreen, arrayHardNormalBrown, arrayHardNormalBlue, 1, 2, 1, 3, 2, 1, 2, 4, 0, 'hard'); + divisionToCircles(cards, array); + }) +}); + +card3.addEventListener('click', () => { + 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'); + divisionToCircles(cards, array); + }) + easy.addEventListener('click', () => { + let cards = createArrayOfStage('simple', arrayEasyNormalGreen, arrayEasyNormalBrown, arrayEasyNormalBlue, 0, 2, 1, 2, 3, 1, 3, 4, 0); + divisionToCircles(cards, array); + }) + normal.addEventListener('click', () => { + let cards = createArrayOfStage('simple', cardsDataGreen, cardsDataBrown, cardsDataBlue, 0, 2, 1, 2, 3, 1, 3, 4, 0); + divisionToCircles(cards, array); + }) + hard.addEventListener('click', () => { + let cards = createArrayOfStage('simple', arrayHardNormalGreen, arrayHardNormalBrown, arrayHardNormalBlue, 0, 2, 1, 2, 3, 1, 3, 4, 0); + divisionToCircles(cards, array); + }) + veryHard.addEventListener('click', () => { + let cards = createArrayOfStage('complex', arrayHardNormalGreen, arrayHardNormalBrown, arrayHardNormalBlue, 0, 2, 1, 2, 3, 1, 3, 4, 0, 'hard'); + divisionToCircles(cards, array); + }) +}); + +card4.addEventListener('click', () => { + 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('simple', arrayEasyNormalGreen, arrayEasyNormalBrown, arrayEasyNormalBlue, 1, 2, 1, 2, 3, 1, 2, 4, 0); + divisionToCircles(cards, array); + }) + normal.addEventListener('click', () => { + 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('simple', arrayHardNormalGreen, arrayHardNormalBrown, arrayHardNormalBlue, 1, 2, 1, 2, 3, 1, 2, 4, 0); + divisionToCircles(cards, array); + }) + veryHard.addEventListener('click', () => { + let cards = createArrayOfStage('complex', arrayHardNormalGreen, arrayHardNormalBrown, arrayHardNormalBlue, 1, 2, 1, 2, 3, 1, 2, 4, 0, 'hard'); + divisionToCircles(cards, array); + }) +}); + +document.querySelector('.deck').addEventListener('click', () => { + addClass(randomCard, 'show'); + shuffleArray(array1); + shuffleArray(array2); + shuffleArray(array3); + if (array1.length > 0) { + changeBackground(array1); + reduceTheNumberOfValues(array1, firstGreenValue, firstBrownValue, firstBlueValue); + } else if (array1.length === 0 && array2.length > 0) { + addClass(document.querySelector('.first-stage'), 'through'); + changeBackground(array2); + reduceTheNumberOfValues(array2, secondGreenValue, secondBrownValue, secondBlueValue); + } else if (array2.length === 0 && array3.length > 0) { + addClass(document.querySelector('.second-stage'), 'through'); + changeBackground(array3); + reduceTheNumberOfValues(array3, thirdGreenValue, thirdBrownValue, thirdBlueValue); + } + if (thirdGreenValue.value == 0 && thirdBrownValue.value == 0 && thirdBlueValue.value == 0) { + 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(); + } +}); + +console.log('- На выбор предоставляется минимум четыре карты древнего - 20 баллов; \n- На выбор пять уровней сложности - 25 баллов; \n- Карты замешиваются согласно правилам игры - 40 баллов; \n- Есть трекер текущего состояния колоды - 20 баллов.'); +console.log('Моя оценка: 100 баллов.') \ No newline at end of file diff --git a/nullstyle.css b/nullstyle.css new file mode 100644 index 00000000..c5162e06 --- /dev/null +++ b/nullstyle.css @@ -0,0 +1,44 @@ +* { + padding: 0; + margin: 0; + border: 0; } + +*, *:before, *:after { + box-sizing: border-box; } + +:focus, :active { + outline: none; } + +a:focus, a:active { + outline: none; } + +nav, footer, header, aside { + display: block; } + +html, body { + height: 100%; + width: 100%; + font-size: 100%; + line-height: 1; + font-size: 14px;} + +input, button, textarea { + font-family: inherit; } + +button { + cursor: pointer; } + +a, a:visited { + text-decoration: none; } + +a:hover { + text-decoration: none; } + +ul li { + list-style: none; } + +img { + vertical-align: top; } + +h1, h2, h3, h4, h5, h6 { + font-weight: inherit; } diff --git a/style.css b/style.css new file mode 100644 index 00000000..c5cbd783 --- /dev/null +++ b/style.css @@ -0,0 +1,314 @@ +@font-face { + font-family: "Horror"; + src: url(./assets/Font/ofont.ru_Old\ Horror\ Films.ttf); +} +body { + position: relative; + margin: 0; + height: 100%; + overflow: hidden; + font-family: "Horror"; + font-weight: 400; +} + +.background { + position: relative; + min-height: 100%; + transition: 0.5s; + background-image: url(./assets/Background/background.jpg); + background-position: 50% 100%; + background-size: cover; +} + +.water { + display: flex; + justify-content: space-between; + position: relative; + width: 100%; + height: 100vh; + background-image: url(./assets/Rain/water.png); + -webkit-animation: water 0.4s linear infinite; + animation: water 0.4s linear infinite; + padding: 30px; +} + +@-webkit-keyframes water { + 0% { + background-position: -10% -100%; + } + 100% { + background-position: 10% 100%; + } +} + +@keyframes water { + 0% { + background-position: -10% -100%; + } + 100% { + background-position: 10% 100%; + } +} +.ancient-cards { + display: flex; + align-items: flex-start; + justify-content: center; + flex-wrap: wrap; + max-width: 35vw; +} +.ancient-cards .blood { + opacity: 0.5; + position: relative; + display: flex; + justify-content: center; + align-items: center; + transition-duration: 1s; +} +.ancient-cards .blood:hover { + transform: scale(1.15); + transition-duration: 1s; + opacity: 1; +} +.ancient-cards img.cards { + position: relative; + margin: 10px; + border-radius: 30px; + cursor: pointer; + transition-duration: 0.2s; +} +.ancient-cards img.blood-top { + cursor: pointer; + position: absolute; + top: 10px; + width: 230px; + border-radius: 30px; + z-index: 3; + height: 100px; +} + +.difficulty { + position: relative; + display: flex; + justify-content: center; + align-items: center; + padding: 10px; + color: white; + font-size: 20px; + background-image: url(./assets/mythicCardBackground.png); + background-position: center; + background-size: cover; + opacity: 0.3; + transition-duration: 1s; + cursor: pointer; + border: 5px solid transparent; + border-radius: 10px; +} +.difficulty .blood-top { + position: absolute; + border-radius: 10px; + width: 108%; + top: -6px; + height: 100px; +} +.difficulty:hover { + transform: scale(1.1); + opacity: 1; + transition-duration: 1s; +} +.difficulty:not(:last-child) { + margin-bottom: 15px; +} +.difficulty-level { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 100px; + top: -1000px; + transition-duration: 2s; +} + +.deck-of-cards { + transform: scale(0); + transition-duration: 2s; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + padding-right: 100px; + padding-left: 100px; + max-width: 35vw; +} + +.stages { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.stages__title { + margin-bottom: 10px; + margin-top: 10px; + color: black; + font-size: 30px; +} +.stages__quantity { + display: flex; + align-items: center; + justify-content: center; + z-index: 1; +} +.stages__quantity input { + position: relative; + width: 60px; + height: 60px; + text-align: center; + font-size: 40px; + color: white; + pointer-events: none; + z-index: 2; + opacity: 0.7; + border-radius: 10px; +} +.stages__quantity input:not(:last-child) { + margin-right: 20px; +} + +.green { + background-image: url(./assets/Stages/green.png); +} +.green:hover { + border: 2px solid linear-gradient(90deg, #000000, #230b10, #331016, #230b10, #000000); +} + +.brown { + background-image: url(./assets/Stages/brown.png); +} + +.blue { + background-image: url(./assets/Stages/blue.png); +} + +.working { + position: relative; + display: flex; + justify-content: center; + align-items: center; +} + +.inverted-deck { + position: relative; + z-index: 2; + margin-right: 50px; +} +.inverted-deck .deck { + border-radius: 30px; + opacity: 0.4; + transition-duration: 1s; + cursor: pointer; +} +.inverted-deck .deck:hover { + opacity: 1; + transition-duration: 1s; +} + +.random-card { + position: relative; + z-index: 1; + width: 210px; + height: 320px; + border-radius: 30px; + opacity: 0.8; + transition-duration: 0.5s; + transform: translateX(-250px); +} + +.none-click { + pointer-events: none; +} + +.difficulty-level.show { + top: 0px; + transition-duration: 4s; +} + +.show { + transform: scale(1); + opacity: 1; + transition-duration: 5s; +} + +.hide { + transform: scale(0); + transition-duration: 1s; +} + +.random-card.show { + transform: translateX(0px) rotateY(360deg); + transition-duration: 1s; +} + +.through { + text-decoration: line-through; +} + +@media (max-width: 391px) { + .water { + padding: 10px; + flex-direction: column; + } + .ancient-cards { + max-width: 100%; + } + .cards { + width: 125px; + height: 165px; + border-radius: 15px; + } + .ancient-cards img.cards { + margin: 10px; + } + .ancient-cards img.blood-top { + width: 124px; + top: 9px; + } + .difficulty-level { + flex-direction: row; + flex-wrap: wrap; + top: 0px; + padding: 10px; + } + .difficulty { + font-size: 14px; + } + .difficulty .blood-top { + width: 110%; + } + .deck-of-cards { + max-width: 100%; + padding: 0px; + } + .stages__title { + font-size: 16px; + margin: 0px; + } + .stages__quantity input { + width: 30px; + height: 30px; + font-size: 20px; + border-radius: 5px; + } + .working { + align-items: start; + padding: 5px; + } + .inverted-deck .deck { + width: 125px; + height: 165px; + } + .random-card { + width: 125px; + height: 165px; + } +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/style.css.map b/style.css.map new file mode 100644 index 00000000..0a323c27 --- /dev/null +++ b/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/style.scss b/style.scss new file mode 100644 index 00000000..f154a5a2 --- /dev/null +++ b/style.scss @@ -0,0 +1,322 @@ +@font-face { + font-family: 'Horror'; + src: url(./assets/Font/ofont.ru_Old\ Horror\ Films.ttf); +} + +body { + position: relative; + margin: 0; + height: 100%; + overflow: hidden; + font-family: 'Horror'; + font-weight: 400; +} + +.background { + position: relative; + min-height: 100%; + transition: 0.5s; + background-image: url(./assets/Background/background.jpg); + background-position: 50% 100%; + background-size: cover; +} + +.water { + display: flex; + justify-content: space-between; + position: relative; + width: 100%; + height: 100vh; + background-image: url(./assets/Rain/water.png); + animation: water .4s linear infinite; + padding: 30px; +} + +@keyframes water { + 0% { + background-position: -10% -100%; + } + + 100% { + background-position: 10% 100%; + } +} + +.ancient-cards { + display: flex; + align-items: flex-start; + justify-content: center; + flex-wrap: wrap; + max-width: 35vw; + + .blood { + opacity: .5; + position: relative; + display: flex; + justify-content: center; + align-items: center; + transition-duration: 1s; + &:hover { + transform: scale(1.15); + transition-duration: 1s; + opacity: 1; + } + } + + img.cards { + position: relative; + margin: 10px; + border-radius: 30px; + cursor: pointer; + transition-duration: .2s; + } + + img.blood-top { + cursor: pointer; + position: absolute; + top: 10px; + width: 230px; + border-radius: 30px; + z-index: 3; + height: 100px; + } +} + +.difficulty { + position: relative; + display: flex; + justify-content: center; + align-items: center; + padding: 10px; + color: white; + font-size: 20px; + background-image: url(./assets/mythicCardBackground.png); + background-position: center; + background-size: cover; + opacity: .3; + transition-duration: 1s; + cursor: pointer; + border: 5px solid transparent; + border-radius: 10px; + + .blood-top { + position: absolute; + border-radius: 10px; + width: 108%; + top: -6px; + height: 100px; + } + + &:hover { + transform: scale(1.1); + opacity: 1; + transition-duration: 1s; + } + + &:not(:last-child) { + margin-bottom: 15px; + } + + &-level { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 100px; + top: -1000px; + transition-duration: 2s; + } +} + +.deck-of-cards { + transform: scale(0); + transition-duration: 2s; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + padding-right: 100px; + padding-left: 100px; + max-width: 35vw; +} + +.stages { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + &__title { + margin-bottom: 10px; + margin-top: 10px; + color: black; + font-size: 30px; + } + + &__quantity { + display: flex; + align-items: center; + justify-content: center; + z-index: 1; + + input { + position: relative; + width: 60px; + height: 60px; + text-align: center; + font-size: 40px; + color: white; + pointer-events: none; + z-index: 2; + opacity: .7; + border-radius: 10px; + + &:not(:last-child) { + margin-right: 20px; + } + } + } +} + +.green { + background-image: url(./assets/Stages/green.png); + + &:hover { + border: 2px solid linear-gradient(90deg, #000000, #230b10, #331016, #230b10, #000000); + } +} + +.brown { + background-image: url(./assets/Stages/brown.png); +} + +.blue { + background-image: url(./assets/Stages/blue.png); +} + +.working { + position: relative; + display: flex; + justify-content: center; + align-items: center; +} + +.inverted-deck { + position: relative; + z-index: 2; + margin-right: 50px; + + .deck { + border-radius: 30px; + opacity: .4; + transition-duration: 1s; + cursor: pointer; + + &:hover { + opacity: 1; + transition-duration: 1s; + } + } +} + +.random-card { + position: relative; + z-index: 1; + width: 210px; + height: 320px; + border-radius: 30px; + opacity: .8; + transition-duration: .5s; + transform: translateX(-250px); +} + +.none-click { + pointer-events: none; +} + +.difficulty-level.show { + top: 0px; + transition-duration: 4s; +} + +.show { + transform: scale(1); + opacity: 1; + transition-duration: 5s; +} + +.hide { + transform: scale(0); + transition-duration: 1s; +} + +.random-card.show { + transform: translateX(0px) rotateY(360deg); + transition-duration: 1s; +} + +.through { + text-decoration: line-through; +} + +@media (max-width: 391px) { + .water { + padding: 10px; + flex-direction: column; + } + .ancient-cards { + max-width: 100%; + } + .cards { + width: 125px; + height: 165px; + border-radius: 15px; + } + .ancient-cards img.cards { + margin: 10px; + } + .ancient-cards img.blood-top { + width: 124px; + top: 9px; + } + .difficulty-level { + flex-direction: row; + flex-wrap: wrap; + top: 0px; + padding: 10px; + // left: -300px; + } + .difficulty { + font-size: 14px; + } + .difficulty .blood-top { + width: 110%; + } + .deck-of-cards { + max-width: 100%; + padding: 0px; + } + .stages__title { + font-size: 16px; + margin: 0px; + } + .stages__quantity input { + width: 30px; + height: 30px; + font-size: 20px; + border-radius: 5px; + } + .working { + align-items: start; + padding: 5px; + } + .inverted-deck .deck { + width: 125px; + height: 165px; + } + .random-card { + width: 125px; + height: 165px; + } +} \ No newline at end of file