add index page for testing

qwerty084 · Nov 13, 2022 · 34fb7f0 · 34fb7f0
1 parent a84867f
commit 34fb7f0
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { TheChessboard, type ChessboardAPI, type BoardConfig } from '@/index';
+import '@/assets/board.css';
+const boardAPI = ref<ChessboardAPI>();
+
+const boardConfig: BoardConfig = {
+  coordinates: false,
+  autoCastle: false,
+};
+</script>
+
+<template>
+  <main>
+    <section role="region" aria-label="Board Controls">
+      <button type="button" @click="boardAPI?.board.toggleOrientation()">
+        Toggle orientation
+      </button>
+      <button type="button" @click="boardAPI?.resetBoard()">Reset</button>
+      <button type="button" @click="boardAPI?.undoLastMove()">Undo</button>
+      <button type="button" @click="boardAPI?.toggleThreats()">Threats</button>
+    </section>
+    <TheChessboard :board-config="boardConfig" />
+  </main>
+</template>
diff --git a/src/main.ts b/src/main.ts
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+
+createApp(App).mount('#app');