diff --git a/frontend/README.md b/frontend/README.md
new file mode 100644
index 0000000..e75e077
--- /dev/null
+++ b/frontend/README.md
@@ -0,0 +1,6 @@
+# Chess Frontend
+
+## Licenses
+
+* Chess icons under `icons/` taken from
+ [here](https://commons.wikimedia.org/wiki/Category:SVG_chess_pieces).
diff --git a/frontend/icons/bishop_black.svg b/frontend/icons/bishop_black.svg
new file mode 100644
index 0000000..628234c
--- /dev/null
+++ b/frontend/icons/bishop_black.svg
@@ -0,0 +1,12 @@
+
+
+
diff --git a/frontend/icons/bishop_white.svg b/frontend/icons/bishop_white.svg
new file mode 100644
index 0000000..d3dab46
--- /dev/null
+++ b/frontend/icons/bishop_white.svg
@@ -0,0 +1,12 @@
+
+
+
diff --git a/frontend/icons/king_black.svg b/frontend/icons/king_black.svg
new file mode 100644
index 0000000..ba2ac9f
--- /dev/null
+++ b/frontend/icons/king_black.svg
@@ -0,0 +1,12 @@
+
+
+
diff --git a/frontend/icons/king_white.svg b/frontend/icons/king_white.svg
new file mode 100644
index 0000000..ba9d397
--- /dev/null
+++ b/frontend/icons/king_white.svg
@@ -0,0 +1,13 @@
+
+
+
diff --git a/frontend/icons/knight_black.svg b/frontend/icons/knight_black.svg
new file mode 100644
index 0000000..7f73c43
--- /dev/null
+++ b/frontend/icons/knight_black.svg
@@ -0,0 +1,22 @@
+
+
+
diff --git a/frontend/icons/knight_white.svg b/frontend/icons/knight_white.svg
new file mode 100644
index 0000000..0500630
--- /dev/null
+++ b/frontend/icons/knight_white.svg
@@ -0,0 +1,19 @@
+
+
+
diff --git a/frontend/icons/pawn_black.svg b/frontend/icons/pawn_black.svg
new file mode 100644
index 0000000..b534de8
--- /dev/null
+++ b/frontend/icons/pawn_black.svg
@@ -0,0 +1,5 @@
+
+
+
diff --git a/frontend/icons/pawn_white.svg b/frontend/icons/pawn_white.svg
new file mode 100644
index 0000000..b265fe1
--- /dev/null
+++ b/frontend/icons/pawn_white.svg
@@ -0,0 +1,5 @@
+
+
+
diff --git a/frontend/icons/queen_black.svg b/frontend/icons/queen_black.svg
new file mode 100644
index 0000000..e557734
--- /dev/null
+++ b/frontend/icons/queen_black.svg
@@ -0,0 +1,27 @@
+
+
+
diff --git a/frontend/icons/queen_white.svg b/frontend/icons/queen_white.svg
new file mode 100644
index 0000000..8df7c8f
--- /dev/null
+++ b/frontend/icons/queen_white.svg
@@ -0,0 +1,15 @@
+
+
+
diff --git a/frontend/icons/rook_black.svg b/frontend/icons/rook_black.svg
new file mode 100644
index 0000000..60c90d0
--- /dev/null
+++ b/frontend/icons/rook_black.svg
@@ -0,0 +1,39 @@
+
+
+
diff --git a/frontend/icons/rook_white.svg b/frontend/icons/rook_white.svg
new file mode 100644
index 0000000..8d2d932
--- /dev/null
+++ b/frontend/icons/rook_white.svg
@@ -0,0 +1,25 @@
+
+
+
diff --git a/frontend/main.js b/frontend/main.js
index e875b2c..0eba7fd 100644
--- a/frontend/main.js
+++ b/frontend/main.js
@@ -35,4 +35,54 @@ function drawChessBoard(canvas) {
}
}
+function drawPiece(canvas, piece, field) {
+ let canvasRect = canvas.getBoundingClientRect();
+ let rc = boardIndexToRowCol(field);
+
+ let im = new Image(BOX_WIDTH, BOX_HEIGHT);
+ im.src = `./icons/${piece}.svg`;
+ im.onload = () => {
+ let topPx = canvasRect.top + INDEX_MARGIN + rc[0]*BOX_HEIGHT + window.pageYOffset;
+ let leftPx = canvasRect.left + INDEX_MARGIN + rc[1]*BOX_WIDTH + window.pageXOffset;
+ im.style.position = 'absolute';
+ im.style.top = `${topPx}px`;
+ im.style.left = `${leftPx}px`;
+ };
+ document.body.appendChild(im);
+}
+
+function _setupBoard(canvas) {
+ drawPiece(_canvas, 'rook_black', 'a8');
+ drawPiece(_canvas, 'rook_black', 'h8');
+ drawPiece(_canvas, 'knight_black', 'b8');
+ drawPiece(_canvas, 'knight_black', 'g8');
+ drawPiece(_canvas, 'bishop_black', 'c8');
+ drawPiece(_canvas, 'bishop_black', 'f8');
+ drawPiece(_canvas, 'queen_black', 'd8');
+ drawPiece(_canvas, 'king_black', 'e8');
+
+ for (let colLetter of INDEX_LETTERS) {
+ drawPiece(canvas, 'pawn_black', `${colLetter}7`);
+ drawPiece(canvas, 'pawn_white', `${colLetter}2`);
+ }
+
+ drawPiece(_canvas, 'rook_white', 'a1');
+ drawPiece(_canvas, 'rook_white', 'h1');
+ drawPiece(_canvas, 'knight_white', 'b1');
+ drawPiece(_canvas, 'knight_white', 'g1');
+ drawPiece(_canvas, 'bishop_white', 'c1');
+ drawPiece(_canvas, 'bishop_white', 'f1');
+ drawPiece(_canvas, 'queen_white', 'd1');
+ drawPiece(_canvas, 'king_white', 'e1');
+}
+
+function boardIndexToRowCol(boardIndex) {
+ let colLetter = boardIndex[0];
+ let rowDigit = boardIndex[1];
+ let row = 8 - parseInt(rowDigit);
+ let col = INDEX_LETTERS.indexOf(colLetter);
+ return [row, col];
+}
+
drawChessBoard(_canvas);
+_setupBoard(_canvas);