Merge pull request #2 from Alystrasz/feat/new-ui

Full UI rework

4 files changed, 278 insertions, 0 deletions

diff --git a/src-vue/src/views/ChangelogView.vue b/src-vue/src/views/ChangelogView.vue
new file mode 100644
index 00000000..9fca5e5b
--- /dev/null
+++ b/src-vue/src/views/ChangelogView.vue
@@ -0,0 +1,23 @@
+<template>
+    <div class="fc__changelog__container">
+        <el-link :underline="false" icon="DocumentCopy" target="_blank" href="https://github.com/R2Northstar/Northstar/releases">
+            Open release notes
+        </el-link>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "ChangelogView"
+}
+</script>
+
+<style scoped>
+.fc__changelog__container {
+    padding: 20px 30px;
+}
+
+.el-link {
+  color: white;
+}
+</style>
diff --git a/src-vue/src/views/DeveloperView.vue b/src-vue/src/views/DeveloperView.vue
new file mode 100644
index 00000000..52dd29fd
--- /dev/null
+++ b/src-vue/src/views/DeveloperView.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="fc__developer__container">
+        <el-button type="primary" @click="disableDevMode">
+            Disable developer mode
+        </el-button>
+
+        <el-button type="primary" @click="crashApplication">
+            Panic button
+        </el-button>
+    </div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import { invoke } from "@tauri-apps/api";
+import { ElNotification } from "element-plus";
+
+export default defineComponent({
+    name: "DeveloperView",
+    methods: {
+        disableDevMode() {
+            this.$store.commit('toggleDeveloperMode');
+        },
+        async crashApplication() {
+            await invoke("force_panic");
+            ElNotification({
+                title: 'Error',
+                message: "Never should have been able to get here!",
+                type: 'error',
+                position: 'bottom-right'
+            });
+        }
+    }
+});
+</script>
+
+<style scoped>
+.fc__developer__container {
+    padding: 20px 30px;
+}
+</style>
diff --git a/src-vue/src/views/PlayView.vue b/src-vue/src/views/PlayView.vue
new file mode 100644
index 00000000..b02acc59
--- /dev/null
+++ b/src-vue/src/views/PlayView.vue
@@ -0,0 +1,126 @@
+<script lang="ts">
+import { ElNotification } from 'element-plus';
+import {Tabs} from "../utils/Tabs";
+import PlayButton from '../components/PlayButton.vue';
+import { defineComponent } from "vue";
+
+export default defineComponent({
+    data() {
+        return {
+            developerModeClicks: 0
+        }
+    },
+    components: {
+        PlayButton
+    },
+    computed: {
+        northstarIsRunning(): boolean {
+            return this.$store.state.northstar_is_running;
+        },
+        northstarVersion(): string {
+            return this.$store.state.installed_northstar_version;
+        },
+    },
+    methods: {
+        activateDeveloperMode() {
+            this.developerModeClicks += 1;
+            if (this.developerModeClicks >= 6) {
+                this.$store.state.developer_mode = true;
+                ElNotification({
+                    title: 'Watch out!',
+                    message: 'Developer mode enabled.',
+                    type: 'info',
+                    position: 'bottom-right'
+                });
+                this.developerModeClicks = 0;
+            }
+        },
+
+        showChangelogPage() {
+            this.$store.commit('updateCurrentTab', Tabs.CHANGELOG);
+        }
+    }
+});
+</script>
+
+<template>
+    <div class="fc_launch__container">
+        <div class="fc_title">Northstar</div>
+        <div class="fc_northstar__version__container">
+            <div class="fc_northstar__version" @click="activateDeveloperMode">
+                {{ northstarVersion === '' ? 'Unknown version' : `v${northstarVersion}` }}
+            </div>
+            <div v-if="northstarVersion !== ''" class="fc_changelog__link" @click="showChangelogPage">
+                (see patch notes)
+            </div>
+        </div>
+        <div>
+            <PlayButton/>
+            <div v-if="$store.state.developer_mode" id="fc_services__status">
+                <div>
+                    <div class="fc_version__line">Northstar is running:    </div>
+                    <div class="fc_version__line fc_version__line__boolean"> {{ northstarIsRunning }}</div>
+                </div>
+                <div>
+                    <div class="fc_version__line">Origin is running: </div>
+                    <div class="fc_version__line fc_version__line__boolean">{{ $store.state.origin_is_running }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.fc_launch__container {
+    margin: 50px;
+    position: fixed;
+    bottom: 0;
+}
+
+/* Titles */
+.fc_title {
+    color: white;
+    font-size: 50px;
+    font-weight: bold;
+}
+
+/* Northstar version + changelog link */
+.fc_northstar__version__container {
+    margin-bottom: 20px;
+    color: rgb(168, 168, 168);
+}
+
+.fc_northstar__version, .fc_changelog__link {
+    display: inline-block;
+}
+
+.fc_changelog__link {
+    margin-left: 3px;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+
+.fc_launch__button:focus {
+    background-color: var(--el-color-primary);
+    border-color: var(--el-color-primary);
+}
+
+
+#fc_services__status {
+    display: inline-block;
+    position: fixed;
+    padding: 10px 20px;
+    color: #e8edef;
+}
+
+.fc_version__line {
+    display: inline-block;
+}
+
+.fc_version__line__boolean {
+    margin-left: 5px;
+    margin-bottom: 5px;
+    color: #b4b6b9;
+}
+</style>
diff --git a/src-vue/src/views/SettingsView.vue b/src-vue/src/views/SettingsView.vue
new file mode 100644
index 00000000..0e5498e9
--- /dev/null
+++ b/src-vue/src/views/SettingsView.vue
@@ -0,0 +1,88 @@
+<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>
+        <h3>About:</h3>
+        UI design inspired by <el-link :underline="false" target="_blank" href="https://github.com/TFORevive/tforevive_launcher/" type="primary">TFORevive Launcher</el-link> (not yet public)
+    </div>
+</template>
+
+<script lang="ts">
+import { open } from '@tauri-apps/api/dialog';
+import { appDir } from '@tauri-apps/api/path';
+import { invoke } from "@tauri-apps/api";
+import { defineComponent } from "vue";
+import { ElNotification } from 'element-plus';
+
+export default defineComponent({
+    name: "SettingsView",
+    methods: {
+        async updateGamePath() {
+            // Open a selection dialog for directories
+            const selected = await open({
+                directory: true,
+                multiple: false,
+                defaultPath: await appDir(),
+            });
+            if (Array.isArray(selected)) {
+                // user selected multiple directories
+                alert("Please only select a single directory");
+            } else if (selected === null) {
+                // user cancelled the selection
+            } else {
+                // user selected a single directory
+
+                // Verify if valid Titanfall2 install location
+                let is_valid_titanfall2_install = await invoke("verify_install_location", { gamePath: selected }) as boolean;
+                if (is_valid_titanfall2_install) {
+                    this.$store.state.game_path = selected;
+                    // Check for Northstar install
+                    this.$store.commit('checkNorthstarUpdates');
+                }
+                else {
+                    // Not valid Titanfall2 install
+                    ElNotification({
+                        title: 'Wrong folder',
+                        message: "Selected folder is not a valid Titanfall2 install.",
+                        type: 'error',
+                        position: 'bottom-right'
+                    });
+                }
+            }
+        }
+    },
+    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>