feat: add rotation for cables

Author: bnszky

client/src/components/creator/creator-board/creator-tile.tsx

@@ -2,10 +2,7 @@ import {
   EXTRA_HEIGHT,
   TALL_WALL_HEIGHT_MULTIPLIER,
 } from "../../../constants/global";
-import {
-  ALL_ITEMS_MAP,
-  type LayerItem,
-} from "../../../constants/layer-items";
+import { ALL_ITEMS_MAP, type LayerItem } from "../../../constants/layer-items";
 import { getTileBackgroundData } from "../../../utils/tileset-utils";
 import { renderTilesetLayer } from "../shared/render-tileset-layer";
 
@@ -39,10 +36,8 @@ export function CreatorTile({ sizePx, tileKeys }: CreatorTileProps) {
     );
   }
 
-  /** Background slot (index 1) drives wall stacking / tall layout. */
   const wallBg = resolvedItems[1];
-  const isWallCell =
-    wallBg?.key === "w1t" || wallBg?.key === "w2t";
+  const isWallCell = wallBg?.key === "w1t" || wallBg?.key === "w2t";
 
   return (
     <div
@@ -70,7 +65,9 @@ export function CreatorTile({ sizePx, tileKeys }: CreatorTileProps) {
           isWallCell || isTall ? 0 : `${sizePx * EXTRA_HEIGHT}px`;
 
         const useCompositeBlend =
-          item.baseFrame !== undefined || Boolean(item.color);
+          item.baseFrame !== undefined ||
+          Boolean(item.color) ||
+          (item.rotationDeg != null && item.rotationDeg % 360 !== 0);
 
         if (isEntity) {
           return (
@@ -104,15 +101,19 @@ export function CreatorTile({ sizePx, tileKeys }: CreatorTileProps) {
                 left: 0,
                 width: `${sourceTileSizePx}px`,
                 height: `${sourceTileSizePx * TALL_WALL_HEIGHT_MULTIPLIER}px`,
-                backgroundImage: bgUrl,
-                backgroundPosition: `${bgPosX}px ${bgPosY}px`,
-                backgroundRepeat: "no-repeat",
-                imageRendering: "pixelated",
                 transform: `scale(${scale})`,
                 transformOrigin: "top left",
                 pointerEvents: "none",
               }}
-            />
+            >
+              {renderTilesetLayer({
+                frameId: item.frame,
+                tileSizePx: sourceTileSizePx,
+                heightMultiplier: TALL_WALL_HEIGHT_MULTIPLIER,
+                withWallYOffset: true,
+                rotationDeg: item.rotationDeg,
+              })}
+            </div>
           );
         }
 
@@ -134,6 +135,7 @@ export function CreatorTile({ sizePx, tileKeys }: CreatorTileProps) {
               renderTilesetLayer({
                 frameId: item.baseFrame,
                 direction: item.direction,
+                rotationDeg: item.rotationDeg,
                 tileSizePx: sourceTileSizePx,
                 heightMultiplier: TALL_WALL_HEIGHT_MULTIPLIER,
                 withWallYOffset: true,
@@ -142,6 +144,7 @@ export function CreatorTile({ sizePx, tileKeys }: CreatorTileProps) {
               frameId: item.frame,
               color: item.color,
               direction: item.direction,
+              rotationDeg: item.rotationDeg,
               tileSizePx: sourceTileSizePx,
               heightMultiplier: TALL_WALL_HEIGHT_MULTIPLIER,
               withWallYOffset: true,

client/src/components/creator/creator-items-select/creator-items-select.tsx

@@ -1,7 +1,14 @@
 import { useState } from "react";
 
 import { LAYER_NAMES } from "../../../constants/global";
-import { LAYER_ITEMS, type LayerItem } from "../../../constants/layer-items";
+import type {
+  FloorDecoyRotationDeg,
+  LayerItem,
+} from "../../../constants/layer-items";
+import {
+  LAYER_ITEMS,
+  creatorPaletteKeyForLookup,
+} from "../../../constants/layer-items";
 import { CreatorLayerOptionsGrid } from "./parts/creator-layer-options-grid";
 import { CreatorLayerTabs } from "./parts/creator-layer-tabs";
 import { CreatorSelectedBlock } from "./parts/creator-selected-block";
@@ -17,11 +24,15 @@ const LAYER_TABS = [
 interface CreatorItemsSelectProps {
   activeBlock: LayerItem | null;
   setActiveBlock: (block: LayerItem | null) => void;
+  floorCableRotationByBase: Record<string, FloorDecoyRotationDeg>;
+  rotateCableAtBase: (baseKey: string) => void;
 }
 
 export function CreatorItemsSelect({
   activeBlock,
   setActiveBlock,
+  floorCableRotationByBase,
+  rotateCableAtBase,
 }: CreatorItemsSelectProps) {
   const [selectedLayer, setSelectedLayer] = useState<string>(LAYER_TABS[0].key);
 
@@ -38,8 +49,9 @@ export function CreatorItemsSelect({
   };
 
   const findLayerForBlock = (blockKey: string): string | null => {
+    const paletteKey = creatorPaletteKeyForLookup(blockKey);
     for (const [layerKey, layerItems] of Object.entries(LAYER_ITEMS)) {
-      if (layerItems.some((item) => item.key === blockKey)) {
+      if (layerItems.some((item) => item.key === paletteKey)) {
         return layerKey;
       }
     }
@@ -74,6 +86,8 @@ export function CreatorItemsSelect({
           layerKey={selectedLayer}
           activeBlock={activeBlock}
           setActiveBlock={setActiveBlock}
+          floorCableRotationByBase={floorCableRotationByBase}
+          rotateCableAtBase={rotateCableAtBase}
         />
       </div>
     </div>

client/src/components/creator/creator-items-select/parts/creator-layer-options-grid.tsx

@@ -1,11 +1,17 @@
-import { Palette } from "lucide-react";
+import { Palette, RotateCw } from "lucide-react";
 import { useRef, useState } from "react";
 
 import {
   COLORABLE_BASE_ITEMS,
+  type FloorDecoyRotationDeg,
   type LayerItem,
+  creatorPaletteKeyForLookup,
   getColoredVariant,
   getGridItems,
+  getRotatedFloorPlacementItem,
+  isRotatableFloorBaseKey,
+  paletteDisplayLabel,
+  parseRotatableFloorKey,
 } from "../../../../constants/layer-items";
 import { getUIBlockBackgroundData } from "../../../../utils/tileset-utils";
 import { renderTilesetLayer } from "../../shared/render-tileset-layer";
@@ -15,12 +21,16 @@ interface CreatorLayerOptionsGridProps {
   layerKey: string;
   activeBlock: LayerItem | null;
   setActiveBlock: (block: LayerItem | null) => void;
+  floorCableRotationByBase: Record<string, FloorDecoyRotationDeg>;
+  rotateCableAtBase: (baseKey: string) => void;
 }
 
 export function CreatorLayerOptionsGrid({
   layerKey,
   activeBlock,
   setActiveBlock,
+  floorCableRotationByBase,
+  rotateCableAtBase,
 }: CreatorLayerOptionsGridProps) {
   const items = getGridItems(layerKey);
 
@@ -35,13 +45,24 @@ export function CreatorLayerOptionsGrid({
   const pickerAnchorRef = useRef<HTMLDivElement | null>(null);
 
   const getDisplayItem = (item: LayerItem): LayerItem => {
-    if (!item.colorable || !item.baseKey) return item;
-    const colorIdx = selectedColors[item.baseKey] ?? 0;
-    return getColoredVariant(item.baseKey, colorIdx) ?? item;
+    let out = item;
+    if (out.colorable && out.baseKey) {
+      const colorIdx = selectedColors[out.baseKey] ?? 0;
+      out = getColoredVariant(out.baseKey, colorIdx) ?? out;
+    }
+    if (item.supportsRotation && isRotatableFloorBaseKey(item.key)) {
+      const deg = floorCableRotationByBase[item.key] ?? 0;
+      return getRotatedFloorPlacementItem(item.key, deg) ?? out;
+    }
+    return out;
   };
 
   const isItemActive = (item: LayerItem): boolean => {
     if (!activeBlock) return false;
+    if (item.supportsRotation) {
+      const p = parseRotatableFloorKey(activeBlock.key);
+      return p?.baseKey === item.key;
+    }
     if (item.colorable && item.baseKey) {
       return activeBlock.baseKey === item.baseKey;
     }
@@ -67,6 +88,16 @@ export function CreatorLayerOptionsGrid({
     setOpenPickerBaseKey((prev) => (prev === baseKey ? null : baseKey));
   };
 
+  const handleRotateClick = (e: React.MouseEvent, baseKey: string) => {
+    e.stopPropagation();
+    if (isRotatableFloorBaseKey(baseKey)) {
+      rotateCableAtBase(baseKey);
+    }
+  };
+
+  const paletteRowKeyForItem = (item: LayerItem) =>
+    item.colorable && item.baseKey ? item.baseKey : item.key;
+
   return (
     <div className="custom-scrollbar flex min-h-0 flex-1 flex-wrap content-start items-start justify-center gap-4 overflow-y-auto rounded-lg bg-violet-900/40 p-4">
       {items.map((item) => {
@@ -75,23 +106,45 @@ export function CreatorLayerOptionsGrid({
         const isColorable = Boolean(item.colorable && item.baseKey);
         const hasVariants =
           isColorable && (COLORABLE_BASE_ITEMS[item.baseKey!]?.length ?? 0) > 1;
+        const canRotate =
+          Boolean(item.supportsRotation) && isRotatableFloorBaseKey(item.key);
+
+        const paletteRowKey = creatorPaletteKeyForLookup(
+          paletteRowKeyForItem(item),
+        );
 
         const useCompositeBlend =
           displayItem.baseFrame !== undefined || Boolean(displayItem.color);
 
+        const needsRotatePreview =
+          displayItem.rotationDeg != null &&
+          displayItem.rotationDeg % 360 !== 0;
+
+        const previewUsesTilesetLayers =
+          useCompositeBlend || needsRotatePreview;
+
         const { bgUrl, bgPosX, bgPosY } = getUIBlockBackgroundData(
           displayItem.frame,
           24,
           import.meta.env.BASE_URL,
         );
 
+        const paletteName = paletteDisplayLabel(displayItem);
+        const rotatedKey = parseRotatableFloorKey(displayItem.key);
+        const tileHoverTitle =
+          rotatedKey !== null &&
+          rotatedKey.rotationDeg % 360 !== 0 &&
+          item.supportsRotation
+            ? `${paletteName} · ${rotatedKey.rotationDeg}°`
+            : paletteName;
+
         return (
           <div
-            key={item.baseKey ?? item.key}
+            key={paletteRowKey}
             ref={
               openPickerBaseKey === item.baseKey ? pickerAnchorRef : undefined
             }
-            className="relative"
+            className="relative w-[5rem] shrink-0"
           >
             <div
               role="button"
@@ -110,10 +163,10 @@ export function CreatorLayerOptionsGrid({
                   ? "bg-amber-400/30 ring-2 ring-amber-400"
                   : "hover:bg-violet-500/40"
               }`}
-              title={displayItem.label}
+              title={tileHoverTitle}
             >
               <div className="relative h-20 w-20 overflow-hidden border-4 border-emerald-950 bg-blue-400">
-                {!useCompositeBlend ? (
+                {!previewUsesTilesetLayers ? (
                   <div
                     className="h-6 w-6"
                     style={{
@@ -141,26 +194,54 @@ export function CreatorLayerOptionsGrid({
                       renderTilesetLayer({
                         frameId: displayItem.baseFrame,
                         direction: displayItem.direction,
+                        rotationDeg: displayItem.rotationDeg,
                       })}
                     {renderTilesetLayer({
                       frameId: displayItem.frame,
                       color: displayItem.color,
                       direction: displayItem.direction,
+                      rotationDeg: displayItem.rotationDeg,
                     })}
                   </div>
                 )}
 
-                {hasVariants && (
-                  <button
-                    type="button"
-                    onClick={(e) => {
-                      handleExpandClick(e, item.baseKey!);
-                    }}
-                    className="absolute bottom-0.5 right-0.5 flex h-5 w-5 cursor-pointer items-center justify-center rounded bg-violet-900/80 text-violet-200 transition-colors hover:bg-violet-700/90 hover:text-white"
-                    aria-label="Choose palette color"
-                    title="Choose color"
-                  >
-                    <Palette className="h-4 w-4" aria-hidden strokeWidth={2} />                  </button>
+                {(canRotate || hasVariants) && (
+                  <div className="absolute bottom-0.5 right-0.5 flex flex-row-reverse items-center gap-0.5">
+                    {hasVariants && (
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          handleExpandClick(e, item.baseKey!);
+                        }}
+                        className="flex h-5 w-5 cursor-pointer items-center justify-center rounded bg-violet-900/80 text-violet-200 transition-colors hover:bg-violet-700/90 hover:text-white"
+                        aria-label="Choose palette color"
+                        title="Choose color"
+                      >
+                        <Palette
+                          className="h-4 w-4"
+                          aria-hidden
+                          strokeWidth={2}
+                        />
+                      </button>
+                    )}
+                    {canRotate && (
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          handleRotateClick(e, item.key);
+                        }}
+                        className="flex h-5 w-5 cursor-pointer items-center justify-center rounded bg-violet-900/80 text-violet-200 transition-colors hover:bg-violet-700/90 hover:text-white"
+                        aria-label="Rotate cable (R)"
+                        title="Rotate (R)"
+                      >
+                        <RotateCw
+                          className="h-4 w-4"
+                          aria-hidden
+                          strokeWidth={2}
+                        />
+                      </button>
+                    )}
+                  </div>
                 )}
 
                 {Boolean(isColorable && displayItem.color) && (
@@ -170,8 +251,8 @@ export function CreatorLayerOptionsGrid({
                   />
                 )}
               </div>
-              <span className="max-w-[96px] text-center text-[11px] leading-tight font-medium text-violet-200">
-                {displayItem.label}
+              <span className="block w-full text-balance break-words px-0.5 text-center text-[10px] leading-tight font-medium text-violet-200 hyphens-auto">
+                {paletteName}
               </span>
             </div>
 

client/src/components/creator/creator-items-select/parts/creator-selected-block.tsx

@@ -1,4 +1,7 @@
-import type { LayerItem } from "../../../../constants/layer-items";
+import {
+  type LayerItem,
+  paletteDisplayLabel,
+} from "../../../../constants/layer-items";
 import { getUIBlockBackgroundData } from "../../../../utils/tileset-utils";
 import { renderTilesetLayer } from "../../shared/render-tileset-layer";
 
@@ -31,7 +34,9 @@ export function CreatorSelectedBlock({
             {(() => {
               const composite =
                 activeBlock.baseFrame !== undefined ||
-                Boolean(activeBlock.color);
+                Boolean(activeBlock.color) ||
+                (activeBlock.rotationDeg != null &&
+                  activeBlock.rotationDeg % 360 !== 0);
 
               if (!composite) {
                 const { bgUrl, bgPosX, bgPosY } = getUIBlockBackgroundData(
@@ -70,18 +75,20 @@ export function CreatorSelectedBlock({
                     renderTilesetLayer({
                       frameId: activeBlock.baseFrame,
                       direction: activeBlock.direction,
+                      rotationDeg: activeBlock.rotationDeg,
                     })}
                   {renderTilesetLayer({
                     frameId: activeBlock.frame,
                     color: activeBlock.color,
                     direction: activeBlock.direction,
+                    rotationDeg: activeBlock.rotationDeg,
                   })}
                 </div>
               );
             })()}
           </div>
-          <span className="text-sm font-bold text-violet-50">
-            {activeBlock.label}
+          <span className="min-w-0 shrink text-sm font-bold break-words text-violet-50">
+            {paletteDisplayLabel(activeBlock)}
           </span>
           {activeBlock.color && (
             <div