From 945a543939002ee9551c153bfc7bb6e36a5afeac Mon Sep 17 00:00:00 2001
From: Vulae <potatocrazy42069@gmail.com>
Date: Wed, 24 Apr 2024 19:55:47 -0500
Subject: [PATCH] mega refactor, separate tile files, renderer to allow themes,
 & corrupt save handling

---
 src/components/Game.svelte                |  16 +-
 src/lib/Util.ts                           |   8 +
 src/lib/game/Assets.ts                    |  50 ---
 src/lib/game/Chunk.ts                     |  14 +-
 src/lib/game/Generator.ts                 |  14 +-
 src/lib/game/Renderer.ts                  |  10 +-
 src/lib/game/Save.ts                      |  29 +-
 src/lib/game/Tile.ts                      | 356 ----------------------
 src/lib/game/World.ts                     |  10 +-
 src/lib/game/theme/Theme.ts               |  11 +
 src/lib/game/theme/retro.ts               | 100 ++++++
 src/lib/game/tile/Chocolate.ts            |  32 ++
 src/lib/game/tile/MultiMine.ts            |  44 +++
 src/lib/game/tile/SingleMine.ts           |  49 +++
 src/lib/game/tile/Stroopwafel.ts          |  35 +++
 src/lib/game/tile/Tile.ts                 |  82 +++++
 src/lib/game/tile/Vanilla.ts              |  32 ++
 src/lib/game/tile/Waffle.ts               |  60 ++++
 static/{tileset.png => tileset_retro.png} | Bin
 19 files changed, 512 insertions(+), 440 deletions(-)
 create mode 100644 src/lib/Util.ts
 delete mode 100644 src/lib/game/Assets.ts
 delete mode 100644 src/lib/game/Tile.ts
 create mode 100644 src/lib/game/theme/Theme.ts
 create mode 100644 src/lib/game/theme/retro.ts
 create mode 100644 src/lib/game/tile/Chocolate.ts
 create mode 100644 src/lib/game/tile/MultiMine.ts
 create mode 100644 src/lib/game/tile/SingleMine.ts
 create mode 100644 src/lib/game/tile/Stroopwafel.ts
 create mode 100644 src/lib/game/tile/Tile.ts
 create mode 100644 src/lib/game/tile/Vanilla.ts
 create mode 100644 src/lib/game/tile/Waffle.ts
 rename static/{tileset.png => tileset_retro.png} (100%)

diff --git a/src/components/Game.svelte b/src/components/Game.svelte
index ffc49a2..e6f6628 100644
--- a/src/components/Game.svelte
+++ b/src/components/Game.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { tileset } from "$lib/game/Assets";
     import { WorldRenderer } from "$lib/game/Renderer";
     import { load, save } from "$lib/game/Save";
     import { World } from "$lib/game/World";
@@ -39,14 +38,10 @@
     let keys: Set<string> = new Set();
     let keysInterval: number = -1;
 
