Merge pull request #9 from jojobii-arks/jojobii-arks/0-svelte-rewrite

Jojobii arks/0 svelte rewrite

app/.prettierrc

@@ -3,5 +3,6 @@
   "useTabs": false,
   "singleQuote": true,
   "endOfLine": "crlf",
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+  "pluginSearchDirs": false
 }

app/electron.vite.config.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'path';
 import { defineConfig, externalizeDepsPlugin } from 'electron-vite';
-import react from '@vitejs/plugin-react';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
 
 export default defineConfig({
   main: {
@@ -12,9 +12,9 @@ export default defineConfig({
   renderer: {
     resolve: {
       alias: {
-        '@renderer': resolve('src/renderer/src'),
+        '@renderer': resolve('src/renderer/app'),
       },
     },
-    plugins: [react()],
+    plugins: [svelte()],
   },
 });

app/package.json

@@ -1,15 +1,14 @@
 {
   "name": "ngs-log-observer",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Action Log observer for PSO2:NGS",
   "main": "./out/main/index.js",
   "author": "jojobii-arks",
   "scripts": {
     "format": "prettier --write .",
     "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
     "typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
-    "typecheck:web": "tsc --noEmit -p tsconfig.web.json --composite false",
-    "typecheck": "pnpm run typecheck:node && pnpm run typecheck:web",
+    "typecheck": "pnpm run typecheck:node",
     "start": "electron-vite preview",
     "dev": "electron-vite dev",
     "build": "pnpm run typecheck && electron-vite build",
@@ -29,13 +28,11 @@
   "devDependencies": {
     "@electron-toolkit/tsconfig": "^1.0.1",
     "@electron/notarize": "^1.2.3",
+    "@sveltejs/vite-plugin-svelte": "^2.0.3",
     "@tailwindcss/typography": "^0.5.9",
     "@types/node": "16.18.14",
-    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.10",
     "@typescript-eslint/eslint-plugin": "^5.54.1",
     "@typescript-eslint/parser": "^5.54.1",
-    "@vitejs/plugin-react": "^3.1.0",
     "autoprefixer": "^10.4.14",
     "daisyui": "^2.51.4",
     "electron": "^22.3.2",
@@ -47,11 +44,14 @@
     "eslint-plugin-react": "^7.32.2",
     "postcss": "^8.4.21",
     "prettier": "^2.8.4",
+    "prettier-plugin-svelte": "^2.10.0",
     "prettier-plugin-tailwindcss": "^0.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "svelte-preprocess": "^5.0.3",
     "tailwindcss": "^3.2.7",
     "typescript": "^4.9.5",
     "vite": "^4.1.4"
   }
 }
+

app/src/main/index.ts

@@ -42,8 +42,10 @@ function createWindow(): BrowserWindow {
     mainWindow.loadFile(join(__dirname, '../renderer/index.html'));
   }
 
-  // ? Open Dev Tools on launch
-  // mainWindow.webContents.openDevTools();
+  // Open the DevTools during development.
+  if (is.dev) {
+    mainWindow.webContents.openDevTools();
+  }
 
   return mainWindow;
 }

app/src/preload/index.d.ts

@@ -1,2 +1,6 @@
 /** API generated from [api.ts] */
 declare const api: typeof import('./api').default;
+
+declare interface Window {
+  api: typeof api;
+}

app/src/renderer/app/App.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { ActionLogItem } from '../../lib/types';
+  const api = window.api;
+
+  let log: ActionLogItem[] = [];
+  let gameDirectory: string;
+  let sessionMesetaTotal: number;
+  $: sessionMesetaTotal = [...log]
+    .filter(
+      (e) =>
+        ['[Pickup]', '[DiscradExchange]'].includes(e.action_type) &&
+        e.item_num?.includes('N-Meseta')
+    )
+    .reduce(
+      (total: number, action) =>
+        total + Number(/\d+(?=\))(?!\()/.exec(action.item_num ?? '')),
+      0
+    );
+
+  let showMeseta = true;
+  let isAlwaysOnTop = false;
+  $: api.setIsAlwaysOnTop(isAlwaysOnTop);
+
+  onMount(() => {
+    api.onAlert((_, value) => {
+      alert(value);
+    });
+
+    api.onNewAction((_, value) => {
+      log = [...log, ...value];
+    });
+
+    api.getGameDirectory().then((value) => {
+      gameDirectory = value.split('\\').at(-1);
+    });
+
+    return () => {
+      api.clear();
+    };
+  });
+</script>
+
+<main class="flex h-[100vh] flex-col overflow-y-clip">
+  <header class="draggable select-none bg-base-300 p-4">
+    <div>
+      <h1 class="mb-1 text-2xl font-black">NGS Log Observer</h1>
+      <p class="mb-2 text-sm">
+        Using logs from{' '}
+        <button
+          class="link-hover link"
+          on:click={() => {
+            api.openGameDirectory();
+          }}
+        >
+          {gameDirectory}
+        </button>
+      </p>
+    </div>
+    <div class="flex flex-wrap justify-between">
+      <div class="stats">
+        <div class="no-drag stat">
+          <div class="stat-title text-sm">Session 💰</div>
+          <div class="stat-value select-text text-xl">
+            {sessionMesetaTotal.toLocaleString()}
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-col">
+        <div class="form-control">
+          <label class="no-drag label cursor-pointer">
+            <span class="label-text mr-4">Show Meseta</span>
+            <input type="checkbox" class="toggle" bind:checked={showMeseta} />
+          </label>
+        </div>
+        <div class="form-control">
+          <label class="no-drag label cursor-pointer">
+            <span class="label-text mr-4">Always On Top</span>
+            <input
+              type="checkbox"
+              class="toggle"
+              bind:checked={isAlwaysOnTop}
+            />
+          </label>
+        </div>
+      </div>
+    </div>
+  </header>
+  <div class="flex-auto overflow-y-scroll">
+    <table class="table-compact relative table w-full">
+      <thead class="sticky top-0">
+        <tr>
+          <th class="rounded-none">Type</th>
+          <th>Data</th>
+          <th class="rounded-none">Time</th>
+        </tr>
+      </thead>
+      <tbody class="min-h-full">
+        {#each [...log].reverse().filter((e) => {
+          /** check if `showMeseta` is on, then filter accordingly */
+          if (!showMeseta) {
+            if (e.item_num?.includes('N-Meseta')) return false;
+          }
+          /** only show pickups and sells */
+          return ['[Pickup]', '[DiscradExchange]'].includes(e.action_type);
+        }) as action}
+          <tr>
+            <td>{action.item_num?.includes('N-Meseta') ? `💰` : `📥`}</td>
+            <td>
+              {action.item_name
+                ? action.item_name +
+                  ' - x' +
+                  /\d+(?=\))(?!\()/.exec(action.item_num ?? '')
+                : 'N-Meseta - x' +
+                  /\d+(?=\))(?!\()/.exec(action.item_num ?? '')}</td
+            >
+            <td>{new Date(action.log_time).toLocaleString()}</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</main>

app/src/renderer/app/main.ts

@@ -0,0 +1,8 @@
+import '../index.css';
+import App from './App.svelte';
+
+const app = new App({
+  target: document.getElementById('app'),
+});
+
+export default app;

app/src/renderer/app/env.d.ts → app/src/renderer/env.d.ts

@@ -1 +1,3 @@
+/// <reference types="svelte" />
 /// <reference types="vite/client" />
+