refactor: reset settings structure

packages/renderer/src/App.vue

@@ -15,7 +15,7 @@
   const recordStore = useRecordStore();
 
   onMounted(() => {
-    if (settingsStore.autoConnect) {
+    if (settingsStore.connection.startup) {
       recordStore.connect();
     }
   });

packages/renderer/src/store/record.ts

@@ -45,8 +45,9 @@ export const useRecordStore = defineStore('record', () => {
       ws.close();
     }
     const settingsStore = useSettingsStore();
-    const port = settingsStore.port;
-    ws = new WebSocket(`ws://localhost:${port}`);
+    const host = settingsStore.connection.host;
+    const port = settingsStore.connection.port;
+    ws = new WebSocket(`ws://${host}:${port}`);
 
     ws.onmessage = (event: MessageEvent<string>) => {
       if (event.type === 'message') {

packages/renderer/src/store/settings.ts

@@ -1,23 +1,47 @@
 import { defineStore } from 'pinia';
+import { ref } from 'vue';
 
-export const useSettingsStore = defineStore('settings', {
-  state: () => {
-    return {
-      bgAlpha: 100,
-      bgColor: 'FFFFFF',
-      bgCornerSize: 0,
-      fontAlpha: 100,
-      fontColor: '000000',
-      fontSize: 16,
-      align: 'topleft',
-      paddingtop: 0,
-      paddingbottom: 0,
-      paddingleft: 0,
-      paddingright: 0,
-      cols: [],
-      shortcut: 'Ctrl+Shift+Num0',
-      port: 24399,
-      autoConnect: true,
-    };
-  },
+export const useSettingsStore = defineStore('settings', () => {
+  const connection = ref({
+    host: 'localhost',
+    port: 24399,
+    startup: true,
+    retry: true,
+  });
+
+  const damageStyle = ref({
+    bgAlpha: 100,
+    bgColor: 'FFFFFF',
+    bgCornerSize: 0,
+    fontAlpha: 100,
+    fontColor: '000000',
+    fontSize: 16,
+  });
+
+  const damageCols = ref({
+    order: [],
+  });
+
+  const windowStyle = ref({
+    align: 'topleft',
+    paddingtop: 0,
+    paddingbottom: 0,
+    paddingleft: 0,
+    paddingright: 0,
+    width: 700,
+    height: 500,
+  });
+
+  const shortcut = ref({
+    enabled: true,
+    key: 'Ctrl+Shift+Num0',
+  });
+
+  return {
+    connection,
+    damageStyle,
+    damageCols,
+    windowStyle,
+    shortcut,
+  };
 });

packages/renderer/src/views/damage/DamagePane.vue

@@ -19,7 +19,6 @@
   }>();
 
   const validPlayers = computed(() => {
-    console.log(props.record.players);
     return props.record.players.filter(player => player);
   });
 </script>