Merge pull request #1 from DeadCreator/main

version 2.0 - major update of interface and mechanics

buttons.js

@@ -0,0 +1,160 @@
+const mainMenu = document.getElementById('main-menu');
+const pauseMenu = document.getElementById('pause-menu')
+const pauseButtons = [document.getElementById('header-pause-btn'), document.getElementById('menu-pause-btn')]
+
+const soundBtn = document.getElementById('header-sound-btn')
+const audio = document.getElementById('audio')
+
+const musicNames = [
+    "night-in-kyoto.mp3",
+    "lazy-love-kem.mp3",
+    "lateflights-pryces.mp3"
+]
+
+const levels = {
+    "1": {
+        name: "Level 1",
+        x: 2,
+        y: 3,
+        time: 30
+    },
+    "2": {
+        name: "Level 2",
+        x: 3,
+        y: 4,
+        time: 30
+    },
+    "3": {
+        name: "Level 3",
+        x: 4,
+        y: 5,
+        time: 45
+    },
+    "4": {
+        name: "Level 4",
+        x: 4,
+        y: 6,
+        time: 60
+    },
+    "5": {
+        name: "Level 5",
+        x: 5,
+        y: 8,
+        time: 120
+    }
+}
+
+const levelSelBtn = document.getElementById('level-select')
+const backToMainSubmenuBtn = document.getElementById('back-to-main-submenu')
+const backToLevelSelectionBtn = document.getElementById('back-to-level-selection')
+const levelBtns = document.querySelectorAll('.level-btn')
+const mainSubmenu = document.querySelector('.main-submenu')
+const levelSelection = document.querySelector('.level-selection')
+const startGameMenu = document.querySelector('.start-game')
+
+const startGameBtn = document.getElementById('start-game-btn')
+const restartGameBtn = document.getElementById('restart-game-btn')
+
+const backToMainPaused = document.getElementById('back-to-main-submenu-paused')
+
+const musicShuffle = (curr) => {
+    let next = musicNames[Math.floor(Math.random() * musicNames.length)]
+    while (next === curr) {
+        next = musicNames[Math.floor(Math.random() * musicNames.length)]
+    }
+    audio.src = `media/ost/${next}`
+}
+
+pauseButtons.forEach(btn => {
+   btn.addEventListener('click', () => {
+        pauseMenu.children[0].innerText = "Paused"
+       pauseButtons[1].hidden = false
+        const result = pauseMenu.classList.toggle('show');
+        if (result) {
+            pauseButtons[0].style.backgroundImage = 'url("media/buttons/Play Button.svg")'
+            stopTimer()
+        } else {
+            pauseButtons[0].style.backgroundImage = 'url("media/buttons/Pause Button-2.svg")'
+            startTimer()
+        }
+   })
+})
+
+soundBtn.addEventListener('click', () => {
+    const result = soundBtn.classList.toggle('sound-on');
+    if (result) {
+        soundBtn.style.backgroundImage = 'url("media/buttons/Sound Off Button.svg")'
+        audio.play()
+    }
+    else {
+        soundBtn.style.backgroundImage = 'url("media/buttons/Sound On Button.svg")'
+        audio.pause()
+    }
+})
+
+levelSelBtn.addEventListener('click', () => {
+    levelSelection.style.display = 'flex'
+    mainSubmenu.style.display = 'none'
+})
+
+backToMainSubmenuBtn.addEventListener('click', () => {
+    levelSelection.style.display = 'none'
+    setGame()
+})
+
+levelBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+        currLevel = levels[parseInt(btn.classList[1])]
+        x = currLevel.x
+        y = currLevel.y
+        time = currLevel.time
+        makeField(x, y)
+        displayTimer(timeSpent, time)
+        startGameMenu.style.display = 'flex'
+        levelSelection.style.display = 'none'
+    })
+})
+
+backToLevelSelectionBtn.addEventListener('click', () => {
+    levelSelection.style.display = 'flex'
+    startGameMenu.style.display = 'none'
+})
+
+const setGame = () => {
+    pauseButtons[0].style.backgroundImage = 'url("media/buttons/Pause Button-2.svg")'
+    timeSpent = 0
+    timerHUD.innerHTML = "--:--"
+    pauseButtons[0].hidden = true
+    mainMenu.classList.add('show')
+    pauseMenu.classList.remove('show')
+    startGameMenu.style.display = 'none'
+    mainSubmenu.style.display = 'flex'
+    levelBtns.forEach(btn => {
+        const stats = localStorage.getItem(`Level ${parseInt(btn.classList[1])}`)
+        btn.innerHTML = `${btn.classList[1]} - ${stats} wins`
+    })
+
+    makeField(0, 0)
+}
+
+const startGame = () => {
+    timeSpent = 0
+    pauseButtons[0].hidden = false
+    makeField(x, y)
+    startTimer()
+    mainMenu.classList.remove('show')
+    pauseMenu.classList.remove('show')
+}
+
+startGameBtn.addEventListener('click', startGame)
+restartGameBtn.addEventListener('click', startGame)
+
+backToMainPaused.addEventListener('click', () => {
+    setGame()
+})
+
+
+audio.onended = () => {
+    musicShuffle(0)
+    audio.play()
+}

index.html

@@ -4,30 +4,48 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
+    <link rel="icon" href="media/favicon.ico">
     <title>Find The Pair</title>
 </head>
 <body>
     <header>
