feat: start saves system
This commit is contained in:
parent
dc90cf9448
commit
afbe8b1257
@ -93,6 +93,7 @@ a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.upgrade {
|
||||
@ -115,3 +116,14 @@ a {
|
||||
.upgrade:active {
|
||||
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
7
assets/css/upgrades.css
Normal file
@ -0,0 +1,7 @@
|
||||
#upg-saves {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
bottom: 1rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
18
index.html
18
index.html
@ -7,7 +7,8 @@
|
||||
<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">
|
||||
<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>
|
||||
</head>
|
||||
<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"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div id="upgrades">
|
||||
<!-- <button class="upgrade" onclick="purchaseUpgrade('mood_lifter')">
|
||||
<img src="./assets/img/upgrades/mood_lifter.png" alt="Mood Lifter Upgrade">
|
||||
</button> -->
|
||||
<div id="upgrades"></div>
|
||||
<div id="upgrade-info">
|
||||
<b id="upgrade-name">Upgrade name</b>
|
||||
<span id="upgrade-desc">Upgrade description</span>
|
||||
<i id="upgrade-cost">500 Mood</i>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- UPGRADES -->
|
||||
|
||||
<div id="upg-saves">
|
||||
<span id="upg-saves-text"></span>
|
||||
</div>
|
||||
|
||||
<script src="./js/game.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
55
js/game.js
55
js/game.js
@ -1,10 +1,16 @@
|
||||
let mood = 0;
|
||||
let moodPerClick = 50; // FOR TESTING PURPOSES, SHOULD BE 1 IN PRODUCTION
|
||||
let purchasedUpgrades = [];
|
||||
|
||||
const upgradesContainer = document.getElementById('upgrades');
|
||||
const moodCounter = document.getElementById('mood-counter');
|
||||
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() {
|
||||
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() {
|
||||
upgradesContainer.innerHTML = '';
|
||||
|
||||
@ -34,7 +51,9 @@ function updateUpgrades() {
|
||||
const upgradeBtn = document.createElement('button');
|
||||
upgradeBtn.id = upgrade.id;
|
||||
upgradeBtn.className = 'upgrade';
|
||||
upgradeBtn.onclick = () => purchaseUpgrade(upgrade.id);
|
||||
upgradeBtn.onclick = () => purchaseUpgrade(upgrade);
|
||||
upgradeBtn.onmouseenter = () => updateUpgradeInfo(upgrade);
|
||||
upgradeBtn.onmouseleave = clearUpgradeInfo;
|
||||
|
||||
if (mood < upgrade.cost) {
|
||||
upgradeBtn.style.opacity = 0.6;
|
||||
@ -55,13 +74,16 @@ function onLiftMoodClick() {
|
||||
updateMoodCounter();
|
||||
}
|
||||
|
||||
function purchaseUpgrade(id) {
|
||||
const upgrade = upgrades.filter((upgrade) => upgrade.id === id)[0];
|
||||
|
||||
function purchaseUpgrade(upgrade) {
|
||||
if (mood >= upgrade.cost) {
|
||||
mood -= upgrade.cost;
|
||||
upgrades.shift();
|
||||
|
||||
const upgradeIndex = upgrades.indexOf(upgrade);
|
||||
purchasedUpgrades.push(upgrade.id);
|
||||
upgrades.splice(upgradeIndex, 1);
|
||||
|
||||
updateMoodCounter();
|
||||
clearUpgradeInfo();
|
||||
upgrade.onPurchase();
|
||||
}
|
||||
}
|
||||
@ -69,6 +91,27 @@ function purchaseUpgrade(id) {
|
||||
// UPGRADES
|
||||
|
||||
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() {
|
||||
@ -93,7 +136,7 @@ let upgrades = [
|
||||
},
|
||||
{
|
||||
id: 'calm_music',
|
||||
name: 'Old Radio',
|
||||
name: 'Megaphone',
|
||||
description: 'Turn on calm lo-fi music',
|
||||
image: '../assets/img/upgrades/calm_music.png',
|
||||
cost: 1000,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user