From 2e622c0989f6abe35e6d8bbd20d523a37e87d923 Mon Sep 17 00:00:00 2001 From: Remy Raes Date: Tue, 20 Sep 2022 23:32:20 +0200 Subject: build: add Vue app skeleton --- src-vue/src/main.ts | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src-vue/src/main.ts (limited to 'src-vue/src/main.ts') diff --git a/src-vue/src/main.ts b/src-vue/src/main.ts new file mode 100644 index 00000000..2425c0f7 --- /dev/null +++ b/src-vue/src/main.ts @@ -0,0 +1,5 @@ +import { createApp } from 'vue' +import './style.css' +import App from './App.vue' + +createApp(App).mount('#app') -- cgit v1.2.3 From 39679a4b9e95f5dae0b72d3379ddcdccd3a892d5 Mon Sep 17 00:00:00 2001 From: Remy Raes Date: Thu, 22 Sep 2022 08:28:50 +0200 Subject: build: import element plugin into Vue --- src-vue/src/main.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) (limited to 'src-vue/src/main.ts') diff --git a/src-vue/src/main.ts b/src-vue/src/main.ts index 2425c0f7..4a4e8745 100644 --- a/src-vue/src/main.ts +++ b/src-vue/src/main.ts @@ -1,5 +1,11 @@ import { createApp } from 'vue' -import './style.css' import App from './App.vue' +import ElementPlus from "element-plus"; -createApp(App).mount('#app') +// styles +import 'element-plus/theme-chalk/index.css'; +// import './style.css' + +const app = createApp(App); +app.use(ElementPlus); +app.mount('#app') -- cgit v1.2.3 From fe73ffe116b0357d6688dc01c5658baf36ee557c Mon Sep 17 00:00:00 2001 From: Remy Raes Date: Fri, 23 Sep 2022 00:46:31 +0200 Subject: feat: import back main CSS stylesheet --- src-vue/src/main.ts | 2 +- src-vue/src/style.css | 80 +-------------------------------------------------- 2 files changed, 2 insertions(+), 80 deletions(-) (limited to 'src-vue/src/main.ts') diff --git a/src-vue/src/main.ts b/src-vue/src/main.ts index 4a4e8745..a2d297be 100644 --- a/src-vue/src/main.ts +++ b/src-vue/src/main.ts @@ -4,7 +4,7 @@ import ElementPlus from "element-plus"; // styles import 'element-plus/theme-chalk/index.css'; -// import './style.css' +import './style.css' const app = createApp(App); app.use(ElementPlus); diff --git a/src-vue/src/style.css b/src-vue/src/style.css index 0192f9aa..60925395 100644 --- a/src-vue/src/style.css +++ b/src-vue/src/style.css @@ -1,81 +1,3 @@ -:root { - font-family: Inter, Avenir, Helvetica, Arial, sans-serif; - font-size: 16px; - line-height: 24px; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - body { margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -.card { - padding: 2em; -} - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} +} \ No newline at end of file -- cgit v1.2.3 From 21784ec3d747000c18b529b6569e1d6941a0c338 Mon Sep 17 00:00:00 2001 From: Remy Raes Date: Fri, 23 Sep 2022 18:02:43 +0200 Subject: build: add element-plus-icons dependency --- src-vue/package-lock.json | 1 + src-vue/package.json | 1 + src-vue/src/main.ts | 8 ++++++++ 3 files changed, 10 insertions(+) (limited to 'src-vue/src/main.ts') diff --git a/src-vue/package-lock.json b/src-vue/package-lock.json index 1f142ea8..589cf98f 100644 --- a/src-vue/package-lock.json +++ b/src-vue/package-lock.json @@ -8,6 +8,7 @@ "name": "src-vue", "version": "0.0.0", "dependencies": { + "@element-plus/icons-vue": "^2.0.9", "element-plus": "^2.2.17", "vue": "^3.2.37" }, diff --git a/src-vue/package.json b/src-vue/package.json index a60f5ca6..43c19a1e 100644 --- a/src-vue/package.json +++ b/src-vue/package.json @@ -9,6 +9,7 @@ "preview": "vite preview" }, "dependencies": { + "@element-plus/icons-vue": "^2.0.9", "element-plus": "^2.2.17", "vue": "^3.2.37" }, diff --git a/src-vue/src/main.ts b/src-vue/src/main.ts index a2d297be..048f8f30 100644 --- a/src-vue/src/main.ts +++ b/src-vue/src/main.ts @@ -1,6 +1,8 @@ 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'; @@ -8,4 +10,10 @@ import './style.css' const app = createApp(App); app.use(ElementPlus); + +// icons +for (const [key, component] of Object.entries(ElementPlusIconsVue)) { + app.component(key, component); +} + app.mount('#app') -- cgit v1.2.3 From e1271d73a67ecc711838e8e8c37bd20d9fe019fc Mon Sep 17 00:00:00 2001 From: Remy Raes Date: Sat, 24 Sep 2022 12:13:54 +0200 Subject: feat: use a store for application state --- src-vue/src/main.ts | 4 ++++ src-vue/src/plugins/store.ts | 10 ++++++++++ src-vue/src/views/PlayView.vue | 4 ++-- 3 files changed, 16 insertions(+), 2 deletions(-) create mode 100644 src-vue/src/plugins/store.ts (limited to 'src-vue/src/main.ts') diff --git a/src-vue/src/main.ts b/src-vue/src/main.ts index 048f8f30..d13ef719 100644 --- a/src-vue/src/main.ts +++ b/src-vue/src/main.ts @@ -7,6 +7,7 @@ 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); @@ -16,4 +17,7 @@ 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..94464e3c --- /dev/null +++ b/src-vue/src/plugins/store.ts @@ -0,0 +1,10 @@ +import { createStore } from 'vuex'; + +export const store = createStore({ + state () { + return { + installed_northstar_version: "1.9.7" + } + }, + mutations: {} +}); \ No newline at end of file diff --git a/src-vue/src/views/PlayView.vue b/src-vue/src/views/PlayView.vue index 116d3649..4104f0ac 100644 --- a/src-vue/src/views/PlayView.vue +++ b/src-vue/src/views/PlayView.vue @@ -4,7 +4,7 @@ @@ -31,7 +31,7 @@ button { font-weight: bold; } -.fc_subtitle { +.fc_northstar__version { color: rgb(168, 168, 168); margin-bottom: 20px; } -- cgit v1.2.3 From 22a7bd16852498a95f9733e228e126a644b9c3ed Mon Sep 17 00:00:00 2001 From: Remy Raes Date: Sun, 2 Oct 2022 22:28:27 +0200 Subject: refactor: type issues --- src-vue/src/components/PlayButton.vue | 3 ++- src-vue/src/main.ts | 2 +- src-vue/src/plugins/store.ts | 5 +++-- src-vue/src/views/PlayView.vue | 5 +++-- src-vue/src/views/SettingsView.vue | 2 +- src-vue/vuex-shim.d.ts | 13 +++++++++++++ 6 files changed, 23 insertions(+), 7 deletions(-) create mode 100644 src-vue/vuex-shim.d.ts (limited to 'src-vue/src/main.ts') diff --git a/src-vue/src/components/PlayButton.vue b/src-vue/src/components/PlayButton.vue index f465fb39..d3176d87 100644 --- a/src-vue/src/components/PlayButton.vue +++ b/src-vue/src/components/PlayButton.vue @@ -22,7 +22,7 @@ export default { case NorthstarState.READY_TO_PLAY: return "Launch game"; - default: + default: return ""; } }, @@ -33,6 +33,7 @@ export default { return Object.keys(ReleaseCanal).map(function (v) { return { key: v, + // @ts-ignore value: ReleaseCanal[v] } }); diff --git a/src-vue/src/main.ts b/src-vue/src/main.ts index d13ef719..0ac31a2d 100644 --- a/src-vue/src/main.ts +++ b/src-vue/src/main.ts @@ -18,6 +18,6 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) { } // style -app.use( store ); +app.use( store, '$store' ); app.mount('#app') diff --git a/src-vue/src/plugins/store.ts b/src-vue/src/plugins/store.ts index 87c8921f..67856b47 100644 --- a/src-vue/src/plugins/store.ts +++ b/src-vue/src/plugins/store.ts @@ -118,6 +118,7 @@ export const store = createStore({ * It invokes all Rust methods that are needed to initialize UI. */ async function _initializeApp(state: any) { + // @ts-ignore const result: GameInstall = await invoke("find_game_install_location_caller") .catch((err) => { // Gamepath not found or other error @@ -154,7 +155,7 @@ function _initializeListeners(state: any) { } /** - * This retrieves Northstar version tag, and stores it in application + * This retrieves Northstar version tag, and stores it in application * state, for it to be displayed in UI. */ async function _get_northstar_version_number(state: any) { @@ -167,7 +168,7 @@ async function _get_northstar_version_number(state: any) { .then((message) => { if (message) { state.northstar_state = NorthstarState.MUST_UPDATE; - } + } }) .catch((error) => { console.error(error); diff --git a/src-vue/src/views/PlayView.vue b/src-vue/src/views/PlayView.vue index 3ca47e22..64779f6a 100644 --- a/src-vue/src/views/PlayView.vue +++ b/src-vue/src/views/PlayView.vue @@ -2,8 +2,9 @@ import { ElNotification } from 'element-plus'; import {Tabs} from "../utils/Tabs"; import PlayButton from '../components/PlayButton.vue'; +import { defineComponent } from "vue"; -export default { +export default defineComponent({ data() { return { developerModeClicks: 0 @@ -39,7 +40,7 @@ export default { this.$store.commit('updateCurrentTab', Tabs.CHANGELOG); } } -}; +});