3 files changed, 51 insertions, 4 deletions

diff --git a/src-vue/src/plugins/store.ts b/src-vue/src/plugins/store.ts
index 58756a92..62d6f3ff 100644
--- a/src-vue/src/plugins/store.ts
+++ b/src-vue/src/plugins/store.ts
@@ -5,6 +5,7 @@ import {invoke} from "@tauri-apps/api";
 import {GameInstall} from "../utils/GameInstall";
 import {ReleaseCanal} from "../utils/ReleaseCanal";
 import { ElNotification } from 'element-plus';
+import { NorthstarState } from '../utils/NorthstarState';
 
 export const store = createStore({
     state () {
@@ -14,6 +15,7 @@ export const store = createStore({
             game_path: "this/is/the/game/path",
 
             installed_northstar_version: "",
+            northstar_state: NorthstarState.INSTALL,
 
             northstar_is_running: false,
             origin_is_running: false
@@ -36,9 +38,25 @@ export const store = createStore({
         updateCurrentTab(state: any, newTab: Tabs) {
             state.current_tab = newTab;
         },
-        launchGame(state: any) {
+        async launchGame(state: any) {
             // TODO update installation if release track was switched
-            // TODO install northstar if it wasn't detected
+
+            // Install northstar if it wasn't detected.
+            if (state.northstar_state === NorthstarState.INSTALL) {
+                let install_northstar_result = invoke("install_northstar_caller", { gamePath: state.game_path, northstarPackageName: ReleaseCanal.RELEASE });
+                state.northstar_state = NorthstarState.INSTALLING;
+
+                await install_northstar_result.then((message) => {
+                    console.log(message);
+                })
+                    .catch((error) => {
+                        console.error(error);
+                        alert(error);
+                    });
+
+                _get_northstar_version_number(state);
+            }
+
             // Show an error message if Origin is not running.
             if (!state.origin_is_running) {
                 ElNotification({
@@ -101,10 +119,13 @@ async function _get_northstar_version_number(state: any) {
     let northstar_version_number: string = await invoke("get_northstar_version_number_caller", { gamePath: state.game_path });
     if (northstar_version_number && northstar_version_number.length > 0) {
         state.installed_northstar_version = northstar_version_number;
+        state.northstar_state = NorthstarState.READY_TO_PLAY;
 
         await invoke("check_is_northstar_outdated", { gamePath: state.game_path, northstarPackageName: ReleaseCanal.RELEASE })
             .then((message) => {
-                console.log(message);
+                if (message) {
+                    state.northstar_state = NorthstarState.MUST_UPDATE;
+                }                
             })
             .catch((error) => {
                 console.error(error);
diff --git a/src-vue/src/utils/NorthstarState.ts b/src-vue/src/utils/NorthstarState.ts
new file mode 100644
index 00000000..d6e31923
--- /dev/null
+++ b/src-vue/src/utils/NorthstarState.ts
@@ -0,0 +1,7 @@
+export enum NorthstarState {
+    INSTALL,
+    INSTALLING,
+    MUST_UPDATE,
+    UPDATING,
+    READY_TO_PLAY
+}
\ No newline at end of file
diff --git a/src-vue/src/views/PlayView.vue b/src-vue/src/views/PlayView.vue
index 02d59b15..03f54936 100644
--- a/src-vue/src/views/PlayView.vue
+++ b/src-vue/src/views/PlayView.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
 import { ElNotification } from 'element-plus';
+import { NorthstarState } from '../utils/NorthstarState';
 import {Tabs} from "../utils/Tabs";
 
 export default {
@@ -14,6 +15,24 @@ export default {
         },
         northstarVersion(): string {
             return this.$store.state.installed_northstar_version;
+        },
+        playButtonLabel(): string {
+            if (this.$store.state.northstar_is_running) {
+                return "Game is running";
+            }
+
+            switch(this.$store.state.northstar_state) {
+                case NorthstarState.INSTALL:
+                    return "Install";
+                case NorthstarState.INSTALLING:
+                    return "Installing..."
+                case NorthstarState.MUST_UPDATE:
+                    return "Update";
+                case NorthstarState.UPDATING:
+                    return "Updating...";
+                case NorthstarState.READY_TO_PLAY:
+                    return "Launch game";
+            }
         }
     },
     methods: {
@@ -55,7 +74,7 @@ export default {
         </div>
         <div>
             <el-button :disabled="northstarIsRunning" type="primary" size="large" @click="launchGame" class="fc_launch__button">
-                {{ northstarIsRunning ? "Game is running" : "Launch game" }}
+                {{ playButtonLabel }}
             </el-button>
             <div v-if="$store.state.developer_mode" id="fc_services__status">
                 <div>