PROTOTYPES
===========
<hr>
[FUTURE] - Empire Attack
<style>[game="empire-attack"] .square {
  vertical-align: middle;
  text-align: center;
  opacity: .95;
  font-size: 6px;
}

[game="empire-attack"] .square.is-home {
  opacity: 1;
  outline: 2px solid #f0f;
  box-shadow: inset 0 0 0 1px #fff;
}

[game="empire-attack"] .game-board .square {
  --s: var(--grid-size);
  --c1: #ff2600;
  --c2: #000;
  --d: calc(var(--s) / 10);
  --_g: var(--c1) 36deg, #0000 0;
  background-color: unset;
  background: conic-gradient(from 162deg at calc(var(--s) * .5) calc(var(--s) * .68), var(--_g)), conic-gradient(from 18deg at calc(var(--s) * .19) calc(var(--s) * .59), var(--_g)), conic-gradient(from 306deg at calc(var(--s) * .81) calc(var(--s) * .59), var(--_g)), var(--c2);
  background-position: 0 calc(var(--s) * .35);
  background-size: calc(var(--s)  + var(--d)) calc(var(--s)  + var(--d));
  color: #fff;
  text-shadow: 0 0 2px #000;
}

[game="empire-attack"] .game-board .square[title^="-"] {
  --s: var(--grid-size);
  --c1: #72e21f;
  --c2: #044012;
  --_c: var(--c1) 25%, #0000 0;
  --_g1: conic-gradient(at 62.5% 12.5%, var(--_c));
  --_g2: conic-gradient(at 87.5% 62.5%, var(--_c));
  --_g3: conic-gradient(at 25% 12.5%, var(--_c));
  background-color: unset;
  background: var(--_g1) calc(var(--s) / -8) calc(var(--s) / 2), var(--_g1) calc(-3 * var(--s) / 8) calc(var(--s) / 4), var(--_g2) calc(3 * var(--s) / 8) calc(var(--s) / 4), var(--_g2) calc(var(--s) / -8) 0, var(--_g3) 0 calc(var(--s) / -4), var(--_g3) calc(var(--s) / -4) 0, conic-gradient(at 87.5% 87.5%, var(--_c)) calc(var(--s) / 8) 0 var(--c2);
  background-size: var(--s) var(--s);
  color: #fff;
  text-shadow: 0 0 2px #000;
}
</style>
<div game="empire-attack">
  <div class="game-board"></div>
  <div class="game-controls"></div>
</div>
<script>class R {
    _listeners = [];
    constructor(initialValue){
        this._value = initialValue;
    }
    get value() {
        return this._value;
    }
    set value(value) {
        this._value = value;
        this.emit(value);
    }
    update(updater) {
        this.value = updater(this.value);
    }
    listen(callback) {
        callback(this.value);
        this._listeners.push(callback);
    }
    emit(value) {
        this._listeners.forEach((callback)=>callback(value));
    }
}
const getNeighbours = (x, y)=>[
        [
            x,
            y
        ],
        [
            x,
            y + 1
        ],
        [
            x,
            y - 1
        ],
        [
            x + 1,
            y
        ],
        [
            x - 1,
            y
        ]
    ];
