misterkirill/MoodClicker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: start basic logic

Browse Source
This commit is contained in:
Kirill Siukhin 2025-06-18 18:30:33 +05:00
parent 83d13b4334
commit 8ba99de640
11 changed files with 139 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
assets/css/style.css
View File

@ -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);
}

BIN
assets/favicons/1.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
assets/favicons/2.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
assets/favicons/3.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
assets/favicons/4.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
assets/favicons/5.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
assets/favicons/6.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
assets/favicons/7.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
assets/img/upgrades/mood_lifter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

21
index.html
View File

@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./assets/favicons/1.ico" type="image/x-icon" id="favicon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Carter+One&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
@ -20,10 +21,28 @@
</button>
</a>
<a class="link" href="https://git.misterkirill.com/misterkirill/MoodClicker">Source Code</a>
<a class="link" href="https://git.misterkirill.com/misterkirill/MoodClicker">Source code</a>
</nav>
<main class="main">
<h1 class="heading">Mood Clicker</h1>
<span class="mood-counter">Current Mood: <span id="mood-counter">0</span></span>
<button class="click-btn" onclick="onLiftMoodClick()">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-arrow-up" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5"/>
</svg>
Lift Mood
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-arrow-up" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5"/>
</svg>
</button>
<div class="upgrades">
<button class="upgrade" onclick="purchaseUpgrade('mood_lifter')">
<img src="./assets/img/upgrades/mood_lifter.png" alt="Mood Lifter Upgrade">
</button>
</div>
</main>
<script src="./js/game.js"></script>
</body>
</html>

57
js/game.js
View File

@ -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;
}