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

Compare commits

base: manuth:f3a9568f70381904b7af916d4e45b7cbc04b0e25
Branches Tags
manuth:main
manuth:dev
manuth:webpack
manuth:gh-pages
manuth:week-09
manuth:week-08
...
compare: manuth:d88e3a7ac8738c9db80d70304486b7b36ca83a59
Branches Tags
manuth:dev
manuth:main
manuth:webpack
manuth:gh-pages
manuth:week-09
manuth:week-08

15 commits
f3a9568f70 ... d88e3a7ac8

Author SHA1 Message Date
Manuel Thalmann d88e3a7ac8
Add margin to board class
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details
2022-12-13 12:55:50 +01:00
Manuel Thalmann f0fb5a11fe
Add a log message 2022-12-13 12:55:39 +01:00
Manuel Thalmann 0794aaf8fb
Nest board in a separate element 2022-12-13 12:54:49 +01:00
Manuel Thalmann fb51f48a02
Add a method for adding chips 2022-12-13 11:28:59 +01:00
Manuel Thalmann 391edbed72
Adjust variable names for better understanding 2022-12-13 11:28:48 +01:00
Manuel Thalmann be4956f360
Allow dynamic creation of game states 2022-12-13 11:20:21 +01:00
Manuel Thalmann 87f078da13
Make board size dynamic 2022-12-13 11:18:23 +01:00
Manuel Thalmann 2cf011ed03
Store the board size as static variables 2022-12-13 11:12:06 +01:00
Manuel Thalmann 7950572ede
Add a button for resetting the game 2022-12-13 11:08:52 +01:00
Manuel Thalmann ba28926219
Add a method for resetting the game 2022-12-13 11:05:20 +01:00
Manuel Thalmann 63bfb5375e
Create a dedicated draw method 2022-12-13 11:04:17 +01:00
Manuel Thalmann 6faeae8b66
Store the id of the board in the Game class 2022-12-13 11:02:56 +01:00
Manuel Thalmann f542319b43
Move initialization code to Game class 2022-12-13 11:00:26 +01:00
Manuel Thalmann 5b46328d37
Store game state in Game class 2022-12-13 10:51:36 +01:00
Manuel Thalmann 8119440db0
Change indentation to spaces 2022-12-13 10:34:07 +01:00
7 changed files with 266 additions and 79 deletions
Show stats Expand all files Collapse all files

5
src/index.html
View file

@ -7,7 +7,10 @@
<script type="module" src="./js/main.js"></script>
</head>
<body>
<div class="board" id="board">
<div id="game">
</div>
<button class="button new-game">
New Game
</button>
</body>
</html>

193
src/js/Game.js Normal file
View file

