Orbit updates

cmd/start

@@ -11,4 +11,4 @@ else
 fi
 
 # Lint and build project
-bun x eslint src && bun build "${args[@]}" --outfile=dist/main.js src/index.ts
+bun x tsc --noEmit && bun x eslint src && bun build "${args[@]}" --outfile=dist/main.js src/index.ts

tsconfig.json

@@ -5,5 +5,6 @@
       "DOM",
       "ESNext",
     ],
+    "module": "esnext",
   },
 }

www/games/geomarin/package.json

@@ -4,7 +4,7 @@
     "start": "../../../cmd/start"
   },
   "dependencies": {
-    "graphico": "1.3.0",
-    "smath": "2.2.0"
+    "graphico": "1.6.0",
+    "smath": "3.0.0"
   }
 }

www/games/geomarin/src/globals.ts

@@ -5,7 +5,7 @@ export const global = {
   /**
    * Application version number
    */
-  version: '1.0',
+  version: '1.1',
   /**
    * Colors for SVG paths (regions)
    */

www/games/geomarin/src/lib/bar.ts

@@ -15,7 +15,7 @@ export class Bar implements Drawable {
         const barWidth: number = this.value / this.maxValue * maxWidth;
         // Draw the bar background
         ctx.fillStyle = this.color;
-        ctx.fillRect(this.thickness * 1.5, yOffset - this.thickness / 2, barWidth + this.thickness * 0.5, this.thickness);
+        ctx.fillRect((this.thickness * 1.5) | 0, (yOffset - this.thickness / 2) | 0, (barWidth + this.thickness * 0.5) | 0, this.thickness | 0);
         // Draw the bar name and value
         ctx.font = `${this.thickness}px sans-serif`;
         ctx.fillStyle = 'white';

www/games/orbit-idle/src/gamedata.ts → www/games/orbit-idle/src/data/gamedata.ts

@@ -1,5 +1,6 @@
-import { PlayerData } from "./player";
-import { SolarData } from "./solar-system";
+import { PlayerData } from '../game/player';
+import { SolarData } from '../game/solar-system';
+import { StatsData } from './stats';
 
 /**
  * Represents and interface for saving and loading game data
@@ -8,4 +9,5 @@ export interface GameData {
     readonly timestamp: number;
     readonly playerData: PlayerData;
     readonly solarData: SolarData;
+    readonly statsData: StatsData;
 };

www/games/orbit-idle/src/lib.ts → www/games/orbit-idle/src/data/lib.ts

@@ -31,3 +31,25 @@ export function N(num: number): string {
         return num.toFixed(2);
     }
 };
+
+/**
+ * Represents a data type which can be saved and loaded from memory
+ */
+export abstract class SaveLoad<T extends object> {
+    /**
+     * Create a new instance of this class
+     */
+    constructor(protected readonly data: T) {
+        this.data = JSON.parse(JSON.stringify(data));
+    }
+    /**
+     * Make a copy of this data object for saving
+     */
+    public save(): T {
+        return JSON.parse(JSON.stringify(this.data));
+    }
+    /**
+     * Load the saved data into this object
+     */
+    public abstract load(data?: Partial<T>): void;
+}

www/games/orbit-idle/src/data/state.ts

@@ -0,0 +1,33 @@
+import { FullAscendButton } from '../form-controls/button-full';
+import { BuyType } from '../ui/buy-type';
+import { Cursor } from '../ui/cursor';
+import { Income } from '../game/income';
+import { Menu } from '../ui/menu';
+import { Pause } from '../ui/pause';
+import { Player } from '../game/player';
+import { Shop } from '../game/shop';
+import { SolarSystem } from '../game/solar-system';
+import { Statistics } from './stats';
+import { Tutorial } from '../form-controls/tutorial';
+import { Zoom } from '../ui/zoom';
+
+// Global constants
+export const version = 'v1.3.0-alpha';
+
+// UI elements
+export const cursor: Cursor = new Cursor();
+export const player: Player = new Player();
+export const zoom: Zoom = new Zoom(725, 150);
+export const buyType: BuyType = new BuyType(725, 225);
+export const ascBtn: FullAscendButton = new FullAscendButton(675, 275, 100, 50);
+export const stats: Statistics = new Statistics();
+
+// Game elements
+export const system: SolarSystem = new SolarSystem();
+export const income: Income = new Income();
+export const shop: Shop = new Shop(10, 120);
+
+// Additional popups
+export const tutorial: Tutorial = new Tutorial();
+export const menu: Menu = new Menu(725, 365, 100);
+export const paused: Pause = new Pause('Orbit Idle has lost focus!\nThe game is NOT paused, but has\nstopped rendering to save resources.\nThe game is still running in the background.');

www/games/orbit-idle/src/data/stats.ts

@@ -0,0 +1,87 @@
+import { Drawable } from 'graphico';
+import { Label } from '../form-controls/label';
+import { Color } from 'viridis';
+import { player } from './state';
+import { N, SaveLoad } from './lib';
+import { SMath } from 'smath';
+
+/**
+ * Represents an in-game statistics panel
+ */
+export class Statistics extends SaveLoad<StatsData> implements Drawable {
+    private static readonly shade: Color = new Color(25, 25, 25, 75);
+    private visible: boolean;
+    private readonly title: Label;
+    private readonly headers: Label;
+    private readonly content: Label;
+    /**
+     * Create a new statistics window
+     */
+    constructor(public readonly data: StatsData = defaultStats) {
+        super(data);
+        this.visible = false;
+        this.title = new Label('Orbit Idle: Statistics', new Color(255, 255, 255), 2, true, 'center', 'bottom', 0, Label.fontSize * 16);
+        this.headers = new Label('Started on\nSolar system size\nTotal earned\nTotal spent\nTotal planetary years\nSpeed levels purchased\nAscensions purchased\n\nCredits\n\n\nDisclaimer', new Color(255, 255, 255), 1, false, 'right', 'top', 0, Label.fontSize * 18);
+        this.content = new Label('', new Color(255, 255, 255), 1, true, 'left', 'top', 0, Label.fontSize * 18);
+    }
+    public load(data: Partial<StatsData> = defaultStats): void {
+        this.data.startTime = Math.floor(SMath.clamp(data.startTime ?? defaultStats.startTime, 0, Infinity));
+        this.data.moneyEarned = SMath.clamp(data.moneyEarned ?? defaultStats.moneyEarned, 0, Infinity);
+        this.data.moneySpent = SMath.clamp(data.moneySpent ?? defaultStats.moneySpent, 0, Infinity);
+        this.data.orbitsCompleted = Math.floor(SMath.clamp(data.orbitsCompleted ?? defaultStats.orbitsCompleted, 0, Infinity));
+        this.data.speedLevelsPurchased = Math.floor(SMath.clamp(data.speedLevelsPurchased ?? defaultStats.speedLevelsPurchased, 0, Infinity));
+        this.data.ascensionsPurchased = Math.floor(SMath.clamp(data.ascensionsPurchased ?? defaultStats.ascensionsPurchased, 0, Infinity));
+    }
+    /**
+     * Show the statistics panel
+     */
+    public show(): void {
+        this.visible = true;
+    }
+    /**
+     * Hide the statistics panel
+     */
+    public hide(): void {
+        this.visible = false;
+    }
+    public draw(graphics: CanvasRenderingContext2D): void {
+        // Skip if not visible
+        if (!this.visible) {
+            return;
+        }
+        // Draw background shading
+        graphics.fillStyle = Statistics.shade.toString();
+        graphics.fillRect(Label.fontSize * 15, Label.fontSize * 10, graphics.canvas.width - Label.fontSize * 30, graphics.canvas.height - Label.fontSize * 20);
+        // Set content
+        this.content.value = `${new Date(this.data.startTime).toLocaleString()}\n${N(player.getNumOrbits())} planets\n$${N(this.data.moneyEarned)}\n$${N(this.data.moneySpent)}\n${N(this.data.orbitsCompleted)} orbits\n${N(this.data.speedLevelsPurchased)}\n${N(this.data.ascensionsPurchased)}\n\nNicolas Ventura\nnicfv.com\n\nGenerative AI was used for\n30-second looping audio but\nnot for game design or code`;
+        // X-center all labels
+        this.title.x = graphics.canvas.width / 2;
+        this.headers.x = (graphics.canvas.width - Label.fontSize) / 2;
+        this.content.x = (graphics.canvas.width + Label.fontSize) / 2;
+        // Draw all labels and close button
+        this.title.draw(graphics);
+        this.headers.draw(graphics);
+        this.content.draw(graphics);
+    }
+}
+
+/**
+ * Interface containing various in-game statistics
+ */
+export interface StatsData {
+    startTime: number;
+    moneyEarned: number;
+    moneySpent: number;
+    orbitsCompleted: number;
+    speedLevelsPurchased: number;
+    ascensionsPurchased: number;
+}
+
+const defaultStats: StatsData = {
+    startTime: Date.now(),
+    moneyEarned: 0,
+    moneySpent: 0,
+    orbitsCompleted: 0,
+    speedLevelsPurchased: 0,
+    ascensionsPurchased: 0,
+};

www/games/orbit-idle/src/button-asc.ts → www/games/orbit-idle/src/form-controls/button-asc.ts

@@ -1,8 +1,8 @@
 import { Button } from './button';
 import { Label } from './label';
-import { N } from './lib';
-import { player, zoom } from './state';
-import { Orbit } from './orbit';
+import { N } from '../data/lib';
+import { player, zoom } from '../data/state';
+import { Orbit } from '../game/orbit';
 
 /**
  * Represents a button to ascend a specific orbit
@@ -20,7 +20,7 @@ export class AscendButton extends Button {
      * Initialize a new ascension button
      */
     constructor(x: number, width: number, private readonly orbit: Orbit) {
-        super('', orbit.color, false, x, 0, width, Label.fontSize * 3, () => {
+        super('', orbit.color, false, x, 0, width, Label.fontSize * 3, null, () => {
             this.orbit.ascend(this.ascensions);
             player.spend(this.ascAmount);
             player.earn(this.orbit.getNextNCost(1));
@@ -39,7 +39,7 @@ export class AscendButton extends Button {
         }
         // Calculate and display cost
         this.ascAmount = this.orbit.getNextNAscensionCost(this.ascensions);
-        super.text = `Ascend +${this.ascensions}\n$${N(this.ascAmount)}`;
+        super.text = `^${N(this.orbit.getExp())} > ^${N(this.orbit.getNextNAscensionExp(this.ascensions))}\n$${N(this.ascAmount)}`;
         // Check if player has sufficient funds to ascend
         if (player.hasFunds(this.ascAmount)) {
             super.enable();

www/games/orbit-idle/src/button-buy.ts → www/games/orbit-idle/src/form-controls/button-buy.ts

@@ -1,8 +1,8 @@
 import { Button } from './button';
 import { Label } from './label';
-import { N } from './lib';
-import { buyType, player, zoom } from './state';
-import { Orbit } from './orbit';
+import { N } from '../data/lib';
+import { buyType, player, zoom } from '../data/state';
+import { Orbit } from '../game/orbit';
 
 /**
  * Represents a button to increase a orbit's speed.
@@ -16,7 +16,7 @@ export class BuyButton extends Button {
      * Initialize a new buy button.
      */
     constructor(x: number, width: number, private readonly orbit: Orbit) {
-        super('', orbit.color, true, x, 0, width, Label.fontSize * 3, () => {
+        super('', orbit.color, true, x, 0, width, Label.fontSize * 3, null, () => {
             player.spend(this.cost);
             orbit.increaseSpeed(buyType.getQuantity());
         });

www/games/orbit-idle/src/button-full.ts → www/games/orbit-idle/src/form-controls/button-full.ts

@@ -1,7 +1,7 @@
 import { Color } from 'viridis';
 import { Button } from './button';
-import { income, player, shop, system, zoom } from './state';
-import { N } from './lib';
+import { income, player, shop, system, zoom } from '../data/state';
+import { N } from '../data/lib';
 
 /**
  * Represents a button to perform a full ascension
@@ -11,7 +11,7 @@ export class FullAscendButton extends Button {
      * Create a new full ascend button
      */
     constructor(x: number, y: number, w: number, h: number) {
-        super('', new Color(200, 200, 200), false, x, y, w, h, () => this.ascend());
+        super('', new Color(200, 200, 200), false, x, y, w, h, null, () => this.ascend());
     }
     /**
      * Ascend and regenerate the game elements

www/games/orbit-idle/src/button-toggle.ts → www/games/orbit-idle/src/form-controls/button-toggle.ts

@@ -12,8 +12,8 @@ export class ToggleButton extends Button {
     /**
      * Initialize a new toggle button, where the first state is the default state.
      */
-    constructor(private readonly states: [string, Color, () => void][], x: number, y: number, width: number, height: number) {
-        super(states[0][0], states[0][1], true, x, y, width, height, () => {
+    constructor(private readonly states: [string, Color, () => void][], x: number, y: number, width: number, height: number, hotkeys: string[] | null) {
+        super(states[0][0], states[0][1], true, x, y, width, height, hotkeys, () => {
             // Execute the current state's callback function
             states[0][2]();
             // Change the current state of the toggle button

www/games/orbit-idle/src/button.ts → www/games/orbit-idle/src/form-controls/button.ts

@@ -21,7 +21,7 @@ export class Button implements Drawable {
     /**
      * Initialize a new button.
      */
-    constructor(protected text: string, protected color: Color, protected enabled: boolean, protected x: number, protected y: number, protected w: number, protected h: number, protected callback: () => void) {
+    constructor(protected text: string, protected color: Color, protected enabled: boolean, protected x: number, protected y: number, protected w: number, protected h: number, protected hotkeys: string[] | null, protected callback: () => void) {
         this.isHover = false;
         this.label = new Label(text, color.getContrastingColor(), 1, false, 'center', 'top', this.x + this.w / 2, this.y + Label.fontSize / 2);
         this.disabledColor = new Color(color.red, color.green, color.blue, color.alpha * 0.5);
@@ -61,6 +61,14 @@ export class Button implements Drawable {
             this.callback();
         }
     }
+    /**
+     * Attempt to use the hotkey for this button.
+     */
+    public hotkey(key: string): void {
+        if (this.hotkeys?.includes(key) && this.enabled) {
+            this.callback();
+        }
+    }
     public draw(graphics: CanvasRenderingContext2D): void {
         // Render the button and outline, if needed
         graphics.fillStyle = this.enabled ? this.color.toString() : this.disabledColor.toString();

www/games/orbit-idle/src/help.ts → www/games/orbit-idle/src/form-controls/help.ts

@@ -38,7 +38,7 @@ export class Help extends Button {
      * Create a new help message with optional highlighted region.
      */
     constructor(text: string, textOffsetX: number, textOffsetY: number, protected readonly x: number, protected readonly y: number, protected readonly w: number, protected readonly h: number, callback: () => void) {
-        super('', Help.transparent, true, x, y, w, h, callback);
+        super('', Help.transparent, true, x, y, w, h, null, callback);
         this.tip = new Label(text, Help.highlightStroke, 1, false, textOffsetX < 0 ? 'right' : 'left', 'top', x + textOffsetX, y + textOffsetY);
     }
     /**

www/games/orbit-idle/src/tutorial.ts → www/games/orbit-idle/src/form-controls/tutorial.ts

@@ -42,10 +42,10 @@ export class Tutorial implements Drawable {
             new Help('When an orbit reaches its max speed, you\ncan Ascend it. Ascensions are expensive\nand reset speed for that orbit, but\nincrease your long-term income.', 140, 0, 135, 100, 130, 400, () => this.next()),
             new Help('The breakdown of your income is shown here.\nEach planet gains +0.01 bonus each planetary year\nby completing a full revolution around the sun.\nBonuses from individual orbits are multiplied\ntogether and raised to their ascension level.', 0, 50, 5, 5, 790, 45, () => this.next()),
             new Help('This is your total income and\ntotal revolutions per second.\nEach time any planet completes\none full revolution, you earn\nthe income under $/rev.', -10, 0, 600, 50, 200, 80, () => this.next()),
-            new Help('Use the Zoom controls on the top right to focus\non different planets. Zooming changes the store\nbuttons and income labels to match the focused orbit.', -10, 0, 675, 150, 100, 60, () => this.next()),
-            new Help('For convenience, you can buy\nspeed upgrades in bulk. It\ndoes not affect ascending.', -10, 0, 660, 220, 130, 60, () => this.next()),
-            new Help('When you have make the required income\nper second, you will be given the option\nto perform a full ascension. This resets\nthe entire solar system, but adds\nan additional planet.', -10, 0, 660, 290, 130, 70, () => this.next()),
-            new Help('Open Menu > Tutorial anytime to review these slides.\nYour progress saves automatically, and the game\ncontinues earning even when the tab is not active.\nClick "End Tutorial" to close this message.\nGood luck!', -10, 75, 660, 375, 130, 175, () => this.next()),
+            new Help('Use the Zoom controls on the top right to focus\non different planets. Zooming changes the store\nbuttons and income labels to match the focused\norbit. Hotkeys: + and -', -10, 0, 675, 125, 100, 60, () => this.next()),
+            new Help('For convenience, you can buy\nspeed upgrades in bulk. It\ndoes not affect ascending.', -10, 0, 660, 195, 130, 60, () => this.next()),
+            new Help('When you have make the required income\nper second, you will be given the option\nto perform a full ascension. This resets\nthe entire solar system, but adds\nan additional planet.', -10, 0, 660, 265, 130, 70, () => this.next()),
+            new Help('Open Menu > Tutorial anytime to review these slides.\nYour progress saves automatically, and the game\ncontinues earning even when the tab is not active.\nClick "End Tutorial" to close this message.\nGood luck!\n\nHotkeys: (S)ave, (H)elp, (M)ute, St(A)ts, (ESC) open/close menu', -10, 75, 660, 335, 130, 215, () => this.next()),
         ];
     }
     /**

www/games/orbit-idle/src/income.ts → www/games/orbit-idle/src/game/income.ts

@@ -1,10 +1,10 @@
 import { SMath } from 'smath';
 import { Drawable } from 'graphico';
 import { OrbitScore } from './orbit-score';
-import { N } from './lib';
-import { Label } from './label';
+import { N } from '../data/lib';
+import { Label } from '../form-controls/label';
 import { Color } from 'viridis';
-import { player, system, zoom } from './state';
+import { player, system, zoom } from '../data/state';
 
 /**
  * Handles and renders game income.

www/games/orbit-idle/src/orbit-score.ts → www/games/orbit-idle/src/game/orbit-score.ts

@@ -1,8 +1,8 @@
 import { Drawable } from 'graphico';
 import { Color } from 'viridis';
 import { Orbit } from './orbit';
-import { N } from './lib';
-import { Label } from './label';
+import { N } from '../data/lib';
+import { Label } from '../form-controls/label';
 
 /**
  * Renders the orbit score to the user interface.