Add more content to chauncey den

style.css

@@ -1,7 +1,9 @@
 :root {
+    --primary-text: #00d000;
+    --primary-bg: black;
     font-family: 'Consolas', 'Cascadia Code', monospace;
-    color: #00d000;
-    background: black;
+    color: var(--primary-text);
+    background-color: var(--primary-bg);
 }
 
 .tooltip {
@@ -42,4 +44,4 @@ a:hover{
     font-size: x-large;
     color:#1F4F82;
     text-decoration:underline;
-}
+}

user-pages/chauncey-den/backend/game_manager.js

@@ -0,0 +1,65 @@
+import { GameValue, GameUnlockable } from "../game_engine/types.js";
+
+export class GameManager {
+    constructor() {
+        // Values
+        this.clickCount = new GameValue(0);
+        this.clickModifier = new GameValue(1);
+        this.chaunceyCount = new GameValue(0);
+        this.handlerCount = new GameValue(0);
+
+        // Unlocks
+        this.unlocks = {};
+        this.unlocks.firstClick = new GameUnlockable();
+        this.unlocks.tenthClick = new GameUnlockable();
+
+        // Resource unlocks
+        this.unlocks.resources = new GameUnlockable();
+        this.unlocks.chaunceys = new GameUnlockable();
+
+        // Upgrade unlocks
+        this.unlocks.upgrades = new GameUnlockable();
+        this.unlocks.handlers = new GameUnlockable();
+
+        this._connectResourceMilestones();
+        this._connectUpgradeMilestones();
+        this._connectClickMilestones();
+    }
+
+    _connectResourceMilestones() {
+        // Unlock resources and chaunceys on first click 
+        this.unlocks.firstClick.onUnlocked.onNextEventFired(() => {
+            this.unlocks.resources.onUnlocked.fireEvent();
+            this.unlocks.chaunceys.onUnlocked.fireEvent();
+        });
+    }
+
+    _connectUpgradeMilestones() {
+        // Unlock upgrades and handlers on tenth click 
+        this.unlocks.tenthClick.onUnlocked.onNextEventFired(() => {
+            this.unlocks.upgrades.onUnlocked.fireEvent();
+            this.unlocks.handlers.onUnlocked.fireEvent();
+        });
+    }
+
+    _connectClickMilestones() {
+        // Increment chaunceys each click
+        this.clickCount.onChanged.onEachEventFired(() => {
+            this.chaunceyCount.value += this.clickModifier.value;
+        });
+
+        // Unlock first click
+        this.clickCount.onChanged.onNextEventFired(() => {
+            this.unlocks.firstClick.unlock();
+        });
+
+        // Unlock tenth click
+        let unlockTenthClick = (clicks) => {
+            if (clicks >= 10) {
+                this.unlocks.tenthClick.unlock();
+                this.clickCount.onChanged.removeRecurringCallback(self);
+            }
+        }
+        this.clickCount.onChanged.onEachEventFired(unlockTenthClick);
+    }
+}

user-pages/chauncey-den/chauncey-den.css

@@ -2,6 +2,10 @@
 /* First media query is for phone. */
 /* A second one is planned for desktops. */
 
+:root {
+    color: var(--primary-text)
+}
+
 #page-container {
     margin-block: 0;
     margin-inline: auto;
