Fix compiled color pickers returning number instead of hex code

Hacked blocks and custom extensions expect colour_picker to return
a hex color code (#123abc) instead of the parsed number (1194684).

Author: GarboMuffin

src/compiler/irgen.js

@@ -162,20 +162,11 @@ class ScriptTreeGenerator {
      */
     descendInput (block) {
         switch (block.opcode) {
-        case 'colour_picker': {
-            const color = block.fields.COLOUR.value;
-            const hex = color.substr(1);
-            if (/^[0-9a-f]{6,8}$/.test(hex)) {
-                return {
-                    kind: 'constant',
-                    value: Number.parseInt(hex, 16)
-                };
-            }
+        case 'colour_picker':
             return {
                 kind: 'constant',
-                value: color
+                value: block.fields.COLOUR.value
             };
-        }
         case 'math_angle':
         case 'math_integer':
         case 'math_number':

src/compiler/jsgen.js

@@ -54,6 +54,7 @@ const generatorNameVariablePool = new VariablePool('gen');
  * @property {() => string} asNumberOrNaN
  * @property {() => string} asString
  * @property {() => string} asBoolean
+ * @property {() => string} asColor
  * @property {() => string} asUnknown
  * @property {() => string} asSafe
  * @property {() => boolean} isAlwaysNumber
@@ -93,6 +94,10 @@ class TypedInput {
         return `toBoolean(${this.source})`;
     }
 
+    asColor () {
+        return this.asUnknown();
+    }
+
     asUnknown () {
         return this.source;
     }
@@ -151,6 +156,15 @@ class ConstantInput {
         return Cast.toBoolean(this.constantValue).toString();
     }
 
+    asColor () {
+        // Attempt to parse hex code at compilation time
+        if (/^#[0-9a-f]{6,8}$/i.test(this.constantValue)) {
+            const hex = this.constantValue.substr(1);
+            return Number.parseInt(hex, 16).toString();
+        }
+        return this.asUnknown();
+    }
+
     asUnknown () {
         // Attempt to convert strings to numbers if it is unlikely to break things
         if (typeof this.constantValue === 'number') {
@@ -251,6 +265,10 @@ class VariableInput {
         return `toBoolean(${this.source})`;
     }
 
+    asColor () {
+        return this.asUnknown();
+    }
+
     asUnknown () {
         return this.source;
     }
@@ -607,7 +625,7 @@ class JSGenerator {
         case 'sensing.answer':
             return new TypedInput(`runtime.ext_scratch3_sensing._answer`, TYPE_STRING);
         case 'sensing.colorTouchingColor':
-            return new TypedInput(`target.colorIsTouchingColor(colorToList(${this.descendInput(node.target).asUnknown()}), colorToList(${this.descendInput(node.mask).asUnknown()}))`, TYPE_BOOLEAN);
+            return new TypedInput(`target.colorIsTouchingColor(colorToList(${this.descendInput(node.target).asColor()}), colorToList(${this.descendInput(node.mask).asColor()}))`, TYPE_BOOLEAN);
         case 'sensing.date':
             return new TypedInput(`(new Date().getDate())`, TYPE_NUMBER);
         case 'sensing.dayofweek':
@@ -668,7 +686,7 @@ class JSGenerator {
         case 'sensing.touching':
             return new TypedInput(`target.isTouchingObject(${this.descendInput(node.object).asUnknown()})`, TYPE_BOOLEAN);
         case 'sensing.touchingColor':
-            return new TypedInput(`target.isTouchingColor(colorToList(${this.descendInput(node.color).asUnknown()}))`, TYPE_BOOLEAN);
+            return new TypedInput(`target.isTouchingColor(colorToList(${this.descendInput(node.color).asColor()}))`, TYPE_BOOLEAN);
         case 'sensing.username':
             return new TypedInput('runtime.ioDevices.userData.getUsername()', TYPE_STRING);
         case 'sensing.year':
@@ -979,7 +997,7 @@ class JSGenerator {
             this.source += `${PEN_EXT}._setPenShadeToNumber(${this.descendInput(node.shade).asNumber()}, target);\n`;
             break;
         case 'pen.setColor':
-            this.source += `${PEN_EXT}._setPenColorToColor(${this.descendInput(node.color).asUnknown()}, target);\n`;
+            this.source += `${PEN_EXT}._setPenColorToColor(${this.descendInput(node.color).asColor()}, target);\n`;
             break;
         case 'pen.setParam':
             this.source += `${PEN_EXT}._setOrChangeColorParam(${this.descendInput(node.param).asString()}, ${this.descendInput(node.value).asNumber()}, ${PEN_STATE}, false);\n`;