From 932e3da23607ccb3e1262bb7fdd7e198aa551112 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jens=20M=C3=B6nig?= <jens@moenig.org>
Date: Thu, 5 Dec 2024 18:05:25 +0100
Subject: [PATCH] prepared v10.3.0 release

---
 DEVLOG.md      |  97 ------
 HISTORY.md     | 105 ++++++
 snap.html      |   5 +-
 src/gui.js     |   4 +-
 src/santa.js   | 878 ++++++++++++++++++++++++++++++++++---------------
 src/threads.js |  10 +-
 sw.js          |   2 +-
 7 files changed, 730 insertions(+), 371 deletions(-)

diff --git a/DEVLOG.md b/DEVLOG.md
index 27d30686b..4b2d4e448 100755
--- a/DEVLOG.md
+++ b/DEVLOG.md
@@ -1,101 +1,4 @@
 # Snap! (BYOB) Dev History
 
 ## in development:
-* **New Features:**
-    * Custom Hat Blocks, expressed as predicate defining a condition that fires the event
-    * Custom Hat Blocks can choose to be "events" reacting to a state change (default) or "conditions" observing state (indicated by an infinity symbol) 
-    * new "Events" library featuring custom hat blocks reacting to various state changes
-    * new data type: "hat"
-    * new "obj_version(obj)" extension for observing compound structures (lists, actors, scripts)
-    * new "infinity" / chain link symbol
-    * new "relabel" option for generic "When" hat block lets you switch between "event" (new default) and old "condition" semantics, indicated by the infinity symbol
-    * Surprise XMas Skin
-* **Notable Changes:**
-    * directly clicking on a generic or custom hat block runs it no matter what
-    * "condition" hat blocks (that always fire when their condition is true) are indicated by an infinity symbol
-    * the generic "When" hat block in the palette now has "event" semantics and only fires on state change, blocks in existing projects keep their "condition" semantics
-    * optimized evaluation speed of generic (and custom) "when" hat block predicates
-    * hat blocks can be ringified (but not - yet - dropped into rings)
-    * changed positioning of local method icon (location pin) to be vertically centered
-* **Notable Fixes:**
-    * fixed generic and custom hat block scheduling for turbo mode
-    * fixed "expand _ to _ slots" block in the metapgroamming libary to be able to fully collapse
-    * fixed contrast for local method icon (location pin) in bright ui theme
-    * keep musical notes from going of out midi-value bounds
-* **Translation Updates:**
-    * German
 
-### 2024-12-04
-* objects: double-clock event hats to enable observing script-induced state transitions
-* locale: fixed #3420
-* blocks, objects: keep musical notes from going of out midi-value bounds
-* updated dev version
-* threads: tweaked custom / event hat block evaluation for visible stepping
-* byob: renamed "rule" hat block semantics option to "condition"
-* German translation update for "condition"
-
-### 2024-12-03
-* blocks, gui: minor refactorings
-* updated dev version
-
-### 2024-12-02
-* added partial metaprgramming support for hat blocks
-* updated dev version
-* byob: tweaked LISP-ification of custom block definition scripts
-
-### 2024-11-29
-* threads, objects: optimized generic and custom hat block execution
-* updated dev version
-
-### 2024-11-28
-* threads: fixed upvars for custom hat blocks
-* updated dev version
-
-### 2024-11-26
-* byob: fixed a layout glitch in the input slot dialog
-* byob: renamed the block type button in the make-a-block dialog to "Event Hat"
-* boyb: fully integrated custom hat block type into the block dialog, so users can switch from an to any other block type 
-* German translation update
-* updated dev version
-
-### 2024-11-25
-* gui: fixed contrast for local method icon (location pin) in bright ui theme
-* blocks: tweaked vertical positioning of method icon in local custom hat blocks
-* byob: introduced "semantics" property to distinguish between "event" and "rule" custom hat blocks
-* store: added support for "semantics" property of custom block definitions
-* blocks: changed positioning of local method icon (location pin) to be vertically centered
-* threads: new "event" semantics (default) for custom hat blocks
-* blocks, byob: refactored HatBlock >> isLoaded
-* threads: new generic "receiveEventCondition" primitive for generic hat blocks
-* blocks, objects, threads: replaced generic "When" hat in the palette with event semantics version
-* objects: added "relabel" options to generic "When" hat block to switch between "event" and "rule" semantics
-* updated "Events" library with new event semantics
-* duplicated help screen for generic "When" hat
-* updated dev version
-
-### 2024-11-24
-* symbols: new "infinity" / chain link symbol
-* blocks, byob: mark "rule" hat blocks with an infinity symbol to distinguish them from "event" hats 
-* updated dev version
-
-### 2024-11-22
-* fixed "expand _ to _ slots" block in the metapgroamming libary to be able to fully collapse
-
-### 2024-11-21
-* byob: fixed custom hat block prototype attach points (there should be none)
-* threads: directly clicking on a generic or custom hat block runs it no matter what
-* objects: fixed generic and custom hat block scheduling for turbo mode
-* blocks, byob, threads: basic metaprogramming support for custom hat blocks
-* extensions: new "obj_version(obj)" extension for observing compound structures (lists, actors, scripts)
-* updated dev version
-
-### 2024-11-20
-* libraries: new "Events" library featuring custom hat blocks reacting to various state changes
-* updated dev version
-
-### 2024-11-19
-* byob, blocks, objects, threads, store: Custom Event Hat Blocks, expressed as predicate defining a condition that fires the event
-* updated dev version
-
-### 2024-11-18
-* new dev version
diff --git a/HISTORY.md b/HISTORY.md
index e46c96a67..ddffc0c18 100755
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -2,6 +2,111 @@
 
 ## in development:
 