@@ -51,11 +55,30 @@ h2 {
 
 p {
     margin: 0;
-    padding-inline: 3dvh;
-    padding-bottom: 0.75dvh;
+    margin-bottom: 0.75dvh;
+    font-size: 2.2dvh;
+}
+
+span {
     font-size: 2.2dvh;
 }
 
+button {
+    margin: 0;
+    margin-bottom: 0.75dvh;
+    font-size: 2.1dvh;
+    color: var(--primary-text);
+    background-color: var(--primary-bg);
+}
+
+.indent-1 {
+    margin-left: 3dvh;
+}
+
+.indent-2 {
+    margin-left: 6dvh;
+}
+
 /* Phone */
 @media (max-width: 600px) {
     #page-container {
@@ -80,8 +103,24 @@ p {
     }
 
     p {
-        padding-inline: 4dvw;
-        padding-bottom: 1dvw;
+        margin-bottom: 1dvw;
         font-size: 4dvw;
     }
+
+    span {
+        font-size: 4dvw;
+    }
+
+    button {
+        margin-bottom: 1dvw;
+        font-size: 3.8dvw;
+    }
+
+    .indent-1 {
+        margin-left: 4dvw;
+    }
+
+    .indent-2 {
+        margin-left: 8dvw;
+    }
 }

user-pages/chauncey-den/chauncey-den.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="../../style.css" rel="stylesheet">
     <link href="./chauncey-den.css" rel="stylesheet">
-    <script type="module" src="./chauncey-den.js"></script>
+    <script type="module" src="./frontend/chauncey-den.js"></script>
     <title>Chauncey's Den</title>
 </head>
 <body id="page-container">
@@ -15,7 +15,15 @@ <h1>Chauncey's Den</h1>
     </div>
     <div hidden id="resources">
         <h2>Resources</h2>
-        <p hidden id="chauncey-counter">Chaunceys: 0</p>
+        <p hidden id="chauncey-counter" class="indent-1">Chaunceys: 0</p>
+    </div>
+    <div hidden id="upgrades">
+        <h2>Upgrades</h2>
+        <div hidden id="handler-box">
+            <p id="handler-counter" class="indent-1">Chauncey Handlers: 0</p>
+            <p class="indent-2">+1 ChPS</p>
+            <button id="handler-button" class="indent-2">10 Chaunceys</button>
+        </div>
     </div>
 </body>
-</html>
+</html>

user-pages/chauncey-den/frontend/chauncey-den.js

@@ -0,0 +1,71 @@
+import { GameManager } from "../backend/game_manager.js";
+
+// Global vars
+let gameManager = new GameManager();
+
+let chaunceyButton = document.getElementById("chauncey");
+
+// Resources
+let resourcesBox = document.getElementById("resources");
+let chaunceyCounter = document.getElementById("chauncey-counter");
+
+// Upgrades
+let upgradesBox = document.getElementById("upgrades");
+let handlerBox = document.getElementById("handler-box");
+let handlerCounter = document.getElementById("handler-counter");
+let handlerButton = document.getElementById("handler-button");
+
+// Run main when the html loads
+document.addEventListener('DOMContentLoaded', function() {
+    main();
+});
+
+function main() {
+    // Values
+    gameManager.chaunceyCount.onChanged.onEachEventFired(onChaunceyChange);
+    gameManager.handlerCount.onChanged.onEachEventFired(onHandlerChange);
+
+    // Resource Unlocks
+    gameManager.unlocks.resources.onUnlocked.onNextEventFired(onUnlockedResources);
+    gameManager.unlocks.chaunceys.onUnlocked.onNextEventFired(onUnlockedChaunceys);
+
+    // Upgrade Unlocks
+    gameManager.unlocks.upgrades.onUnlocked.onNextEventFired(onUnlockedUpgrades);
+    gameManager.unlocks.handlers.onUnlocked.onNextEventFired(onUnlockedHandlers);
+
+    // User Interaction
+    chaunceyButton.addEventListener("click", onChaunceyClick);
+    handlerButton.addEventListener("click", onHandlerClick);
+};
+
+function onChaunceyClick() {
+    gameManager.clickCount.value += 1;
+}
+
+function onHandlerClick() {
+    gameManager.handlerCount.value += 1;
+}
+
+function onChaunceyChange(newChaunceyCount) {
+    chaunceyCounter.textContent = "Chaunceys: " + newChaunceyCount;
+}
+
+function onHandlerChange(newHandlerCount) {
+    handlerCounter.textContent = "Chauncey Handlers: " + newHandlerCount;
+}
+
+function onUnlockedResources() {
+    resourcesBox.hidden = false;
+}
+
+function onUnlockedChaunceys() {
+    chaunceyCounter.hidden = false;
+}
+
+function onUnlockedUpgrades() {
+    upgradesBox.hidden = false;
+}
+
+function onUnlockedHandlers() {
+    handlerBox.hidden = false;
+}

user-pages/chauncey-den/game_engine/game_event.js

@@ -0,0 +1,50 @@
+export class GameEvent {
+    constructor() {
+        this._callbacks = [];
+        this._tempCallbacks = [];
+    }
+
+    // Call all callbacks
+    fireEvent(data) {
+        for (const callback of this._callbacks)
+            callback(data);
+
+        for (const callback of this._tempCallbacks)
+            callback(data);
+        this._tempCallbacks = []
+    }
+
+    // Add a callback for the every time the event fires
+    onEachEventFired(callback) {
+        this._callbacks.push(callback);
+    }
+
+    // Add a callback for the next time the event fires
+    onNextEventFired(callback) {
+        this._tempCallbacks.push(callback);
+    }
+
+    // Remove a callback
+    removeCallback(callback) {
+        this.removeRecurringCallback(callback);
+        this.removeTempCallback(callback);
+    }
+
+    // Remove a recurring callback
+    removeRecurringCallback(callback) {
+        let index = this._callbacks.indexOf(callback);
+        this._callbacks.splice(index, 1);
+    }
+
+    // Remove a temporary callback
+    removeTempCallback(callback) {
+        let index = this._tempCallbacks.indexOf(callback);
+        this._tempCallbacks.splice(index, 1);
+    }
+
+    // Clear all callbacks
+    clearAllCallbacks() {
+        this._callbacks = [];
+        this._tempCallbacks = [];
+    }
+}

user-pages/chauncey-den/game_engine/game_flag.js

@@ -0,0 +1,48 @@
+import { GameEvent } from "./game_event.js";
+import { GameValue } from "./game_value.js";
+
+export class GameFlag {
+    constructor(initialValue) {
+        this._gameValue = new GameValue(!!initialValue);
+
+        // Events
+        this.onEnabled = new GameEvent();
+        this.onDisabled = new GameEvent();
+        this.onChanged = new GameEvent();
+
+        // Event Cascades
+        this._gameValue.onChanged.onEachEventFired((newVal) => {
+            this.onChanged.fireEvent(newVal);
+        });
+
+        this.onChanged.onEachEventFired((newVal) => {
+            if (newVal)
+                this.onEnabled.fireEvent();
+            else
+                this.onDisabled.fireEvent();            
+        });
+    }
+
+    get isEnabled() {
+        return this._gameValue.get();
+    }
+
+    set isEnabled(newVal) {
+        this._gameValue.set(!!newVal);
+    }
+
+    // Enable the flag
+    enable() {
+        this.isEnabled = true;
+    }
+
+    // Disable the flag
+    disable() {
+        this.isEnabled = false;
+    }
+
+    // Toggle the flag
+    toggle() {
+        this.isEnabled = !this.isEnabled;
+    }
+}