Add coordinate toggle feature and enhance UI

- Added a toggle switch in index.html to show/hide board coordinates.
- Updated CSS for improved styling of the chessboard and pieces, including animations for moves and last moves.
- Enhanced game.js and board.js to support visual updates for last moves and piece movement animations.
- Updated README.md with new repository link and minor adjustments.

Author: TMHSDigital

README.md

@@ -27,7 +27,7 @@ It is designed to be simple, lightweight, and easily deployable on static hostin
 
 1.  **Clone the repository:**
     ```bash
-    git clone https://github.com/your-username/Static_Chess.git
+    git clone https://github.com/TMHSDigital/Static_Chess.git
     cd Static_Chess
     ```
 2.  **Open `index.html`:** Simply open the `index.html` file in your web browser.
@@ -77,7 +77,7 @@ Since this is a purely static website (HTML, CSS, JS files only), it can be easi
 5.  Choose the branch you want to deploy from (e.g., `main` or `master`).
 6.  Ensure the folder is set to `/ (root)`.
 7.  Click "Save".
-8.  GitHub will build and deploy your site. The URL will be displayed in the Pages settings (usually `https://your-username.github.io/repository-name/`). It might take a minute or two for the site to become live.
+8.  GitHub will build and deploy your site. The URL will be displayed in the Pages settings (usually `https://tmhsdigital.github.io/Static_Chess/`). It might take a minute or two for the site to become live.
 
 ## Potential Future Enhancements (Bonus Features)
 

css/board.css

@@ -4,15 +4,59 @@
     display: grid;
     grid-template-columns: repeat(8, 1fr);
     grid-template-rows: repeat(8, 1fr);
-    border: 1px solid #000;
-    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
+    border: 2px solid #111;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
+    position: relative;
 }
 