-        <button>Pause/Play</button>
-        <button>Sound Off</button>
+        <button id="header-pause-btn" hidden="true"></button>
+        <button id="header-sound-btn"></button>
+        <h3 id="timer">--:--</h3>
     </header>
     <main>
-        <section class="main menu">
-
+        <section class="main menu" id="main-menu">
+            <div class="main-submenu" style="display: flex">
+                <button id="level-select">Select level</button>
+            </div>
+            <div class="level-selection">
+                <button class="level-btn 1">1</button>
+                <button class="level-btn 2">2</button>
+                <button class="level-btn 3">3</button>
+                <button class="level-btn 4">4</button>
+                <button class="level-btn 5">5</button>
+                <button id="back-to-main-submenu">Back to main</button>
+            </div>
+            <div class="start-game">
+                <button id="start-game-btn">Start Game</button>
+                <button id="back-to-level-selection">Back</button>
+            </div>
         </section>
-        <section class="pause menu">
+        <section class="pause menu" id="pause-menu">
             <h3>Paused</h3>
-            <button>Resume</button>
+            <button id="menu-pause-btn">Resume</button>
+            <button id="restart-game-btn">Restart</button>
             <button>Settings</button>
-            <button>Back to main menu</button>
+            <button id="back-to-main-submenu-paused">Back to main menu</button>
         </section>
         <section class="field">
         </section>
-        <audio src="media/ost/test.mp3"></audio>
+        <audio id="audio" src="media/ost/night-in-kyoto.mp3"></audio>
     </main>
     <footer>
 
     </footer>
     <script src="main.js"></script>
+    <script src="buttons.js"></script>
 </body>
 </html>

main.js

@@ -1,11 +1,26 @@
-const x = 4
-const y = 6
+let time = 61
+let x = 4
+let y = 6
+let currLevel = {}
 const delay = ms => new Promise(res => setTimeout(res, ms))
+const timerHUD = document.getElementById('timer')
 
 const checkMatched = () => {
     const matchedCards = document.querySelectorAll(".matched")
     if (matchedCards.length === x * y) {
-        console.log("GameOver!!")
+        stopTimer()
+        pauseButtons[0].hidden = true
+        let currLevelStats = localStorage.getItem(`${currLevel.name}`)
+        if (currLevelStats) {
+            localStorage.removeItem(`${currLevel.name}`)
+            localStorage.setItem(`${currLevel.name}`, JSON.stringify(parseInt(currLevelStats) + 1))
+        } else {
+            localStorage.setItem(`${currLevel.name}`, JSON.stringify(1))
+        }
+        pauseMenu.classList.add('show')
+        pauseButtons[1].hidden = true
+        timeSpent = 0
+        pauseMenu.children[0].innerHTML = "Solved!!"
     }
 }
 async function lol() {
@@ -19,16 +34,13 @@ async function lol() {
     if (activeCards.length === 2) {
 
         if (activeCards[0].classList[1] === activeCards[1].classList[1]) {
-            console.log("Great!")
             activeCards[0].classList.add('matched')
             activeCards[1].classList.add('matched')
 
             await delay(500)
 
             activeCards[0].removeEventListener("click", lol)
             activeCards[1].removeEventListener("click", lol)
-        } else {
-            console.log("Lose!")
         }
         activeCards[0].classList.remove('active')
         activeCards[1].classList.remove('active')
@@ -38,12 +50,12 @@ async function lol() {
 }
 const makeField = (x, y) => {
     const field = document.querySelector('.field')
-
+    const imgUrl = "media/cards/card-"
     while (field.hasChildNodes()) {
         field.removeChild(field.firstChild)
     }
 
-    const size = 72 / x
+    const size = 80 / x
     const pairs = []
     for (let k = 0; k < x * y / 2; k++) {
         pairs[k] = 2
@@ -68,19 +80,53 @@ const makeField = (x, y) => {
                 }
             }
 
-            back.innerHTML = `${num}`
+            front.innerHTML = `${num}`
+            front.style.backgroundImage = `url("${imgUrl + num}.png")`
 
             card.classList.add(`pair-${num}`)
             card.addEventListener("click", lol)
 
-            card.appendChild(front)
             card.appendChild(back)
+            card.appendChild(front)
             field.appendChild(card)
         }
     }
 }
 
-window.onload = () => {makeField(x, y)}
+let timeSpent = 0
+let t = null
+
+const displayTimer = (timeSpent, time) => {
+    const mins = Math.floor((time - timeSpent) / 60)
+    const secs = (time - timeSpent) % 60
+    mins < 10 ?
+        timerHUD.innerHTML = "0" + mins :
+        timerHUD.innerHTML = "" + mins
+    secs < 10 ?
+        timerHUD.innerHTML += ":0" + secs :
+        timerHUD.innerHTML += ":" + secs
+}
+
+const startTimer = () => {
+    if (timeSpent !== time) {
+        timeSpent++
+        displayTimer(timeSpent, time)
+        t = setTimeout(startTimer, 1000)
+    } else {
+        pauseMenu.classList.add('show')
+        timeSpent = 0
+        pauseButtons[1].hidden = true
+        pauseMenu.children[0].innerHTML = "Failed!!"
+    }
+}
+const stopTimer = () => {
+    clearTimeout(t)
+}
+
+window.onload = () => {
+    musicShuffle(0)
+    setGame()
+}