Move all click events to Component.js
This commit is contained in:
parent
1e47864ee2
commit
80b55732e7
4 changed files with 79 additions and 125 deletions
|
|
@ -9,16 +9,5 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="game">
|
<div id="game">
|
||||||
</div>
|
</div>
|
||||||
<form class="menu-bar">
|
|
||||||
<button class="button new-game">
|
|
||||||
New Game
|
|
||||||
</button>
|
|
||||||
<button class="button save">
|
|
||||||
Save Game
|
|
||||||
</button>
|
|
||||||
<button class="button load">
|
|
||||||
Load Game
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,7 @@
|
||||||
import { Constants } from "./Constants.js";
|
import { Constants } from "./Constants.js";
|
||||||
|
|
||||||
|
const saveGameKey = "connect-force-save";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Gets a component which represents the specified {@link game `game`}.
|
* Gets a component which represents the specified {@link game `game`}.
|
||||||
*
|
*
|
||||||
|
|
@ -46,9 +48,10 @@ export function App(game)
|
||||||
"div",
|
"div",
|
||||||
{ className: "log" },
|
{ className: "log" },
|
||||||
game.winner ?
|
game.winner ?
|
||||||
`Player ${Constants.PLAYER_NAMES[game.winner]} wins!` :
|
`Player ${Constants.PLAYER_NAMES[game.winner]} wins!` :
|
||||||
`It's player "${Constants.PLAYER_NAMES[game.currentPlayer]}"s turn`
|
`It's player "${Constants.PLAYER_NAMES[game.currentPlayer]}"s turn`
|
||||||
]
|
],
|
||||||
|
[MenuBar, game]
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -103,3 +106,76 @@ export function Field(field)
|
||||||
[])
|
[])
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Renders a menu bar.
|
||||||
|
*
|
||||||
|
* @param {import("./Game.js").Game} game
|
||||||
|
* The game controlled by the menu bar.
|
||||||
|
*
|
||||||
|
* @returns {NodeDescriptor}
|
||||||
|
* The rendered element.
|
||||||
|
*/
|
||||||
|
export function MenuBar(game)
|
||||||
|
{
|
||||||
|
return [
|
||||||
|
"div",
|
||||||
|
{ className: "menu-bar" },
|
||||||
|
[
|
||||||
|
Button,
|
||||||
|
{
|
||||||
|
text: "New Game",
|
||||||
|
attributes: {
|
||||||
|
onclick: () =>
|
||||||
|
{
|
||||||
|
game.reset();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
Button,
|
||||||
|
{
|
||||||
|
text: "Save Game",
|
||||||
|
attributes: {
|
||||||
|
onclick: () =>
|
||||||
|
{
|
||||||
|
localStorage.setItem(
|
||||||
|
saveGameKey,
|
||||||
|
JSON.stringify(game.dump()));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
Button,
|
||||||
|
{
|
||||||
|
text: "Load Game",
|
||||||
|
attributes: {
|
||||||
|
onclick: () =>
|
||||||
|
{
|
||||||
|
game.load(JSON.parse(localStorage.getItem(saveGameKey)));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Renders a button.
|
||||||
|
*
|
||||||
|
* @param {{text: string, attributes: (Partial<HTMLElement> & Record<string, any>)}} data
|
||||||
|
* The settings of the button.
|
||||||
|
*
|
||||||
|
* @returns {NodeDescriptor}
|
||||||
|
* The rendered element.
|
||||||
|
*/
|
||||||
|
export function Button(data)
|
||||||
|
{
|
||||||
|
return [
|
||||||
|
"button",
|
||||||
|
data.attributes,
|
||||||
|
data.text
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,69 +0,0 @@
|
||||||
let testBoard = [
|
|
||||||
["_", "_", "_", "_", "_", "_", "_"],
|
|
||||||
["_", "_", "_", "_", "_", "_", "_"],
|
|
||||||
["_", "_", "_", "_", "r", "_", "_"],
|
|
||||||
["_", "_", "_", "r", "r", "b", "b"],
|
|
||||||
["_", "_", "r", "b", "r", "r", "b"],
|
|
||||||
["b", "b", "b", "r", "r", "b", "b"]
|
|
||||||
];
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Checks whether the specified {@link player `player`} is a winner according to the specified {@link board `board`}.
|
|
||||||
*
|
|
||||||
* @param {string} player
|
|
||||||
* The player to check for.
|
|
||||||
*
|
|
||||||
* @param {string[][]} board
|
|
||||||
* The board to check.
|
|
||||||
*
|
|
||||||
* @param {number} count
|
|
||||||
* The number of chips which need to be set in a row.
|
|
||||||
*
|
|
||||||
* @param {number} width
|
|
||||||
* The width of the board.
|
|
||||||
*
|
|
||||||
* @param {number} height
|
|
||||||
* The height of the board.
|
|
||||||
*
|
|
||||||
* @returns {boolean}
|
|
||||||
* A value indicating whether the specified {@link player `player`} did win.
|
|
||||||
*/
|
|
||||||
function connect4Winner(player, board, count = 4, width = 7, height = 6)
|
|
||||||
{
|
|
||||||
for (let yOffset = 0; yOffset <= 1; yOffset++)
|
|
||||||
{
|
|
||||||
for (let xOffset = (-1 * yOffset) + (1 - yOffset); xOffset <= 1; xOffset++)
|
|
||||||
{
|
|
||||||
let lowerBound = Math.max(0, xOffset * (count - 1) * -1);
|
|
||||||
let upperBound = Math.min(width, width - (xOffset * (count - 1)));
|
|
||||||
|
|
||||||
for (let y = 0; y < (height - yOffset * (count - 1)); y++)
|
|
||||||
{
|
|
||||||
for (let x = lowerBound; x < upperBound; x++)
|
|
||||||
{
|
|
||||||
/**
|
|
||||||
* @type {string[]}
|
|
||||||
*/
|
|
||||||
let tokens = [];
|
|
||||||
|
|
||||||
for (let index = 0; index < count; index++)
|
|
||||||
{
|
|
||||||
tokens.push(board[y + index * yOffset][x + index * xOffset]);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (tokens.every((token) => token === player))
|
|
||||||
{
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = { connect4Winner };
|
|
||||||
|
|
||||||
console.log(connect4Winner("r", testBoard));
|
|
||||||
console.log(connect4Winner("b", testBoard));
|
|
||||||
|
|
@ -7,30 +7,6 @@ import { Game } from "./Game.js";
|
||||||
*/
|
*/
|
||||||
let game;
|
let game;
|
||||||
|
|
||||||
const saveGameKey = "connect-force-save";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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");
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Initializes the board.
|
* Initializes the board.
|
||||||
*/
|
*/
|
||||||
|
|
@ -38,24 +14,6 @@ function initialize()
|
||||||
{
|
{
|
||||||
game = new Game("game");
|
game = new Game("game");
|
||||||
game.initialize();
|
game.initialize();
|
||||||
|
|
||||||
(/** @type {HTMLElement} */ (document.querySelector(".new-game"))).onclick = (event) =>
|
|
||||||
{
|
|
||||||
event.preventDefault();
|
|
||||||
game.reset();
|
|
||||||
};
|
|
||||||
|
|
||||||
getSaveButton().onclick = async (event) =>
|
|
||||||
{
|
|
||||||
event.preventDefault();
|
|
||||||
localStorage.setItem(saveGameKey, JSON.stringify(game.dump()));
|
|
||||||
};
|
|
||||||
|
|
||||||
getLoadButton().onclick = async (event) =>
|
|
||||||
{
|
|
||||||
event.preventDefault();
|
|
||||||
game.load(JSON.parse(localStorage.getItem(saveGameKey)));
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
initialize();
|
initialize();
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue