8 files changed, 246 insertions, 0 deletions
diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
new file mode 100644
index 00000000..c8069bca
--- /dev/null
+++ b/src-vue/src/App.vue
@@ -0,0 +1,103 @@
+<script lang="ts">
+import PlayView from './views/PlayView.vue';
+import { appWindow } from '@tauri-apps/api/window';
+import { store } from './plugins/store';
+
+export default {
+  components: {
+    PlayView
+  },
+  data() {
+    return {}
+  },
+  mounted: () => {
+    store.commit('initializeListeners');
+  },
+  methods: {
+    minimize() {
+      appWindow.minimize()
+    },
+    close() {
+      appWindow.close()
+    }
+  }
+}
+</script>
+
+<template>
+  <div id="fc_bg__container" data-tauri-drag-region />
+  <el-tabs class="fc_menu__tabs" type="card">
+    <el-tab-pane label="Play"><PlayView /></el-tab-pane>
+    <el-tab-pane label="Changelog">Changelog</el-tab-pane>
+    <!-- <el-tab-pane label="Mods">Mods</el-tab-pane> -->
+    <el-tab-pane label="Settings">Settings</el-tab-pane>
+    <el-tab-pane v-if="$store.state.developer_mode" label="Dev">Developer tools</el-tab-pane>
+  </el-tabs>
+  <div id="fc_window__controls">
+    <el-button color="white" icon="SemiSelect" @click="minimize" circle />
+    <el-button color="white" icon="CloseBold" @click="close" circle />
+  </div>
+</template>
+
+<style>
+/* Borders reset */
+.fc_menu__tabs .el-tabs__nav, .fc_menu__tabs .el-tabs__header {
+  border: none !important;
+}
+
+/* Header item */
+.fc_menu__tabs .el-tabs__item {
+  color: #b4b6b9;
+  text-transform: uppercase;
+  border: none !important;
+  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  font-weight: bold;
+  font-size: large;
+  margin: 10px 0;
+}
+
+.fc_menu__tabs .el-tabs__item:hover {
+  color: #c6c9ce;
+}
+
+.fc_menu__tabs .is-active {
+  color: white !important;
+}
+
+/* Header menu */
+.fc_menu__tabs .el-tabs__header {
+  background-image: radial-gradient(transparent 1px);
+  backdrop-filter: saturate(50%) blur(4px);
+  height: auto !important;
+}
+
+/* Window controls */
+#fc_window__controls {
+  display: flex;
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: var(--el-tabs-header-height);
+}
+
+#fc_window__controls > button {
+  color: white;
+  font-size: 20px;
+  margin: auto 5px;
+  background: none;
+  border: none;
+}
+
+#fc_window__controls > button:hover {
+  color: #c6c9ce;
+}
+
+#fc_window__controls > button:active {
+  color: #56585a;
+}
+
+#fc_window__controls > button:last-of-type {
+  margin-right: 15px;
+}
+
+</style>
diff --git a/src-vue/src/assets/vue.svg b/src-vue/src/assets/vue.svg
new file mode 100644
index 00000000..770e9d33
--- /dev/null
+++ b/src-vue/src/assets/vue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
+\ No newline at end of file
diff --git a/src-vue/src/assets/wallpaperflare.com_wallpaper.jpg b/src-vue/src/assets/wallpaperflare.com_wallpaper.jpg
new file mode 100644
index 00000000..74a840cd
--- /dev/null
+++ b/src-vue/src/assets/wallpaperflare.com_wallpaper.jpg
diff --git a/src-vue/src/main.ts b/src-vue/src/main.ts
new file mode 100644
index 00000000..d13ef719
--- /dev/null
+++ b/src-vue/src/main.ts
@@ -0,0 +1,23 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import ElementPlus from "element-plus";
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+
+
+// styles
+import 'element-plus/theme-chalk/index.css';
+import './style.css'
+import { store } from './plugins/store';
+
+const app = createApp(App);
+app.use(ElementPlus);
+
+// icons
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component);
+}
+
+// style
+app.use( store );
+
+app.mount('#app')
diff --git a/src-vue/src/plugins/store.ts b/src-vue/src/plugins/store.ts
new file mode 100644
index 00000000..226adafe
--- /dev/null
+++ b/src-vue/src/plugins/store.ts
@@ -0,0 +1,35 @@
+import { createStore } from 'vuex';
+import { listen, Event as TauriEvent } from "@tauri-apps/api/event";
+
+export const store = createStore({
+    state () {
+      return {
+        developer_mode: false,
+        
+        installed_northstar_version: "1.9.7",
+
+        northstar_is_running: false,
+        origin_is_running: false
+      }
+    },
+    mutations: {
+        toggleDeveloperMode(state) {
+            state.developer_mode = !state.developer_mode;
+        },
+        initializeListeners(state) {
+            _initializeListeners(state);
+        }
+    }
+});
+
+function _initializeListeners(state: any) {
+    listen("origin-running-ping", function (evt: TauriEvent<any>) {
+        state.origin_is_running = evt.payload as boolean;
+        console.log(`Origin is running: ${evt.payload}`);
+    });
+
+    listen("northstar-running-ping", function (evt: TauriEvent<any>) {
+        state.northstar_is_running = evt.payload as boolean;
+        console.log(`Northstar is running: ${evt.payload}`);
+    });
+}
+\ No newline at end of file
diff --git a/src-vue/src/style.css b/src-vue/src/style.css
new file mode 100644
index 00000000..b3c0e4a7
--- /dev/null
+++ b/src-vue/src/style.css
@@ -0,0 +1,14 @@
+body {
+  margin: 0;
+  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  --el-tabs-header-height: 60px;
+}
+
+#fc_bg__container {
+  background: url(/src/assets/wallpaperflare.com_wallpaper.jpg) center no-repeat;
+  background-size: cover;
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  filter: brightness(0.8);
+}
+\ No newline at end of file
diff --git a/src-vue/src/views/PlayView.vue b/src-vue/src/views/PlayView.vue
new file mode 100644
index 00000000..a3a572e6
--- /dev/null
+++ b/src-vue/src/views/PlayView.vue
@@ -0,0 +1,63 @@
+<script lang="ts">
+import { ElNotification } from 'element-plus';
+
+export default {
+    data() {
+        return {
+            developerModeClicks: 0
+        }
+    },
+    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'
+                });
+            }
+        }
+    }
+};
+</script>
+
+<template>
+    <div class="fc_launch__container">
+        <div class="fc_title">Northstar</div>
+        <div class="fc_northstar__version" @click="activateDeveloperMode">
+            v{{ $store.state.installed_northstar_version }}
+        </div>
+        <el-button type="primary" size="large">Launch game</el-button>
+    </div>
+</template>
+
+<style scoped>
+.fc_launch__container {
+    margin: 50px;
+    position: fixed;
+    bottom: 0;
+}
+
+/* Buttons */
+button {
+    text-transform: uppercase;
+    border-radius: 2px;
+    padding: 30px;
+    font-size: 15px;
+}
+
+/* Titles */
+.fc_title {
+    color: white;
+    font-size: 50px;
+    font-weight: bold;
+}
+
+.fc_northstar__version {
+    color: rgb(168, 168, 168);
+    margin-bottom: 20px;
+}
+</style>
+\ No newline at end of file
diff --git a/src-vue/src/vite-env.d.ts b/src-vue/src/vite-env.d.ts
new file mode 100644
index 00000000..323c78a6
--- /dev/null
+++ b/src-vue/src/vite-env.d.ts
@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}