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

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>