aboutsummaryrefslogtreecommitdiff
path: root/src-vue/src/views
diff options
context:
space:
mode:
Diffstat (limited to 'src-vue/src/views')
-rw-r--r--src-vue/src/views/ChangelogView.vue23
-rw-r--r--src-vue/src/views/DeveloperView.vue41
-rw-r--r--src-vue/src/views/PlayView.vue126
-rw-r--r--src-vue/src/views/SettingsView.vue88
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>