diff options
Diffstat (limited to 'src-vue/src/views')
| -rw-r--r-- | src-vue/src/views/ChangelogView.vue | 23 | ||||
| -rw-r--r-- | src-vue/src/views/DeveloperView.vue | 26 | ||||
| -rw-r--r-- | src-vue/src/views/PlayView.vue | 126 | ||||
| -rw-r--r-- | src-vue/src/views/SettingsView.vue | 52 |
4 files changed, 227 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..bfb206a2 --- /dev/null +++ b/src-vue/src/views/DeveloperView.vue @@ -0,0 +1,26 @@ +<template> + <div class="fc__developer__container"> + <el-button type="primary" @click="disableDevMode"> + Disable developer mode + </el-button> + </div> +</template> + +<script lang="ts"> +import {defineComponent} from "vue"; + +export default defineComponent({ + name: "DeveloperView", + methods: { + disableDevMode() { + this.$store.commit('toggleDeveloperMode'); + } + } +}); +</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..64779f6a --- /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..e0ffc026 --- /dev/null +++ b/src-vue/src/views/SettingsView.vue @@ -0,0 +1,52 @@ +<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"> +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> |