Add code for saving and loading game
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
This commit is contained in:
parent
63a56e5b11
commit
fd172a48ed
3 changed files with 139 additions and 3 deletions
|
@ -9,8 +9,16 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="game">
|
<div id="game">
|
||||||
</div>
|
</div>
|
||||||
<button class="button new-game">
|
<form class="menu-bar">
|
||||||
New Game
|
<button class="button new-game">
|
||||||
</button>
|
New Game
|
||||||
|
</button>
|
||||||
|
<button class="button save">
|
||||||
|
Save Game
|
||||||
|
</button>
|
||||||
|
<button class="button load">
|
||||||
|
Load Game
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -98,7 +98,10 @@ export class Game
|
||||||
load(data)
|
load(data)
|
||||||
{
|
{
|
||||||
this.state.turnCount = data.turnCount;
|
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);
|
Object.assign(this.state.board, data.board);
|
||||||
|
this.draw();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -7,6 +7,56 @@ import { Game } from "./Game.js";
|
||||||
*/
|
*/
|
||||||
let game;
|
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.
|
* Initializes the board.
|
||||||
*/
|
*/
|
||||||
|
@ -19,6 +69,81 @@ function initialize()
|
||||||
{
|
{
|
||||||
game.reset();
|
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();
|
initialize();
|
||||||
|
|
Loading…
Reference in a new issue