@ -0,0 +1,193 @@
import { Constants } from "./Constants.js";
import { elt } from "./elt.js";
import { State } from "./State.js";
/**
* Represents a game.
*/
export class Game
{
/**
* The width of the board.
*/
static #width = 7;
/**
* The height of the board.
*/
static #height = 6;
/**
* The state of the game.
*
* @type {State}
*/
#state;
/**
* The actual board.
*
* @type {HTMLElement}
*/
#board;
/**
* The element containing a log message.
*
* @type {HTMLElement}
*/
#log;
/**
* The id of the element to add the board to.
*
* @type {string}
*/
id;
/**
* Initializes a new instance of the {@link Game `Game`} class.
*
* @param {string} id
* The id of the element to add the board to.
*/
constructor(id)
{
this.id = id;
this.#state = new State(Game.#width, Game.#height);
}
/**
* Gets the state of the game.
*/
get state()
{
return this.#state;
}
/**
* Gets the board of the game.
*/
get board()
{
return this.state.board;
}
/**
* Initializes the game.
*/
initialize()
{
let container = document.getElementById(this.id);
this.#board = elt(
"div",
{
class: "board"
});
this.#log = elt(
"div",
{
class: "log"
});
container.appendChild(this.#board);
container.appendChild(this.#log);
this.draw();
}
/**
* Resets the game.
*/
reset()
{
this.#state = new State(Game.#width, Game.#height);
this.draw();
}
/**
* Replaces the content of the board with the current state.
*/
draw()
{
let board = this.#board;
board.innerHTML = "";
for (let y = 0; y < Game.#height; y++)
{
for (let x = 0; x < Game.#width; x++)
{
/** @type {Node[]} */
let children = [];
let playerId = this.board[y][x];
if (playerId !== "")
{
children.push(
elt(
"div",
{
class: `piece ${Constants.PLAYER_NAMES[playerId]}`
}));
}
let field = elt(
"div",
{
class: "field"
},
...children);
field.onclick = () =>
{
if (this.addChip(x, y))
{
this.state.turnCount++;
this.draw();
}
};
board.appendChild(field);
}
}
board.appendChild(
elt(
"div",
{
style: "clear: both;"
}));
this.#log.className = "";
this.#log.classList.add(this.state.currentPlayer);
this.#log.innerHTML = "";
this.#log.textContent = `It's player "${Constants.PLAYER_NAMES[this.state.currentPlayer]}"s turn`;
}
/**
* Adds a chip to the board indicated by the {@link x `x`} and the {@link y `y`} coordinate.
*
* @param {number} x
* The x coordinate to add the chip to.
*
* @param {number} y
* The y coordinate to add the chip to.
*
* @returns {boolean}
* A value indicating whether the chip could be added.
*/
addChip(x, y)
{
for (let i = Game.#height - 1; i >= 0; i--)
{
if (this.board[i][x] === "")
{
this.board[i][x] = this.state.currentPlayer;
return true;
}
}
return false;
}
}

67
src/js/State.js
View file

@ -1,20 +1,55 @@
/**
* The state of the board.
* Represents the state of a game.
*/
export const State = {
turnCount: 0,
export class State
{
/**
* The board of the game.
*
* @type {Board}
*/
#board;
/**
* Gets the id of the current player.
*
* @type {CellOwner}
*/
get currentPlayer()
{
return this.turnCount % 2 === 0 ? "r" : "b";
},
/**
* The number of turns that have been played.
*/
turnCount = 0;
board: /** @type {Board} */ (
Array(6).fill("").map(
() => (Array(7).fill(""))))
};
/**
* Initializes a new instance of the {@link State `State`} class.
*
* @param {number} width
* The width of the board.
*
* @param {number} height
* The height of the board.
*/
constructor(width, height)
{
this.#board = /** @type {Board} */ (
Array(height).fill("").map(
() =>
{
return Array(width).fill(
/** @type {CellOwner} */ (""));
}));
}
/**
* Gets the id of the current player.
*
* @type {CellOwner}
*/
get currentPlayer()
{
return this.turnCount % 2 === 0 ? "r" : "b";
}
/**
* Gets the board of the game.
*/
get board()
{
return this.#board;
}
}

50
src/js/board.js
View file

@ -1,50 +0,0 @@
import { Constants } from "./Constants.js";
import { elt } from "./elt.js";
import { State } from "./State.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);
board.innerHTML = "";
for (let i = 0; i < 6; i++)
{
for (let j = 0; j < 7; j++)
{
/** @type {Node[]} */
let children = [];
let playerId = State.board[i][j];
if (playerId !== "")
{
children.push(elt(
"div",
{
class: `piece ${Constants.PLAYER_NAMES[playerId]}`
}));
}
let field = elt(
"div",
{
class: "field"
},
...children);
field.onclick = () =>
{
State.board[i][j] = State.currentPlayer;
State.turnCount++;
initializeBoard("board");
};
board.appendChild(field);
}
}
}

17
src/js/main.js
View file

@ -1,11 +1,24 @@
import { initializeBoard } from "./board.js";
import { Game } from "./Game.js";
/**
* The game that is being played.
*
* @type {Game}
*/
let game;
/**
* Initializes the board.
*/
function initialize()
{
initializeBoard("board");
game = new Game("game");
game.initialize();
(/** @type {HTMLElement} */ (document.querySelector(".new-game"))).onclick = () =>
{
game.reset();
};
}
initialize();

11
src/js/types.d.ts vendored
View file

@ -6,16 +6,9 @@ type CellOwner = "" | "r" | "b";
/**
* Represents a row of the game field.
*/
type Row = [CellOwner, CellOwner, CellOwner, CellOwner, CellOwner, CellOwner, CellOwner];
type Row = CellOwner[];
/**
* Represents a game board.
*/
type Board = [
Row,
Row,
Row,
Row,
Row,
Row
];
type Board = Row[];

2
src/styles/style.css
View file

@ -4,7 +4,7 @@ div {
.board {
width: 84vw;
margin: auto;
margin: 10px auto;
outline: 1px solid black;
}