From f4eb35e141b3c2e9a4b210999ff40dfc22822417 Mon Sep 17 00:00:00 2001 From: taylor berukoff Date: Tue, 11 Nov 2025 14:58:42 -1000 Subject: [PATCH] initial commit --- index.html | 16 +++++++ static/css/style.css | 39 ++++++++++++++++ static/js/script.js | 106 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 161 insertions(+) create mode 100644 index.html create mode 100644 static/css/style.css create mode 100644 static/js/script.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..f7faa9a --- /dev/null +++ b/index.html @@ -0,0 +1,16 @@ + + + + + + + Arcane Access Console + + +
+ +
+ + + + \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css new file mode 100644 index 0000000..3066da1 --- /dev/null +++ b/static/css/style.css @@ -0,0 +1,39 @@ +:root { + --cell-size: 4rem; + --light-color: white; + --dark-color: black; +} + +#board { + display: grid; + grid-template-columns: repeat(5, var(--cell-size)); + grid-template-rows: repeat(5, var(--cell-size)); +} + +.token { + background-color: orange; + width: 60%; + height: 60%; + border-radius: 50%; + margin: auto; + position: relative; + top: 20%; +} + +#player-token { + background-color: darkkhaki; + cursor: grab; +} + +.cell { + width: var(--cell-size); + height: var(--cell-size); +} + +.dark { + background-color: var(--dark-color); +} + +.light { + background-color: var(--light-color); +} \ No newline at end of file diff --git a/static/js/script.js b/static/js/script.js new file mode 100644 index 0000000..4576650 --- /dev/null +++ b/static/js/script.js @@ -0,0 +1,106 @@ +document.addEventListener('DOMContentLoaded', () => { + // Generate the board + for (let i=0; i < 5; i++) { + for (let j = 0; j < 5; j++) { + const cell = document.createElement('div'); + cell.dataset.row = i; + cell.dataset.col = j; + cell.id = `cell-${i}-${j}` + cell.dataset.piece = "" + cell.classList.add('cell') + if ((i + j) % 2 == 0) { + cell.classList.add('dark') + } + else { + cell.classList.add('light') + } + + const board = document.getElementById('board') + board.appendChild(cell) + } + } + // Generate player token + const player_token = document.createElement('div') + const target_cell = document.getElementById('cell-4-0') + player_token.id="player-token" + player_token.classList.add('token') + target_cell.appendChild(player_token) + + // Add logic for moving player token + let isDragging = false; + let offsetX, offsetY; + + // check for the player grabbing the player icon + player_token.addEventListener('pointerdown', (e) => { + const rect = player_token.getBoundingClientRect(); + player_token.style.width = `${rect.width}px`; + player_token.style.height = `${rect.height}px`; + isDragging = true; + offsetX = e.offsetX; + offsetY = e.offsetY; + player_token.setPointerCapture(e.pointerId); + }); + + // Impliment the dragging + player_token.addEventListener('pointermove', (e) => { + if (!isDragging) return; + player_token.style.position = 'absolute'; + player_token.style.left = `${e.pageX - offsetX}px`; + player_token.style.top = `${e.pageY - offsetY}px`; + }); + + function resetToken() { + const startingCell = document.getElementById(`cell-4-0`); + // Reset position inside cell + player_token.style.position = 'relative'; // back to relative so it sits inside the cell + player_token.style.left = ''; + player_token.style.top = ''; + player_token.style.zIndex = ''; + + originalCell.appendChild(token); + } + + function getClosestCell(x,y) { + const boardRect = board.getBoundingClientRect(); + const cellSize = boardRect.width / 5; + + // Convert page coordinates to board-relative coordinates + const relX = x - boardRect.left; + const relY = y - boardRect.top; + + // Find closest column and row + const col = Math.min(4, Math.max(0, Math.floor(relX / cellSize))); + const row = Math.min(4, Math.max(0, Math.floor(relY / cellSize))); + + return document.getElementById(`cell-${row}-${col}`); + } + + + + // stop dragging once they let go + player_token.addEventListener('pointerup', (e) => { + isDragging = false; + + // Find nearest cell + const closestCell = getClosestCell(e.pageX, e.pageY); + + // Reset token style and append to cell + player_token.style.position = 'relative'; + player_token.style.left = ''; + player_token.style.top = ''; + player_token.style.zIndex = ''; + + closestCell.appendChild(player_token); + }); + + // Generate Target Tokens + target_token_list = ['0-0', '1-2', '2-4', '3-1', '4-3'] + for (let index = 0; index < target_token_list.length; index++) { + const element = target_token_list[index]; + const token = document.createElement('div'); + token.classList.add('token') + const target_cell = document.getElementById(`cell-${element}`) + target_cell.appendChild(token) + } + +}) \ No newline at end of file