aboutsummaryrefslogtreecommitdiff
path: root/src-vue/src/components/PlayButton.vue
diff options
context:
space:
mode:
authorRémy Raes <contact@remyraes.com>2022-11-30 18:48:45 +0100
committerGitHub <noreply@github.com>2022-11-30 18:48:45 +0100
commitd61f3fe1b0c9f4461d33f289b3100465d77999ad (patch)
tree80d03616cc2475a242ce315f7007d4152cfd3bfe /src-vue/src/components/PlayButton.vue
parente301086cbb26fcb1d9e520c016b00233aba0f315 (diff)
downloadFlightCore-d61f3fe1b0c9f4461d33f289b3100465d77999ad.tar.gz
FlightCore-d61f3fe1b0c9f4461d33f289b3100465d77999ad.zip
feat: Release channel selector (#86)
* refactor: Move release channel button to settings * chore: Revert single newline removal * feat: add basic selector * feat: add basic selector style (to match button style) * fix: remove box-shadow on selector * feat: selector displays release canal from UI store * refactor: export toggleReleaseCandidate to store, for it to be used by release canal selector * feat: selector effectively changes release canal * fix: selector members typing issue * refactor: adjust selector labels * refactor: remove channel switching button Since the channel selector on the play view allows users to switch channels, this button is now useless. * feat: add a switch to toggle releases switching * feat: switch only appears if corresponding flag is enabled * feat: adjust button corners regarding releases switching state * feat: switch value is saved in persistent store * refactor: update release candidate label * fix: set release canal to RELEASE when switch is toggled off
Diffstat (limited to 'src-vue/src/components/PlayButton.vue')
-rw-r--r--src-vue/src/components/PlayButton.vue85
1 files changed, 83 insertions, 2 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>