Add configurable game flow, finish punching, and audio cues

miniprogram/engine/renderer/courseLabelRenderer.ts

@@ -5,6 +5,9 @@ const EARTH_CIRCUMFERENCE_METERS = 40075016.686
 const LABEL_FONT_SIZE_RATIO = 1.08
 const LABEL_OFFSET_X_RATIO = 1.18
 const LABEL_OFFSET_Y_RATIO = -0.68
+const DEFAULT_LABEL_COLOR = 'rgba(204, 0, 107, 0.98)'
+const ACTIVE_LABEL_COLOR = 'rgba(255, 219, 54, 0.98)'
+const COMPLETED_LABEL_COLOR = 'rgba(126, 131, 138, 0.94)'
 
 export class CourseLabelRenderer {
   courseLayer: CourseLayer
@@ -49,7 +52,7 @@ export class CourseLabelRenderer {
     const ctx = this.ctx
     this.clearCanvas(ctx)
 
-    if (!course || !course.controls.length) {
+    if (!course || !course.controls.length || !scene.revealFullCourse) {
       return
     }
 
@@ -60,13 +63,13 @@ export class CourseLabelRenderer {
 
     this.applyPreviewTransform(ctx, scene)
     ctx.save()
-    ctx.fillStyle = 'rgba(204, 0, 107, 0.98)'
     ctx.textAlign = 'left'
     ctx.textBaseline = 'middle'
     ctx.font = `700 ${fontSizePx}px sans-serif`
 
     for (const control of course.controls) {
       ctx.save()
+      ctx.fillStyle = this.getLabelColor(scene, control.sequence)
       ctx.translate(control.point.x, control.point.y)
       ctx.rotate(scene.rotationRad)
       ctx.fillText(String(control.sequence), offsetX, offsetY)
@@ -76,6 +79,18 @@ export class CourseLabelRenderer {
     ctx.restore()
   }
 
+  getLabelColor(scene: MapScene, sequence: number): string {
+    if (scene.activeControlSequences.includes(sequence)) {
+      return ACTIVE_LABEL_COLOR
+    }
+
+    if (scene.completedControlSequences.includes(sequence)) {
+      return COMPLETED_LABEL_COLOR
+    }
+
+    return DEFAULT_LABEL_COLOR
+  }
+
   clearCanvas(ctx: any): void {
     ctx.setTransform(1, 0, 0, 1, 0, 0)
     ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
@@ -118,3 +133,4 @@ export class CourseLabelRenderer {
     return latRad * 180 / Math.PI
   }
 }
+