Add code for automatically creating game board
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
6e6eceab2b
commit
4717a6e4e9
4 changed files with 57 additions and 48 deletions
|
@ -7,53 +7,7 @@
|
||||||
<script type="module" src="./js/main.js"></script>
|
<script type="module" src="./js/main.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="board">
|
<div class="board" id="board">
|
||||||
<div class="field">
|
|
||||||
<div class="blue piece"></div>
|
|
||||||
</div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field">
|
|
||||||
<div class="red piece"></div>
|
|
||||||
</div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
<div class="field"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
13
src/js/Constants.js
Normal file
13
src/js/Constants.js
Normal file
|
@ -0,0 +1,13 @@
|
||||||
|
/**
|
||||||
|
* Provides constants for the project.
|
||||||
|
*/
|
||||||
|
export class Constants
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* The IDs of the players.
|
||||||
|
*/
|
||||||
|
static PLAYER_NAMES = [
|
||||||
|
"red",
|
||||||
|
"blue"
|
||||||
|
];
|
||||||
|
}
|
40
src/js/board.js
Normal file
40
src/js/board.js
Normal file
|
@ -0,0 +1,40 @@
|
||||||
|
import { Constants } from "./Constants.js";
|
||||||
|
import { elt } from "./elt.js";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initializes the game board.
|
||||||
|
*
|
||||||
|
* @param {string} id
|
||||||
|
* The id of the element to add the board to.
|
||||||
|
*/
|
||||||
|
export function initializeBoard(id)
|
||||||
|
{
|
||||||
|
let board = document.getElementById(id);
|
||||||
|
|
||||||
|
for (let i = 0; i < 6; i++)
|
||||||
|
{
|
||||||
|
for (let i = 0; i < 7; i++)
|
||||||
|
{
|
||||||
|
/** @type {Node[]} */
|
||||||
|
let children = [];
|
||||||
|
let playerId = Math.floor(Math.random() * 3);
|
||||||
|
|
||||||
|
if (playerId > 0)
|
||||||
|
{
|
||||||
|
children.push(elt(
|
||||||
|
"div",
|
||||||
|
{
|
||||||
|
class: `piece ${Constants.PLAYER_NAMES[playerId - 1]}`
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
board.appendChild(
|
||||||
|
elt(
|
||||||
|
"div",
|
||||||
|
{
|
||||||
|
class: "field"
|
||||||
|
},
|
||||||
|
...children));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,3 +1,5 @@
|
||||||
|
import { initializeBoard } from "./board.js";
|
||||||
import { elt } from "./elt.js";
|
import { elt } from "./elt.js";
|
||||||
|
|
||||||
elt("a", { href: "https://startpage.com/" }, "This is a test");
|
document.documentElement.appendChild(elt("a", { href: "https://startpage.com/" }, "This is a test"));
|
||||||
|
initializeBoard("board");
|
||||||
|
|
Loading…
Reference in a new issue