class Player {
    sign = 1;
    home = [
        0,
        0
    ];
    modes = [
        "home",
        "expand",
        "defend",
        "attack",
        "random",
        "cycle"
    ];
    constructor(){
        this.counter = new R(0);
    }
    reset(columns, rows) {
        const x = Math.floor(Math.random() * columns);
        const y = Math.floor(Math.random() * rows);
        this.home = [
            x,
            y
        ];
        this.path = new Set([
            [
                x,
                y
            ]
        ]);
    }
    fixPath(cells) {
        const coords = cells.flatMap((inner, x)=>inner.map((cell, y)=>[
                    x,
                    y
                ]));
        this.path = new Set(Array.from(coords.filter(([x, y])=>cells[x][y] > 0)));
    }
    onTick(cells) {
        if (this.counter.value < 999) this.counter.update((value)=>value + 1);
    }
}
class Bot extends Player {
    sign = -1;
    reset(columns, rows) {
        super.reset(columns, rows);
        this.mode = "cycle";
        this.cycleMode = "home";
        this.cycleCount = 0;
        this.recent = [];
    }
    fixPath(cells) {
        const coords = cells.flatMap((inner, x)=>inner.map((cell, y)=>[
                    x,
                    y
                ]));
        this.path = new Set(Array.from(coords.filter(([x, y])=>cells[x][y] < 0)));
    }
    onTick(cells) {
        super.onTick(cells);
        if (this.mode !== "cycle" && Math.random() < 0.4) this.mode = this.modes[Math.floor(Math.random() * this.modes.length)];
    }
    getMode() {
        const modes = this.modes;
        let mode = this.mode;
        if (mode === "cycle" && ++this.cycleCount > 10) {
            const next = modes.indexOf(this.cycleMode) + 1;
            this.cycleMode = next === modes.length ? modes[0] : modes[next];
            if (this.cycleMode === "cycle") this.cycleMode = modes[0];
        }
        if (mode === "cycle") mode = this.cycleMode;
        if (mode === "random") mode = modes[Math.floor(Math.random() * (modes.length - 1))];
        return mode;
    }
}
window.games = window.games || [];
window.games.push((Base)=>{
    class EmpireAttack extends Base {
        fps = 12;
        constructor(selector){
            super(selector);
            this.MIN_COLUMNS = 20;
            this.MIN_CELL_SIZE = 24;
            this.CELL_SIZE = 24;
            this.EXTRA_CELLS = 0;
        }
        init() {
            this.player = new Player();
            this.bot = new Bot();
            super.init();
            const $counter = document.createElement("input");
            $counter.readOnly = true;
            this.player.counter.listen((value)=>$counter.value = value);
            const $play = document.createElement("button");
            $play.textContent = "Play";
            $play.addEventListener("click", this.onPlay.bind(this));
            const $pause = document.createElement("button");
            $pause.textContent = "Pause";
            $pause.addEventListener("click", this.onPause.bind(this));
            const $clear = document.createElement("button");
            $clear.textContent = "Clear";
            $clear.addEventListener("click", this.reset.bind(this));
            this.controls.append($counter, $play, $pause, $clear);
            this.onPlay();
        }
        onPlay() {
            this.paused && this.tick(this.paused = false);
        }
        onPause() {
            this.paused = true;
        }
        reset() {
            this.onPause();
            super.reset();
            this.player.reset(this.columns, this.rows);
            this.bot.reset(this.columns, this.rows);
            this.setCell(...this.player.home, this.player.sign);
            this.setCell(...this.bot.home, this.bot.sign);
            this.render();
            const selector = [
                this.player.home,
                this.bot.home
            ].map(([x, y])=>`[x="${x}"][y="${y}"]`).join(",");
            const homes = this.board.querySelectorAll(selector);
            homes.forEach((e)=>e.classList.add("is-home"));
        }
        isWin() {
            const [x, y] = this.bot.home;
            return !this.cells[x] || this.cells[x][y] > this.bot.sign;
        }
        isLose() {
            const [x, y] = this.player.home;
            return !this.cells[x] || this.cells[x][y] < this.player.sign;
        }
        onTick() {
            this.player.fixPath(this.cells);
            this.bot.fixPath(this.cells);
            if (this.isWin()) {
                this.paused = true;
                this.bot.path.forEach(([x, y])=>this.cells[x][y] = Math.abs(this.cells[x][y]));
                this.player.path.forEach(([x, y])=>this.cells[x][y] = Math.abs(this.cells[x][y]));
                return;
            }
            if (this.isLose()) {
                this.paused = true;
                this.bot.path.forEach(([x, y])=>this.cells[x][y] = -Math.abs(this.cells[x][y]));
                this.player.path.forEach(([x, y])=>this.cells[x][y] = -Math.abs(this.cells[x][y]));
                return;
            }
            this.player.onTick(this.cells);
            this.bot.onTick(this.cells);
            if (Math.random() < 0.25) this.botMove();
        }
        botDefendTiles() {
            const squares = Array.from(this.bot.path.values());
            return squares[Math.floor(Math.random() * squares.length)];
        }
        botDefendHome(cells) {
            const [hx, hy] = this.bot.home;
            const neighbours = getNeighbours(hx, hy).filter(([x, y])=>cells[x]);
            return neighbours[Math.floor(Math.random() * neighbours.length)];
        }
        botExpand(cells) {
            const squares = Array.from(this.bot.path.values());
            const outer = squares.flatMap((coord)=>coord ? getNeighbours(...coord) : []).filter(([sx, sy])=>cells[sx] && cells[sx][sy] >= 0);
            const expand = Array.from(new Set(outer));
            expand.sort(([ax, ay], [bx, by])=>{
                const a = cells[ax][ay];
                const b = cells[bx][by];
                return a - b;
            });
            const targets = expand.slice(0, Math.min(5, expand.length));
            const target = targets[Math.floor(Math.random() * targets.length)];
            this.bot.recent.unshift(target);
            this.bot.recent.length = Math.min(this.bot.recent.length, 5);
            return target;
        }
        botAttack(cells) {
            const distance = ([tx, ty], [x, y])=>(x - tx) ** 2 + (y - ty) ** 2;
            const squares = Array.from(this.bot.path.values());
            const outer = squares.flatMap((coord)=>coord ? getNeighbours(...coord) : []).filter(([sx, sy])=>cells[sx] && cells[sx][sy] >= 0);
            const attack = Array.from(new Set(outer));
            const [ux, uy] = this.player.home;
            const targeted = distance.bind(distance, [
                ux,
                uy
            ]);
            attack.sort((a, b)=>targeted(a) - targeted(b));
            const targets = attack.slice(0, Math.min(5, attack.length));
            const target = targets[Math.floor(Math.random() * targets.length)];
            this.bot.recent.unshift(target);
            this.bot.recent.length = Math.min(this.bot.recent.length, 5);
            return target;
        }
        botMove() {
            let target = this.bot.home;
            const mode = this.bot.getMode();
            const cells = this.copyCells();
            if (mode === "expand") target = this.botExpand(cells);
            else if (mode === "attack") target = this.botAttack(cells);
            else if (mode === "defend") target = this.botDefendTiles(cells);
            else target = this.botDefendHome(cells);
            if (target) {
                const [tx, ty] = target;
                const multiplier = getNeighbours(tx, ty).filter(([a, b])=>cells[a] && cells[a][b] < 0).length;
                const basePower = this.bot.counter.value;
                this.bot.counter.value = 0;
                const power = basePower * multiplier;
                this.cells[tx][ty] -= power;
                if (this.cells[tx][ty] < 0) this.bot.path.add(target);
            }
        }
        setCell(x, y, value) {
            this.cells[x][y] = value;
        }
        copyCells() {
            return this.cells.map((inner)=>inner.map((c)=>c));
        }
        combineCells(...cells) {
            const snapshot = this.copyCells();
            const update = snapshot.map((inner, x)=>inner.map((value, y)=>cells.reduce((sum, cell)=>sum + cell[x][y], 0)));
            this.cells = update;
        }
        tick() {
            this.onTick();
            this.render();
            if (!this.paused) setTimeout(()=>requestAnimationFrame(this.tick.bind(this)), Math.floor(1000 / this.fps));
        }
        addCell(x, y) {
            const $square = super.addCell(x, y);
            $square.removeEventListener("click", this.onCellClick);
            $square.style.pointerEvents = "none";
            $square.textContent = this.cells[x][y];
            $square.title = this.cells[x][y];
        }
        render() {
            for(let x = 0; x < this.columns; x++)for(let y = 0; y < this.rows; y++){
                const cell = this.cells[x][y];
                const element = this.board.querySelector(`[x="${x}"][y="${y}"]`);
                if (cell && element) {
                    element.textContent = cell;
                    element.title = cell;
                }
                if (cell && !element) this.addCell(x, y);
                if (!cell && element) element.remove();
            }
        }
        onCellClick = (event)=>{
            const snapshot = this.copyCells();
            event.stopImmediatePropagation();
            const [x, y] = this.getCoordinate(event);
            const connected = getNeighbours(x, y).filter(([a, b])=>snapshot[a] && snapshot[a][b] > 0);
            if (connected.length) {
                const power = this.player.counter.value * connected.length;
                this.player.counter.value = 0;
                const cell = snapshot[x][y];
                this.cells[x][y] = (cell || 0) + power;
                this.player.path.add([
                    x,
                    y
                ]);
            }
            this.render();
        };
    }
    return new EmpireAttack('[game="empire-attack"]');
});