+/* Add board coordinates */
+.chess-board::before,
+.chess-board::after,
+.square::before,
+.square::after {
+    position: absolute;
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 0.8rem;
+    z-index: 2;
+    pointer-events: none;
+}
+
+/* File coordinates (a-h) */
+.square[data-col="0"]::before {
+    content: 'a';
+    bottom: 2px;
+    left: 2px;
+    display: var(--show-coords, none);
+}
+.square[data-col="1"]::before { content: 'b'; bottom: 2px; left: 2px; display: var(--show-coords, none); }
+.square[data-col="2"]::before { content: 'c'; bottom: 2px; left: 2px; display: var(--show-coords, none); }
+.square[data-col="3"]::before { content: 'd'; bottom: 2px; left: 2px; display: var(--show-coords, none); }
+.square[data-col="4"]::before { content: 'e'; bottom: 2px; left: 2px; display: var(--show-coords, none); }
+.square[data-col="5"]::before { content: 'f'; bottom: 2px; left: 2px; display: var(--show-coords, none); }
+.square[data-col="6"]::before { content: 'g'; bottom: 2px; left: 2px; display: var(--show-coords, none); }
+.square[data-col="7"]::before { content: 'h'; bottom: 2px; left: 2px; display: var(--show-coords, none); }
+
+/* Rank coordinates (1-8) */
+.square[data-row="7"][data-col="7"]::after { content: '1'; top: 2px; right: 2px; display: var(--show-coords, none); }
+.square[data-row="6"][data-col="7"]::after { content: '2'; top: 2px; right: 2px; display: var(--show-coords, none); }
+.square[data-row="5"][data-col="7"]::after { content: '3'; top: 2px; right: 2px; display: var(--show-coords, none); }
+.square[data-row="4"][data-col="7"]::after { content: '4'; top: 2px; right: 2px; display: var(--show-coords, none); }
+.square[data-row="3"][data-col="7"]::after { content: '5'; top: 2px; right: 2px; display: var(--show-coords, none); }
+.square[data-row="2"][data-col="7"]::after { content: '6'; top: 2px; right: 2px; display: var(--show-coords, none); }
+.square[data-row="1"][data-col="7"]::after { content: '7'; top: 2px; right: 2px; display: var(--show-coords, none); }
+.square[data-row="0"][data-col="7"]::after { content: '8'; top: 2px; right: 2px; display: var(--show-coords, none); }
+
 .square {
     display: flex;
     justify-content: center;
     align-items: center;
-    position: relative; /* For positioning highlights/markers */
+    position: relative;
+    cursor: pointer;
+    transition: all 0.15s ease;
+}
+
+.square:hover {
+    filter: brightness(1.1);
 }
 
 .square.light {
@@ -25,9 +69,8 @@
 
 .square.selected {
     background-color: var(--selected-square);
-    /* Or use an outline/border */
-    /* outline: 3px solid yellow; */
-    /* outline-offset: -3px; */
+    box-shadow: inset 0 0 20px rgba(255, 217, 0, 0.3);
+    z-index: 1;
 }
 
 .square.possible-move::after {
@@ -37,10 +80,40 @@
     height: 30%;
     background-color: var(--possible-move-square);
     border-radius: 50%;
-    pointer-events: none; /* Allows clicking through the marker */
+    pointer-events: none;
+    animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+    0% { transform: scale(0.9); opacity: 0.7; }
+    50% { transform: scale(1.1); opacity: 1; }
+    100% { transform: scale(0.9); opacity: 0.7; }
+}
+
+.square.possible-move.light::after {
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+}
+
+.square.possible-move.dark::after {
+    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
 }
 
 /* Highlight for the king in check */
 .square.in-check {
     background-color: var(--check-square);
+    animation: check-pulse 1s ease infinite alternate;
+}
+
+@keyframes check-pulse {
+    from { box-shadow: inset 0 0 5px rgba(255, 0, 0, 0.5); }
+    to { box-shadow: inset 0 0 20px rgba(255, 0, 0, 0.8); }
+}
+
+/* Last move indication */
+.square.last-move-from {
+    background-color: rgba(173, 216, 230, 0.3);
+}
+
+.square.last-move-to {
+    background-color: rgba(173, 216, 230, 0.5);
 } 

css/pieces.css

@@ -1,49 +1,128 @@
 .piece {
-    font-size: calc(var(--board-size) / 10); /* Adjust size relative to board */
+    font-size: calc(var(--board-size) / 9);
     cursor: grab;
-    user-select: none; /* Prevent text selection */
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+    user-select: none;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
+    height: 80%;
+    width: 80%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: transform 0.2s ease;
+    position: relative;
+}
+
+.piece:hover {
+    transform: scale(1.1);
+}
+
+.piece:active {
+    cursor: grabbing;
+    transform: scale(1.15);
 }
 
 .piece.dragging {
     cursor: grabbing;
-    opacity: 0.7;
+    opacity: 0.8;
+    z-index: 100;
 }
 
-/* === Placeholder Unicode Pieces === */
-/* Replace these with background-image rules targeting your SVGs */
+/* === Enhanced Unicode Pieces === */
 
 /* White Pieces */
-.piece.w.p::before { content: '\2659'; } /* White Pawn */
-.piece.w.r::before { content: '\2656'; } /* White Rook */
-.piece.w.n::before { content: '\2658'; } /* White Knight */
-.piece.w.b::before { content: '\2657'; } /* White Bishop */
-.piece.w.q::before { content: '\2655'; } /* White Queen */
-.piece.w.k::before { content: '\2654'; } /* White King */
+.piece.w.p::before { 
+    content: '\2659'; 
+    color: #fff;
+    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
+}
+.piece.w.r::before { 
+    content: '\2656'; 
+    color: #fff;
+    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
+}
+.piece.w.n::before { 
+    content: '\2658'; 
+    color: #fff;
+    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
+}
+.piece.w.b::before { 
+    content: '\2657'; 
+    color: #fff;
+    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
+}
+.piece.w.q::before { 
+    content: '\2655'; 
+    color: #fff;
+    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
+}
+.piece.w.k::before { 
+    content: '\2654'; 
+    color: #fff;
+    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
+}
 
 /* Black Pieces */
-.piece.b.p::before { content: '\265F'; } /* Black Pawn */
-.piece.b.r::before { content: '\265C'; } /* Black Rook */
-.piece.b.n::before { content: '\265E'; } /* Black Knight */
-.piece.b.b::before { content: '\265D'; } /* Black Bishop */
-.piece.b.q::before { content: '\265B'; } /* Black Queen */
-.piece.b.k::before { content: '\265A'; } /* Black King */
-
-/* Example for SVG (assuming you have assets/wp.svg etc.) */
+.piece.b.p::before { 
+    content: '\265F'; 
+    color: #000;
+    text-shadow: 0 0 2px rgba(255,255,255,0.8);
+}
+.piece.b.r::before { 
+    content: '\265C'; 
+    color: #000;
+    text-shadow: 0 0 2px rgba(255,255,255,0.8);
+}
+.piece.b.n::before { 
+    content: '\265E'; 
+    color: #000;
+    text-shadow: 0 0 2px rgba(255,255,255,0.8);
+}
+.piece.b.b::before { 
+    content: '\265D'; 
+    color: #000;
+    text-shadow: 0 0 2px rgba(255,255,255,0.8);
+}
+.piece.b.q::before { 
+    content: '\265B'; 
+    color: #000;
+    text-shadow: 0 0 2px rgba(255,255,255,0.8);
+}
+.piece.b.k::before { 
+    content: '\265A'; 
+    color: #000;
+    text-shadow: 0 0 2px rgba(255,255,255,0.8);
+}
+
+/* Move animations */
+@keyframes move-piece {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.2); }
+    100% { transform: scale(1); }
+}
+
+.piece.moved {
+    animation: move-piece 0.3s ease;
+}
+
+/* Optional: CSS for SVG pieces (uncomment and add SVGs to the assets folder) */
+/*
+.piece::before {
+    display: none; /* Hide Unicode when using SVG */
 /*
+}
+
 .piece.w.p {
     background-image: url('../assets/wp.svg');
     background-size: contain;
     background-repeat: no-repeat;
-    width: 80%;
-    height: 80%;
+    background-position: center;
 }
+
 .piece.b.p {
     background-image: url('../assets/bp.svg');
     background-size: contain;
     background-repeat: no-repeat;
-    width: 80%;
-    height: 80%;
+    background-position: center;
 }
- Add similar rules for other pieces 
-*/ 
+
+/* Add other pieces similarly */