+## 10.3.0:
+* **New Features:**
+    1. Custom Hat Blocks
+        * Custom Hat Blocks, expressed as predicate defining a condition that fires the event
+        * Custom Hat Blocks can choose to be "events" reacting to a state change (default) or "conditions" observing state (indicated by an infinity symbol) 
+        * new "Events" library featuring custom hat blocks reacting to various state changes
+        * hat blocks are now first class and have their own new data type: "hat"
+    2. Other
+        * new "obj_version(obj)" extension for observing compound structures (lists, actors, scripts)
+        * new "infinity" / chain link symbol
+        * new "relabel" option for generic "When" hat block lets you switch between "event" (new default) and old "condition" semantics, indicated by the infinity symbol
+        * Surprise XMas Skin "Bake a block"
+* **Notable Changes:**
+    * directly clicking on a generic or custom hat block runs it no matter what
+    * "condition" hat blocks (that always fire when their condition is true) are indicated by an infinity symbol
+    * the generic "When" hat block in the palette now has "event" semantics and only fires on state change, blocks in existing projects keep their "condition" semantics
+    * optimized evaluation speed of generic (and custom) "when" hat block predicates
+    * hat blocks can be ringified (but not - yet - dropped into rings)
+    * changed positioning of local method icon (location pin) to be vertically centered
+* **Notable Fixes:**
+    * fixed generic and custom hat block scheduling for turbo mode
+    * fixed "expand _ to _ slots" block in the metapgroamming libary to be able to fully collapse
+    * fixed contrast for local method icon (location pin) in bright ui theme
+    * keep musical notes from going of out midi-value bounds
+* **Translation Updates:**
+    * German
+
+### 2024-12-05
+* prepared minor release
+
+### 2024-12-04
+* objects: double-clock event hats to enable observing script-induced state transitions
+* locale: fixed #3420
+* blocks, objects: keep musical notes from going of out midi-value bounds
+* updated dev version
+* threads: tweaked custom / event hat block evaluation for visible stepping
+* byob: renamed "rule" hat block semantics option to "condition"
+* German translation update for "condition"
+
+### 2024-12-03
+* blocks, gui: minor refactorings
+* updated dev version
+
+### 2024-12-02
+* added partial metaprgramming support for hat blocks
+* updated dev version
+* byob: tweaked LISP-ification of custom block definition scripts
+
+### 2024-11-29
+* threads, objects: optimized generic and custom hat block execution
+* updated dev version
+
+### 2024-11-28
+* threads: fixed upvars for custom hat blocks
+* updated dev version
+
+### 2024-11-26
+* byob: fixed a layout glitch in the input slot dialog
+* byob: renamed the block type button in the make-a-block dialog to "Event Hat"
+* boyb: fully integrated custom hat block type into the block dialog, so users can switch from an to any other block type 
+* German translation update
+* updated dev version
+
+### 2024-11-25
+* gui: fixed contrast for local method icon (location pin) in bright ui theme
+* blocks: tweaked vertical positioning of method icon in local custom hat blocks
+* byob: introduced "semantics" property to distinguish between "event" and "rule" custom hat blocks
+* store: added support for "semantics" property of custom block definitions
+* blocks: changed positioning of local method icon (location pin) to be vertically centered
+* threads: new "event" semantics (default) for custom hat blocks
+* blocks, byob: refactored HatBlock >> isLoaded
+* threads: new generic "receiveEventCondition" primitive for generic hat blocks
+* blocks, objects, threads: replaced generic "When" hat in the palette with event semantics version
+* objects: added "relabel" options to generic "When" hat block to switch between "event" and "rule" semantics
+* updated "Events" library with new event semantics
+* duplicated help screen for generic "When" hat
+* updated dev version
+
+### 2024-11-24
+* symbols: new "infinity" / chain link symbol
+* blocks, byob: mark "rule" hat blocks with an infinity symbol to distinguish them from "event" hats 
+* updated dev version
+
+### 2024-11-22
+* fixed "expand _ to _ slots" block in the metapgroamming libary to be able to fully collapse
+
+### 2024-11-21
+* byob: fixed custom hat block prototype attach points (there should be none)
+* threads: directly clicking on a generic or custom hat block runs it no matter what
+* objects: fixed generic and custom hat block scheduling for turbo mode
+* blocks, byob, threads: basic metaprogramming support for custom hat blocks
+* extensions: new "obj_version(obj)" extension for observing compound structures (lists, actors, scripts)
+* updated dev version
+
+### 2024-11-20
+* libraries: new "Events" library featuring custom hat blocks reacting to various state changes
+* updated dev version
+
+### 2024-11-19
+* byob, blocks, objects, threads, store: Custom Event Hat Blocks, expressed as predicate defining a condition that fires the event
+* updated dev version
+
+### 2024-11-18
+* new dev version
+
 ## 10.2.5:
 * **Notable Fixes:**
     * fixed "reshape" to let a zero dimension consistenly refer to the available leaf count, e.g. reshape (['foo', 'bar'], 0) => ['foo', 'bar']
diff --git a/snap.html b/snap.html
index 19142afa9..19e72e594 100755
--- a/snap.html
+++ b/snap.html
@@ -17,10 +17,10 @@
         <script src="src/symbols.js?version=2024-11-24"></script>
         <script src="src/widgets.js?version=2024-07-24"></script>
         <script src="src/blocks.js?version=2024-12-04"></script>
-        <script src="src/threads.js?version=2024-12-04"></script>
+        <script src="src/threads.js?version=2024-12-05"></script>
         <script src="src/objects.js?version=2024-12-04"></script>
         <script src="src/scenes.js?version=2024-05-28"></script>
-        <script src="src/gui.js?version=2024-12-04"></script>
+        <script src="src/gui.js?version=2024-12-05"></script>
         <script src="src/paint.js?version=2023-05-24"></script>
         <script src="src/lists.js?version=2024-11-14"></script>
         <script src="src/byob.js?version=2024-12-04"></script>
@@ -37,6 +37,7 @@
         <script src="src/embroider.js?version=2024-05-09"></script>
         <script src="src/sha512.js?version=2019-06-27"></script>
         <script src="src/FileSaver.min.js?version=2019-06-27"></script>