</script>

<hr>
[FUTURE] - Game of Life
<div game="game-of-life">
  <div class="game-board"></div>
  <div class="game-controls"></div>
</div>
<script>window.games = window.games || [];
window.games.push((Base)=>{
    class GameOfLife extends Base {
        fps = 12;
        init() {
            super.init();
            this.setGun();
            const play = document.createElement("button");
            play.textContent = "Play";
            play.addEventListener("click", this.onPlay.bind(this));
            const pause = document.createElement("button");
            pause.textContent = "Pause";
            pause.addEventListener("click", this.onPause.bind(this));
            const step = document.createElement("button");
            step.textContent = "Step";
            step.addEventListener("click", this.doStep.bind(this));
            const clear = document.createElement("button");
            clear.textContent = "Clear";
            clear.addEventListener("click", this.reset.bind(this));
            const gun = document.createElement("button");
            gun.textContent = "Gun";
            gun.addEventListener("click", this.setGun.bind(this));
            this.controls.append(play, pause, step, clear, gun);
        }
        getNeighbours(x, y) {
            return [
                [
                    x,
                    y + 1
                ],
                [
                    x,
                    y - 1
                ],
                [
                    x + 1,
                    y
                ],
                [
                    x - 1,
                    y
                ],
                [
                    x + 1,
                    y + 1
                ],
                [
                    x - 1,
                    y - 1
                ],
                [
                    x + 1,
                    y - 1
                ],
                [
                    x - 1,
                    y + 1
                ]
            ];
        }
        advance() {
            const snapshot = this.cells.map((inner)=>inner.slice());
            for(let x = 0; x < snapshot.length; x++)for(let y = 0; y < snapshot[x].length; y++){
                const cell = snapshot[x][y];
                const neighbours = this.getNeighbours(x, y).filter(([a, b])=>snapshot[a] && snapshot[a][b]);
                const alive = cell && neighbours.length === 2 || neighbours.length === 3;
                const born = !cell && neighbours.length === 3;
                this.cells[x][y] = alive || born;
            }
        }
        doStep() {
            this.advance();
            this.render();
            if (!this.paused) setTimeout(()=>requestAnimationFrame(this.doStep.bind(this)), 1000 / this.fps);
        }
        onPlay() {
            this.paused && this.doStep(this.paused = false);
        }
        onPause() {
            this.paused = true;
        }
        reset() {
            this.onPause();
            super.reset();
        }
        setGun() {
            this.reset();
            this.cells[1][5] = !0;
            this.cells[1][6] = !0;
            this.cells[2][5] = !0;
            this.cells[2][6] = !0;
            this.cells[11][5] = !0;
            this.cells[11][6] = !0;
            this.cells[11][7] = !0;
            this.cells[12][4] = !0;
            this.cells[12][8] = !0;
            this.cells[13][3] = !0;
            this.cells[13][9] = !0;
            this.cells[14][3] = !0;
            this.cells[14][9] = !0;
            this.cells[15][6] = !0;
            this.cells[16][4] = !0;
            this.cells[16][8] = !0;
            this.cells[17][5] = !0;
            this.cells[17][6] = !0;
            this.cells[17][7] = !0;
            this.cells[18][6] = !0;
            this.cells[21][3] = !0;
            this.cells[21][4] = !0;
            this.cells[21][5] = !0;
            this.cells[22][3] = !0;
            this.cells[22][4] = !0;
            this.cells[22][5] = !0;
            this.cells[23][2] = !0;
            this.cells[23][6] = !0;
            this.cells[25][1] = !0;
            this.cells[25][2] = !0;
            this.cells[25][6] = !0;
            this.cells[25][7] = !0;
            this.cells[35][3] = !0;
            this.cells[35][4] = !0;
            this.cells[36][3] = !0;
            this.cells[36][4] = !0;
            this.render();
        }
    }
    return new GameOfLife('[game="game-of-life"]');
});