-    onMount(() => {
+    onMount(async () => {
         world = load(saveSlot);
         renderer = new WorldRenderer(world, canvas);
 
-        tileset.onLoad(() => {
-            needsRerender = true;
-        });
-
         // TODO: Clean Up!
         clearInterval(keysInterval);
         keysInterval = setInterval(() => {
@@ -72,7 +67,12 @@
             }
         }, 1000 / 60);
 
-        render();
+        // FIXME: Why is this not always accurate.
+        // Sometimes renderer.init() does not load theme fully before returning.
+        await renderer.init();
+        setTimeout(() => {
+            render();
+        }, 100);
     });
 
     onDestroy(() => {
@@ -90,7 +90,7 @@
     on:keyup={ev => {
         keys.delete(ev.key);
     }}
-    on:unload={() => {
+    on:beforeunload={() => {
         save(saveSlot, world);
     }}
 />
diff --git a/src/lib/Util.ts b/src/lib/Util.ts
new file mode 100644
index 0000000..5b20658
--- /dev/null
+++ b/src/lib/Util.ts
@@ -0,0 +1,8 @@
+
+
+
+// https://stackoverflow.com/questions/41253310#answer-51399781
+export type ArrayElement<ArrayType extends readonly unknown[]> = 
+    ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
+
+
diff --git a/src/lib/game/Assets.ts b/src/lib/game/Assets.ts
deleted file mode 100644
index be1ab33..0000000
--- a/src/lib/game/Assets.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-
-import { TextureAtlas } from "../Atlas";
-
-
-
-export const tileset = new TextureAtlas('/infinite-minesweeper/tileset.png', {
-    null: [ 0, 0, 16, 16 ],
-    bomb: [ 16, 0, 16, 16 ],
-    explosion: [ 16, 16, 16, 16 ],
-    flag: [ 32, 16, 16, 16 ],
-    number_0: [ 48, 0, 16, 16 ],
-    number_1: [ 48, 16, 16, 16 ],
-    number_2: [ 48, 32, 16, 16 ],
-    number_3: [ 48, 48, 16, 16 ],
-    number_4: [ 48, 64, 16, 16 ],
-    number_5: [ 48, 80, 16, 16 ],
-    number_6: [ 48, 96, 16, 16 ],
-    number_7: [ 48, 112, 16, 16 ],
-    number_8: [ 48, 128, 16, 16 ],
-    vanilla_tile_covered: [ 64, 0, 16, 16 ],
-    vanilla_tile_revealed: [ 80, 0, 16, 16 ],
-    chocolate_tile_covered: [ 64, 16, 16, 16 ],
-    chocolate_tile_revealed: [ 80, 16, 16, 16 ],
-    waffle_tile_covered_light: [ 64, 32, 16, 16 ],
-    waffle_tile_revealed_light: [ 80, 32, 16, 16 ],
-    waffle_tile_covered_dark: [ 96, 32, 16, 16 ],
-    waffle_tile_revealed_dark: [ 112, 32, 16, 16 ],
-    stroopwafel_tile_covered_light: [ 64, 48, 16, 16 ],
-    stroopwafel_tile_revealed_light: [ 80, 48, 16, 16 ],
-    stroopwafel_tile_covered_dark: [ 96, 48, 16, 16 ],
-    stroopwafel_tile_revealed_dark: [ 112, 48, 16, 16 ]
-});
-
-export function tilesetNumberTexture(value: number) {
-    switch(value) {
-        case 0: return 'number_0';
-        case 1: return 'number_1';
-        case 2: return 'number_2';
-        case 3: return 'number_3';
-        case 4: return 'number_4';
-        case 5: return 'number_5';
-        case 6: return 'number_6';
-        case 7: return 'number_7';
-        case 8: return 'number_8';
-        default: return 'null';
-    }
-}
-
-
-
diff --git a/src/lib/game/Chunk.ts b/src/lib/game/Chunk.ts
index bedc2e5..9ac63bb 100644
--- a/src/lib/game/Chunk.ts
+++ b/src/lib/game/Chunk.ts
@@ -3,8 +3,8 @@ import Pako from "pako";
 import { BitIO } from "../BitIO";
 import { CHUNK_SIZE } from "./Constants";
 import { getTileType } from "./Generator";
-import type { Tile } from "./Tile";
 import type { World } from "./World";
+import type { ValidTile } from "./tile/Tile";
 
 
 
@@ -31,7 +31,7 @@ export class Chunk {
 
         console.log(`Generating new chunk: ${this.chunkX}, ${this.chunkY}`);
 
-        const tiles: Tile[] = [];
+        const tiles: ValidTile[] = [];
 
         for(let dy = 0; dy < CHUNK_SIZE; dy++) {
             for(let dx = 0; dx < CHUNK_SIZE; dx++) {
@@ -47,9 +47,9 @@ export class Chunk {
 
 
 export class GeneratedChunk extends Chunk {
-    public readonly tiles: Tile[];
+    public readonly tiles: ValidTile[];
 
-    public constructor(world: World, chunkX: number, chunkY: number, tiles: Tile[]) {
+    public constructor(world: World, chunkX: number, chunkY: number, tiles: ValidTile[]) {
         super(world, chunkX, chunkY);
         this.tiles = tiles;
         if(this.tiles.length != CHUNK_SIZE * CHUNK_SIZE) {
@@ -57,11 +57,11 @@ export class GeneratedChunk extends Chunk {
         }
     }
 
-    public getTileAbsolute(tileX: number, tileY: number): Tile {
+    public getTileAbsolute(tileX: number, tileY: number): ValidTile {
         return this.getTile(tileX - this.chunkX * CHUNK_SIZE, tileY - this.chunkY * CHUNK_SIZE);
     }
 
-    public getTile(chunkTileX: number, chunkTileY: number): Tile {
+    public getTile(chunkTileX: number, chunkTileY: number): ValidTile {
         return this.tiles[chunkTileX + chunkTileY * CHUNK_SIZE]!;
     }
 
@@ -75,7 +75,7 @@ export class GeneratedChunk extends Chunk {
 
     public static load(world: World, chunkX: number, chunkY: number, buffer: ArrayBuffer): GeneratedChunk {
         const io = new BitIO(Pako.inflate(buffer));
-        let tiles: Tile[] = [];
+        let tiles: ValidTile[] = [];
         for(let dy = 0; dy < CHUNK_SIZE; dy++) {
             for(let dx = 0; dx < CHUNK_SIZE; dx++) {
                 const x = chunkX * CHUNK_SIZE + dx;
diff --git a/src/lib/game/Generator.ts b/src/lib/game/Generator.ts
index eebbd2c..7f78214 100644
--- a/src/lib/game/Generator.ts
+++ b/src/lib/game/Generator.ts
@@ -1,14 +1,18 @@
 
 import { perlin_noise2d, splitmix32, voronoi_noise2d } from "../RNG";
-import { ChocolateTile, Stroopwafel, VanillaTile, WaffleTile, type Tile } from "./Tile";
 import type { World } from "./World";
+import { ChocolateTile } from "./tile/Chocolate";
+import { StroopwafelTile } from "./tile/Stroopwafel";
+import type { Tile, ValidTile, ValidTileConstructor } from "./tile/Tile";
+import { VanillaTile } from "./tile/Vanilla";
+import { WaffleTile } from "./tile/Waffle";
 
 
 
 type Biome = {
     type: 'biome',
     weight: number;
-    tile: typeof Tile
+    tile: ValidTileConstructor;
 } | {
     type: 'collection',
     weight: number;
@@ -48,7 +52,7 @@ const Biomes: Biome = {
         }, {
             type: 'biome',
             weight: 2,
-            tile: Stroopwafel
+            tile: StroopwafelTile
         }]
     }]
 };
@@ -62,7 +66,7 @@ function smoothNoisyVoronoi(seed: number, x: number, y: number, dist: number, we
     return voronoi_noise2d(random(), x + dx, y + dy, weights);
 }
 
-export function getTileType(world: World, x: number, y: number): typeof Tile {
+export function getTileType(world: World, x: number, y: number): ValidTileConstructor {
     const random = splitmix32(world.biomeSeed, false);
 
     let biome: Biome = Biomes;
@@ -79,7 +83,7 @@ export function getTileType(world: World, x: number, y: number): typeof Tile {
     return biome.tile;
 }
 
-export function generateTile(world: World, x: number, y: number): Tile {
+export function generateTile(world: World, x: number, y: number): ValidTile {
     const tileConstructor = getTileType(world, x, y);
     // @ts-ignore - TODO: How do I deal with this?
     return new tileConstructor(world, x, y);
diff --git a/src/lib/game/Renderer.ts b/src/lib/game/Renderer.ts
index a280633..9c17c16 100644
--- a/src/lib/game/Renderer.ts
+++ b/src/lib/game/Renderer.ts
@@ -1,5 +1,7 @@
 
 import type { World } from "./World";
+import type { Theme } from "./theme/Theme";
+import { ThemeRetro } from "./theme/retro";
 
 
 
@@ -8,6 +10,8 @@ export class WorldRenderer {
     public readonly canvas: HTMLCanvasElement;
     public readonly ctx: CanvasRenderingContext2D;
 
+    public readonly theme: Theme = new ThemeRetro();
+
     constructor(world: World, canvas: HTMLCanvasElement) {
         this.world = world;
         this.canvas = canvas;
@@ -18,6 +22,10 @@ export class WorldRenderer {
         this.ctx = ctx;
     }
 
+    public async init(): Promise<void> {
+        await this.theme.init();
+    }
+
     // Camera position in tiles
     public cameraX: number = 0;
     public cameraY: number = 0;
@@ -101,7 +109,7 @@ export class WorldRenderer {
                 this.ctx.scale(1.01, 1.01);
 
                 const tile = this.world.getTile(x, y);
-                tile.render(this.ctx);
+                this.theme.drawTile(this.ctx, tile);
 
                 this.ctx.restore();
             }
diff --git a/src/lib/game/Save.ts b/src/lib/game/Save.ts
index 7961657..eabfd03 100644
--- a/src/lib/game/Save.ts
+++ b/src/lib/game/Save.ts
@@ -3,19 +3,32 @@ import { World, type WorldSave } from "./World";
 
 
 
+function newWorld(saveSlot: string, overwrite: boolean): World {
+    console.log('Loaded new world');
+    if(overwrite) {
+        localStorage.setItem(saveSlot, 'PLACEHOLDER');
+    }
+    const world = new World(Math.floor(Math.random() * 0xFFFFFFFF));
+    const closest0 = world.closest0(0, 0);
+    world.reveal(closest0.x, closest0.y);
+    return world;
+}
+
 export function load(saveSlot: string): World {
     const str = localStorage.getItem(saveSlot);
     if(!str) {
-        console.log('Loaded new world');
-        localStorage.setItem(saveSlot, 'PLACEHOLDER');
-        const world = new World(Math.floor(Math.random() * 0xFFFFFFFF));
-        const closest0 = world.closest0(0, 0);
-        world.reveal(closest0.x, closest0.y);
-        return world;
+        return newWorld(saveSlot, true);
     } else {
         console.log('Loaded saved world');
-        const save: WorldSave = JSON.parse(str);
-        return World.load(save);
+        try {
+            const save: WorldSave = JSON.parse(str);
+            return World.load(save);
+        } catch(err) {
+            console.error('Failed to load world.');
+            console.error(err);
+
+            return newWorld(saveSlot, false);
+        }
     }
 }
 
diff --git a/src/lib/game/Tile.ts b/src/lib/game/Tile.ts
deleted file mode 100644
index 8939978..0000000
--- a/src/lib/game/Tile.ts
+++ /dev/null
@@ -1,356 +0,0 @@
-
-import { tileset, tilesetNumberTexture } from "./Assets";
-import type { BitIO } from "../BitIO";
-import { sfc_hash } from "../RNG";
-import type { World } from "./World";
-
-
-
-export abstract class Tile {
-    public readonly world: World;
-    public readonly x: number;
-    public readonly y: number;
-
-    public constructor(world: World, x: number, y: number) {
-        this.world = world;
-        this.x = x;
-        this.y = y;
-    }
-
-    /**
-     * 
-     * @param ctx - Transformed to tile coordinates
-     */
-    public abstract render(ctx: CanvasRenderingContext2D): void;
-
-    /**
-     * @returns Number of mines this tile has
-     */
-    public abstract numMines(): number;
-    /**
-     * @returns Number of flags this tile has
-     */
-    public abstract numFlags(): number;
-
-    /**
-     * Mines search pattern
-     */
-    public abstract readonly searchPattern: { x: number, y: number }[];
-    /**
-     * @returns Number of mines in search pattern
-     */
-    public minesNearby(): number {
-        // TODO: Cache return value.
-        let count: number = 0;
-        for(const offset of this.searchPattern) {
-            count += this.world.getTile(this.x + offset.x, this.y + offset.y).numMines();
-        }
-        return count;
-    }
-    /**
-     * @returns Number of flags in search pattern
-     */
-    public flagsNearby(): number {
-        // TODO: Cache return value.
-        let count: number = 0;
-        for(const offset of this.searchPattern) {
-            count += this.world.getTile(this.x + offset.x, this.y + offset.y).numFlags();
-        }
-        return count;
-    }
-
-    /**
-     * Use flag action
-     */
-    public abstract flag(): void;
-    /**
-     * Use reveal action
-     */
-    public abstract reveal(): void;
-
-
-
-    public abstract save(io: BitIO): void;
-    public static load(world: World, x: number, y: number, io: BitIO): Tile {
-        throw new Error('Tile.load needs to be implemented on derived class.');
-    }
-}
-
-
-
-// abstract class MultiMineTile extends Tile {
-//     protected readonly _numMines: number;
-//     protected _revealed: boolean = false;
-//     protected _numFlags: number = 0;
-//     protected readonly _numFlagsMax: number = 1;
-
-//     public constructor(world: World, x: number, y: number, mines: number, maxMines: number) {
-//         super(world, x, y);
-//         this._numMines = mines;
-//         this._numFlagsMax = maxMines;
-//     }
-
-//     public numMines(): number { return this._numMines; }
-//     public numFlags(): number { return this._numFlags; }
-
-//     public readonly searchPattern: { x: number, y: number }[] = [
-//         { x: -1, y: 0 },
-//         { x: -1, y: 1 },
-//         { x: 0, y: 1 },
-//         { x: 1, y: 1 },
-//         { x: 1, y: 0 },
-//         { x: 1, y: -1 },
-//         { x: 0, y: -1 },
-//         { x: -1, y: -1 }
-//     ];
-
-//     public flag(): void {
-//         if(this._revealed) return;
-//         this._numFlags++;
-//         if(this._numFlags > this._numFlagsMax) {
-//             this._numFlags = 0;
-//         }
-//     }
-
-//     public reveal(): void {
-//         if(this._numFlags > 0) return;
-//         this._revealed = true;
-//     }
-// }
-
-
-
-enum SingleMineTileState {
-    Covered,
-    Flagged,
-    Revealed
-}
-
-abstract class SingleMineTile extends Tile {
-    protected readonly isMine: boolean;
-    protected state: SingleMineTileState = SingleMineTileState.Covered;
-
-    public constructor(world: World, x: number, y: number, isMine: boolean) {
-        super(world, x, y);
-        this.isMine = isMine;
-    }
-
-    public numMines(): number { return this.isMine ? 1 : 0; }
-    public numFlags(): number { return (this.state == SingleMineTileState.Flagged) ? 1 : 0; }
-
-    public readonly searchPattern: { x: number, y: number }[] = [
-        { x: -1, y: 0 },
-        { x: -1, y: 1 },
-        { x: 0, y: 1 },
-        { x: 1, y: 1 },
-        { x: 1, y: 0 },
-        { x: 1, y: -1 },
-        { x: 0, y: -1 },
-        { x: -1, y: -1 }
-    ];
-
-    public flag(): void {
-        if(this.state == SingleMineTileState.Revealed) return;
-        if(this.state == SingleMineTileState.Covered) {
-            this.state = SingleMineTileState.Flagged;
-        } else {
-            this.state = SingleMineTileState.Covered;
-        }
-    }
-
-    public reveal(): void {
-        if(this.state == SingleMineTileState.Flagged) return;
-        this.state = SingleMineTileState.Revealed;
-    }
-}
-
-
-
-export class VanillaTile extends SingleMineTile {
-    public constructor(world: World, x: number, y: number) {
-        const isMine = sfc_hash(world.tileSeed, x, y, 0) > 0.875;
-        super(world, x, y, isMine);
-    }
-
-    public render(ctx: CanvasRenderingContext2D): void {
-        switch(this.state) {
-            case SingleMineTileState.Covered: {
-                tileset.draw(ctx, 'vanilla_tile_covered', 0, 0, 1, 1);
-                break; }
-            case SingleMineTileState.Flagged: {
-                tileset.draw(ctx, 'vanilla_tile_covered', 0, 0, 1, 1);
-                tileset.draw(ctx, 'flag', 0, 0, 1, 1);
-                break; }
-            case SingleMineTileState.Revealed: {
-                tileset.draw(ctx, 'vanilla_tile_revealed', 0, 0, 1, 1);
-                if(this.isMine) {
-                    tileset.draw(ctx, 'bomb', 0, 0, 1, 1);
-                } else {
-                    tileset.draw(ctx, tilesetNumberTexture(this.minesNearby()), 0, 0, 1, 1);
-                }
-                break; }
-        }
-    }
-
-    public save(io: BitIO): void {
-        io.writeBits(2, this.state);
-    }
-
-    public static load(world: World, x: number, y: number, io: BitIO): Tile {
-        const tile = new VanillaTile(world, x, y);
-        switch(io.readBits(2)) {
-            case SingleMineTileState.Covered: break;
-            case SingleMineTileState.Flagged: tile.flag(); break;
-            case SingleMineTileState.Revealed: tile.reveal(); break;
-        }
-        return tile;
-    }
-}
-
-export class ChocolateTile extends SingleMineTile {
-    public constructor(world: World, x: number, y: number) {
-        const isMine = sfc_hash(world.tileSeed, x, y, 0) > 0.625;
-        super(world, x, y, isMine);
-    }
-
-    public render(ctx: CanvasRenderingContext2D): void {
-        switch(this.state) {
-            case SingleMineTileState.Covered: {
-                tileset.draw(ctx, 'chocolate_tile_covered', 0, 0, 1, 1);
-                break; }
-            case SingleMineTileState.Flagged: {
-                tileset.draw(ctx, 'chocolate_tile_covered', 0, 0, 1, 1);
-                tileset.draw(ctx, 'flag', 0, 0, 1, 1);
-                break; }
-            case SingleMineTileState.Revealed: {
-                tileset.draw(ctx, 'chocolate_tile_revealed', 0, 0, 1, 1);
-                if(this.isMine) {
-                    tileset.draw(ctx, 'bomb', 0, 0, 1, 1);
-                } else {
-                    tileset.draw(ctx, tilesetNumberTexture(this.minesNearby()), 0, 0, 1, 1);
-                }
-                break; }
-        }
-    }
-
-    public save(io: BitIO): void {
-        io.writeBits(2, this.state);
-    }
-
-    public static load(world: World, x: number, y: number, io: BitIO): Tile {
-        const tile = new ChocolateTile(world, x, y);
-        switch(io.readBits(2)) {
-            case SingleMineTileState.Covered: break;
-            case SingleMineTileState.Flagged: tile.flag(); break;
-            case SingleMineTileState.Revealed: tile.reveal(); break;
-        }
-        return tile;
-    }
-}
-
-
-
-function waffle(world: World, checkerSize: number, x: number, y: number): { isDark: boolean, isMine: boolean } {
-    const checkerX = Math.floor(x / checkerSize);
-    const checkerY = Math.floor(y / checkerSize);
-    const isDark = (checkerX + checkerY % 2) % 2 == 0;
-
-    const checkerIndex = Math.abs(x % checkerSize) + Math.abs(y % checkerSize) * checkerSize;
-    const checkerRngPos = Math.floor(sfc_hash(world.tileSeed, checkerX, checkerY, 0) * checkerSize**2);
-    
-    const isMine = (isDark ? (
-        checkerIndex == checkerRngPos ? false : true
-    ) : (
-        checkerIndex == checkerRngPos ? true : false
-    ));
-
-    return { isDark, isMine };
-}
-
-export class WaffleTile extends SingleMineTile {
-    public readonly isDark: boolean;
-
-    public constructor(world: World, x: number, y: number) {
-        const { isDark, isMine } = waffle(world, 2, x, y);
-        super(world, x, y, isMine);
-        this.isDark = isDark
-    }
-
-    public render(ctx: CanvasRenderingContext2D): void {
-        switch(this.state) {
-            case SingleMineTileState.Covered: {
-                tileset.draw(ctx, this.isDark ? 'waffle_tile_covered_dark' : 'waffle_tile_covered_light', 0, 0, 1, 1);
-                break; }
-            case SingleMineTileState.Flagged: {
-                tileset.draw(ctx, this.isDark ? 'waffle_tile_covered_dark' : 'waffle_tile_covered_light', 0, 0, 1, 1);
-                tileset.draw(ctx, 'flag', 0, 0, 1, 1);
-                break; }
-            case SingleMineTileState.Revealed: {
-                tileset.draw(ctx, this.isDark ? 'waffle_tile_revealed_dark' : 'waffle_tile_revealed_light', 0, 0, 1, 1);
-                if(this.isMine) {
-                    tileset.draw(ctx, 'bomb', 0, 0, 1, 1);
-                } else {
-                    tileset.draw(ctx, tilesetNumberTexture(this.minesNearby()), 0, 0, 1, 1);
-                }
-                break; }
-        }
-    }
-
-    public save(io: BitIO): void {
-        io.writeBits(2, this.state);
-    }
-
-    public static load(world: World, x: number, y: number, io: BitIO): Tile {
-        const tile = new WaffleTile(world, x, y);
-        switch(io.readBits(2)) {
-            case SingleMineTileState.Covered: break;
-            case SingleMineTileState.Flagged: tile.flag(); break;
-            case SingleMineTileState.Revealed: tile.reveal(); break;
-        }
-        return tile;
-    }
-}
-
-export class Stroopwafel extends SingleMineTile {
-    public readonly isDark: boolean;
-
-    public constructor(world: World, x: number, y: number) {
-        const { isDark, isMine } = waffle(world, 3, x, y);
-        super(world, x, y, isMine);
-        this.isDark = isDark
-    }
-
-    public render(ctx: CanvasRenderingContext2D): void {
-        switch(this.state) {
-            case SingleMineTileState.Covered: {
-                tileset.draw(ctx, this.isDark ? 'stroopwafel_tile_covered_dark' : 'stroopwafel_tile_covered_light', 0, 0, 1, 1);
-                break; }
-            case SingleMineTileState.Flagged: {
-                tileset.draw(ctx, this.isDark ? 'stroopwafel_tile_covered_dark' : 'stroopwafel_tile_covered_light', 0, 0, 1, 1);
-                tileset.draw(ctx, 'flag', 0, 0, 1, 1);
-                break; }
-            case SingleMineTileState.Revealed: {
-                tileset.draw(ctx, this.isDark ? 'stroopwafel_tile_revealed_dark' : 'stroopwafel_tile_revealed_light', 0, 0, 1, 1);
-                if(this.isMine) {
-                    tileset.draw(ctx, 'bomb', 0, 0, 1, 1);
-                } else {
-                    tileset.draw(ctx, tilesetNumberTexture(this.minesNearby()), 0, 0, 1, 1);
-                }
-                break; }
-        }
-    }
-
-    public save(io: BitIO): void {
-        io.writeBits(2, this.state);
-    }
-
-    public static load(world: World, x: number, y: number, io: BitIO): Tile {
-        const tile = new Stroopwafel(world, x, y);
-        switch(io.readBits(2)) {
-            case SingleMineTileState.Covered: break;
-            case SingleMineTileState.Flagged: tile.flag(); break;
-            case SingleMineTileState.Revealed: tile.reveal(); break;
-        }
-        return tile;
-    }
-}
diff --git a/src/lib/game/World.ts b/src/lib/game/World.ts
index d678024..1ce6734 100644
--- a/src/lib/game/World.ts
+++ b/src/lib/game/World.ts
@@ -3,8 +3,8 @@ import { Chunk, GeneratedChunk } from "./Chunk";
 import { CHUNK_SIZE } from "./Constants";
 import { generateTile } from "./Generator";
 import { splitmix32 } from "../RNG";
-import { type Tile } from "./Tile";
 import { Base64 } from "js-base64";
+import type { ValidTile } from "./tile/Tile";
 
 
 
@@ -46,7 +46,7 @@ export class World {
 
     private chunks: {[key: ChunkCoordinate]: GeneratedChunk} = {};
 
-    public generateTile(x: number, y: number): Tile {
+    public generateTile(x: number, y: number): ValidTile {
         return generateTile(this, x, y);
     }
 
@@ -64,7 +64,7 @@ export class World {
         return genChunk;
     }
 
-    public getTile(x: number, y: number): Tile {
+    public getTile(x: number, y: number): ValidTile {
         const chunkX = Math.floor(x / CHUNK_SIZE);
         const chunkY = Math.floor(y / CHUNK_SIZE);
         const chunk = this.getGeneratedChunk(chunkX, chunkY);
@@ -97,8 +97,8 @@ export class World {
             }
         }
 
-        let reveal: Tile[] = [ ];
-        let stack: Tile[] = [ tile ];
+        let reveal: ValidTile[] = [ ];
+        let stack: ValidTile[] = [ tile ];
 
         while(stack.length > 0) {
             const tile = stack.pop()!;
diff --git a/src/lib/game/theme/Theme.ts b/src/lib/game/theme/Theme.ts
new file mode 100644
index 0000000..43c9a10
--- /dev/null
+++ b/src/lib/game/theme/Theme.ts
@@ -0,0 +1,11 @@
+
+import type { ValidTile } from "../tile/Tile";
+
+
+
+export abstract class Theme {
+    public abstract init(): Promise<void>;
+    public abstract drawTile(ctx: CanvasRenderingContext2D, tile: ValidTile): void;
+}
+
+
diff --git a/src/lib/game/theme/retro.ts b/src/lib/game/theme/retro.ts
new file mode 100644
index 0000000..2408d90
--- /dev/null
+++ b/src/lib/game/theme/retro.ts
@@ -0,0 +1,100 @@
+
+import { TextureAtlas } from "../../Atlas";
+import { SingleMineTileState, type SingleMineTile } from "../tile/SingleMine";
+import type { Tile, ValidTile } from "../tile/Tile";
+import { waffleIsDark } from "../tile/Waffle";
+import { Theme } from "./Theme";
+
+
+
+export class ThemeRetro extends Theme {
+
+    private readonly tileset = new TextureAtlas('/infinite-minesweeper/tileset_retro.png', {
+        null: [ 0, 0, 16, 16 ],
+        bomb: [ 16, 0, 16, 16 ],
+        explosion: [ 16, 16, 16, 16 ],
+        flag: [ 32, 16, 16, 16 ],
+        number_0: [ 48, 0, 16, 16 ],
+        number_1: [ 48, 16, 16, 16 ],
+        number_2: [ 48, 32, 16, 16 ],
+        number_3: [ 48, 48, 16, 16 ],
+        number_4: [ 48, 64, 16, 16 ],
+        number_5: [ 48, 80, 16, 16 ],
+        number_6: [ 48, 96, 16, 16 ],
+        number_7: [ 48, 112, 16, 16 ],
+        number_8: [ 48, 128, 16, 16 ],
+        tile_vanilla_covered: [ 64, 0, 16, 16 ],
+        tile_vanilla_revealed: [ 80, 0, 16, 16 ],
+        tile_chocolate_covered: [ 64, 16, 16, 16 ],
+        tile_chocolate_revealed: [ 80, 16, 16, 16 ],
+        tile_waffle_light_covered: [ 64, 32, 16, 16 ],
+        tile_waffle_light_revealed: [ 80, 32, 16, 16 ],
+        tile_waffle_dark_covered: [ 96, 32, 16, 16 ],
+        tile_waffle_dark_revealed: [ 112, 32, 16, 16 ],
+        tile_stroopwafel_light_covered: [ 64, 48, 16, 16 ],
+        tile_stroopwafel_light_revealed: [ 80, 48, 16, 16 ],
+        tile_stroopwafel_dark_covered: [ 96, 48, 16, 16 ],
+        tile_stroopwafel_dark_revealed: [ 112, 48, 16, 16 ]
+    });
+
+    public async init(): Promise<void> {
+        await this.tileset.awaitLoad();
+    }
+
+
+
+    private drawNearby(ctx: CanvasRenderingContext2D, tile: Tile): void {
+        const nearby = tile.minesNearby();
+        switch(nearby) {
+            case 0: break;
+            case 1: this.tileset.draw(ctx, 'number_1', 0, 0, 1, 1); break;
+            case 2: this.tileset.draw(ctx, 'number_2', 0, 0, 1, 1); break;
+            case 3: this.tileset.draw(ctx, 'number_3', 0, 0, 1, 1); break;
+            case 4: this.tileset.draw(ctx, 'number_4', 0, 0, 1, 1); break;
+            case 5: this.tileset.draw(ctx, 'number_5', 0, 0, 1, 1); break;
+            case 6: this.tileset.draw(ctx, 'number_6', 0, 0, 1, 1); break;
+            case 7: this.tileset.draw(ctx, 'number_7', 0, 0, 1, 1); break;
+            case 8: this.tileset.draw(ctx, 'number_8', 0, 0, 1, 1); break;
+            default: throw new Error('ThemeRetro invalid draw nearby count.');
+        }
+    }
+
+    private drawSingleMineTile(ctx: CanvasRenderingContext2D, tile: SingleMineTile, covered: keyof typeof this.tileset.textures, revealed: keyof typeof this.tileset.textures): void {
+        switch(tile.state) {
+            case SingleMineTileState.Covered: this.tileset.draw(ctx, covered, 0, 0, 1, 1); break;
+            case SingleMineTileState.Flagged: this.tileset.draw(ctx, covered, 0, 0, 1, 1); this.tileset.draw(ctx, 'flag', 0, 0, 1, 1); break;
+            case SingleMineTileState.Revealed: {
+                this.tileset.draw(ctx, revealed, 0, 0, 1, 1);
+                if(tile.isMine) {
+                    this.tileset.draw(ctx, 'bomb', 0, 0, 1, 1);
+                } else {
+                    this.drawNearby(ctx, tile);
+                }
+                break; }
+        }
+    }
+
+    public drawTile(ctx: CanvasRenderingContext2D, tile: ValidTile): void {
+        switch(tile.type) {
+            case 'vanilla': this.drawSingleMineTile(ctx, tile, 'tile_vanilla_covered', 'tile_vanilla_revealed'); break;
+            case 'chocolate': this.drawSingleMineTile(ctx, tile, 'tile_chocolate_covered', 'tile_chocolate_revealed'); break;
+            case 'waffle': {
+                if(!waffleIsDark(2, tile.x, tile.y)) {
+                    this.drawSingleMineTile(ctx, tile, 'tile_waffle_light_covered', 'tile_waffle_light_revealed');
+                } else {
+                    this.drawSingleMineTile(ctx, tile, 'tile_waffle_dark_covered', 'tile_waffle_dark_revealed');
+                }
+                break; }
+            case 'stroopwafel': {
+                if(!waffleIsDark(3, tile.x, tile.y)) {
+                    this.drawSingleMineTile(ctx, tile, 'tile_stroopwafel_light_covered', 'tile_stroopwafel_light_revealed');
+                } else {
+                    this.drawSingleMineTile(ctx, tile, 'tile_stroopwafel_dark_covered', 'tile_stroopwafel_dark_revealed');
+                }
+                break; }
+        }
+    }
+
+}
+
+
diff --git a/src/lib/game/tile/Chocolate.ts b/src/lib/game/tile/Chocolate.ts
new file mode 100644
index 0000000..bf43bf6
--- /dev/null
+++ b/src/lib/game/tile/Chocolate.ts
@@ -0,0 +1,32 @@
+
+import type { BitIO } from "$lib/BitIO";
+import { sfc_hash } from "$lib/RNG";
+import type { World } from "../World";
+import { SingleMineTile, SingleMineTileState } from "./SingleMine";
+
+
+
+export class ChocolateTile extends SingleMineTile {
+    public readonly type: 'chocolate' = 'chocolate';
+
+    public constructor(world: World, x: number, y: number) {
+        const isMine = sfc_hash(world.tileSeed, x, y, 0) > 0.625;
+        super(world, x, y, isMine);
+    }
+
+    public save(io: BitIO): void {
+        io.writeBits(2, this.state);
+    }
+
+    public static load(world: World, x: number, y: number, io: BitIO): ChocolateTile {
+        const tile = new ChocolateTile(world, x, y);
+        switch(io.readBits(2)) {
+            case SingleMineTileState.Covered: break;
+            case SingleMineTileState.Flagged: tile.flag(); break;
+            case SingleMineTileState.Revealed: tile.reveal(); break;
+        }
+        return tile;
+    }
+}
+
+
diff --git a/src/lib/game/tile/MultiMine.ts b/src/lib/game/tile/MultiMine.ts
new file mode 100644
index 0000000..1dfa343
--- /dev/null
+++ b/src/lib/game/tile/MultiMine.ts
@@ -0,0 +1,44 @@
+
+
+
+// abstract class MultiMineTile extends Tile {
+//     protected readonly _numMines: number;
+//     protected _revealed: boolean = false;
+//     protected _numFlags: number = 0;
+//     protected readonly _numFlagsMax: number = 1;
+
+//     public constructor(world: World, x: number, y: number, mines: number, maxMines: number) {
+//         super(world, x, y);
+//         this._numMines = mines;
+//         this._numFlagsMax = maxMines;
+//     }
+
+//     public numMines(): number { return this._numMines; }
+//     public numFlags(): number { return this._numFlags; }
+
+//     public readonly searchPattern: { x: number, y: number }[] = [
+//         { x: -1, y: 0 },
+//         { x: -1, y: 1 },
+//         { x: 0, y: 1 },
+//         { x: 1, y: 1 },
+//         { x: 1, y: 0 },
+//         { x: 1, y: -1 },
+//         { x: 0, y: -1 },
+//         { x: -1, y: -1 }
+//     ];
+
+//     public flag(): void {
+//         if(this._revealed) return;
+//         this._numFlags++;
+//         if(this._numFlags > this._numFlagsMax) {
+//             this._numFlags = 0;
+//         }
+//     }
+
+//     public reveal(): void {
+//         if(this._numFlags > 0) return;
+//         this._revealed = true;
+//     }
+// }
+
+
diff --git a/src/lib/game/tile/SingleMine.ts b/src/lib/game/tile/SingleMine.ts
new file mode 100644
index 0000000..0f02d44
--- /dev/null
+++ b/src/lib/game/tile/SingleMine.ts
@@ -0,0 +1,49 @@
+
+import type { World } from "../World";
+import { Tile } from "./Tile";
+
+export enum SingleMineTileState {
+    Covered,
+    Flagged,
+    Revealed
+}
+
+export abstract class SingleMineTile extends Tile {
+    public readonly isMine: boolean;
+    public state: SingleMineTileState = SingleMineTileState.Covered;
+
+    public constructor(world: World, x: number, y: number, isMine: boolean) {
+        super(world, x, y);
+        this.isMine = isMine;
+    }
+
+    public numMines(): number { return this.isMine ? 1 : 0; }
+    public numFlags(): number { return (this.state == SingleMineTileState.Flagged) ? 1 : 0; }
+
+    public readonly searchPattern: { x: number, y: number }[] = [
+        { x: -1, y: 0 },
+        { x: -1, y: 1 },
+        { x: 0, y: 1 },
+        { x: 1, y: 1 },
+        { x: 1, y: 0 },
+        { x: 1, y: -1 },
+        { x: 0, y: -1 },
+        { x: -1, y: -1 }
+    ];
+
+    public flag(): void {
+        if(this.state == SingleMineTileState.Revealed) return;
+        if(this.state == SingleMineTileState.Covered) {
+            this.state = SingleMineTileState.Flagged;
+        } else {
+            this.state = SingleMineTileState.Covered;
+        }
+    }
+
+    public reveal(): void {
+        if(this.state == SingleMineTileState.Flagged) return;
+        this.state = SingleMineTileState.Revealed;
+    }
+}
+
+
diff --git a/src/lib/game/tile/Stroopwafel.ts b/src/lib/game/tile/Stroopwafel.ts
new file mode 100644
index 0000000..2273176
--- /dev/null
+++ b/src/lib/game/tile/Stroopwafel.ts
@@ -0,0 +1,35 @@
+
+import type { BitIO } from "$lib/BitIO";
+import type { World } from "../World";
+import { SingleMineTile, SingleMineTileState } from "./SingleMine";
+import { waffle } from "./Waffle";
+
+
+
+export class StroopwafelTile extends SingleMineTile {
+    public readonly type: 'stroopwafel' = 'stroopwafel';
+
+    public readonly isDark: boolean;
+
+    public constructor(world: World, x: number, y: number) {
+        const { isDark, isMine } = waffle(world, 3, x, y);
+        super(world, x, y, isMine);
+        this.isDark = isDark
+    }
+
+    public save(io: BitIO): void {
+        io.writeBits(2, this.state);
+    }
+
+    public static load(world: World, x: number, y: number, io: BitIO): StroopwafelTile {
+        const tile = new StroopwafelTile(world, x, y);
+        switch(io.readBits(2)) {
+            case SingleMineTileState.Covered: break;
+            case SingleMineTileState.Flagged: tile.flag(); break;
+            case SingleMineTileState.Revealed: tile.reveal(); break;
+        }
+        return tile;
+    }
+}
+
+
diff --git a/src/lib/game/tile/Tile.ts b/src/lib/game/tile/Tile.ts
new file mode 100644
index 0000000..6bf0032
--- /dev/null
+++ b/src/lib/game/tile/Tile.ts
@@ -0,0 +1,82 @@
+
+import type { BitIO } from "$lib/BitIO";
+import type { World } from "../World";
+import type { ChocolateTile } from "./Chocolate";
+import type { StroopwafelTile } from "./Stroopwafel";
+import type { VanillaTile } from "./Vanilla";
+import type { WaffleTile } from "./Waffle";
+
+export abstract class Tile {
+    public abstract readonly type: string;
+
+    public readonly world: World;
+    public readonly x: number;
+    public readonly y: number;
+
+    public constructor(world: World, x: number, y: number) {
+        this.world = world;
+        this.x = x;
+        this.y = y;
+    }
+
+    /**
+     * @returns Number of mines this tile has
+     */
+    public abstract numMines(): number;
+    /**
+     * @returns Number of flags this tile has
+     */
+    public abstract numFlags(): number;
+
+    /**
+     * Mines search pattern
+     */
+    public abstract readonly searchPattern: { x: number, y: number }[];
+    /**
+     * @returns Number of mines in search pattern
+     */
+    public minesNearby(): number {
+        // TODO: Cache return value.
+        let count: number = 0;
+        for(const offset of this.searchPattern) {
+            count += this.world.getTile(this.x + offset.x, this.y + offset.y).numMines();
+        }
+        return count;
+    }
+    /**
+     * @returns Number of flags in search pattern
+     */
+    public flagsNearby(): number {
+        // TODO: Cache return value.
+        let count: number = 0;
+        for(const offset of this.searchPattern) {
+            count += this.world.getTile(this.x + offset.x, this.y + offset.y).numFlags();
+        }
+        return count;
+    }
+
+    /**
+     * Use flag action
+     */
+    public abstract flag(): void;
+    /**
+     * Use reveal action
+     */
+    public abstract reveal(): void;
+
+
+
+    public abstract save(io: BitIO): void;
+    public static load(world: World, x: number, y: number, io: BitIO): ValidTile {
+        throw new Error('Tile.load needs to be implemented on derived class.');
+    }
+}
+
+
+
+// TODO: Probably rename above to TileBase and rename below to just Tile.
+export type ValidTile = VanillaTile | ChocolateTile | WaffleTile | StroopwafelTile;
+// FIXME: This is dumb, why not `typeof ArrayElement<ValidTile>`
+export type ValidTileConstructor = typeof VanillaTile | typeof ChocolateTile | typeof WaffleTile | typeof StroopwafelTile;
+
+
diff --git a/src/lib/game/tile/Vanilla.ts b/src/lib/game/tile/Vanilla.ts
new file mode 100644
index 0000000..0bc0b3c
--- /dev/null
+++ b/src/lib/game/tile/Vanilla.ts
@@ -0,0 +1,32 @@
+
+import type { BitIO } from "$lib/BitIO";
+import { sfc_hash } from "$lib/RNG";
+import type { World } from "../World";
+import { SingleMineTile, SingleMineTileState } from "./SingleMine";
+
+
+
+export class VanillaTile extends SingleMineTile {
+    public readonly type: 'vanilla' = 'vanilla';
+
+    public constructor(world: World, x: number, y: number) {
+        const isMine = sfc_hash(world.tileSeed, x, y, 0) > 0.875;
+        super(world, x, y, isMine);
+    }
+
+    public save(io: BitIO): void {
+        io.writeBits(2, this.state);
+    }
+
+    public static load(world: World, x: number, y: number, io: BitIO): VanillaTile {
+        const tile = new VanillaTile(world, x, y);
+        switch(io.readBits(2)) {
+            case SingleMineTileState.Covered: break;
+            case SingleMineTileState.Flagged: tile.flag(); break;
+            case SingleMineTileState.Revealed: tile.reveal(); break;
+        }
+        return tile;
+    }
+}
+
+
diff --git a/src/lib/game/tile/Waffle.ts b/src/lib/game/tile/Waffle.ts
new file mode 100644
index 0000000..4fb3e91
--- /dev/null
+++ b/src/lib/game/tile/Waffle.ts
@@ -0,0 +1,60 @@
+
+import type { BitIO } from "$lib/BitIO";
+import type { World } from "../World";
+import { SingleMineTile, SingleMineTileState } from "./SingleMine";
+import { sfc_hash } from "$lib/RNG";
+
+
+
+export function waffleIsDark(checkerSize: number, x: number, y: number): boolean {
+    const checkerX = Math.floor(x / checkerSize);
+    const checkerY = Math.floor(y / checkerSize);
+    return (checkerX + checkerY % 2) % 2 == 0;
+}
+
+export function waffle(world: World, checkerSize: number, x: number, y: number): { isDark: boolean, isMine: boolean } {
+    const checkerX = Math.floor(x / checkerSize);
+    const checkerY = Math.floor(y / checkerSize);
+    const isDark = (checkerX + checkerY % 2) % 2 == 0;
+
+    const checkerIndex = Math.abs(x % checkerSize) + Math.abs(y % checkerSize) * checkerSize;
+    const checkerRngPos = Math.floor(sfc_hash(world.tileSeed, checkerX, checkerY, 0) * checkerSize**2);
+    
+    const isMine = (isDark ? (
+        checkerIndex == checkerRngPos ? false : true
+    ) : (
+        checkerIndex == checkerRngPos ? true : false
+    ));
+
+    return { isDark, isMine };
+}
+
+
+
+export class WaffleTile extends SingleMineTile {
+    public readonly type: 'waffle' = 'waffle';
+
+    public readonly isDark: boolean;
+
+    public constructor(world: World, x: number, y: number) {
+        const { isDark, isMine } = waffle(world, 2, x, y);
+        super(world, x, y, isMine);
+        this.isDark = isDark
+    }
+
+    public save(io: BitIO): void {
+        io.writeBits(2, this.state);
+    }
+
+    public static load(world: World, x: number, y: number, io: BitIO): WaffleTile {
+        const tile = new WaffleTile(world, x, y);
+        switch(io.readBits(2)) {
+            case SingleMineTileState.Covered: break;
+            case SingleMineTileState.Flagged: tile.flag(); break;
+            case SingleMineTileState.Revealed: tile.reveal(); break;
+        }
+        return tile;
+    }
+}
+
+
diff --git a/static/tileset.png b/static/tileset_retro.png
similarity index 100%
rename from static/tileset.png
rename to static/tileset_retro.png