diff --git a/src/main.jsx b/src/main.jsx index bde6f01..5d363d7 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -4,7 +4,7 @@ import { Chess } from 'chess.js'; import { Brain, ChevronRight, CircleHelp, FlipVertical2, Lightbulb, LoaderCircle, RotateCcw, Settings, Sparkles, X } from 'lucide-react'; import './styles.css'; -const PIECES = { p: '♟', n: '♞', b: '♝', r: '♜', q: '♛', k: '♚', P: '♙', N: '♘', B: '♗', R: '♖', Q: '♕', K: '♔' }; +const PIECES = { p: '♟', n: '♞', b: '♝', r: '♜', q: '♛', k: '♚', P: '♟', N: '♞', B: '♝', R: '♜', Q: '♛', K: '♚' }; const FILES = ['a','b','c','d','e','f','g','h']; const RANKS = ['8','7','6','5','4','3','2','1']; const START_FEN = new Chess().fen(); diff --git a/src/styles.css b/src/styles.css index 593719d..d3eb441 100644 --- a/src/styles.css +++ b/src/styles.css @@ -26,7 +26,7 @@ h1,h2 { font-family:'Playfair Display',serif;margin:4px 0 0;font-weight:600; } h .board { display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));position:relative;width:100%;height:100%;border:1px solid #10110f; } .square { border:0; padding:0; min-width:0;min-height:0;position:relative; display:grid;place-items:center;cursor:pointer; overflow:hidden; }.square.light{background:#d8d0bc}.square.dark{background:#67725e}.square:hover:after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.11)} .square.last:before { content:'';position:absolute;inset:0;background:rgba(214,169,67,.34); }.square.selected { box-shadow:inset 0 0 0 4px rgba(244,190,70,.78); }.square.best { box-shadow:inset 0 0 0 3px rgba(199,109,69,.65); } -.piece { font-family:'Times New Roman',serif;font-size:clamp(32px,5.8vw,74px);line-height:1;position:relative;z-index:2;cursor:grab;user-select:none;filter:drop-shadow(0 3px 1px rgba(0,0,0,.22));transition:transform .12s; }.piece:hover{transform:translateY(-2px)}.white-piece{color:#f6f0e2;text-shadow:-1px -1px 0 #191b17,1px -1px 0 #191b17,-1px 1px 0 #191b17,1px 1px 0 #191b17}.black-piece{color:#171914;text-shadow:0 1px 0 rgba(255,255,255,.17)} +.piece { font-family:'Times New Roman',serif;font-size:clamp(32px,5.8vw,74px);line-height:1;position:relative;z-index:2;cursor:grab;user-select:none;filter:drop-shadow(0 3px 1px rgba(0,0,0,.22));transition:transform .12s; }.piece:hover{transform:translateY(-2px)}.white-piece{color:#f8f0dd;-webkit-text-stroke:1.4px #242720;text-shadow:0 2px 0 #242720,0 4px 5px rgba(10,12,9,.32);filter:drop-shadow(0 2px 1px rgba(0,0,0,.34))}.black-piece{color:#171914;text-shadow:0 1px 0 rgba(255,255,255,.17)} .target { width:18%;height:18%;border-radius:50%;background:rgba(18,23,17,.35);position:absolute;z-index:3;pointer-events:none; }.target.capture { width:76%;height:76%;background:transparent;border:5px solid rgba(18,23,17,.35); } .rank-label,.file-label { position:absolute;font:600 8px 'DM Mono',monospace;z-index:4;opacity:.72; }.rank-label{top:3px;left:4px}.file-label{bottom:2px;right:4px}.dark .rank-label,.dark .file-label{color:var(--cream)} .arrow { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;overflow:visible; }.arrow line { stroke:#d66f43;stroke-width:1.7;stroke-linecap:round;opacity:.85; }.arrow marker path{fill:#d66f43}