wtf

.rsw/rsw.crates

@@ -0,0 +1 @@
+common :~> common/pkg

frontend/package.json

@@ -47,6 +47,7 @@
     "sass": "^1.69.6",
     "typescript": "^5.2.2",
     "vite": "^5.0.8",
+    "vite-plugin-rsw": "^2.0.11",
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0"
   }

frontend/pnpm-lock.yaml

@@ -103,6 +103,9 @@ devDependencies:
   vite:
     specifier: ^5.0.8
     version: 5.0.10(sass@1.69.6)
+  vite-plugin-rsw:
+    specifier: ^2.0.11
+    version: 2.0.11(vite@5.0.10)
   vite-plugin-top-level-await:
     specifier: ^1.4.1
     version: 1.4.1(vite@5.0.10)
@@ -3286,6 +3289,14 @@ packages:
     resolution: {integrity: sha512-LdabyT4OffkyXFCe9UT+uMkxNBs5rcTVuZClvxQr08D5TUgo1OFKkoT65qYRCsiKBl/usHjpXvP4hHMzzDRj3A==}
     dev: false
 
+  /vite-plugin-rsw@2.0.11(vite@5.0.10):
+    resolution: {integrity: sha512-OqbGAtdDfK88gDoxA9wVdGowCmlzLSXEyRvD8CgTu9IP5O7tx8Tg2CtIzKOyOWZtHHZPhtdYiN+5Il6rTZCkzw==}
+    peerDependencies:
+      vite: '>2.8.0-0'
+    dependencies:
+      vite: 5.0.10(sass@1.69.6)
+    dev: true
+
   /vite-plugin-top-level-await@1.4.1(vite@5.0.10):
     resolution: {integrity: sha512-hogbZ6yT7+AqBaV6lK9JRNvJDn4/IJvHLu6ET06arNfo0t2IsyCaon7el9Xa8OumH+ESuq//SDf8xscZFE0rWw==}
     peerDependencies:

frontend/src/App.tsx

@@ -4,6 +4,7 @@ import "./App.css";
 import routes from "./routes";
 import { Provider as ReduxProvider } from "react-redux";
 import { store } from "./store";
+import { HotkeysProvider } from "@blueprintjs/core";
 
 const router = createBrowserRouter(routes);
 const queryClient = new QueryClient();
@@ -12,7 +13,9 @@ function App() {
   return (
     <ReduxProvider store={store}>
       <QueryClientProvider client={queryClient}>
-        <RouterProvider router={router} />
+        <HotkeysProvider>
+          <RouterProvider router={router} />
+        </HotkeysProvider>
       </QueryClientProvider>
     </ReduxProvider>
   );

frontend/src/main.tsx

@@ -6,9 +6,13 @@ import "normalize.css";
 import "@blueprintjs/core/lib/css/blueprint.css";
 import "@blueprintjs/icons/lib/css/blueprint-icons.css";
 
+import init from "common";
+
 // biome-ignore lint/style/noNonNullAssertion: <explanation>
 const el = document.getElementById("root")!;
 
+init();
+
 ReactDOM.createRoot(el).render(
   <React.StrictMode>
     <App />

frontend/src/routes/MapView.tsx

@@ -1,16 +1,23 @@
-import { useRef, useState } from "react";
+import { useCallback, useState, type MouseEvent } from "react";
 import { useQuery } from "react-query";
 import { Canvas, type MeshProps, useLoader } from "@react-three/fiber";
-import styles from "./MapView.module.scss";
+import styles from "./MapView.module.css";
 import { useParams } from "react-router-dom";
 import { MapControls, Text } from "@react-three/drei";
 import { ColorRepresentation, DoubleSide, TextureLoader } from "three";
 import { Bloom, EffectComposer } from "@react-three/postprocessing";
 import { useAppDispatch } from "../store";
-import { addWindow } from "../store/someShit";
+import { setWindow } from "../store/someShit";
 import { DragDropContext } from "react-beautiful-dnd";
+import {
+  Menu,
+  MenuDivider,
+  MenuItem,
+  showContextMenu,
+} from "@blueprintjs/core";
+import StatusWindow from "./StatusWindow";
 
-export default function MapView({}) {
+export default function MapView() {
   const { universeId } = useParams();
   const { isLoading, data: mapData } = useQuery(
     `universe ${universeId} points`,
@@ -74,6 +81,8 @@ export default function MapView({}) {
             );
           })}
         </Canvas>
+
+        <StatusWindow />
       </DragDropContext>
     </main>
   );
@@ -100,6 +109,36 @@ function StarSystem({
     color = parseInt(owner.color, 16);
   }
 
+  const menu = (
+    <Menu>
+      <MenuItem
+        icon="cross-circle"
+        intent="danger"
+        text="Click me to close"
+        // onClick={handleClose}
+      />
+      <MenuItem icon="search-around" text="Search around..." />
+      <MenuItem icon="search" text="Object viewer" />
+      <MenuItem icon="graph-remove" text="Remove" />
+      <MenuItem icon="group-objects" text="Group" />
+      <MenuDivider />
+      <MenuItem disabled={true} text="Clicked on node" />
+    </Menu>
+  );
+
+  const handleContextMenu = useCallback((event: MouseEvent<HTMLElement>) => {
+    event.preventDefault();
+    showContextMenu({
+      content: menu,
+      // onClose: handleClose,
+      targetOffset: {
+        left: event.clientX,
+        top: event.clientY,
+      },
+    });
+    // setIsOpen(true);
+  }, []);
+
   return (
     <>
       <mesh {...props} position={[x, 0, y]} scale={active ? 1.5 : 1}>
@@ -115,7 +154,12 @@ function StarSystem({
         {...props}
         position={[x, 0, y]}
         onClick={(event) => {
-          dispatch(addWindow(["planet", { type: "planet" }]));
+          dispatch(setWindow(["planet", { type: "planet" }]));
+          event.stopPropagation();
+        }}
+        onContextMenu={(event) => {
+          console.log("Hellosu", event);
+          handleContextMenu(event.nativeEvent);
           event.stopPropagation();
         }}
         onPointerOver={(event) => {

frontend/src/routes/StatusWindow.tsx

@@ -0,0 +1,60 @@
+import { HotkeyConfig, useHotkeys } from "@blueprintjs/core";
+import { useCallback, useMemo } from "react";
+
+export default function StatusWindow() {
+  const handleEscape = useCallback(() => {
+    console.log("helloge");
+  }, []);
+
+  const hotkeys: HotkeyConfig[] = useMemo(
+    () => [
+      {
+        combo: "1",
+        global: true,
+        label: "Escape",
+        onkeydown: handleEscape,
+      },
+    ],
+    [handleEscape],
+  );
+
+  const { handleKeyDown, handleKeyUp } = useHotkeys(hotkeys);
+
+  return (
+    <div
+      className="bp5-dialog"
+      onKeyDown={handleKeyDown}
+      onKeyUp={handleKeyUp}
+      style={{
+        position: "absolute",
+        bottom: "10px",
+        left: "10px",
+        margin: "0",
+      }}
+    >
+      <div className="bp5-dialog-header">
+        <span className="bp5-icon-large bp5-icon-inbox" />
+        <h5 className="bp5-heading">Dialog header</h5>
+        <button
+          type="button"
+          aria-label="Close"
+          className="bp5-dialog-close-button bp5-button bp5-minimal bp5-icon-cross"
+        />
+      </div>
+      <div className="bp5-dialog-body">
+        This dialog hasn't been wired up with any open or close interactions.
+        It's just an example of markup and styles.
+      </div>
+      <div className="bp5-dialog-footer">
+        <div className="bp5-dialog-footer-actions">
+          <button type="button" className="bp5-button">
+            Secondary button
+          </button>
+          <button type="submit" className="bp5-button bp5-intent-primary">
+            Primary button
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/store/someShit.ts

@@ -1,20 +1,18 @@
 import { createSlice } from "@reduxjs/toolkit";
 import type { PayloadAction } from "@reduxjs/toolkit";
 
-type WindowDef = {
+type WindowDef = { type: string } & object;
-  type: "planet";
-};
 
 // Define a type for the slice state
 interface SomeShitState {
   activeEmpireId: number | null;
-  windows: { [_: string]: WindowDef };
+  activeWindow: WindowDef | null;
 }
 
 // Define the initial state using that type
 const initialState: SomeShitState = {
   activeEmpireId: null,
-  windows: {},
+  activeWindow: null,
 };
 
 export const someShitSlice = createSlice({
@@ -25,18 +23,17 @@ export const someShitSlice = createSlice({
       state.activeEmpireId = action.payload;
     },
 
-    addWindow: (state, action: PayloadAction<[string, WindowDef]>) => {
+    setWindow: (state, action: PayloadAction<WindowDef>) => {
-      const [name, def] = action.payload;
+      state.activeWindow = action.payload;
-      state.windows = { ...state.windows, [name]: def };
     },
 
-    closeWindow: (state, action: PayloadAction<string>) => {
+    closeWindow: (state) => {
-      delete state.windows[action.payload];
+      state.activeWindow = null;
     },
   },
 });
 
-export const { changeActiveEmpire, addWindow, closeWindow } =
+export const { changeActiveEmpire, setWindow, closeWindow } =
   someShitSlice.actions;
 
 export default someShitSlice.reducer;

frontend/vite.config.ts

@@ -1,12 +1,19 @@
 import { defineConfig } from "vite";
 import reactPlugin from "@vitejs/plugin-react-swc";
-import wasmPlugin from "vite-plugin-wasm";
+// import wasmPlugin from "vite-plugin-wasm";
-import topLevelAwait from "vite-plugin-top-level-await";
+// import topLevelAwait from "vite-plugin-top-level-await";
+import { ViteRsw } from "vite-plugin-rsw";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [reactPlugin(), wasmPlugin(), topLevelAwait()],
+  plugins: [
+    // wasmPlugin(["./common"], []),
+    // topLevelAwait(),
+    // ViteRsw(),
+    reactPlugin(),
+  ],
   server: {
+    fs: { allow: [".."] },
     proxy: {
       "/api": {
         target: "http://localhost:1440",

package.json

@@ -0,0 +1,5 @@
+{
+	"dependencies": {
+		"common": "link:/Users/michael/Projects/openstellaris/common/pkg"
+	}
+}

pnpm-lock.yaml

@@ -0,0 +1,10 @@
+lockfileVersion: '6.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+dependencies:
+  common:
+    specifier: link:/Users/michael/Projects/openstellaris/common/pkg
+    version: link:common/pkg

rsw.toml

@@ -0,0 +1,5 @@
+cli = "pnpm"
+
+[[crates]]
+name = "common"
+link = true