diff --git a/assets/css/style.css b/assets/css/style.css index 17e5bff..0d13179 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -8,7 +8,6 @@ body { font-family: "Noto Sans", sans-serif; background-color: var(--color-dark); color: var(--color-light); - text-align: center; } a { @@ -30,6 +29,12 @@ a { padding: 1rem; } +.main { + display: flex; + flex-direction: column; + align-items: center; +} + .heading { font-size: 3em; font-family: "Carter One", system-ui; @@ -55,3 +60,58 @@ a { background-color: var(--color-light); color: var(--color-dark); } + +.click-btn { + display: flex; + align-items: center; + gap: 0.8rem; + font-family: "Noto Sans", sans-serif; + font-size: 1.4em; + font-weight: 500; + color: var(--color-dark); + background-color: var(--color-light); + border-radius: 50rem; + padding: 0.4rem 0.8rem; + cursor: pointer; + transition: 0.1s transform linear; + margin-bottom: 2rem; +} +.click-btn:hover { + transform: scale(1.05); +} +.click-btn:active { + transform: scale(0.95); +} + +.mood-counter { + font-weight: 500; + font-size: 1.6em; + margin-bottom: 1rem; +} + +.upgrades { + display: flex; + align-items: center; + gap: 0.8rem; +} + +.upgrade { + padding: 0; + width: 3.6rem; + height: 3.6rem; + border: 2px solid var(--color-light); + border-radius: 8px; + overflow: hidden; + cursor: pointer; + transition: 0.1s transform linear; +} +.upgrade > img { + width: 100%; + height: 100%; +} +.upgrade:hover { + transform: scale(1.05); +} +.upgrade:active { + transform: scale(0.95); +} diff --git a/assets/favicons/1.ico b/assets/favicons/1.ico new file mode 100644 index 0000000..f980471 Binary files /dev/null and b/assets/favicons/1.ico differ diff --git a/assets/favicons/2.ico b/assets/favicons/2.ico new file mode 100644 index 0000000..90e16b9 Binary files /dev/null and b/assets/favicons/2.ico differ diff --git a/assets/favicons/3.ico b/assets/favicons/3.ico new file mode 100644 index 0000000..150f3ca Binary files /dev/null and b/assets/favicons/3.ico differ diff --git a/assets/favicons/4.ico b/assets/favicons/4.ico new file mode 100644 index 0000000..ce02caf Binary files /dev/null and b/assets/favicons/4.ico differ diff --git a/assets/favicons/5.ico b/assets/favicons/5.ico new file mode 100644 index 0000000..007e462 Binary files /dev/null and b/assets/favicons/5.ico differ diff --git a/assets/favicons/6.ico b/assets/favicons/6.ico new file mode 100644 index 0000000..b2edd83 Binary files /dev/null and b/assets/favicons/6.ico differ diff --git a/assets/favicons/7.ico b/assets/favicons/7.ico new file mode 100644 index 0000000..f022411 Binary files /dev/null and b/assets/favicons/7.ico differ diff --git a/assets/img/upgrades/mood_lifter.png b/assets/img/upgrades/mood_lifter.png new file mode 100644 index 0000000..3fa3d95 Binary files /dev/null and b/assets/img/upgrades/mood_lifter.png differ diff --git a/index.html b/index.html index ac12e6b..3cb91b2 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + @@ -20,10 +21,28 @@ - Source Code + Source code -

Mood Clicker

+
+

Mood Clicker

+ Current Mood: 0 + +
+ +
+
+ diff --git a/js/game.js b/js/game.js index e69de29..894f38c 100644 --- a/js/game.js +++ b/js/game.js @@ -0,0 +1,57 @@ +let mood = 0; +let moodPerClick = 1; + +const moodCounter = document.getElementById('mood-counter'); +const favicon = document.getElementById('favicon'); + +function updateMoodCounter() { + moodCounter.innerText = mood; + + if (mood < 100) { + favicon.setAttribute('href', './assets/favicons/1.ico'); + } else if (mood < 1e3) { + favicon.setAttribute('href', './assets/favicons/2.ico'); + } else if (mood < 1e5) { + favicon.setAttribute('href', './assets/favicons/3.ico'); + } else if (mood < 1e9) { + favicon.setAttribute('href', './assets/favicons/4.ico'); + } else if (mood < 1e16) { + favicon.setAttribute('href', './assets/favicons/5.ico'); + } else if (mood < 1e19) { + favicon.setAttribute('href', './assets/favicons/6.ico'); + } else if (mood < 1e22) { + favicon.setAttribute('href', './assets/favicons/7.ico'); + } +} + +function onLiftMoodClick() { + mood += moodPerClick; + updateMoodCounter(); +} + +function purchaseUpgrade(id) { + const upgrade = upgrades.filter((upgrade) => upgrade.id === id)[0]; + + if (mood >= upgrade.cost) { + mood -= upgrade.cost; + updateMoodCounter(); + upgrade.onPurchase(); + } +} + +// UPGRADES + +const upgrades = [ + { + id: 'mood_lifter', + name: 'Mood Lifter', + description: 'Lift your Mood. +5/Click.', + image: '../assets/img/upgrades/mood_lifter.png', + cost: 50, + onPurchase: moodLifterUpgrade, + }, +]; + +function moodLifterUpgrade() { + moodPerClick = 5; +}