Adds a Simple Chess boardHEADmaster

2 files changed, 56 insertions, 0 deletions

diff --git a/resources/js/app.js b/resources/js/app.js
index 40c55f6..c34da8c 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1 +1,24 @@
+/**
+ * First we will load all of this project's JavaScript dependencies which
+ * includes Vue and other libraries. It is a great starting point when
+ * building robust, powerful web applications using Vue and Laravel.
+ */
+
 require('./bootstrap');
+
+window.Vue = require('vue');
+import 'vue-chessboard/dist/vue-chessboard.browser.js';
+
+const files = require.context('./', true, /\.vue$/i)
+files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
+
+/**
+ * Next, we will create a fresh Vue application instance and attach it to
+ * the page. Then, you may begin adding components to this application
+ * or customize the JavaScript scaffolding to fit your unique needs.
+ */
+
+const app = new Vue({
+    el: '#app'
+});
+
diff --git a/resources/js/components/chessTable.vue b/resources/js/components/chessTable.vue
new file mode 100644
index 0000000..45eeb99
--- /dev/null
+++ b/resources/js/components/chessTable.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="">
+        <chessboard :showThreats="showThreats" @onMove="showInfo"></chessboard>
+    </div>
+
+</template>
+
+<script>
+import {chessboard} from 'vue-chessboard'
+import jQuery from 'jquery'
+
+export default {
+    name: 'App',
+    components: {
+        chessboard
+    },
+    data () {
+        return {
+            currentPosition: {},
+            showThreats: false,
+            positionNumber: 0,
+            started: false,
+            isStartModalActive: true,
+            positionInfo: {},
+        }
+    },
+    methods: {
+        showInfo(info) {
+            this.positionInfo = info
+        }
+    }
+}
+</script>
\ No newline at end of file