Attempt at using variants for swing.

www/index.html

@@ -58,58 +58,29 @@
         position: sticky;
         top: 0;
       }
-
+      th.Ones.Lark {
-      th.Ones {
+        background-color: hsl(0, 80%, 50%);
-        background-color: hsl(27, 99%, 59%);
       }
-      td.Ones {
+      td.Ones.Lark {
-        background-color: hsl(27, 99%, 85%);
+        background-color: hsl(0, 90%, 70%);
       }
-      th.Twos {
+      th.Ones.Robin {
-        background-color: hsl(249, 42%, 57%);
+        background-color: hsl(39, 80%, 50%);
       }
-      td.Twos {
+      td.Ones.Robin {
-        background-color: hsl(249, 52%, 85%);
+        background-color: hsl(39, 90%, 70%);
       }
-
+      th.Twos.Lark {
-      th.Lark::before {
+        background-color: hsl(240, 70%, 65%);
-        content: "◠";
-        text-decoration: line-through;
-        padding-right: 1ex;
       }
-      th.Robin::before {
+      td.Twos.Lark {
-        content: "△";
+        background-color: hsl(240, 90%, 80%);
-        padding-right: 1ex;
       }
-
+      th.Twos.Robin {
-      td.Lark.Ones {
+        background-color: hsl(180, 80%, 50%);
-        background:
-          radial-gradient(circle at bottom left, hsl(27, 99%, 75%) 15%, transparent 16%),
-          radial-gradient(circle at bottom right, hsl(27, 99%, 75%) 15%, transparent 16%),
-          hsl(27, 99%, 85%);
-        background-size: 6em 3em;
       }
-      td.Lark.Twos {
+      td.Twos.Robin {
-        background:
+        background-color: hsl(180, 90%, 70%);
-          radial-gradient(circle at bottom left, hsl(249, 42%, 75%) 15%, transparent 16%),
-          radial-gradient(circle at bottom right,hsl(249, 42%, 75%) 15%, transparent 16%),
-          hsl(249, 52%, 85%);
-        background-size: 6em 3em;
-      }
-
-      td.Robin.Ones {
-        background:
-          linear-gradient(45deg,hsl(27, 99%, 75%) 10%, transparent 10%),
-          linear-gradient(135deg, transparent 90%,hsl(27, 99%, 75%) 90%),
-          hsl(27, 99%, 85%);
-        background-size: 6em 3em;
-      }
-      td.Robin.Twos {
-        background:
-          linear-gradient(45deg,hsl(249, 42%, 75%) 10%, transparent 10%),
-          linear-gradient(135deg, transparent 90%,hsl(249, 42%, 75%) 90%),
-          hsl(249, 52%, 85%);
-        background-size: 6em 3em;
       }
 
       .move {

www/js/renderer.ts

@@ -1,48 +1,40 @@
 import { Animation } from "./animation.js";
 import { CoupleRole, DanceRole, DancerIdentity, ExtendedDancerIdentity } from "./danceCommon.js";
+import * as exampleAnimations from "./exampleAnimations.js";
 import { DancerSetPosition, DancersSetPositions, dancerHeight, dancerHeightOffset, leftShoulder, lineDistance, rightShoulder, setDistance, degreesToRadians } from "./rendererConstants.js";
 
 
 
-function baseColorForDancer(identity: ExtendedDancerIdentity): {hue: number, sat: number, lum: number} {
+function hueForDancer(identity: DancerIdentity): number {
-  if (identity.setIdentity.coupleRole == CoupleRole.Ones) {
+  if (identity.coupleRole == CoupleRole.Ones) {
-    if (identity.relativeSet < 0)
+    if (identity.danceRole == DanceRole.Lark) {
-      return { hue: 340, sat: 67, lum: 56 };
+      return 0; //red
-    if (identity.relativeSet === 0)
-      return { hue: 27, sat: 99, lum: 59 };
-    if (identity.relativeSet > 0)
-      return { hue: 54, sat: 97, lum: 49 };
     } else {
-    if (identity.relativeSet < 0)
+      return 39; //orange
-      return { hue: 183, sat: 88, lum: 23 };
+    }
-    if (identity.relativeSet === 0)
+  } else {
-      return { hue: 249, sat: 42, lum: 37 };
+    if (identity.danceRole == DanceRole.Lark) {
-    if (identity.relativeSet > 0)
+      return 240; //blue
-      return { hue: 13, sat: 33, lum: 29 };
+    } else {
+      return 180; //teal
+    }
   }
-
-  throw new Error("Unreachable: relativeSet must be one of <, ===, or > 0.");
 }
 
 function colorForDancer(identity: ExtendedDancerIdentity) : string {
-  const baseColor = baseColorForDancer(identity);
+  const hue = hueForDancer(identity.setIdentity);
-
+  const sat = 100 - Math.abs(identity.relativeLine * 40);
-  const hue = baseColor.hue;
+  const unclampedLum = 50 + identity.relativeSet * 20;
-  const sat = baseColor.sat - Math.abs(identity.relativeLine * 40);
-  const unclampedLum = baseColor.lum + (Math.abs(identity.relativeSet) <= 1 ? 0 : identity.relativeSet * 20);
   const lum = unclampedLum < 10 ? 10 : unclampedLum > 90 ? 90 : unclampedLum;
   return `hsl(${hue}, ${sat}%, ${lum}%)`;
 }
 
 function colorForDancerLabel(identity: ExtendedDancerIdentity) : string {
-  const dancerColor = baseColorForDancer(identity);
+  const hue = (hueForDancer(identity.setIdentity) + 180) % 360;
-  const hue = (dancerColor.hue + 180) % 360;
   const sat = 100;
-  const unclampedLum = ((dancerColor.hue >= 215 && dancerColor.hue <= 285) || (identity.relativeSet < 0)
+  const lum = hueForDancer(identity.setIdentity) === 240 && identity.relativeSet < 2 || identity.relativeSet < 0
-                      || dancerColor.lum < 40) && identity.relativeSet < 2
               ? 100
               : 20 - identity.relativeSet * 40;
-  const lum = unclampedLum < 0 ? 0 : unclampedLum > 100 ? 100 : unclampedLum;
   return `hsl(${hue}, ${sat}%, ${lum}%)`;
 }
 
@@ -62,21 +54,13 @@ export class Renderer {
   drawDancerBody(identity: ExtendedDancerIdentity, drawText: boolean) {
     this.ctx.beginPath();
     this.ctx.moveTo(leftShoulder.x, leftShoulder.y);
-    if (identity.setIdentity.danceRole === DanceRole.Robin) {
-      // Draw triangle for robin.
     this.ctx.lineTo(rightShoulder.x, rightShoulder.y);
     this.ctx.lineTo(0, dancerHeight-dancerHeightOffset);
-    } else {
-      // Draw dome for lark.
-      this.ctx.arcTo(0, dancerHeight*2-dancerHeightOffset, rightShoulder.x, rightShoulder.y, dancerHeight * 1.5);
-      this.ctx.lineTo(rightShoulder.x, rightShoulder.y);
-    }
     this.ctx.fill();
 
     // Draw dot at origin to identify "center" point of dancer.
     const backupFillStyle = this.ctx.fillStyle;
     this.ctx.fillStyle = 'black';
-
     const pointSize = 0.05;
     this.ctx.fillRect(-pointSize/2, -pointSize/2, pointSize, pointSize);
 
@@ -215,9 +199,9 @@ export class Renderer {
     for (var relativeLine = -extraLines; relativeLine <= extraLines; relativeLine++) {
       for (var relativeSet = -extraSets; relativeSet <= extraSets; relativeSet++) {
         this.ctx.save();
-        const hue = 0;
+        const hue = (relativeLine + relativeSet) % 2 === 0 ? 60 : 170;
-        const sat = 0;
+        const sat = 100 - Math.abs(relativeLine * 40);
-        const lum = Math.min(98, 90 + Math.abs(Math.abs(relativeSet) + Math.abs(relativeLine)) * 5);
+        const lum = Math.min(98, 90 + Math.abs(relativeSet) * 5);
         this.ctx.fillStyle = `hsl(${hue}, ${sat}%, ${lum}%)`;
         this.ctx.translate(relativeLine * lineDistance,
                            relativeSet * setDistance);