From a8c069a9f5d9baaef975b7f8f54d5574081c8da6 Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Sun, 13 Dec 2020 17:41:35 -0600
Subject: [PATCH] add katex rendering and question fetching, basic dark theme
 scss, dev env API url

---
 client/.env.development |  1 +
 client/src/App.vue      | 49 +++++++++++++++++++++++++++++++++++++++--
 client/src/main.js      | 21 +++---------------
 3 files changed, 51 insertions(+), 20 deletions(-)
 create mode 100644 client/.env.development

diff --git a/client/.env.development b/client/.env.development
new file mode 100644
index 0000000..35163b2
--- /dev/null
+++ b/client/.env.development
@@ -0,0 +1 @@
+VUE_APP_API_URL=http://localhost:5000
diff --git a/client/src/App.vue b/client/src/App.vue
index 032fbcd..7802c69 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,12 +1,42 @@
 <template>
     <div id="app">
+        <div id="expression" v-katex="expression"></div>
+        <button v-on:click="fetchQuestion">
+            Fetch Question
+        </button>
     </div>
 </template>
 
-<style lang="css">
+<style lang="scss">
+html, body {
+    background: hsl(0, 0%, 6%)
+}
+
+a, p, span {
+    color: hsl(0, 0%, 91%);
+    text-shadow: hsl(0, 0%, 5%) 5px 5px;
+}
+
+#question-text {
+    font-family: "Computer Modern", serif;
+}
+
+#expression {
+    width: 75%;
+    margin: 0 auto;
+    text-align: center;
+
+    .katex {
+        font-size: 16em !important;
+        white-space: nowrap;
+        user-select: none;
+    }
+}
 </style>
 
 <script>
+import axios from "axios";
+
 export default {
     name: 'App',
     data() {
@@ -14,9 +44,24 @@ export default {
             currentQuestion: null
         }
     },
+    computed: {
+        expression() {
+            return this.currentQuestion != null ? this.currentQuestion.question : "loading";
+        },
+    },
+    mounted: function () {
+        this.$nextTick(() => {
+            this.fetchQuestion();
+        })
+    },
     methods: {
         fetchQuestion() {
-        }
+            // Fetch the next question, display with KaTeX
+            axios.put(`${process.env.VUE_APP_API_URL}/api/question/`)
+                .then((res) => {
+                    this.currentQuestion = res.data
+                })
+        },
     }
 }
 </script>
diff --git a/client/src/main.js b/client/src/main.js
index 742621d..ed4d20c 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -1,26 +1,11 @@
 import Vue from 'vue'
+import VueKatex from 'vue-katex';
 import App from './App.vue'
-import axios from 'axios'
-import VueAxios from 'vue-axios'
-import VueHighlightJS from 'vue-highlightjs'
-import VueMaterial from 'vue-material'
-import json from 'highlight.js/lib/languages/css';
-import 'vue-material/dist/vue-material.min.css'
-import 'vue-material/dist/theme/default.css'
-import 'highlight.js/styles/default.css';
-import InfiniteLoading from "vue-infinite-loading";
+import 'katex/dist/katex.min.css';
 
-Vue.use(VueHighlightJS, {languages: {json}})
-Vue.use(VueMaterial)
-Vue.use(VueAxios, axios)
-Vue.use(InfiniteLoading, {
-  system: {
-    // throttleLimit: 500,
-    /* other settings need to configure */
-  },
-});
 
 Vue.config.productionTip = false
+Vue.use(VueKatex)
 
 new Vue({
     render: h => h(App),