zev/chess-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

removed accidentally created submodule, broke everything up into JS modules, put CSS in its own file. create game and update state from FEN-formatted strings. also implemented serialization to FEN

Browse Source
This commit is contained in:
Zev Averbach
2022-02-07 13:51:38 +01:00
parent 6d1cac8231
commit 3f847b2eee
6 changed files with 231 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
index.html
View File

@@ -3,70 +3,11 @@
<head>
<meta charset="utf-8">
<title></title>
<style>
#board {
margin: auto;
padding-top: 4vw;
width: 50vw;
height: 50vh;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: auto;
}
.box::before {
content: "";
display: block;
padding-top: 100%;
}
body {
padding: 0;
margin: 0;
background-color: #212121;
}
body .grid {
max-width: 570px;
margin: 30px auto;
box-sizing: border-box;
border: 10px solid #2a351f;
}
</style>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body onload="renderBoard()">
<main id="board">
</main>
<script>
const GREEN = "#779558"
const BEIGE = "#eeedd3"
const board = document.getElementById("board")
// const state = {
// a1: "
// }
const renderBoard = (fromPerspective = "white") => {
// adapted from https://codepen.io/Staghouse/pen/OzpVya
let lastColor = BEIGE
let files = Array.from("abcdefgh")
let ranks = Array.from("12345678")
if (fromPerspective === "white") {
ranks.reverse()
} else {
files.reverse()
}
ranks.forEach(char => {
files.forEach((num, numIndex) => {
if (numIndex % 7 || numIndex > 0) {
lastColor = lastColor === BEIGE ? GREEN : BEIGE
}
const box = document.createElement("div")
box.classList.add("box")
box.id = `${num}${char}`
box.style.backgroundColor = lastColor
board.appendChild(box)
})
})
}
</script>
<body>
<main id="board"></main>
<script type="module" src="app.js"></script>
</body>
</html>