aboutsummaryrefslogtreecommitdiff
path: root/src-vue
diff options
context:
space:
mode:
Diffstat (limited to 'src-vue')
-rw-r--r--src-vue/src/App.vue6
-rw-r--r--src-vue/src/plugins/store.ts1
-rw-r--r--src-vue/src/views/SettingsView.vue50
3 files changed, 55 insertions, 2 deletions
diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index b97e9ef4..264f021d 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -1,11 +1,13 @@
<script lang="ts">
import PlayView from './views/PlayView.vue';
+import SettingsView from './views/SettingsView.vue';
import { appWindow } from '@tauri-apps/api/window';
import { store } from './plugins/store';
export default {
components: {
- PlayView
+ PlayView,
+ SettingsView
},
data() {
return {}
@@ -30,7 +32,7 @@ export default {
<el-tab-pane name="Play" label="Play"><PlayView /></el-tab-pane>
<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">Settings</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-tabs>
<div id="fc_window__controls">
diff --git a/src-vue/src/plugins/store.ts b/src-vue/src/plugins/store.ts
index f2d42e13..5519537e 100644
--- a/src-vue/src/plugins/store.ts
+++ b/src-vue/src/plugins/store.ts
@@ -7,6 +7,7 @@ export const store = createStore({
return {
current_tab: Tabs.PLAY,
developer_mode: false,
+ game_path: "this/is/the/game/path",
installed_northstar_version: "1.9.7",
diff --git a/src-vue/src/views/SettingsView.vue b/src-vue/src/views/SettingsView.vue
new file mode 100644
index 00000000..dbea2ce3
--- /dev/null
+++ b/src-vue/src/views/SettingsView.vue
@@ -0,0 +1,50 @@
+<template>
+ <div class="fc_settings__container">
+ <!-- Game folder location -->
+ <h3>Manage installation</h3>
+ <el-input
+ v-model="$store.state.game_path"
+ class="w-50 m-2"
+ placeholder="Choose installation folder"
+ @click="updateGamePath"
+ >
+ <template #prepend>
+ <el-button icon="Folder" @click="updateGamePath"/>
+ </template>
+ </el-input>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "SettingsView",
+ methods: {
+ updateGamePath() {
+ console.log('TODO: update path');
+ }
+ },
+ mounted() {
+ document.querySelector('input').disabled = true;
+ }
+}
+</script>
+
+<style scoped>
+.fc_settings__container {
+ max-width: 1200px;
+ padding: 20px 30px;
+ margin: 0 auto;
+ color: white;
+}
+
+h3:first-of-type {
+ margin-top: 0;
+ margin-bottom: 1em;
+ text-transform: uppercase;
+ font-weight: unset;
+}
+
+.el-input {
+ width: 50%;
+}
+</style>