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

feat: start saves system

Browse Source
This commit is contained in:
Kirill Siukhin 2025-06-19 16:59:55 +05:00
parent dc90cf9448
commit afbe8b1257
4 changed files with 81 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
assets/css/style.css → assets/css/global.css
View File

@ -93,6 +93,7 @@ a {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.8rem; gap: 0.8rem;
margin-bottom: 1rem;
} }
.upgrade { .upgrade {
@ -115,3 +116,14 @@ a {
.upgrade:active { .upgrade:active {
transform: scale(0.95); transform: scale(0.95);
} }
#upgrade-info {
visibility: hidden;
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--color-light);
color: var(--color-dark);
padding: 1rem;
border-radius: 8px;
}

7
assets/css/upgrades.css Normal file
View File

@ -0,0 +1,7 @@
#upg-saves {
visibility: hidden;
position: absolute;
left: 1rem;
bottom: 1rem;
opacity: 0.6;
}

18
index.html
View File

@ -7,7 +7,8 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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"> <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">
<link rel="stylesheet" href="./assets/css/style.css"> <link rel="stylesheet" href="./assets/css/global.css">
<link rel="stylesheet" href="./assets/css/upgrades.css">
<title>Mood Clicker</title> <title>Mood Clicker</title>
</head> </head>
<body> <body>
@ -36,13 +37,20 @@
<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"/> <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> </svg>
</button> </button>
<div id="upgrades"> <div id="upgrades"></div>
<!-- <button class="upgrade" onclick="purchaseUpgrade('mood_lifter')"> <div id="upgrade-info">
<img src="./assets/img/upgrades/mood_lifter.png" alt="Mood Lifter Upgrade"> <b id="upgrade-name">Upgrade name</b>
</button> --> <span id="upgrade-desc">Upgrade description</span>
<i id="upgrade-cost">500 Mood</i>
</div> </div>
</main> </main>
<!-- UPGRADES -->
<div id="upg-saves">
<span id="upg-saves-text"></span>
</div>
<script src="./js/game.js"></script> <script src="./js/game.js"></script>
</body> </body>
</html> </html>

55
js/game.js
View File

@ -1,10 +1,16 @@
let mood = 0; let mood = 0;
let moodPerClick = 50; // FOR TESTING PURPOSES, SHOULD BE 1 IN PRODUCTION let moodPerClick = 50; // FOR TESTING PURPOSES, SHOULD BE 1 IN PRODUCTION
let purchasedUpgrades = [];
const upgradesContainer = document.getElementById('upgrades'); const upgradesContainer = document.getElementById('upgrades');
const moodCounter = document.getElementById('mood-counter'); const moodCounter = document.getElementById('mood-counter');
const favicon = document.getElementById('favicon'); const favicon = document.getElementById('favicon');
const upgradeInfoContainer = document.getElementById('upgrade-info');
const upgradeName = document.getElementById('upgrade-name');
const upgradeDesc = document.getElementById('upgrade-desc');
const upgradeCost = document.getElementById('upgrade-cost');
function updateMoodCounter() { function updateMoodCounter() {
moodCounter.innerText = mood; moodCounter.innerText = mood;
@ -27,6 +33,17 @@ function updateMoodCounter() {
} }
} }
function updateUpgradeInfo(upgrade) {
upgradeInfoContainer.style.visibility = 'visible';
upgradeName.innerText = upgrade.name;
upgradeDesc.innerText = upgrade.description;
upgradeCost.innerText = upgrade.cost + ' Mood';
}
function clearUpgradeInfo() {
upgradeInfoContainer.style.visibility = 'hidden';
}
function updateUpgrades() { function updateUpgrades() {
upgradesContainer.innerHTML = ''; upgradesContainer.innerHTML = '';
@ -34,7 +51,9 @@ function updateUpgrades() {
const upgradeBtn = document.createElement('button'); const upgradeBtn = document.createElement('button');
upgradeBtn.id = upgrade.id; upgradeBtn.id = upgrade.id;
upgradeBtn.className = 'upgrade'; upgradeBtn.className = 'upgrade';
upgradeBtn.onclick = () => purchaseUpgrade(upgrade.id); upgradeBtn.onclick = () => purchaseUpgrade(upgrade);
upgradeBtn.onmouseenter = () => updateUpgradeInfo(upgrade);
upgradeBtn.onmouseleave = clearUpgradeInfo;
if (mood < upgrade.cost) { if (mood < upgrade.cost) {
upgradeBtn.style.opacity = 0.6; upgradeBtn.style.opacity = 0.6;
@ -55,13 +74,16 @@ function onLiftMoodClick() {
updateMoodCounter(); updateMoodCounter();
} }
function purchaseUpgrade(id) { function purchaseUpgrade(upgrade) {
const upgrade = upgrades.filter((upgrade) => upgrade.id === id)[0];
if (mood >= upgrade.cost) { if (mood >= upgrade.cost) {
mood -= upgrade.cost; mood -= upgrade.cost;
upgrades.shift();
const upgradeIndex = upgrades.indexOf(upgrade);
purchasedUpgrades.push(upgrade.id);
upgrades.splice(upgradeIndex, 1);
updateMoodCounter(); updateMoodCounter();
clearUpgradeInfo();
upgrade.onPurchase(); upgrade.onPurchase();
} }
} }
@ -69,6 +91,27 @@ function purchaseUpgrade(id) {
// UPGRADES // UPGRADES
function enableSaves() { function enableSaves() {
const saves = document.getElementById('upg-saves');
const savesText = document.getElementById('upg-saves-text');
saves.style.visibility = 'visible';
let counter = 10;
setInterval(() => {
if (counter === 0) {
const save = {
mood,
purchasedUpgrades,
};
localStorage.setItem('save', JSON.stringify(save));
counter = 11;
savesText.innerText = 'Saved!';
} else {
counter--;
savesText.innerText = 'Auto save in ' + counter;
}
}, 1000);
} }
function enableMusic() { function enableMusic() {
@ -93,7 +136,7 @@ let upgrades = [
}, },
{ {
id: 'calm_music', id: 'calm_music',
name: 'Old Radio', name: 'Megaphone',
description: 'Turn on calm lo-fi music', description: 'Turn on calm lo-fi music',
image: '../assets/img/upgrades/calm_music.png', image: '../assets/img/upgrades/calm_music.png',
cost: 1000, cost: 1000,