fix color padding

common.ts

@@ -69,7 +69,7 @@ export function drawCircle(ctx: CanvasRenderingContext2D, center: Point, radius:
     ctx.save();
     ctx.beginPath();
     ctx.arc(center.x, center.y, radius, 0, 2*Math.PI);
-    ctx.strokeStyle = `#${color.toString(16)}`
+    ctx.strokeStyle = rgbToString(color);
     ctx.lineWidth = 5;
     ctx.stroke();
     ctx.restore();
@@ -79,7 +79,7 @@ export function fillCircle(ctx: CanvasRenderingContext2D, center: Point, radius:
   ctx.save();
   ctx.beginPath();
   ctx.arc(center.x, center.y, radius, 0, 2 * Math.PI);
-  ctx.fillStyle = `#${color.toString(16)}`;
+  ctx.fillStyle = rgbToString(color);
   ctx.fill();
   ctx.restore();
 }
@@ -88,13 +88,17 @@ export function drawLine(ctx: CanvasRenderingContext2D, start: Point, end: Point
     ctx.save();
     ctx.beginPath();
     if (dashed) ctx.setLineDash([5, 5]);
-    ctx.strokeStyle = `#${color.toString(16)}`
+    ctx.strokeStyle = rgbToString(color);
     ctx.moveTo(start.x, start.y);
     ctx.lineTo(end.x, end.y);
     ctx.stroke();
     ctx.restore();
 }
 
+function rgbToString(color: number) {
+  return `#${color.toString(16).padStart(6, '0')}`;
+}
+
 export function drawDashedLine(ctx: CanvasRenderingContext2D, start: Point, end: Point, color: number) {
     drawLine(ctx, start, end, color, true);
 }

snake.ts

@@ -8,7 +8,6 @@ const SEGMENT_SPACING = SNAKE_RADIUS + SNAKE_PADDING;
 const HEAD_COLOR = 0xf43f5e;
 const TAIL_COLOR = 0xf4c3cc;
 const APPLE_COLOR = 0x58f474;
-const APPLE_COLOR_2 = 0x0a6f4b4;
 
 const DIRECTIONS = {
   up: new Vec2d(0, -1),
@@ -17,8 +16,11 @@ const DIRECTIONS = {
   right: new Vec2d(1, 0)
 }
 
+function initSnake(pos: Vec2d, len: number) {
+  return Array.from({ length: len }, (_, i) => pos.add(DIRECTIONS.left.scale(i * SEGMENT_SPACING)));
+}
 // state
-let snake = [new Vec2d(100, 100), new Vec2d(100 - SEGMENT_SPACING, 100), new Vec2d(100 - SEGMENT_SPACING * 2, 100)];
+let snake = initSnake(new Vec2d(200, 200), 10);
 let apple: Vec2d | undefined = undefined;
 let velocity: Vec2d = new Vec2d(0, 0); // unit vector
 let speed = 200; // px/s
@@ -48,6 +50,17 @@ function drawSnake(ctx: CanvasRenderingContext2D, bounds: Vec2d) {
   fillCircle(ctx, tail, SNAKE_RADIUS / 2, TAIL_COLOR)
 }
 
+function drawSnakeTube(ctx: CanvasRenderingContext2D, pts: Vec2d[]) {
+  ctx.beginPath();
+  ctx.moveTo(pts[0].x, pts[0].y);
+  for (let i = 1; i < pts.length; i++) ctx.lineTo(pts[i].x, pts[i].y);
+  ctx.strokeStyle = "#f43f5e";
+  ctx.lineWidth = SNAKE_RADIUS * 2;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  ctx.stroke();
+}
+
 function update(ctx: CanvasRenderingContext2D, time: number) {
   if (lastTime == null) lastTime = time;
   const dt = (time - lastTime) / 1000; // s
@@ -65,7 +78,8 @@ function update(ctx: CanvasRenderingContext2D, time: number) {
       const dist = delta.length();
       if (dist > SEGMENT_SPACING) {
         const unit = delta.scale(1 / dist); // unit vector in direction of delta
-        snake[i] = leader.sub(unit.scale(SEGMENT_SPACING));
+        const target = leader.sub(unit.scale(SEGMENT_SPACING));
+        snake[i] = target;
       }
     }
 

tsconfig.json

@@ -11,7 +11,7 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "target": "es2017",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */