From e505c63d16aa8badf1b4f6597ad6b739192b9f3a Mon Sep 17 00:00:00 2001
From: Richard Knoll <riknoll@microsoft.com>
Date: Wed, 7 Feb 2024 10:33:29 -0800
Subject: [PATCH] Add support for tilemaps with 4x4 tiles

---
 pxtblocks/fields/field_tilemap.ts        | 9 ++++++++-
 pxtblocks/fields/field_tileset.ts        | 3 ++-
 pxteditor/monaco-fields/field_tilemap.ts | 5 ++++-
 pxtlib/spriteutils.ts                    | 4 ++++
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/pxtblocks/fields/field_tilemap.ts b/pxtblocks/fields/field_tilemap.ts
index 31cbe8a3c010..20215b205b72 100644
--- a/pxtblocks/fields/field_tilemap.ts
+++ b/pxtblocks/fields/field_tilemap.ts
@@ -16,7 +16,7 @@ namespace pxtblockly {
         initWidth: number;
         initHeight: number;
         disableResize: boolean;
-        tileWidth: 8 | 16 | 32;
+        tileWidth: 4 | 8 | 16 | 32;
         filter?: string;
         lightMode: boolean;
     }
@@ -107,6 +107,9 @@ namespace pxtblockly {
         if (opts.tileWidth) {
             if (typeof opts.tileWidth === "number") {
                 switch (opts.tileWidth) {
+                    case 4:
+                        parsed.tileWidth = 4;
+                        break;
                     case 8:
                         parsed.tileWidth = 8;
                         break;
@@ -121,6 +124,10 @@ namespace pxtblockly {
             else {
                 const tw = opts.tileWidth.trim().toLowerCase();
                 switch (tw) {
+                    case "4":
+                    case "four":
+                        parsed.tileWidth = 4;
+                        break;
                     case "8":
                     case "eight":
                         parsed.tileWidth = 8;
diff --git a/pxtblocks/fields/field_tileset.ts b/pxtblocks/fields/field_tileset.ts
index d87590053d60..ab3cdda3ae27 100644
--- a/pxtblocks/fields/field_tileset.ts
+++ b/pxtblocks/fields/field_tileset.ts
@@ -28,7 +28,7 @@ namespace pxtblockly {
                 FieldTileset.cachedWorkspaceId = workspace.id;
                 const references = getAllReferencedTiles(workspace);
 
-                const supportedTileWidths = [16, 8, 32];
+                const supportedTileWidths = [16, 4, 8, 32];
 
                 for (const width of supportedTileWidths) {
                     const projectTiles = project.getProjectTiles(width, width === 16);
@@ -244,6 +244,7 @@ namespace pxtblockly {
         switch (id) {
             case "myTiles.transparency16":
                 return 1;
+            case "myTiles.transparency4":
             case "myTiles.transparency8":
             case "myTiles.transparency32":
                 return 2;
diff --git a/pxteditor/monaco-fields/field_tilemap.ts b/pxteditor/monaco-fields/field_tilemap.ts
index b0cacd0b6e29..a207108be603 100644
--- a/pxteditor/monaco-fields/field_tilemap.ts
+++ b/pxteditor/monaco-fields/field_tilemap.ts
@@ -37,7 +37,7 @@ export class MonacoTilemapEditor extends MonacoReactFieldEditor<pxt.ProjectTilem
         this.isTilemapLiteral = true;
 
         // This matches the regex for the field editor, so it should always match
-        const match = /^\s*(tilemap(?:8|16|32)?)\s*(?:`([^`]*)`)|(?:\(\s*"""([^"]*)"""\s*\))\s*$/.exec(text);
+        const match = /^\s*(tilemap(?:4|8|16|32)?)\s*(?:`([^`]*)`)|(?:\(\s*"""([^"]*)"""\s*\))\s*$/.exec(text);
         const name = (match[2] || match[3] || "").trim();
         this.tilemapLiteral = match[1];
 
@@ -57,6 +57,9 @@ export class MonacoTilemapEditor extends MonacoReactFieldEditor<pxt.ProjectTilem
             else if (this.tilemapLiteral === "tilemap32") {
                 tileWidth = 32;
             }
+            else if (this.tilemapLiteral === "tilemap4") {
+                tileWidth = 4;
+            }
             const [ name ] = project.createNewTilemap(id, tileWidth, 16, 16);
             proj = project.getTilemap(name);
             id = name;
diff --git a/pxtlib/spriteutils.ts b/pxtlib/spriteutils.ts
index a9c54d897bb7..9298914357a6 100644
--- a/pxtlib/spriteutils.ts
+++ b/pxtlib/spriteutils.ts
@@ -566,6 +566,8 @@ namespace pxt.sprite {
                 return proj.getTransparency(16);
             case "myTiles.transparency8":
                 return proj.getTransparency(8);
+            case "myTiles.transparency4":
+                return proj.getTransparency(4);
             case "myTiles.transparency32":
                 return proj.getTransparency(32);
             default:
@@ -804,6 +806,7 @@ namespace pxt.sprite {
 
     export function tileWidthToTileScale(tileWidth: number) {
         switch (tileWidth) {
+            case 4: return `TileScale.Four`;
             case 8: return `TileScale.Eight`;
             case 16: return `TileScale.Sixteen`;
             case 32: return `TileScale.ThirtyTwo`;
@@ -814,6 +817,7 @@ namespace pxt.sprite {
     export function tileScaleToTileWidth(tileScale: string) {
         tileScale = tileScale.replace(/\s/g, "");
         switch (tileScale) {
+            case `TileScale.Four`: return 4;
             case `TileScale.Eight`: return 8;
             case `TileScale.Sixteen`: return 16;
             case `TileScale.ThirtyTwo`: return 32;