diff options
| -rw-r--r-- | src-vue/src/components/PlayButton.vue | 85 | ||||
| -rw-r--r-- | src-vue/src/plugins/store.ts | 28 | ||||
| -rw-r--r-- | src-vue/src/views/DeveloperView.vue | 27 | ||||
| -rw-r--r-- | src-vue/src/views/SettingsView.vue | 28 |
4 files changed, 139 insertions, 29 deletions
diff --git a/src-vue/src/components/PlayButton.vue b/src-vue/src/components/PlayButton.vue index ff57e706..28fac278 100644 --- a/src-vue/src/components/PlayButton.vue +++ b/src-vue/src/components/PlayButton.vue @@ -6,6 +6,16 @@ import { ReleaseCanal } from '../utils/ReleaseCanal'; export default defineComponent({ name: 'PlayButton', computed: { + currentCanal: { + get(): ReleaseCanal { + return this.$store.state.northstar_release_canal; + }, + set(value: ReleaseCanal) { + if (value !== this.currentCanal) { + this.$store.commit('toggleReleaseCandidate'); + } + } + }, playButtonLabel(): string { if (this.$store.state.northstar_is_running) { return "Game is running"; @@ -39,6 +49,40 @@ export default defineComponent({ value: Object.keys(ReleaseCanal)[Object.values(ReleaseCanal).indexOf(v)] } }); + }, + selectOptions(): {label: string, options: {value: ReleaseCanal, label: string}[]}[] { + return [ + { + label: 'Beta', + options: [ + { + value: ReleaseCanal.RELEASE_CANDIDATE, + label: 'Northstar release candidate', + }, + ] + }, + { + label: 'Stable', + options: [ + { + value: ReleaseCanal.RELEASE, + label: 'Northstar', + }, + ] + } + ]; + }, + showReleaseSwitch(): boolean { + return this.$store.state.enableReleasesSwitch; + }, + + /** + * Button has rounded edges on its right only if releases switching is enabled. + */ + buttonRadiusStyle(): string { + return this.showReleaseSwitch + ? 'border-radius: 2px 0 0 2px;' + : 'border-radius: 2px'; } }, methods: { @@ -50,20 +94,57 @@ export default defineComponent({ </script> <template> - <el-button :disabled="northstarIsRunning" type="primary" size="large" @click="launchGame" class="fc_launch__button"> + <el-button :disabled="northstarIsRunning" + type="primary" size="large" @click="launchGame" + class="fc_launch__button" :style="buttonRadiusStyle"> {{ playButtonLabel }} </el-button> + <el-select v-if="showReleaseSwitch" v-model="currentCanal" placeholder="Select"> + <el-option-group + v-for="group in selectOptions" + :key="group.label" + :label="group.label" + > + <el-option + v-for="item in group.options" + :key="item.value" + :label="item.label" + :value="item.value" + /> + </el-option-group> + </el-select> </template> <style scoped> button { text-transform: uppercase; - border-radius: 2px; padding: 30px; font-size: 15px; + margin-right: 0; } .fc_launch__button:focus { background-color: var(--el-color-primary); border-color: var(--el-color-primary); } + +/* Release canal selector */ + +.el-select { + width: 0; + margin-right: 50px; + border-left: 1px solid rgb(176, 205, 255); +} + +.el-select:deep(.el-input__wrapper) { + padding: 0 9px 0 0; + background-color: var(--el-color-primary); + border: none; + border-radius: 0 2px 2px 0; + height: 62px; + box-shadow: none !important; +} + +.el-select:deep(.el-icon) { + color: white !important; +} </style> diff --git a/src-vue/src/plugins/store.ts b/src-vue/src/plugins/store.ts index 8e793ced..e2246c44 100644 --- a/src-vue/src/plugins/store.ts +++ b/src-vue/src/plugins/store.ts @@ -28,6 +28,7 @@ export interface FlightCoreStore { installed_northstar_version: string, northstar_state: NorthstarState, northstar_release_canal: ReleaseCanal, + enableReleasesSwitch: boolean, releaseNotes: ReleaseInfo[], thunderstoreMods: ThunderstoreMod[], @@ -51,6 +52,7 @@ export const store = createStore<FlightCoreStore>({ installed_northstar_version: "", northstar_state: NorthstarState.GAME_NOT_FOUND, northstar_release_canal: ReleaseCanal.RELEASE, + enableReleasesSwitch: false, releaseNotes: [], thunderstoreMods: [], @@ -248,6 +250,26 @@ export const store = createStore<FlightCoreStore>({ position: 'bottom-right' }); }); + }, + async toggleReleaseCandidate(state: FlightCoreStore) { + // Flip between RELEASE and RELEASE_CANDIDATE + state.northstar_release_canal = state.northstar_release_canal === ReleaseCanal.RELEASE + ? ReleaseCanal.RELEASE_CANDIDATE + : ReleaseCanal.RELEASE; + + // Save change in persistent store + await persistentStore.set('northstar-release-canal', { value: state.northstar_release_canal }); + + // Update current state so that update check etc can be performed + store.commit("checkNorthstarUpdates"); + + // Display notification to highlight change + ElNotification({ + title: `${state.northstar_release_canal}`, + message: `Switched release channel to: "${state.northstar_release_canal}"`, + type: 'success', + position: 'bottom-right' + }); } } }); @@ -278,6 +300,12 @@ async function _initializeApp(state: any) { console.log("Value not found in store"); } + // Grab "Enable releases switching" setting from store if possible + const valueFromStore: {value: boolean} | null = await persistentStore.get('northstar-releases-switching'); + if (valueFromStore) { + state.enableReleasesSwitch = valueFromStore.value; + } + // Get FlightCore version number state.flightcore_version = await invoke("get_flightcore_version_number"); diff --git a/src-vue/src/views/DeveloperView.vue b/src-vue/src/views/DeveloperView.vue index f2e097b0..e15f2ad0 100644 --- a/src-vue/src/views/DeveloperView.vue +++ b/src-vue/src/views/DeveloperView.vue @@ -19,10 +19,6 @@ <h3>Testing:</h3> - <el-button type="primary" @click="toggleReleaseCandidate"> - Toggle Release Candidate - </el-button> - <el-button type="primary" @click="launchGameWithoutChecks"> Launch Northstar (bypass all checks) </el-button> @@ -60,7 +56,6 @@ import { defineComponent } from "vue"; import { invoke } from "@tauri-apps/api"; import { ElNotification } from "element-plus"; -import { ReleaseCanal } from "../utils/ReleaseCanal"; import { GameInstall } from "../utils/GameInstall"; import { Store } from 'tauri-plugin-store-api'; const persistentStore = new Store('flight-core-settings.json'); @@ -105,28 +100,6 @@ export default defineComponent({ console.error(error); }); }, - async toggleReleaseCandidate() { - // Flip between RELEASE and RELEASE_CANDIDATE - this.$store.state.northstar_release_canal = this.$store.state.northstar_release_canal === ReleaseCanal.RELEASE - ? ReleaseCanal.RELEASE_CANDIDATE - : ReleaseCanal.RELEASE; - - // Save change in persistent store - await persistentStore.set('northstar-release-canal', { value: this.$store.state.northstar_release_canal }); - - // Update current state so that update check etc can be performed - this.$store.commit("checkNorthstarUpdates"); - - console.log(this.$store.state) - - // Display notification to highlight change - ElNotification({ - title: `${this.$store.state.northstar_release_canal}`, - message: `Switched release channel to: "${this.$store.state.northstar_release_canal}"`, - type: 'success', - position: 'bottom-right' - }); - }, async launchGameWithoutChecks() { this.$store.commit('launchGame', true); }, diff --git a/src-vue/src/views/SettingsView.vue b/src-vue/src/views/SettingsView.vue index 8cb6e810..ff87c394 100644 --- a/src-vue/src/views/SettingsView.vue +++ b/src-vue/src/views/SettingsView.vue @@ -21,6 +21,12 @@ <br /> <br /> 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) + + <h3>Testing:</h3> + <span> + Enable testing release channels + <el-switch v-model="enableReleasesSwitch"></el-switch> + </span> </div> </el-scrollbar> </div> @@ -29,6 +35,9 @@ <script lang="ts"> import { defineComponent } from "vue"; import { ElNotification } from 'element-plus'; +import { ReleaseCanal } from "../utils/ReleaseCanal"; +import { Store } from 'tauri-plugin-store-api'; +const persistentStore = new Store('flight-core-settings.json'); export default defineComponent({ name: "SettingsView", @@ -41,6 +50,21 @@ export default defineComponent({ flightcoreVersion(): string { return this.$store.state.flightcore_version; }, + enableReleasesSwitch: { + get(): boolean { + return this.$store.state.enableReleasesSwitch; + }, + set(value: boolean): void { + this.$store.state.enableReleasesSwitch = value; + persistentStore.set('northstar-releases-switching', { value }); + + // When disabling switch, we switch release canal to stable release, to avoid users being + // stuck with release candidate after disabling release switching. + if (!value && this.$store.state.northstar_release_canal !== ReleaseCanal.RELEASE) { + this.$store.commit('toggleReleaseCandidate'); + } + } + } }, methods: { activateDeveloperMode() { @@ -82,4 +106,8 @@ h3:first-of-type { .el-input { width: 50%; } + +.el-switch { + margin-left: 50px; +} </style> |