cosmesics

paolini · Nov 16, 2024 · 4ea07db · 4ea07db
1 parent 211ce4e
commit 4ea07db
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 22 deletions.
diff --git a/js/README.md b/js/README.md
@@ -1,9 +1,11 @@
-Avvia con:
+Run locally:
+```sh
+    npm ci        # once
+    npx vite
 ```
-npm ci        # once
-npx vite
-    ```
+
 Build
-```
-npx vite build --base=/my/public/path/
+```sh
+    npx vite build --base=/my/public/path/
+    npx serve dist
 ```
diff --git a/js/commands.ts b/js/commands.ts
@@ -45,7 +45,7 @@ export default class Commands {
                 'helicoid'),
             '4': new Command(world => 
                 world.load(new Marco()), 
-                'marco'),
+                'Costa\'s'),
             '5': new Command(world => 
                 world.load(new Moebius()), 
                 'moebius'),
@@ -54,7 +54,7 @@ export default class Commands {
                 'moebius oriented'),
             '8': new Command(world =>
                 this.loadNextOctaMode(world), 
-                'next octa mode'),
+                'cycle octahedrons'),
             'M': new Command(world => 
                 world.load(new Manu()), 
                 'manu'),

diff --git a/js/index.html b/js/index.html
@@ -8,10 +8,10 @@
 		</style>
 	</head>
 	<body>
-		<h1>Surf</h1>
+		<h1 id="my-title">Surf</h1>
 		<canvas id="my-canvas" width="640" height="480"></canvas>
 		<div id="my-commands">???</div>
-		<div id="my-info">???</div>
+		<pre id="my-info">???</pre>
 		<script type="module" src="/main.ts"></script>
 	</body>
 </html>
diff --git a/js/main.ts b/js/main.ts
@@ -2,15 +2,16 @@ import World from './world'
 import Commands from './commands'
 
 
-const canvas = document.getElementById('my-canvas') as HTMLCanvasElement
-const info_div = document.getElementById('my-info') || undefined
-const commands_div = document.getElementById('my-commands')
+const $canvas = document.getElementById('my-canvas') as HTMLCanvasElement
+const $info = document.getElementById('my-info') || undefined
+const $commands = document.getElementById('my-commands')
+const $title = document.getElementById('my-title') || undefined
 
-const world = new World({canvas, info_div})
+const world = new World({$canvas, $info, $title})
 const commands = new Commands()
 
-if (commands_div) {
-	commands_div.innerHTML = commands.htmlHelpString()
+if ($commands) {
+	$commands.innerHTML = commands.htmlHelpString()
 }
 
 commands.exec('0', world) // load pringle

diff --git a/js/world.ts b/js/world.ts
@@ -18,7 +18,8 @@ class SurfMesh extends THREE.Mesh {
 } 
 
 export default class World {
-    info_div: HTMLElement|null 
+    $info: HTMLElement|null 
+    $title: HTMLElement|null
 	AUTO_RUN: boolean
 	surfMesh: SurfMesh|undefined
 	scene: THREE.Scene
@@ -27,9 +28,10 @@ export default class World {
 	material: THREE.Material
 	controls: THREE.Controls
 
-	constructor(options: {canvas: HTMLCanvasElement, info_div?: HTMLElement}) {
-        const canvas = options.canvas
-        this.info_div = options.info_div || null
+	constructor(options: {$canvas: HTMLCanvasElement, $title?: HTMLElement, $info?: HTMLElement}) {
+        this.$info = options.$info || null
+        this.$title = options.$title || null
+        const canvas = options.$canvas
 		this.AUTO_RUN = true
 
 		this.scene = new THREE.Scene()
@@ -143,9 +145,13 @@ export default class World {
 			}
 		}
 
-		if (this.info_div) {
-			this.info_div.textContent = JSON.stringify(info)
+		if (this.$info) {
+			this.$info.textContent = JSON.stringify(info,null,2)
 		}
+
+        if (this.$title) {
+            this.$title.textContent = `Surf [${surf?.name || 'No Surface'}]`
+        }
 	}
 }