move assets to visualizer package

web/pw-frontend/vite.config.js

@@ -22,5 +22,9 @@ export default defineConfig({
       "/api/": "http://localhost:5000",
       "/ws": "ws://localhost:5000/ws",
     },
+    fs: {
+      // Allow serving files from one level up to the project root
+      allow: ['..']
+    }
   },
 })

web/pw-visualizer/package.json

@@ -7,7 +7,7 @@
     "build": "vite build",
     "build-wasm": "wasm-pack build ../planetwars-rs --target web"
   },
-  "files": ["src"],
+  "files": ["src", "assets"],
   "main": "src/index.ts",
   "devDependencies": {
     "@originjs/vite-plugin-commonjs": "^1.0.1",

web/pw-visualizer/src/asset_files.ts

@@ -0,0 +1,19 @@
+declare module "*.svg" {
+    const url: string;
+    export default url;
+}
+
+declare module "*.png" {
+    const url: string;
+    export default url;
+}
+
+declare module "*.glsl" {
+    const url: string;
+    export default url;
+}
+
+declare module "*.glsl?url" {
+    const url: string;
+    export default url;
+}

web/pw-visualizer/src/assets.ts

@@ -0,0 +1,15 @@
+export {default as shipSvg} from "../assets/res/ship.svg";
+
+export {default as earthSvg} from "../assets/res/earth.svg";
+export {default as marsSvg} from "../assets/res/mars.svg";
+export {default as venusSvg} from "../assets/res/venus.svg";
+
+export {default as fontPng} from "../assets/res/font.png";
+
+export {default as imageFragmentShader} from "../assets/shaders/frag/image.glsl?url";
+export {default as simpleFragmentShader} from "../assets/shaders/frag/simple.glsl?url";
+export {default as vorFragmentShader} from "../assets/shaders/frag/vor.glsl?url";
+
+export {default as imageVertexShader} from "../assets/shaders/vert/image.glsl?url";
+export {default as simpleVertexShader} from "../assets/shaders/vert/simple.glsl?url";
+export {default as vorVertexShader} from "../assets/shaders/vert/vor.glsl?url";

web/pw-visualizer/src/index.ts

@@ -27,6 +27,7 @@ import { VertexBuffer, IndexBuffer } from "./webgl/buffer";
 import { VertexBufferLayout, VertexArray } from "./webgl/vertexBufferLayout";
 import { defaultLabelFactory, LabelFactory, Align, Label } from "./webgl/text";
 import { VoronoiBuilder } from "./voronoi/voronoi";
+import * as assets from "./assets";
 
 // svg-mesh requires global to exist
 (window as any).global = window;
@@ -585,34 +586,38 @@ var meshes: Mesh[];
 var shaders: Dictionary<ShaderFactory>;
 
 export async function set_instance(source: string): Promise<GameInstance> {
+  // TODO: embed shader programs
   if (!meshes || !shaders) {
-    const mesh_promises = ["ship.svg", "earth.svg", "mars.svg", "venus.svg"]
-      .map((name) => "/static/res/assets/" + name)
-      .map(url_to_mesh);
+    const mesh_promises = [
+      assets.shipSvg,
+      assets.earthSvg,
+      assets.marsSvg,
+      assets.venusSvg,
+    ].map(url_to_mesh);
 
     const shader_promies = [
       (async () =>
         <[string, ShaderFactory]>[
           "normal",
           await ShaderFactory.create_factory(
-            "/static/shaders/frag/simple.glsl",
-            "/static/shaders/vert/simple.glsl"
+            assets.simpleFragmentShader,
+            assets.simpleVertexShader,
           ),
         ])(),
       (async () =>
         <[string, ShaderFactory]>[
           "vor",
           await ShaderFactory.create_factory(
-            "/static/shaders/frag/vor.glsl",
-            "/static/shaders/vert/vor.glsl"
+            assets.vorFragmentShader,
+            assets.vorVertexShader,
           ),
         ])(),
       (async () =>
         <[string, ShaderFactory]>[
           "image",
           await ShaderFactory.create_factory(
-            "/static/shaders/frag/image.glsl",
-            "/static/shaders/vert/simple.glsl"
+            assets.imageFragmentShader,
+            assets.simpleVertexShader,
           ),
         ])(),
     ];

web/pw-visualizer/src/webgl/index.ts

@@ -4,15 +4,22 @@ import { VertexBuffer, IndexBuffer } from './buffer';
 import { VertexArray, VertexBufferLayout } from './vertexBufferLayout';
 import { Renderer } from './renderer';
 import { Texture } from './texture';
+import * as assets from "../assets";
 
-const URL = window.location.origin+window.location.pathname;
-const LOCATION = URL.substring(0, URL.lastIndexOf("/") + 1);
+// const URL = window.location.origin+window.location.pathname;
+// const LOCATION = URL.substring(0, URL.lastIndexOf("/") + 1);
 
 async function create_texture_from_svg(gl: WebGLRenderingContext, name: string, path: string, width: number, height: number): Promise<Texture> {
 
     const [mesh, factory] = await Promise.all([
         url_to_mesh(path),
-        ShaderFactory.create_factory(LOCATION + "static/shaders/frag/static_color.glsl", LOCATION + "static/shaders/vert/svg.glsl")
+        ShaderFactory.create_factory(
+            // assets.simpleFragmentShader,
+            // assets.simpleVertexShader,
+            // TODO: previously: this was the old code, which was not working.
+            // what is the correct shader here?
+            "static/shaders/frag/static_color.glsl", "static/shaders/vert/svg.glsl"
+        )
     ]);
 
     const program = factory.create_shader(gl);
@@ -54,7 +61,7 @@ async function main() {
     console.log(Math.max(...mesh.positions), Math.min(...mesh.positions));
     const renderer = new Renderer();
 
-    const factory = await ShaderFactory.create_factory(LOCATION + "static/shaders/frag/static_color.glsl", LOCATION + "static/shaders/vert/simple.glsl");
+    const factory = await ShaderFactory.create_factory(assets.simpleFragmentShader, assets.simpleVertexShader);
     const program = factory.create_shader(gl);
 
     var positionBuffer = new VertexBuffer(gl, mesh.positions);

web/pw-visualizer/src/webgl/text.ts

@@ -4,6 +4,7 @@ import { Texture } from "./texture";
 import { DefaultRenderable } from "./renderer";
 import { IndexBuffer, VertexBuffer } from "./buffer";
 import { VertexBufferLayout, VertexArray } from "./vertexBufferLayout";
+import { fontPng } from "../assets";
 
 
 export enum Align {
@@ -188,5 +189,5 @@ export function defaultLabelFactory(gl: WebGLRenderingContext, shader: Shader):
         },
     };
 
-    return new LabelFactory(gl, '/static/res/assets/font.png', fontInfo, shader);
+    return new LabelFactory(gl, fontPng, fontInfo, shader);
 }