Add player onboarding and tactical viewer updates

apps/viewer/src/viewerSceneFactory.ts

@@ -571,19 +571,55 @@ export function createTacticalIcon(documentRef: Document, color: string, size: n
 export function createShipTacticalIcon(documentRef: Document, color: string, size: number): SceneNode {
   const canvas = documentRef.createElement("canvas");
   canvas.width = 128;
-  canvas.height = 96;
+  canvas.height = 192;
   const context = canvas.getContext("2d");
   if (!context) {
     throw new Error("Unable to create ship tactical icon");
   }
 
   context.clearRect(0, 0, canvas.width, canvas.height);
+  context.lineCap = "round";
+  context.lineJoin = "round";
   context.strokeStyle = color;
-  context.fillStyle = "rgba(7, 16, 30, 0.7)";
-  context.lineWidth = 5;
+  context.fillStyle = "rgba(7, 16, 30, 0.8)";
+  context.lineWidth = 6;
+
+  context.globalAlpha = 0.92;
+  context.beginPath();
+  context.moveTo(64, 182);
+  context.lineTo(64, 108);
+  context.stroke();
+
+  context.globalAlpha = 1;
+  context.beginPath();
+  context.arc(64, 70, 26, 0, Math.PI * 2);
+  context.fill();
+  context.stroke();
 
   context.beginPath();
-  context.arc(34, 48, 18, 0, Math.PI * 2);
+  context.moveTo(64, 34);
+  context.lineTo(64, 49);
+  context.stroke();
+
+  context.beginPath();
+  context.moveTo(64, 91);
+  context.lineTo(64, 106);
+  context.stroke();
+
+  context.beginPath();
+  context.moveTo(28, 70);
+  context.lineTo(43, 70);
+  context.stroke();
+
+  context.beginPath();
+  context.moveTo(85, 70);
+  context.lineTo(100, 70);
+  context.stroke();
+
+  context.beginPath();
+  context.moveTo(44, 116);
+  context.lineTo(64, 136);
+  context.lineTo(84, 116);
   context.stroke();
 
   const texture = new THREE.CanvasTexture(canvas);
@@ -593,9 +629,10 @@ export function createShipTacticalIcon(documentRef: Document, color: string, siz
     depthWrite: false,
     depthTest: false,
     color: "#ffffff",
+    fog: false,
   }));
-  sprite.center.set(0.28, 0.5);
-  sprite.scale.set(size * 1.7, size * 1.275, 1);
+  sprite.center.set(0.5, 0.08);
+  sprite.scale.set(size * 1.2, size * 1.8, 1);
   sprite.visible = false;
   return createSceneNode(sprite);
 }