Change states using SuiWeb
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

This commit is contained in:
Manuel Thalmann 2022-12-15 22:42:57 +01:00
parent c15f5f57f9
commit da371fdca2
3 changed files with 34 additions and 61 deletions

View file

@ -1,4 +1,6 @@
import { Constants } from "./Constants.js";
import { Game } from "./Game.js";
import { useState } from "./SuiWeb.js";
const saveGameKey = "connect-force-save";
const newGameClass = "new-game";
@ -7,16 +9,15 @@ const loadGameClass = "load-game";
const undoClass = "undo-game";
/**
* Gets a component which represents the specified {@link game `game`}.
*
* @param {{game: import("./Game.js").Game }} game
* The game represented in this app.
* Gets a component which represents game.
*
* @returns {NodeDescriptor}
* The rendered node.
*/
export function App({ game })
export function App()
{
const [game, setGame] = /** @type {[Game, (updateFunction: (game: Game) => void) => void]} */ (useState("game", "game", new Game()));
return [
"div",
{
@ -25,20 +26,35 @@ export function App({ game })
let target = /** @type {HTMLElement} */ (event.target);
if (target.classList.contains(newGameClass))
{
setGame(
(game) =>
{
game.reset();
return game;
});
}
else if (target.classList.contains(saveGameClass))
{
localStorage.setItem(saveGameKey, JSON.stringify(game.dump()));
}
else if (target.classList.contains(loadGameClass))
{
setGame(
(game) =>
{
game.load(JSON.parse(localStorage.getItem(saveGameKey)));
return game;
});
}
else if (target.classList.contains(undoClass))
{
setGame(
(game) =>
{
game.undo();
return game;
});
}
else
{
@ -52,10 +68,12 @@ export function App({ game })
if (node === target || node.contains(target))
{
if (game.addChip(x, y))
setGame(
(game) =>
{
game.draw();
}
game.addChip(x, y);
return game;
});
}
}
}

View file

@ -1,6 +1,4 @@
import { App } from "./Components.js";
import { State } from "./State.js";
import { render } from "./SuiWeb.js";
/**
* Represents a game.
@ -36,22 +34,11 @@ export class Game
*/
#state;
/**
* The id of the element to add the board to.
*
* @type {string}
*/
id;
/**
* Initializes a new instance of the {@link Game `Game`} class.
*
* @param {string} id
* The id of the element to add the board to.
*/
constructor(id)
constructor()
{
this.id = id;
this.#state = State.create(Game.#width, Game.#height);
}
@ -153,16 +140,6 @@ export class Game
{
this.reset();
}
this.draw();
}
/**
* Initializes the game.
*/
initialize()
{
this.draw();
}
/**
@ -171,7 +148,6 @@ export class Game
reset()
{
this.setState([], State.create(Game.#width, Game.#height));
this.draw();
}
/**
@ -185,20 +161,6 @@ export class Game
{
this.reset();
}
else
{
this.draw();
}
}
/**
* Replaces the content of the board with the current state.
*/
draw()
{
let container = document.getElementById(this.id);
container.innerHTML = "";
render([App, { game: this }], container);
}
/**

View file

@ -1,19 +1,12 @@
import { Game } from "./Game.js";
/**
* The game that is being played.
*
* @type {Game}
*/
let game;
import { App } from "./Components.js";
import { render } from "./SuiWeb.js";
/**
* Initializes the board.
*/
function initialize()
{
game = new Game("game");
game.initialize();
render([App], document.querySelector("#game"));
}
initialize();