-
Example Chess App
-
-
-
-
+
+
Example Chess App
+
+
+
+
Press 'D' to toggle debug panel
+
+
+
diff --git a/src/assets/main.css b/src/assets/main.css
index d1b180c..3a2d4a1 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -245,3 +245,19 @@
fill: var(--bb-light2);
z-index: 1;
}
+
+/* Check indicator styling */
+.board-square.in-check {
+ background-color: rgba(255, 0, 0, 0.6) !important;
+ box-shadow: inset 0 0 20px rgba(255, 0, 0, 0.8);
+ animation: pulse-check 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse-check {
+ 0%, 100% {
+ box-shadow: inset 0 0 20px rgba(255, 0, 0, 0.8);
+ }
+ 50% {
+ box-shadow: inset 0 0 30px rgba(255, 0, 0, 1);
+ }
+}
diff --git a/src/components/Board.vue b/src/components/Board.vue
index 0fa36c0..d01ccab 100644
--- a/src/components/Board.vue
+++ b/src/components/Board.vue
@@ -1,10 +1,10 @@
@@ -49,7 +56,10 @@ function click_board(square) {
@@ -77,4 +87,4 @@ function click_board(square) {
-
\ No newline at end of file
+
diff --git a/src/components/DebugPanel.vue b/src/components/DebugPanel.vue
new file mode 100644
index 0000000..567bbcd
--- /dev/null
+++ b/src/components/DebugPanel.vue
@@ -0,0 +1,254 @@
+
+
+
+
+
Debug Panel
+
+
+
+
Game State
+
Turn: {{ currentPlayer }} (Move {{ moveNumber }})
+
Half-moves: {{ turn }}
+
+
+
+
+
Current FEN
+
+ {{ currentFen }}
+
+
+
+
+
+
+
Load FEN
+
+
+
+
+
+
+
+
+
Load Test Fixture
+
+
+
+
+
+
+
+
+
Actions
+
+
+
+
+
+
diff --git a/src/composables/chess.js b/src/composables/chess.js
index 8d746ac..4f98a1d 100644
--- a/src/composables/chess.js
+++ b/src/composables/chess.js
@@ -7,7 +7,10 @@ const { status, data, send, open, close } = useWebSocket('ws://' + window.locati
const board = ref({});
const captured_white = ref([]);
const captured_black = ref([]);
-
+const turn = ref(0);
+const currentFen = ref('');
+const fixtures = ref({ positions: {}, categories: {} });
+const inCheck = ref(null);
const horizontal = ["a", "b", "c", "d", "e", "f", "g", "h"];
const vertical = ["8", "7", "6", "5", "4", "3", "2", "1"];
@@ -23,7 +26,10 @@ watch(data, (newData) => {
if(parsedData.board) board.value = parsedData.board;
if(parsedData.captured_black) captured_black.value = parsedData.captured_black;
if(parsedData.captured_white) captured_white.value = parsedData.captured_white;
-
+ if(parsedData.turn !== undefined) turn.value = parsedData.turn;
+ if(parsedData.fen) currentFen.value = parsedData.fen;
+ if(parsedData.fixtures) fixtures.value = parsedData.fixtures;
+ if(parsedData.in_check !== undefined) inCheck.value = parsedData.in_check;
})
const move = (source, destination) => {
@@ -40,16 +46,36 @@ const connect = () => {
onMounted(() => send(JSON.stringify({"connect": {}})));
return status
}
+
const reset = () => send(JSON.stringify({"reset": {}}));
+const loadFen = (fen) => {
+ send(JSON.stringify({ load_fen: { fen } }));
+};
+
+const loadFixture = (name) => {
+ send(JSON.stringify({ load_fixture: { name } }));
+};
+
+const getFixtures = () => {
+ send(JSON.stringify({ get_fixtures: {} }));
+};
+
export function useChess() {
return {
board,
captured_white,
captured_black,
+ turn,
+ currentFen,
+ fixtures,
+ inCheck,
status,
connect,
move,
- reset
+ reset,
+ loadFen,
+ loadFixture,
+ getFixtures
}
-}
\ No newline at end of file
+}