From 9120e1dc5f88632e032d00a0e51d26ef727e77fd Mon Sep 17 00:00:00 2001 From: Steven Carpenter Date: Thu, 15 Aug 2024 12:28:24 -0400 Subject: [PATCH] Initial attempt and commit --- LICENSE.txt | 22 ++++++++++++++++++++ css/style.css | 22 ++++++++++++++++++++ index.html | 18 +++++++++++++++++ js/app.js | 32 +++++++++++++++++++++++++++++ js/chessboard.js | 52 ++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 146 insertions(+) create mode 100644 LICENSE.txt create mode 100644 css/style.css create mode 100644 index.html create mode 100644 js/app.js create mode 100644 js/chessboard.js diff --git a/LICENSE.txt b/LICENSE.txt new file mode 100644 index 0000000..219b70f --- /dev/null +++ b/LICENSE.txt @@ -0,0 +1,22 @@ +Copyright (c) 2021 Kyle Simpson + +Permission is hereby granted, free of charge, to any person +obtaining a copy of this software and associated documentation +files (the "Software"), to deal in the Software without +restriction, including without limitation the rights to use, +copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the +Software is furnished to do so, subject to the following +conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES +OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT +HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR +OTHER DEALINGS IN THE SOFTWARE. diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..9747918 --- /dev/null +++ b/css/style.css @@ -0,0 +1,22 @@ +#board { + border: 0.2rem solid #000; + width: min-content; +} + +#board > div { + display: flex; +} + +#board > div > div { + width: 2rem; + height: 2rem; +} + +#board > div:nth-child(2n) > div:nth-child(2n+1), +#board > div:nth-child(2n+1) > div:nth-child(2n) { + background-color: #000; +} + +#board > div > div.highlighted { + background-color: red !important; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..8a57d71 --- /dev/null +++ b/index.html @@ -0,0 +1,18 @@ + + + +Chess Diagonals + + + + +
+ +

+ +

+ + + + + diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..1017eb4 --- /dev/null +++ b/js/app.js @@ -0,0 +1,32 @@ +import Chessboard from "./chessboard.js"; + + +document.addEventListener("DOMContentLoaded",async function ready(){ + var boardEl = document.getElementById("board"); + var clearHighlightsBtn = document.getElementById("clear-highlights-btn"); + + Chessboard.draw(boardEl); + + boardEl.addEventListener("click",onClickTile,false); + clearHighlightsBtn.addEventListener("click",clearHighlights,false); + + + // ******************************** + + function onClickTile(evt) { + var clickedEl = evt.target; + + // clicked on a board tile? + if (clickedEl.matches("#board > div > div")) { + Chessboard.highlight(clickedEl); + } + else { + clearHighlights(); + } + } + + function clearHighlights() { + Chessboard.highlight(); + } + +}); diff --git a/js/chessboard.js b/js/chessboard.js new file mode 100644 index 0000000..813308a --- /dev/null +++ b/js/chessboard.js @@ -0,0 +1,52 @@ +export default { + draw, + highlight +}; +var diagonals = []; +var highlighted = [];; +var tileDiagonals = new Map(); + +function draw(boardEl) { + //instantiating the diagonals data structure + for (let i = 0; i < 30; i++){ + diagonals.push([]); + } + + for (let i = 0; i <= 7; i++) { + let rowEl = document.createElement("div"); + for (let j = 0; j <= 7; j++) { + let tileEl = document.createElement("div"); + rowEl.appendChild(tileEl); + + let majorDiagIdx = diagonals[7 - (i-j)]; + let minorDiagIdx = diagonals[15 + (i+j)]; + + majorDiagIdx.push(tileEl); + minorDiagIdx.push(tileEl); + + tileDiagonals.set(tileEl,[majorDiagIdx,minorDiagIdx]); + } + boardEl.appendChild(rowEl); + } +} + +function highlight(tileEl) { + // clear all currently highlighted tiles (if any) + for (let diag of highlighted) { + for (let el of diag){ + el.classList.remove("highlighted"); + } + } + + + // check if user clicked on a board tile. + if (tileEl) { + highlighted = tileDiagonals.get(tileEl); + + for (let diag of highlighted) { + for (let el of diag){ + el.classList.add("highlighted"); + } + } + } +} \ No newline at end of file