Fixed ship guage

client/src/components/Ship.vue

@@ -73,6 +73,7 @@ function onTouchEnd() {
 }
 
 onMounted(() => {
+	console.log(props.boat);
 	document.addEventListener('mousemove', onMouseMove)
 	document.addEventListener('mouseup',   onMouseUp)
 	document.addEventListener('touchmove', onTouchMove, { passive: false })
@@ -89,8 +90,7 @@ onUnmounted(() => {
 
 const compass = computed(() => {
 	const hdg     = heading.value
-	const course  = props.boat.course ?? hdg
+	const course  = props.boat.cog ?? hdg
-	const bearing = props.boat.bearing ?? 0
 
 	// ── Compass tape ──────────────────────────────────────────────────────────
 	const tapeTicks: string[] = []
@@ -114,7 +114,7 @@ const compass = computed(() => {
 	}
 
 	// ── Rose centre & radii ───────────────────────────────────────────────────
-	const CX = 100, CY = 158  // moved down from 145
+	const CX = 100, CY = 140  // moved down from 145
 	const R  = 68              // grown from 55
 
 	const rudder = Math.max(-30, Math.min(30, ((course - hdg + 540) % 360) - 180))
@@ -125,7 +125,7 @@ const compass = computed(() => {
 	const cNeedleX  = CX + 52 * Math.sin(courseRad)
 	const cNeedleY  = CY - 52 * Math.cos(courseRad)
 
-	const bearRel  = ((bearing - hdg + 540) % 360) - 180
+	const bearRel  = ((course - hdg + 540) % 360) - 180
 	const bearRad  = bearRel * Math.PI / 180
 	const bNeedleX = CX + 52 * Math.sin(bearRad)
 	const bNeedleY = CY - 52 * Math.cos(bearRad)
@@ -151,49 +151,38 @@ const compass = computed(() => {
 		return `<text x="${x}" y="${y}" text-anchor="middle" fill="#0ff" font-size="10" font-weight="bold" opacity="0.8">${lbl}</text>`
 	}).join('')
 
-	// Legend & rudder bar shifted to bottom of taller SVG
-	const LEG_Y = 190
-
 	return `
-        <svg width="200" height="230" viewBox="0 0 200 230">
+        <svg width="200" height="210" viewBox="0 0 200 210">
-            <!-- Tape -->
             <rect x="10" y="18" width="180" height="40" fill="rgba(0,20,40,0.95)" rx="3"/>
             <line x1="10" y1="18" x2="190" y2="18" stroke="#0ff" stroke-width="1"/>
             <line x1="10" y1="58" x2="190" y2="58" stroke="#0ff" stroke-width="1"/>
             ${tapeTicks.join('')}
             <polygon points="100,20 96,12 104,12" fill="#ff0"/>
 
-            <!-- Heading readout -->
-            <rect x="72" y="64" width="56" height="20" fill="rgba(0,0,0,0.9)" stroke="#0ff" stroke-width="1" rx="2"/>
-            <text x="100" y="78" text-anchor="middle" fill="#0ff" font-size="13" font-weight="bold">${String(Math.round(hdg)).padStart(3, '0')}°</text>
-
-            <!-- Rose -->
             <circle cx="${CX}" cy="${CY}" r="${R}" fill="rgba(0,20,40,0.6)" stroke="#0ff" stroke-width="1.5"/>
             <circle cx="${CX}" cy="${CY}" r="${R - 20}" fill="none" stroke="rgba(0,255,255,0.15)" stroke-width="1"/>
+
+            <g transform="rotate(${-hdg}, ${CX}, ${CY})">
                 ${ringTicks}
                 ${cardinals}
+            </g>
 
-            <!-- Course needle -->
-            <line x1="${CX}" y1="${CY}" x2="${cNeedleX}" y2="${cNeedleY}" stroke="#0f0" stroke-width="2.5"/>
-            <circle cx="${cNeedleX}" cy="${cNeedleY}" r="3" fill="#0f0"/>
-
-            <!-- Bearing needle -->
             <line x1="${CX}" y1="${CY}" x2="${bNeedleX}" y2="${bNeedleY}" stroke="#ff0" stroke-width="1.5" stroke-dasharray="4,3"/>
             <circle cx="${bNeedleX}" cy="${bNeedleY}" r="2.5" fill="#ff0"/>
 
-            <!-- Ship symbol -->
+            <line x1="${CX}" y1="${CY}" x2="${cNeedleX}" y2="${cNeedleY}" stroke="#0f0" stroke-width="2.5"/>
+            <circle cx="${cNeedleX}" cy="${cNeedleY}" r="3" fill="#0f0"/>
+
             <polygon points="${CX},${CY - 9} ${CX - 4},${CY + 5} ${CX},${CY + 2} ${CX + 4},${CY + 5}" fill="#fff" stroke="#0ff" stroke-width="1"/>
 
-            <!-- Rudder bar -->
+            <rect x="80" y="${CY + 23}" width="40" height="6" fill="rgba(0,50,70,0.9)" rx="3"/>
-            <rect x="60" y="${LEG_Y - 4}" width="80" height="6" fill="rgba(0,50,70,0.9)" rx="3"/>
+            <rect x="${rudX - 4}" y="${CY + 22}" width="8" height="8" fill="#ff0" rx="1"/>
-            <line x1="${CX}" y1="${LEG_Y - 4}" x2="${CX}" y2="${LEG_Y + 2}" stroke="#0ff" stroke-width="1" opacity="0.5"/>
-            <rect x="${rudX - 4}" y="${LEG_Y - 3}" width="8" height="8" fill="#ff0" rx="1"/>
 
-            <!-- Legend -->
+            <line x1="10" y1="${CY + 55}" x2="20" y2="${CY + 55}" stroke="#0f0" stroke-width="2"/>
-            <line x1="12" y1="${LEG_Y + 20}"  x2="24" y2="${LEG_Y + 20}"  stroke="#0f0" stroke-width="2"/>
+            <text x="25" y="${CY + 57}" fill="#888" font-size="9">COG</text>
-            <text x="27"  y="${LEG_Y + 22}"  fill="#888" font-size="9">COG</text>
+
-            <line x1="12" y1="${LEG_Y + 30}" x2="24" y2="${LEG_Y + 30}" stroke="#ff0" stroke-width="1.5" stroke-dasharray="4,3"/>
+            <line x1="10" y1="${CY + 65}" x2="20" y2="${CY + 65}" stroke="#ff0" stroke-width="1.5" stroke-dasharray="4,3"/>
-            <text x="27"  y="${LEG_Y + 33}" fill="#888" font-size="9">BRG</text>
+            <text x="25" y="${CY + 67}" fill="#888" font-size="9">BRG</text>
         </svg>
     `
 })