eldritch-codejam

audio.js

@@ -0,0 +1,30 @@
+const knife = new Audio('./assets/Audio/6802dff441a6d4e (mp3cut.net).mp3');
+const rain = document.querySelector('audio');
+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 = .1;
+    });
+});
+
+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);
+
+document.querySelector('.rain').volume = .4;

data/mythicCards/blue/indexBlue.js

@@ -1,71 +1,83 @@
 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',

data/mythicCards/brown/indexBrown.js

@@ -1,125 +1,146 @@
 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',

data/mythicCards/green/indexGreen.js

@@ -1,107 +1,125 @@
 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',

index.html

@@ -70,6 +70,7 @@
         </div>
     </div>
     <script type="module" src="./index.js"></script>
+    <script type="module" src="./audio.js"></script>
     <script type="module" src="./data/mythicCards/blue/indexBlue.js"></script>
     <script type="module" src="./data/mythicCards/brown/indexBrown.js"></script>
     <script type="module" src="./data/mythicCards/green/indexGreen.js"></script>