+        <script src="src/santa.js?version=2024-12-05"></script>
         <script>
             var world;
             window.onload = function () {
diff --git a/src/gui.js b/src/gui.js
index 4284cad15..93ab36f29 100644
--- a/src/gui.js
+++ b/src/gui.js
@@ -87,11 +87,11 @@ HatBlockMorph*/
 
 // Global stuff ////////////////////////////////////////////////////////
 
-modules.gui = '2024-December-04';
+modules.gui = '2024-December-05';
 
 // Declarations
 
-var SnapVersion = '10.3-dev-241204';
+var SnapVersion = '10.3.0';
 
 var IDE_Morph;
 var ProjectDialogMorph;
diff --git a/src/santa.js b/src/santa.js
index f9a87c1f8..ebb958b90 100644
--- a/src/santa.js
+++ b/src/santa.js
@@ -27,18 +27,18 @@
 
     prerequisites:
     --------------
-    needs blocks.js, gui.js and morphic.js
+    needs blocks.js, gui.js, locale.js and morphic.js
 
 */
 
 /*global modules, HatBlockMorph, MorphicPreferences, Color, radians, degrees,
-WHITE, IDE_Morph*/
+WHITE, IDE_Morph, BLACK, PrototypeHatBlockMorph, SnapTranslator*/
 
 /*jshint esversion: 6*/
 
 // Global stuff ////////////////////////////////////////////////////////
 
-modules.santa = '2024-December-04';
+modules.santa = '2024-December-05';
 
 // HatBlockMorph Xmas Skin (2024)
 
@@ -48,6 +48,9 @@ HatBlockMorph.prototype.xmasSkin =
 HatBlockMorph.prototype.render = function (ctx) {
     if (this.xmasSkin) {
         this.renderHatLess(ctx);
+        if (this instanceof PrototypeHatBlockMorph) {
+            return this.renderHouseHat(ctx);
+        }
         switch (this.selector) {
         case 'receiveKey':
             return this.renderTrumpetHat(ctx);
@@ -60,6 +63,10 @@ HatBlockMorph.prototype.render = function (ctx) {
             return this.renderGiftHat(ctx);
         case 'receiveOnClone':
             return this.renderPretzelHat(ctx);
+        case 'receiveUserEdit':
+            return this.renderLetterHat(ctx);
+        case 'receiveSlotEvent':
+            return this.renderTrainHat(ctx);
         default:
             return this.renderSantaHat(ctx);
         }
@@ -68,6 +75,8 @@ HatBlockMorph.prototype.render = function (ctx) {
 };
 
 HatBlockMorph.prototype.renderHatLess = function (ctx) {
+    var c = this.corner;
+
     this.cachedClr = this.color.toString();
     this.cachedClrBright = this.bright();
     this.cachedClrDark = this.dark();
@@ -96,7 +105,7 @@ HatBlockMorph.prototype.renderHatLess = function (ctx) {
 
         // add 3D-Effect:
         this.drawTopDentEdge(ctx, 0, 0);
-        this.drawBottomDentEdge(ctx, 0, this.height() - this.corner);
+        this.drawBottomDentEdge(ctx, 0, this.height() - c);
         this.drawLeftEdge(ctx);
         this.drawRightEdge(ctx);
         this.drawBottomRightEdge(ctx);
@@ -104,18 +113,19 @@ HatBlockMorph.prototype.renderHatLess = function (ctx) {
 };
 
 HatBlockMorph.prototype.noHatOutlinePath = function (ctx, inset) {
-    var indent = this.corner * 2 + this.inset,
-        bottom = this.height() - this.corner,
-        bottomCorner = this.height() - this.corner * 2,
-        radius = Math.max(this.corner - inset, 0),
+    var c = this.corner,
+        indent = c * 2 + this.inset,
+        bottom = this.height() - c,
+        bottomCorner = this.height() - c * 2,
+        radius = Math.max(c - inset, 0),
         h = this.hatHeight;
 
     ctx.moveTo(inset, h + inset);
 
     // top right:
     ctx.arc(
-        this.width() - this.corner,
-        h + this.corner,
+        this.width() - c,
+        h + c,
         radius,
         radians(-90),
         radians(-0),
@@ -124,7 +134,7 @@ HatBlockMorph.prototype.noHatOutlinePath = function (ctx, inset) {
 
     // bottom right:
     ctx.arc(
-        this.width() - this.corner,
+        this.width() - c,
         bottomCorner,
         radius,
         radians(0),
@@ -133,16 +143,16 @@ HatBlockMorph.prototype.noHatOutlinePath = function (ctx, inset) {
     );
 
     if (!this.isStop()) {
-        ctx.lineTo(this.width() - this.corner, bottom - inset);
-        ctx.lineTo(this.corner * 3 + this.inset + this.dent, bottom - inset);
-        ctx.lineTo(indent + this.dent, bottom + this.corner - inset);
-        ctx.lineTo(indent, bottom + this.corner - inset);
-        ctx.lineTo(this.corner + this.inset, bottom - inset);
+        ctx.lineTo(this.width() - c, bottom - inset);
+        ctx.lineTo(c * 3 + this.inset + this.dent, bottom - inset);
+        ctx.lineTo(indent + this.dent, bottom + c - inset);
+        ctx.lineTo(indent, bottom + c - inset);
+        ctx.lineTo(c + this.inset, bottom - inset);
     }
 
     // bottom left:
     ctx.arc(
-        this.corner,
+        c,
         bottomCorner,
         radius,
         radians(90),
@@ -152,31 +162,66 @@ HatBlockMorph.prototype.noHatOutlinePath = function (ctx, inset) {
 };
 
 HatBlockMorph.prototype.renderSantaHat = function (ctx) {
+    var w = this.hatWidth,
+        h = this.hatHeight,
+        c = this.corner,
+        r = ((4 * h * h) + (w * w)) / (8 * h),
+        a = degrees(4 * Math.atan(2 * h / w)),
+        sa = a / 2,
+
+        red = new Color(200, 0, 0).toString(),
+        brightRed = new Color(255, 0, 0).toString(),
+        darkRed = new Color(100, 0, 0).toString(),
+        gray = new Color(200, 200, 200).toString(),
+        darkGray = new Color(150, 150, 150).toString(),
+        white = WHITE.toString(),
+
+        hat = () => {
+            // top arc:
+            ctx.moveTo(0, h + c);
+            ctx.arc(
+                w / 2,
+                r,
+                r,
+                radians(-sa - 90),
+                radians(-75),
+                false
+            );
+            ctx.arc(
+                w * 0.9,
+                h + c * 6,
+                w / 3,
+                radians(-70),
+                radians(-140),
+                true
+            );
+        };
+
     // draw Santa Hat
-    ctx.fillStyle = new Color(200, 0, 0).toString();
+    ctx.fillStyle = red;
     ctx.beginPath();
-    this.santaHatPath(ctx, 0);
+    hat();
     ctx.closePath();
     ctx.fill();
 
     // top outline
-    this.cachedClr = new Color(255, 0, 0).toString();
-    this.cachedClrBright = new Color(200, 200, 200).toString();
+    this.cachedClr = brightRed;
+    this.cachedClrBright = gray;
     // top arc:
     ctx.strokeStyle = this.cachedClr;
-    ctx.lineWidth = this.corner / 4;
+    ctx.lineWidth = c / 4;
     ctx.beginPath();
-    this.santaHatTopPath(ctx);
+    hat();
     ctx.stroke();
 
     // hat bottom outline
-    ctx.strokeStyle = new Color(100, 0, 0).toString();
-    ctx.lineWidth = this.corner / 4;
+    ctx.strokeStyle = darkRed;
+    ctx.lineWidth = c / 4;
     ctx.beginPath();
     ctx.arc(
-        this.hatWidth * 0.9,
-            this.hatHeight + this.corner * 6,
-        this.hatWidth / 3,
+        w * 0.9,
+        h + c * 6,
+        w / 3,
         radians(-70),
         radians(-140),
         true
@@ -184,34 +229,34 @@ HatBlockMorph.prototype.renderSantaHat = function (ctx) {
     ctx.stroke();
 
     // brim
-    ctx.strokeStyle = new Color(150, 150, 150).toString();
-    ctx.lineWidth = this.corner * 2;
+    ctx.strokeStyle = darkGray;
+    ctx.lineWidth = c * 2;
     ctx.lineCap = 'round';
     ctx.beginPath();
-    ctx.moveTo(this.corner * 0.75, this.hatHeight + this.corner * 0.5);
+    ctx.moveTo(c * 0.75, h + c * 0.5);
     ctx.lineTo(
-        this.hatWidth * 0.6 + this.corner,
-        this.hatHeight + this.corner * 0.5
+        w * 0.6 + c,
+        h + c * 0.5
     );
     ctx.stroke();
 
-    ctx.strokeStyle = WHITE.toString();
-    ctx.lineWidth = this.corner * 1.3;
+    ctx.strokeStyle = white;
+    ctx.lineWidth = c * 1.3;
     ctx.beginPath();
-    ctx.moveTo(this.corner, this.hatHeight + this.corner * 0.4);
+    ctx.moveTo(c, h + c * 0.4);
     ctx.lineTo(
-        this.hatWidth * 0.6 + this.corner,
-        this.hatHeight + this.corner * 0.4
+        w * 0.6 + c,
+        h + c * 0.4
     );
     ctx.stroke();
 
     // bobble
-    ctx.fillStyle = new Color(150, 150, 150).toString();
+    ctx.fillStyle = darkGray;
     ctx.beginPath();
     ctx.arc(
-        this.hatWidth,
-        this.hatHeight * 0.6,
-        this.corner * 2,
+        w,
+        h * 0.6,
+        c * 2,
         radians(0),
         radians(360),
         false
@@ -219,12 +264,12 @@ HatBlockMorph.prototype.renderSantaHat = function (ctx) {
     ctx.closePath();
     ctx.fill();
 
-    ctx.fillStyle = WHITE.toString();
+    ctx.fillStyle = white;
     ctx.beginPath();
     ctx.arc(
-        this.hatWidth,
-        this.hatHeight * 0.5,
-        this.corner * 1.2,
+        w,
+        h * 0.5,
+        c * 1.2,
         radians(0),
         radians(360),
         false
@@ -248,66 +293,77 @@ HatBlockMorph.prototype.renderSantaHat = function (ctx) {
 };
 
 HatBlockMorph.prototype.renderAdventHat = function (ctx) {
-    var i;
+    var c = this.corner,
+        w = this.hatWidth,
+        h = this.hatHeight,
+        i,
+
+        red = new Color(200, 0, 0).toString(),
+        darkRed = new Color(100, 0, 0).toString(),
+        green = new Color(0, 200, 0).toString(),
+        darkGreen = new Color(0, 100, 0).toString(),
+        yellow = new Color(255, 255, 100).toString(),
+        brightYellow = new Color(255, 255, 200).toString(),
+        white = WHITE.toString();
 
     // wreath
-    ctx.strokeStyle = new Color(0, 100, 0).toString();
-    ctx.lineWidth = this.corner * 2;
+    ctx.strokeStyle = darkGreen;
+    ctx.lineWidth = c * 2;
     ctx.lineCap = 'round';
     ctx.beginPath();
-    ctx.moveTo(this.corner * 0.75, this.hatHeight + this.corner * 0.5);
+    ctx.moveTo(c * 0.75, h + c * 0.5);
     ctx.lineTo(
-        this.hatWidth * 0.6 + this.corner,
-        this.hatHeight + this.corner * 0.5
+        w * 0.6 + c,
+        h + c * 0.5
     );
     ctx.stroke();
 
-    ctx.strokeStyle = new Color(0, 200, 0).toString();
-    ctx.lineWidth = this.corner * 1.3;
+    ctx.strokeStyle = green;
+    ctx.lineWidth = c * 1.3;
     ctx.beginPath();
-    ctx.moveTo(this.corner, this.hatHeight + this.corner * 0.4);
+    ctx.moveTo(c, h + c * 0.4);
     ctx.lineTo(
-        this.hatWidth * 0.6 + this.corner,
-        this.hatHeight + this.corner * 0.4
+        w * 0.6 + c,
+        h + c * 0.4
     );
     ctx.stroke();
 
     // candles
 
     for (i = 1; i < 5; i +=1 ) {
-        ctx.strokeStyle = new Color(100, 0, 0).toString();
-        ctx.lineWidth = this.corner * 2;
+        ctx.strokeStyle = darkRed;
+        ctx.lineWidth = c * 2;
         ctx.lineCap = 'butt';
         ctx.beginPath();
-        ctx.moveTo(this.corner * 3 * i, this.hatHeight);
-        ctx.lineTo(this.corner * 3 * i, this.corner);
+        ctx.moveTo(c * 3 * i, h);
+        ctx.lineTo(c * 3 * i, c);
         ctx.stroke();
 
-        ctx.strokeStyle = new Color(200, 0, 0).toString();
-        ctx.lineWidth = this.corner * 1.3;
+        ctx.strokeStyle = red;
+        ctx.lineWidth = c * 1.3;
         ctx.beginPath();
-        ctx.moveTo(this.corner * 3 * i, this.hatHeight);
-        ctx.lineTo(this.corner * 3 * i, this.corner);
+        ctx.moveTo(c * 3 * i, h);
+        ctx.lineTo(c * 3 * i, c);
         ctx.stroke();
 
         // flames
-        ctx.shadowColor = WHITE.toString();
-        ctx.shadowBlur = this.corner;
+        ctx.shadowColor = white;
+        ctx.shadowBlur = c;
 
-        ctx.strokeStyle = new Color(255, 255, 200).toString();
-        ctx.lineWidth = this.corner * 1.5;
+        ctx.strokeStyle = brightYellow;
+        ctx.lineWidth = c * 1.5;
         ctx.lineCap = 'round';
         ctx.beginPath();
-        ctx.moveTo(this.corner * 3 * i, this.corner);
-        ctx.lineTo(this.corner * 3 * i, this.corner);
+        ctx.moveTo(c * 3 * i, c);
+        ctx.lineTo(c * 3 * i, c);
         ctx.stroke();
 
-        ctx.strokeStyle = new Color(255, 255, 100).toString();
-        ctx.lineWidth = this.corner * 0.5;
+        ctx.strokeStyle = yellow;
+        ctx.lineWidth = c * 0.5;
         ctx.lineCap = 'round';
         ctx.beginPath();
-        ctx.moveTo(this.corner * 3 * i, this.corner);
-        ctx.lineTo(this.corner * 3 * i, 0);
+        ctx.moveTo(c * 3 * i, c);
+        ctx.lineTo(c * 3 * i, 0);
         ctx.stroke();
 
         ctx.shadowBlur = 0;
@@ -328,72 +384,60 @@ HatBlockMorph.prototype.renderAdventHat = function (ctx) {
     }
 };
 
-HatBlockMorph.prototype.santaHatTopPath = function (ctx) {
-    var s = this.hatWidth,
-        h = this.hatHeight,
-        r = ((4 * h * h) + (s * s)) / (8 * h),
-        a = degrees(4 * Math.atan(2 * h / s)),
-        sa = a / 2;
-
-    ctx.moveTo(0, this.hatHeight + this.corner);
-    ctx.arc(
-        s / 2,
-        r + (this.corner / 8),
-        r,
-        radians(-sa - 90),
-        radians(-75),
-        false
-    );
-};
-
 HatBlockMorph.prototype.renderTrumpetHat = function (ctx) {
-    ctx.strokeStyle = new Color(150, 150, 50).toString();
-    ctx.fillStyle = new Color(150, 150, 50).toString();
-    ctx.lineWidth = this.corner * 2;
-    this.drawTrumpet(ctx);
-    ctx.strokeStyle = new Color(255, 255, 100).toString();
-    ctx.fillStyle = new Color(255, 255, 100).toString();
-    ctx.lineWidth = this.corner * 1;
-    this.drawTrumpet(ctx);
-};
-
-HatBlockMorph.prototype.drawTrumpet = function (ctx) {
-    var i;
-
-    // trumpet
-    ctx.lineJoin = 'miter';
-    ctx.beginPath();
-    ctx.roundRect(
-        this.corner * 5,
-        this.corner * 2,
-        this.hatWidth * 0.3,
-        this.hatHeight * 0.7,
-        [0, 0, this.corner * 2, this.corner * 2]
-    );
-    ctx.stroke();
-
-    ctx.lineCap = 'round';
-    ctx.beginPath();
-    ctx.moveTo(this.corner * 2, this.corner * 2);
-    ctx.lineTo(this.corner * 5, this.corner * 2);
-    ctx.stroke();
-
-    ctx.beginPath();
-    ctx.moveTo(this.corner * 5 + this.hatWidth * 0.3, this.corner * 1.5);
-    ctx.lineTo(this.hatWidth * 0.7, this.corner * 2 - ctx.lineWidth);
-    ctx.lineTo(this.hatWidth * 0.7, this.corner * 2 + ctx.lineWidth);
-    ctx.lineTo(this.corner * 5 + this.hatWidth * 0.3, this.corner * 2.5);
-    ctx.closePath();
+    var c = this.corner,
+        w = this.hatWidth,
+        h = this.hatHeight,
+        i,
+
+        yellow = new Color(255, 255, 100).toString(),
+        darkYellow = new Color(150, 150, 50).toString(),
+
+        trumpet = () => {
+            // trumpet
+            ctx.lineJoin = 'miter';
+            ctx.beginPath();
+            ctx.roundRect(
+                c * 5,
+                c * 2,
+                w * 0.3,
+                h * 0.7,
+                [0, 0, c * 2, c * 2]
+            );
+            ctx.stroke();
+
+            ctx.lineCap = 'round';
+            ctx.beginPath();
+            ctx.moveTo(c * 2, c * 2);
+            ctx.lineTo(c * 5, c * 2);
+            ctx.stroke();
+
+            ctx.beginPath();
+            ctx.moveTo(c * 5 + w * 0.3, c * 1.5);
+            ctx.lineTo(w * 0.7, c * 2 - ctx.lineWidth);
+            ctx.lineTo(w * 0.7, c * 2 + ctx.lineWidth);
+            ctx.lineTo(c * 5 + w * 0.3, c * 2.5);
+            ctx.closePath();
+
+            ctx.fill();
+
+            // keys
+            for (i = 1; i < 4; i +=1 ) {
+                ctx.beginPath();
+                ctx.moveTo(c * 4 + c * 2 * i, c * 2);
+                ctx.lineTo(c * 4 + c * 2 * i, c);
+                ctx.stroke();
+            }
+        };
 
-    ctx.fill();
-
-    // keys
-    for (i = 1; i < 4; i +=1 ) {
-        ctx.beginPath();
-        ctx.moveTo(this.corner * 4 + this.corner * 2 * i, this.corner * 2);
-        ctx.lineTo(this.corner * 4 + this.corner * 2 * i, this.corner);
-        ctx.stroke();
-    }
+    ctx.strokeStyle = darkYellow;
+    ctx.fillStyle = darkYellow;
+    ctx.lineWidth = c * 2;
+    trumpet();
+    ctx.strokeStyle = yellow;
+    ctx.fillStyle = yellow;
+    ctx.lineWidth = c * 1;
+    trumpet();
 
     ctx.lineJoin = 'round';
     ctx.lineCap = 'round';
@@ -404,136 +448,154 @@ HatBlockMorph.prototype.drawTrumpet = function (ctx) {
 };
 
 HatBlockMorph.prototype.renderStarHat = function (ctx) {
+    var c = this.corner,
+        w = this.hatWidth,
+        h = this.hatHeight,
+
+        gray = new Color(200, 200, 200).toString(),
+        darkGray = new Color(100, 100, 100).toString(),
+        white = WHITE.toString(),
+
+        star = () => {
+            ctx.beginPath();
+            ctx.moveTo(this.edge, h * 0.8);
+            ctx.lineTo(c * 3, h);
+            ctx.lineTo(c * 2, h + c);
+            ctx.lineTo(c * 5, h);
+            ctx.lineTo(c * 6, h + c);
+            ctx.lineTo(c * 7, h);
+            ctx.lineTo(c * 9, h + c);
+            ctx.lineTo(c * 8, h - c);
+            ctx.lineTo(c * 12, h - c * 2);
+            ctx.lineTo(c * 8, c * 2);
+            ctx.lineTo(c * 8.5, this.edge);
+            ctx.lineTo(c * 6, c * 1.5);
+            ctx.lineTo(c * 5, this.edge);
+            ctx.lineTo(c * 4.5, c * 2);
+            ctx.lineTo(c * 1.5, c * 0.5);
+            ctx.lineTo(c * 3, c * 2.5);
+            ctx.closePath();
+        },
+
+        tail = () => {
+            ctx.beginPath();
+            ctx.arc(
+                w * 0.65,
+                h * 3,
+                w * 0.5,
+                radians(-130),
+                radians(-50),
+                false
+            );
+            ctx.lineTo(w * 0.8, h - c * 1.5);
+            ctx.arc(
+                w * 0.5,
+                h * 3.7,
+                w * 0.5,
+                radians(-50),
+                radians(-110),
+                true
+            );
+            ctx.closePath();
+        };
+
     // tail
     ctx.lineWidth = this.edge;
-    ctx.strokeStyle = new Color(100, 100, 100).toString();
-    ctx.fillStyle = new Color(200, 200, 200).toString();
+    ctx.strokeStyle = darkGray;
+    ctx.fillStyle = gray;
 
-    this.starTailPath(ctx);
+    tail();
     ctx.stroke();
 
-    ctx.fillStyle = WHITE.toString();
-    this.starTailPath(ctx);
+    ctx.fillStyle = white;
+    tail();
     ctx.fill();
 
     // star
-    this.starPath(ctx);
+    star();
     ctx.stroke();
 
-    ctx.fillStyle = WHITE.toString();
-    this.starPath(ctx);
+    ctx.fillStyle = white;
+    star();
     ctx.fill();
 };
 
-HatBlockMorph.prototype.starTailPath = function (ctx) {
-    ctx.beginPath();
-    ctx.arc(
-        this.hatWidth * 0.65,
-        this.hatHeight * 3,
-        this.hatWidth * 0.5,
-        radians(-130),
-        radians(-50),
-        false
-    );
-    ctx.lineTo(this.hatWidth * 0.8, this.hatHeight - this.corner * 1.5);
-    ctx.arc(
-        this.hatWidth * 0.5,
-        this.hatHeight * 3.7,
-        this.hatWidth * 0.5,
-        radians(-50),
-        radians(-110),
-        true
-    );
-    ctx.closePath();
-};
+HatBlockMorph.prototype.renderGiftHat = function (ctx) {
+    var c = this.corner,
+        w = this.hatWidth,
+        h = this.hatHeight,
 
-HatBlockMorph.prototype.starPath = function (ctx) {
-    ctx.beginPath();
-    ctx.moveTo(this.edge, this.hatHeight * 0.8);
-    ctx.lineTo(this.corner * 3, this.hatHeight);
-    ctx.lineTo(this.corner * 2, this.hatHeight + this.corner);
-    ctx.lineTo(this.corner * 5, this.hatHeight);
-    ctx.lineTo(this.corner * 6, this.hatHeight + this.corner);
-    ctx.lineTo(this.corner * 7, this.hatHeight);
-    ctx.lineTo(this.corner * 9, this.hatHeight + this.corner);
-    ctx.lineTo(this.corner * 8, this.hatHeight - this.corner);
-    ctx.lineTo(this.corner * 12, this.hatHeight - this.corner * 2);
-    ctx.lineTo(this.corner * 8, this.corner * 2);
-    ctx.lineTo(this.corner * 8.5, this.edge);
-    ctx.lineTo(this.corner * 6, this.corner * 1.5);
-    ctx.lineTo(this.corner * 5, this.edge);
-    ctx.lineTo(this.corner * 4.5, this.corner * 2);
-    ctx.lineTo(this.corner * 1.5, this.corner * 0.5);
-    ctx.lineTo(this.corner * 3, this.corner * 2.5);
-    ctx.closePath();
-};
+        blue = new Color(0, 0, 255).toString(),
+        brightBlue = new Color(100, 100, 255).toString(),
+        darkBlue = new Color(0, 0, 100).toString(),
+        red = new Color(200, 0, 0).toString(),
+        brightRed = new Color(250, 0, 0).toString();
 
-HatBlockMorph.prototype.renderGiftHat = function (ctx) {
     // parcel
-    ctx.fillStyle = new Color(0, 0, 255).toString();
+    ctx.fillStyle = blue;
     ctx.beginPath();
     ctx.rect(
-        this.corner * 2,
-        this.corner ,
-        this.hatWidth * 0.3,
-        this.hatHeight
+        c * 2,
+        c ,
+        w * 0.3,
+        h
     );
     ctx.fill();
 
-    ctx.fillStyle = new Color(100, 100, 255).toString();
+    ctx.fillStyle = brightBlue;
     ctx.beginPath();
-    ctx.moveTo(this.corner * 2, this.corner);
-    ctx.lineTo(this.corner * 3, 0);
-    ctx.lineTo(this.corner * 3 + this.hatWidth * 0.3, 0);
-    ctx.lineTo(this.corner * 2 + this.hatWidth * 0.3, this.corner);
+    ctx.moveTo(c * 2, c);
+    ctx.lineTo(c * 3, 0);
+    ctx.lineTo(c * 3 + w * 0.3, 0);
+    ctx.lineTo(c * 2 + w * 0.3, c);
     ctx.closePath();
     ctx.fill();
 
-    ctx.fillStyle = new Color(0, 0, 100).toString();
+    ctx.fillStyle = darkBlue;
     ctx.beginPath();
-    ctx.moveTo(this.corner * 3 + this.hatWidth * 0.3, 0);
-    ctx.lineTo(this.corner * 2 + this.hatWidth * 0.3, this.corner);
+    ctx.moveTo(c * 3 + w * 0.3, 0);
+    ctx.lineTo(c * 2 + w * 0.3, c);
     ctx.lineTo(
-        this.corner * 2 + this.hatWidth * 0.3,
-        this.corner + this.hatHeight
+        c * 2 + w * 0.3,
+        c + h
     );
-    ctx.lineTo(this.corner * 3 + this.hatWidth * 0.3, this.hatHeight);
+    ctx.lineTo(c * 3 + w * 0.3, h);
     ctx.closePath();
     ctx.fill();
 
     // ribbon
-    ctx.strokeStyle = new Color(200, 0, 0).toString();
+    ctx.strokeStyle = red;
     ctx.lineCap = 'butt';
-    ctx.lineWidth = this.corner;
+    ctx.lineWidth = c;
 
     // horizontal
     ctx.beginPath();
-    ctx.moveTo(this.corner * 2, this.corner + this.hatHeight * 0.5);
+    ctx.moveTo(c * 2, c + h * 0.5);
     ctx.lineTo(
-        this.corner * 2 + this.hatWidth * 0.3,
-        this.corner + this.hatHeight * 0.5
+        c * 2 + w * 0.3,
+        c + h * 0.5
     );
     ctx.stroke();
 
     // vertical
     ctx.beginPath();
-    ctx.moveTo(this.corner * 2 + this.hatWidth * 0.15, this.corner);
+    ctx.moveTo(c * 2 + w * 0.15, c);
     ctx.lineTo(
-        this.corner * 2 + this.hatWidth * 0.15,
-        this.corner + this.hatHeight
+        c * 2 + w * 0.15,
+        c + h
     );
     ctx.stroke();
 
     // loop
-    ctx.strokeStyle = new Color(250, 0, 0).toString();
-    ctx.lineWidth = this.corner * 0.5;
+    ctx.strokeStyle = brightRed;
+    ctx.lineWidth = c * 0.5;
 
     ctx.beginPath();
     ctx.ellipse(
-        this.corner * 3 + this.hatWidth * 0.15,
-        this.corner * 0.7,
-        this.corner * 0.5,
-        this.corner * 0.8,
+        c * 3 + w * 0.15,
+        c * 0.7,
+        c * 0.5,
+        c * 0.8,
         radians(60),
         0,
         2 * Math.PI
@@ -542,10 +604,10 @@ HatBlockMorph.prototype.renderGiftHat = function (ctx) {
 
     ctx.beginPath();
     ctx.ellipse(
-        this.corner + this.hatWidth * 0.15,
-        this.corner * 0.7,
-        this.corner * 0.5,
-        this.corner,
+        c + w * 0.15,
+        c * 0.7,
+        c * 0.5,
+        c,
         radians(-80),
         0,
         2 * Math.PI
@@ -554,53 +616,325 @@ HatBlockMorph.prototype.renderGiftHat = function (ctx) {
 };
 
 HatBlockMorph.prototype.renderPretzelHat = function (ctx) {
-    ctx.strokeStyle = new Color(100, 40, 0);
-    ctx.lineWidth = this.corner * 1.5;
-    this.pretzelHatPath(ctx);
+    var c = this.corner,
+        w = this.hatWidth,
+        h = this.hatHeight,
+
+        brown = new Color(220, 80, 0).toString(),
+        darkBrown = new Color(100, 40, 0).toString(),
+
+        pretzel = () => {
+            var i, x, y;
+            ctx.beginPath();
+            for (i = 105; i <= 255; i += 1) {
+                x = Math.sin(radians(i * 3)) * w * 0.2;
+                y = Math.cos(radians(i * 4)) * h * 0.48;
+                ctx.lineTo(x + w * 0.3, y + h * 0.65);
+            }
+            ctx.stroke();
+        };
+
+    ctx.strokeStyle = darkBrown;
+    ctx.lineWidth = c * 1.5;
+    pretzel();
 
-    ctx.strokeStyle = new Color(220, 80, 0);
-    ctx.lineWidth = this.corner;
-    this.pretzelHatPath(ctx);
+    ctx.strokeStyle = brown;
+    ctx.lineWidth = c;
+    pretzel();
 };
 
-HatBlockMorph.prototype.pretzelHatPath = function (ctx) {
-    var i, x, y;
+HatBlockMorph.prototype.renderLetterHat = function (ctx) {
+    var c = this.corner,
+
+        gray = new Color(150, 150, 150).toString(),
+        red = new Color(200, 0, 0).toString(),
+        blue = new Color(0, 0, 180).toString(),
+        white = WHITE.toString(),
+    
+        letter = () => {
+            ctx.beginPath();
+            ctx.moveTo(c * 4, c * 2);
+            ctx.lineTo(c * 14, c * 0.25);
+            ctx.lineTo(c * 14.75, c * 4);
+            ctx.lineTo(c * 4.75, c * 6.25);
+            ctx.closePath();
+        },
+
+        stamp = () => {
+            ctx.beginPath();
+            ctx.moveTo(c * 12, c * 1.25);
+            ctx.lineTo(c * 13.5, c * 1);
+            ctx.lineTo(c * 13.75, c * 2);
+            ctx.lineTo(c * 12.25, c * 2.35);
+            ctx.closePath();
+        };
+
+    // letter
+    ctx.lineWidth = c * 0.5;
+    ctx.strokeStyle = gray;
+    letter();
+    ctx.stroke();
+    ctx.fillStyle = white;
+    letter();
+    ctx.fill();
+
+    // stamp
+    ctx.fillStyle = red;
+    stamp();
+    ctx.fill();
+
+    // address
+    ctx.lineCap = 'round';
+    ctx.setLineDash([c* 0.5, c * 0.5, c * 1.2, c * 0.5]);
+    ctx.strokeStyle = blue;
     ctx.beginPath();
-    for (i = 105; i <= 255; i += 1) {
-        x = Math.sin(radians(i * 3)) * this.hatWidth * 0.2;
-        y = Math.cos(radians(i * 4)) * this.hatHeight * 0.48;
-        ctx.lineTo(x + this.hatWidth * 0.3, y + this.hatHeight * 0.65);
-    }
+    ctx.moveTo(c * 6, c * 3.6);
+    ctx.lineTo(c * 9, c * 3);
+    ctx.moveTo(c * 6.3, c * 4.7);
+    ctx.lineTo(c * 9.3, c * 4);
     ctx.stroke();
+    ctx.setLineDash([]);
 };
 
-HatBlockMorph.prototype.santaHatPath = function (ctx, inset) {
-    var s = this.hatWidth,
-        h = this.hatHeight,
-        r = ((4 * h * h) + (s * s)) / (8 * h),
-        a = degrees(4 * Math.atan(2 * h / s)),
-        sa = a / 2;
+HatBlockMorph.prototype.renderTrainHat = function (ctx) {
+    var c = this.corner,
+        w = this.hatWidth,
+
+        gray = new Color(200, 200, 200).toString(),
+        red = new Color(200, 0, 0).toString(),
+        green = new Color(0, 200, 0).toString(),
+        darkGreen = new Color(0, 100, 0).toString(),
+        black = BLACK.toString(),
+    
+    chimney = () => {
+        ctx.beginPath();
+        ctx.roundRect(
+            c * 12,
+            c * 0.5,
+            c * 2,
+            c * 0.75,
+            [c * 0.5, c * 0.5,
+            c * 0.5, c * 0.5]
+        );
+        ctx.rect(
+            c * 12.5,
+            c * 1.25,
+            c * 1,
+            c * 1.25
+        );
+    },
+
+    wheels = (start, stop) => {
+        var i;
+        for (i = start; i <= stop; i += 1) {
+            ctx.beginPath();
+            ctx.fillStyle = black;
+            ctx.arc(
+                c * 4 + c * i * 2.5,
+                c * 5,
+                c * 1.2,
+                radians(0),
+                radians(360),
+                false
+            );
+            ctx.fill();
+        }
+        ctx.fillStyle = red;
+        for (i = start; i <= stop; i += 1) {
+            ctx.beginPath();
+            ctx.arc(
+                c * 4 + c * i * 2.5,
+                c * 5,
+                c * 0.8,
+                radians(0),
+                radians(360),
+                false
+            );
+            ctx.fill();
+        }
+    },
+
+    boiler = () => {
+        ctx.roundRect(
+            c * 5,
+            c * 2,
+            w * 0.5,
+            c * 2,
+            [0, c * 2, c * 2, 0]
+        );
+    },
+
+    cabin = () => {
+        ctx.rect(
+            c * 5,
+            c * 0.5,
+            c * 2,
+            c * 1.75
+        );
+    },
+
+    roof = () => {
+        ctx.moveTo(c * 4, c * 0.5);
+        ctx.lineTo(c * 8, c * 0.5);
+    },
+
+    catcher = () => {
+        ctx.beginPath();
+        ctx.moveTo(c * 4, c * 4);
+        ctx.lineTo(c * 4 + w * 0.5, c * 4);
+        ctx.lineTo(c * 5 + w * 0.5, c * 5);
+        ctx.lineTo(c * 4, c * 5);
+        ctx.closePath();
+    };
 
-    // top arc:
-    ctx.moveTo(inset, h + this.corner);
-    ctx.arc(
-        s / 2,
-        r,
-        r,
-        radians(-sa - 90),
-        radians(-75),
-        false
-    );
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'miter';
+
+    // outline
+    // chimney
+    ctx.strokeStyle = gray;
+    ctx.lineWidth = c * 0.5;
+    ctx.beginPath();
+    chimney();
+    ctx.stroke();
+    
+    // boiler
+    ctx.beginPath();
+    boiler();
+    ctx.stroke();
+
+    // cabin
+    ctx.lineWidth = c;
+    ctx.beginPath();
+    cabin();
+    ctx.stroke();
+    ctx.beginPath();
+    roof();
+    ctx.stroke();
+
+    // catcher
+    ctx.lineWidth = c * 0.5;
+    catcher();
+    ctx.stroke();
+
+
+    // inner shape:
+    // chimney
+    ctx.fillStyle = red;
+    ctx.beginPath();
+    chimney();
+    ctx.fill();
+
+    // front wheels
+    wheels(3, 4);
+
+    // boiler
+    ctx.fillStyle = green;
+    ctx.beginPath();
+    boiler();
+    ctx.fill();
+
+    // cabin
+    ctx.strokeStyle = red;
+    ctx.lineWidth = c * 0.5;
+    ctx.beginPath();
+    cabin();
+    ctx.stroke();
+    //ctx.lineWidth = c;
+    ctx.beginPath();
+    roof();
+    ctx.stroke();
+
+    // catcher
+    ctx.fillStyle = darkGreen;
+    catcher();
+    ctx.fill();
 
+    // rear wheels
+    wheels(1, 2);
+};
+
+HatBlockMorph.prototype.renderHouseHat = function (ctx) {
+    var c = this.corner,
+
+        brown = new Color(220, 80, 0),
+        white = WHITE.toString(),
+        i,
+    
+        house = () => {
+            ctx.beginPath();
+            ctx.moveTo(c * 4, c * 2.5);
+            ctx.lineTo(c * 2, c * 2.5);
+
+            ctx.lineTo(c * 4, c * 0.5);
+            ctx.lineTo(c * 12, c * 0.5);
+
+            ctx.lineTo(c * 14, c * 2.5);
+            ctx.lineTo(c * 12, c * 2.5);
+
+            ctx.lineTo(c * 12, c * 4.5);
+            ctx.lineTo(c * 4, c * 4.5);
+            ctx.closePath();
+        };
+
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    // house
+    ctx.lineWidth = c;
+    ctx.strokeStyle = brown;
+    house();
+    ctx.stroke();
+
+    ctx.fillStyle = brown;
+    house();
+    ctx.fill();
+    
+    ctx.lineWidth = c * 0.25;
+    ctx.strokeStyle = white;
+    house();
+    ctx.stroke();
+
+    // tiles
+    ctx.beginPath();
+    for (i = 0; i < 7; i += 1) {
+        ctx.arc(
+            c * 5 + (c * i),
+            c * 1.25,
+            c * 0.5,
+            radians(-200),
+            radians(20),
+            true
+        );
+    }
+    ctx.stroke();
+
+    // door
+    ctx.beginPath();
+    ctx.moveTo(c * 5, c * 4.5);
+    ctx.lineTo(c * 5, c * 3.5);
     ctx.arc(
-        inset + this.hatWidth * 0.9,
-        h + this.corner * 6,
-        this.hatWidth / 3,
-        radians(-70),
-        radians(-140),
-        true
+        c * 6,
+        c * 3.5,
+        c,
+        radians(-180),
+        radians(0)
     );
+    ctx.lineTo(c * 7, c * 4.5);
+    ctx.moveTo(c * 6, c * 4.5);
+    ctx.lineTo(c * 6, c * 3.5);
+    ctx.stroke();
+
 
+    // window
+    ctx.beginPath();
+    ctx.rect(
+        c * 8.5,
+        c * 2.7,
+        c * 2,
+        c * 1.2
+    );
+    ctx.stroke();
 };
 
 IDE_Morph.prototype.looksMenu = function () {
@@ -610,12 +944,10 @@ IDE_Morph.prototype.looksMenu = function () {
         () => {
              HatBlockMorph.prototype.xmasSkin =
                 !HatBlockMorph.prototype.xmasSkin;
-             this.world().changed();
-            if (HatBlockMorph.prototype.xmasSkin) {
-                this.saveSetting('skin', 'xmas');
-            } else {
-                this.removeSetting('skin');
-            }
+            this.world().changed();
+            this.bakeYourOwnBlocks();
+            this.flushBlocksCache();
+            this.refreshPalette();
         },
         HatBlockMorph.prototype.xmasSkin,
         'uncheck for default\nhat block skin',
@@ -627,3 +959,21 @@ IDE_Morph.prototype.looksMenu = function () {
         this.controlBar.settingsButton.bottomLeft()
     );
 };
+
+IDE_Morph.prototype.bakeYourOwnBlocks = function () {
+    if (HatBlockMorph.prototype.xmasSkin) {
+        SnapTranslator.dict.en['Make a block'] = 'Bake a block';
+        SnapTranslator.dict.en['Make a block...'] = 'Bake a block...';
+        SnapTranslator.dict.en['make a block...'] = 'bake a block...';
+        SnapTranslator.dict.en['Block Editor'] = 'Block Bakery';
+        this.saveSetting('skin', 'xmas');
+    } else {
+        delete SnapTranslator.dict.en['Make a block'];
+        delete SnapTranslator.dict.en['Make a block...'];
+        delete SnapTranslator.dict.en['make a block...'];
+        delete SnapTranslator.dict.en['Block Editor'];
+        this.removeSetting('skin');
+    }
+};
+
+IDE_Morph.prototype.bakeYourOwnBlocks();
diff --git a/src/threads.js b/src/threads.js
index 6147b810d..6814b8577 100644
--- a/src/threads.js
+++ b/src/threads.js
@@ -66,7 +66,7 @@ CustomHatBlockMorph*/
 
 /*jshint esversion: 11, bitwise: false, evil: true*/
 
-modules.threads = '2024-December-04';
+modules.threads = '2024-December-05';
 
 var ThreadManager;
 var Process;
@@ -287,7 +287,7 @@ ThreadManager.prototype.startProcess = function (
     return newProc;
 };
 
-ThreadManager.prototype.highlight = function (aProcess) {
+ThreadManager.prototype.highlight = function (aProcess, adjustCount = 0) {
     // show a highlight around the running stack
     // if there are more than one active processes
     // for a block, display the thread count
@@ -295,7 +295,7 @@ ThreadManager.prototype.highlight = function (aProcess) {
     var top = aProcess.topBlock,
         glow = top.getHighlight();
     if (glow) {
-        glow.threadCount = this.processesForBlock(top).length + 1;
+        glow.threadCount = this.processesForBlock(top).length + 1 + adjustCount;
         glow.updateReadout();
     } else {
         top.addHighlight();
@@ -367,7 +367,7 @@ ThreadManager.prototype.step = function () {
     if (Process.prototype.enableSingleStepping) {
         this.processes.forEach(proc => {
             if (proc.isInterrupted) {
-                if (proc.wantsHalo) { this.highlight(proc); }
+                if (proc.wantsHalo) { this.highlight(proc, -1); }
                 proc.runStep();
                 isInterrupted = true;
             } else {
@@ -385,7 +385,7 @@ ThreadManager.prototype.step = function () {
 
     this.processes.forEach(proc => {
         if (!proc.homeContext.receiver.isPickedUp() && !proc.isDead) {
-            if (proc.wantsHalo) { this.highlight(proc); }
+            if (proc.wantsHalo) { this.highlight(proc, -1); }
             proc.runStep();
         }
     });
diff --git a/sw.js b/sw.js
index fea71dbee..b3655b121 100644
--- a/sw.js
+++ b/sw.js
@@ -1,6 +1,6 @@
 /*global self, caches*/
 /*jshint esversion: 6*/
-var snapVersion = '10.3-dev-241204',
+var snapVersion = '10.3.0',
     cacheName = `snap-pwa-${snapVersion}`,
     filesToCache = [
         'snap.html',