Merge pull request #2 from tomohxx/develop

feat: rotate first tile in open melds

Author: tomohxx

src/components/DisplayArea.tsx

@@ -37,13 +37,14 @@ export function DisplayArea({ handState: { tiles, melds }, onRemoveTile, onRemov
                 key={meldIndex}
                 type="button"
                 onClick={() => onRemoveMeld(meldIndex)}
-                className="flex shrink-0 gap-px focus-visible:ring-2 focus-visible:ring-teal-400/80 focus-visible:outline-none"
+                className="flex shrink-0 items-end gap-px focus-visible:ring-2 focus-visible:ring-teal-400/80 focus-visible:outline-none"
               >
                 {meld.tiles.map((tile, tileIndex) => (
                   <TileImage
                     key={`${meldIndex}-${tileIndex}`}
                     tile={tile}
                     size="compact"
+                    rotateLeft={meld.type !== "ankan" && tileIndex === 0}
                     faceDown={meld.type === "ankan" && (tileIndex === 0 || tileIndex === 3)}
                   />
                 ))}

src/components/TileImage.tsx

@@ -16,19 +16,45 @@ const tileImageClassBySize = {
   normal: "h-[2.8rem] sm:h-[4.2rem]",
 };
 
+const compactRotatedTileClass = {
+  wrapper: "w-[2rem] h-[1.5rem] sm:w-[3rem] sm:h-[2.25rem]",
+  offset: "top-[1.5rem] sm:top-[2.25rem]",
+};
+
 type TileImageProps = {
   tile: Tile;
   size?: keyof typeof tileImageClassBySize;
   className?: string;
   faceDown?: boolean;
+  rotateLeft?: boolean;
 };
 
-export function TileImage({ tile, size = "normal", className = "", faceDown = false }: TileImageProps) {
+export function TileImage({
+  tile,
+  size = "normal",
+  className = "",
+  faceDown = false,
+  rotateLeft = false,
+}: TileImageProps) {
   const TileComponent = TileComponents[faceDown ? "back" : `${tile.suit}${tile.index + 1}${tile.isRed ? "r" : ""}`];
+  const imageSizeClass = rotateLeft ? tileImageClassBySize.compact : tileImageClassBySize[size];
+  const tileClassName = `block shrink-0 overflow-hidden rounded border border-stone-300/85 w-auto ${imageSizeClass} ${className ? className : "bg-paper-warm"}`;
+
+  if (rotateLeft) {
+    return (
+      <div className={`relative shrink-0 ${compactRotatedTileClass.wrapper}`}>
+        {createElement(TileComponent, {
+          "aria-hidden": "true",
+          focusable: "false",
+          className: `absolute left-0 origin-top-left -rotate-90 ${compactRotatedTileClass.offset} ${tileClassName}`,
+        })}
+      </div>
+    );
+  }
 
   return createElement(TileComponent, {
     "aria-hidden": "true",
     focusable: "false",
-    className: `block shrink-0 overflow-hidden rounded border border-stone-300/85 w-auto ${tileImageClassBySize[size]} ${className ? className : "bg-paper-warm"}`,
+    className: tileClassName,
   });
 }