manuth/ConnectForce
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Add code for automatically creating game board
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse source
This commit is contained in:
Manuel Thalmann 2022-12-07 22:24:48 +01:00
parent 6e6eceab2b
commit 4717a6e4e9
No known key found for this signature in database
GPG key ID: 5FD9AD3CCDDBD27B
4 changed files with 57 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/index.html
View file

@ -7,53 +7,7 @@
<script type="module" src="./js/main.js"></script>
</head>
<body>
<div class="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 class="board" id="board">
</div>
</body>
</html>

13
src/js/Constants.js Normal file
View 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
View 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));
}
}
}

4
src/js/main.js
View file

@ -1,3 +1,5 @@
import { initializeBoard } from "./board.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");