Framework State 11

Title of State:

Changing Resource Shape and Color

Goal of Change:

Only change drawResources() so each resource has the requested shape + color:

• Oil → black triangle
• Wood → green circle
• Ore → dark grey/brown circle
• Stone → grey square

Code to Remove

778 - 
    // marker
    ctx.globalAlpha = 0.95;

    // type styling (simple, readable)
    if(n.Type === "ORE")   ctx.fillStyle = "rgba(220,220,255,.85)";
    if(n.Type === "STONE") ctx.fillStyle = "rgba(220,220,220,.85)";
    if(n.Type === "OIL")   ctx.fillStyle = "rgba(40,40,40,.90)";
    if(n.Type === "WOOD")  ctx.fillStyle = "rgba(120,220,140,.85)";

    ctx.beginPath();
    ctx.arc(sx, sy, n.Radius, 0, Math.PI*2);
    ctx.fill();

    // label
    ctx.globalAlpha = 0.95;
    ctx.fillStyle = "rgba(0,0,0,.75)";
    ctx.font = "12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
    const letter = (n.Type === "STONE") ? "S" : n.Type[0];
    ctx.fillText(letter, sx - 4, sy + 4);

Code to Add

778 - 
    // marker
    ctx.globalAlpha = 0.95;

    // colors
    if(n.Type === "WOOD")  ctx.fillStyle = "rgba(70,200,90,.90)";     // green
    if(n.Type === "STONE") ctx.fillStyle = "rgba(150,150,150,.92)";   // gray
    if(n.Type === "OIL")   ctx.fillStyle = "rgba(10,10,10,.95)";      // black
    if(n.Type === "ORE")   ctx.fillStyle = "rgba(95,80,65,.92)";      // dark grey/brown

    const r = (n.Radius || 16);

    // shapes
    if(n.Type === "STONE"){
      // square centered on (sx,sy)
      ctx.fillRect(sx - r, sy - r, r*2, r*2);
    } else if(n.Type === "OIL"){
      // triangle (point up)
      ctx.beginPath();
      ctx.moveTo(sx,     sy - r);
      ctx.lineTo(sx + r, sy + r);
      ctx.lineTo(sx - r, sy + r);
      ctx.closePath();
      ctx.fill();
    } else {
      // circle (WOOD + ORE)
      ctx.beginPath();
      ctx.arc(sx, sy, r, 0, Math.PI*2);
      ctx.fill();
    }

    // label (keep, so its readable during dev)
    ctx.globalAlpha = 0.95;
    ctx.fillStyle = "rgba(255,255,255,.85)";
    ctx.font = "12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
    const letter = (n.Type === "STONE") ? "S" : n.Type[0];
    ctx.fillText(letter, sx - 4, sy + 4);

---

Result