</script>

<hr>
[FUTURE] - Game Board
<style>[game] {
  white-space: normal;
  max-width: 2000px;
  height: 60vh;
}

.game-board {
  --grid-line: 1px;
  width: calc(var(--grid-size) * var(--grid-columns)  + var(--grid-line));
  height: calc(var(--grid-size) * var(--grid-rows)  + var(--grid-line));
  background-color: #fffbe8;
  background-image: linear-gradient(#dedbdb var(--grid-line), transparent var(--grid-line)), linear-gradient(to right, #dedbdb var(--grid-line), #fffbe8 var(--grid-line));
  background-size: var(--grid-size) var(--grid-size);
  position: relative;
}

.game-board .square {
  width: calc(var(--grid-size)  - var(--grid-line));
  margin: var(--grid-line) 0 0 var(--grid-line);
  aspect-ratio: 1;
  z-index: 2;
  top: calc(var(--grid-size) * var(--square-top));
  left: calc(var(--grid-size) * var(--square-left));
  background-color: #faf;
  justify-content: center;
  align-items: center;
  font-size: 8px;
  display: flex;
  position: absolute;
}
</style>
<div game="blank">
  <div class="game-board"></div>
  <div class="game-controls"></div>
</div>
<script>class BaseGame {
    constructor(selector){
        this.MIN_COLUMNS = 40;
        this.MIN_CELL_SIZE = 10;
        this.CELL_SIZE = 16;
        this.EXTRA_CELLS = 10;
        this.container = document.querySelector(selector);
        this.board = this.container.querySelector(".game-board");
        this.controls = this.container.querySelector(".game-controls");
    }
    init() {
        this.cells = [];
        const { width, height } = this.container.getBoundingClientRect();
        this.gridSize = Math.min(Math.max(Math.floor(width / this.MIN_COLUMNS), this.MIN_CELL_SIZE), this.CELL_SIZE), this.columns = Math.floor(width / this.gridSize);
        this.rows = Math.floor(height / this.gridSize);
        this.board.style.setProperty("--grid-size", this.gridSize + "px");
        this.board.style.setProperty("--grid-columns", this.columns);
        this.board.style.setProperty("--grid-rows", this.rows);
        this.reset();
        this.board.addEventListener("click", this.onCellClick);
    }
    destroy() {
        this.reset();
        this.controls.innerHTML = "";
        this.board.removeEventListener("click", this.onCellClick);
    }
    reset() {
        this.board.innerHTML = "";
        this.cells = new Array(this.columns + this.EXTRA_CELLS).fill(0).map(()=>new Array(this.rows + this.EXTRA_CELLS).fill(false));
        this.render();
    }
    getCoordinate({ clientX, clientY }, { left, top } = this.board.getBoundingClientRect()) {
        return [
            Math.floor((clientX - left) / this.gridSize),
            Math.floor((clientY - top) / this.gridSize)
        ];
    }
    addCell(x, y) {
        const $square = document.createElement("div");
        $square.classList.add("square");
        $square.style.setProperty("--square-left", x);
        $square.style.setProperty("--square-top", y);
        $square.setAttribute("x", x);
        $square.setAttribute("y", y);
        $square.addEventListener("click", this.onCellClick);
        this.board.appendChild($square);
        return $square;
    }
    render() {
        for(let x = 0; x < this.columns; x++)for(let y = 0; y < this.rows; y++){
            const cell = this.cells[x][y];
            const element = this.board.querySelector(`[x="${x}"][y="${y}"]`);
            if (cell && !element) this.addCell(x, y);
            if (!cell && element) element.remove();
        }
    }
    onCellClick = (event)=>{
        event.stopImmediatePropagation();
        const [x, y] = this.getCoordinate(event);
        this.cells[x][y] = event.target === this.board;
        this.render();
    };
}
window.games = window.games || [];
window.games.push((Base)=>new Base('[game="blank"]'));
window.game_instances = window.games.map((init)=>{
    const game = init(BaseGame);
    game.init();
    return game;
});

</script>
<!-- <hr />
[FUTURE] - ASCII Drawings
<include src="./messages/ascii-ink/ascii-img.html"></include>
<hr />
[FUTURE] - Demo
<include src="./messages/demo/demo.html"></include>
<hr />
[FUTURE] - Loader
<include src="./messages/loader/loader.html"></include>
<hr />
[FUTURE] - CAR
<include src="./messages/cloud/cloud-car-2.min.html"></include>
<hr />
[FUTURE] - Slides
<include src="./messages/slides/slides.html"></include>
<hr /> -->
------------------------------------------------------------