diff --git a/constants.js b/constants.js index 322f9f9..001d25a 100644 --- a/constants.js +++ b/constants.js @@ -1442,9 +1442,29 @@ const freeBuildingPowerupText = { const statTypes = { powerups: { name: "Powerups Clicked" + }, + seconds: { + name: "Seconds Played" + }, + clicks: { + name: "Clicks" } } +const options = { + name: { + name: "Your name", + type: "text", + set: value => macroDesc.name = value, + get: () => macroDesc.name + }, + species: { + name: "Your species", + type: "text", + set: value => macroDesc.species = value, + get: () => macroDesc.species + } +} deepFreeze(prodUpgradeText); deepFreeze(prodAllUpgradeText); deepFreeze(clickUpgradeText); diff --git a/gorge.css b/gorge.css index 55fa568..2be4b09 100644 --- a/gorge.css +++ b/gorge.css @@ -666,3 +666,66 @@ div::-webkit-scrollbar-corner { z-index: 2; } } + +.modal { + position: absolute; + z-index: 3; + background: rgba(0, 0, 0, 0.7); + top: 0%; + left: 0%; + height: 100%; + width: 100%; + display: none; +} + +.modal .modal-contents { + position: absolute; + width: 60%; + height: 60%; + text-align: center; + vertical-align: middle; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.modal.modal-active { + display: block; +} + +.modal-exit { + width: 15vw; + height: 7.5vh; + font-size: 3vh; +} + +.stat-line, +.option-line { + font-size: 18px; + width: 100%; + height: 24px; +} + +.stat-line:nth-child(even), +.option-line:nth-child(even) { + background: #333; +} + +.stat-line:nth-child(odd), +.option-line:nth-child(odd) { + background: #222; +} + +.stat-name, +.option-name { + width: 50%; + float: left; +} + +.stat-value, +.option-value { + width: 50%; + max-width: 50%; + box-sizing: border-box; + float: right; +} diff --git a/gorge.html b/gorge.html index 464e6b3..5100db6 100644 --- a/gorge.html +++ b/gorge.html @@ -33,6 +33,8 @@ + +
Resources
@@ -68,5 +70,16 @@
- + + diff --git a/gorge.js b/gorge.js index 8050e91..8552a73 100644 --- a/gorge.js +++ b/gorge.js @@ -254,6 +254,14 @@ function updateDisplay() { displayUpgrades(showOwnedUpgrades); tickPowerups(delta); + Object.keys(statTypes).forEach(key => { + const value = document.querySelector("#stat-value-" + key); + + value.innerText = render(stats[key]); + }) + + stats.seconds += delta / 1000; + setTimeout(updateDisplay, 1000 / updateRate); } @@ -498,9 +506,9 @@ function setup() { initializeCaches(); initializeStates(); updateAll(); - } + const cache = {}; function initializeCaches() { @@ -664,14 +672,20 @@ function registerListeners() { const gulp = "*glp*"; clickPopup(text, "food", [e.clientX, e.clientY]); clickPopup(gulp, "gulp", [e.clientX, e.clientY]); + stats.clicks += 1; }); document.querySelector("#save").addEventListener("click", save); - document.querySelector("#reset").addEventListener("click", reset); - document.querySelector("#numbers").addEventListener("click", cycleNumbers); + document.querySelector("#stats").addEventListener("click", () => document.querySelector("#stats-modal").classList.add("modal-active")); + document.querySelector("#options").addEventListener("click", openOptions); + + document.querySelector("#stats-exit").addEventListener("click", () => document.querySelector("#stats-modal").classList.remove("modal-active")); + document.querySelector("#options-exit").addEventListener("click", closeOptions); + + document.querySelector("#upgrades").addEventListener("click", switchShowOwnedUpgrades); document.addEventListener("keydown", e => { @@ -691,6 +705,25 @@ function registerListeners() { }); } +function openOptions() { + document.querySelector("#options-modal").classList.add("modal-active"); + + Object.keys(options).forEach(key => { + const input = document.querySelector("#option-value-" + key); + input.value = options[key].get(); + }); + +} + +function closeOptions() { + document.querySelector("#options-modal").classList.remove("modal-active"); + + Object.keys(options).forEach(key => { + const input = document.querySelector("#option-value-" + key); + options[key].set(input.value); + }); +} + function createButtons() { createBuildings(); createUpgrades(); @@ -848,6 +881,52 @@ function createDisplays() { } }) + + const statHolder = document.querySelector("#stats-holder"); + + Object.keys(statTypes).forEach(key => { + const div = document.createElement("div"); + div.classList.add("stat-line"); + + const name = document.createElement("div"); + name.classList.add("stat-name"); + + const value = document.createElement("div"); + value.classList.add("stat-value"); + value.id = "stat-value-" + key; + + name.innerText = statTypes[key].name; + + value.innerText = stats[key]; + + div.appendChild(name); + div.appendChild(value); + + statHolder.append(div); + }); + + const optionHolder = document.querySelector("#options-holder"); + + Object.keys(options).forEach(key => { + const div = document.createElement("div"); + div.classList.add("option-line"); + + const name = document.createElement("div"); + name.classList.add("option-name"); + + const value = document.createElement("input"); + value.classList.add("option-value"); + value.id = "option-value-" + key; + + name.innerText = options[key].name; + + value.innerText = options[key].get(); + + div.appendChild(name); + div.appendChild(value); + + optionHolder.append(div); + }); } function renderLine(line) { @@ -1247,6 +1326,7 @@ function saveGame() { save.resources = resources; save.belongings = belongings; save.stats = stats; + save.macroDesc = macroDesc; storage.setItem("save", JSON.stringify(save)); } catch (e) { @@ -1264,6 +1344,11 @@ const migrations = [ // introduce stats save => { save.stats = {} + }, + + // introduce macroDesc + save => { + save.macroDesc = {} } ] @@ -1317,6 +1402,10 @@ function load() { for (const [key, value] of Object.entries(save.stats)) { stats[key] = value; } + + for (const [key, value] of Object.entries(save.macroDesc)) { + macroDesc[key] = value; + } } catch (e) { console.error(e); clickPopup("Can't load - no access to local storage.", "info", [window.innerWidth / 2, window.innerHeight / 5]);