feat: add DeveloperView component

2 files changed, 29 insertions, 1 deletions

diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index 64acc389..7fbe4045 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -1,4 +1,5 @@
 <script lang="ts">
+import DeveloperView from './views/DeveloperView.vue';
 import PlayView from './views/PlayView.vue';
 import SettingsView from './views/SettingsView.vue';
 import { appWindow } from '@tauri-apps/api/window';
@@ -6,6 +7,7 @@ import { store } from './plugins/store';
 
 export default {
   components: {
+      DeveloperView,
       PlayView,
       SettingsView
   },
@@ -33,7 +35,9 @@ export default {
         <el-tab-pane name="Changelog" label="Changelog">Changelog</el-tab-pane>
         <!-- <el-tab-pane label="Mods">Mods</el-tab-pane> -->
         <el-tab-pane name="Settings" label="Settings"><SettingsView/></el-tab-pane>
-        <el-tab-pane v-if="$store.state.developer_mode" name="Dev" label="Dev">Developer tools</el-tab-pane>
+        <el-tab-pane v-if="$store.state.developer_mode" name="Dev" label="Dev">
+          <DeveloperView/>
+        </el-tab-pane>
     </el-tabs>
     <div id="fc_window__controls">
         <el-button color="white" icon="SemiSelect" @click="minimize" circle />
diff --git a/src-vue/src/views/DeveloperView.vue b/src-vue/src/views/DeveloperView.vue
new file mode 100644
index 00000000..8dcc9608
--- /dev/null
+++ b/src-vue/src/views/DeveloperView.vue
@@ -0,0 +1,24 @@
+<template>
+    <div class="fc__developer__container">
+        <el-button type="primary" @click="disableDevMode">
+            Disable developer mode
+        </el-button>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "DeveloperView",
+    methods: {
+        disableDevMode() {
+            this.$store.commit('toggleDeveloperMode');
+        }
+    }
+}
+</script>
+
+<style scoped>
+.fc__developer__container {
+    padding: 20px 30px;
+}
+</style>