diff --git a/packages/game/src/index.html b/packages/game/src/index.html index 4043d08..bc4a5da 100644 --- a/packages/game/src/index.html +++ b/packages/game/src/index.html @@ -9,8 +9,16 @@
- +
+ + + +
diff --git a/packages/game/src/js/Game.js b/packages/game/src/js/Game.js index 7b36579..e4a0504 100644 --- a/packages/game/src/js/Game.js +++ b/packages/game/src/js/Game.js @@ -98,7 +98,10 @@ export class Game load(data) { this.state.turnCount = data.turnCount; + this.state.board.splice(0); + this.#state = new State(Game.#width, Game.#height); Object.assign(this.state.board, data.board); + this.draw(); } /** diff --git a/packages/game/src/js/main.js b/packages/game/src/js/main.js index 551dda3..31bbba7 100644 --- a/packages/game/src/js/main.js +++ b/packages/game/src/js/main.js @@ -7,6 +7,56 @@ import { Game } from "./Game.js"; */ let game; +/** + * A value indicating whether a transfer is pending. + */ +let transferPending = false; + +/** + * The id of the save game. + */ +let id = ""; + +/** + * Gets the save button. + * + * @returns {HTMLButtonElement} + * The save button. + */ +function getSaveButton() +{ + return document.querySelector(".save"); +} + +/** + * Gets the load button. + * + * @returns {HTMLButtonElement} + * The load button. + */ +function getLoadButton() +{ + return document.querySelector(".load"); +} + +/** + * Gets an url for storing and loading the save game. + * + * @returns {URL} + * The url for storing and loading the save game. + */ +function getUrl() +{ + let result = new URL( + id, + new URL( + "/api/data/", + window.location.origin)); + + result.searchParams.append("token", "c4game"); + return result; +} + /** * Initializes the board. */ @@ -19,6 +69,81 @@ function initialize() { game.reset(); }; + + getSaveButton().onclick = async () => + { + if (!transferPending) + { + transferPending = true; + getSaveButton().disabled = true; + getLoadButton().disabled = true; + + try + { + if (id === "") + { + let result = await (await fetch( + getUrl(), + { + method: "POST", + headers: { + "Content-type": "application/json" + }, + body: JSON.stringify(game.dump()) + })).json(); + + ({ id } = result); + } + else + { + await fetch( + getUrl(), + { + method: "PUT", + headers: { + "Content-type": "application/json" + }, + body: JSON.stringify(game.dump()) + }); + } + } + catch { } + + getSaveButton().disabled = false; + getLoadButton().disabled = false; + transferPending = false; + } + else + { + console.log("Already busy"); + } + }; + + getLoadButton().onclick = async () => + { + if (!transferPending) + { + transferPending = true; + getSaveButton().disabled = true; + getLoadButton().disabled = true; + + try + { + game.load( + await ( + await fetch(getUrl())).json()); + } + catch { } + + getSaveButton().disabled = false; + getLoadButton().disabled = false; + transferPending = false; + } + else + { + console.log("Already busy"); + } + }; } initialize();