bump to 1.6.1 and smooth board layout transitions

Author: U-Keun

package.json

@@ -1,7 +1,7 @@
 {
   "name": "torus-tauri",
   "private": true,
-  "version": "1.3.0",
+  "version": "1.6.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "torus-app"
-version = "1.3.0"
+version = "1.6.1"
 description = "Torus game desktop app"
 authors = ["u-keunsong"]
 edition = "2021"

src-tauri/Cargo.toml

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Torus",
-  "version": "1.3.0",
+  "version": "1.6.1",
   "identifier": "com.u-keunsong.Torus",
   "build": {
     "beforeDevCommand": "npm run dev",

src-tauri/tauri.conf.json

@@ -1058,6 +1058,7 @@ function toggleKeyCard(): void {
     keyCardVisible = true;
     dom.keyCardEl.classList.remove("hidden");
     dom.sideColumnEl.classList.remove("key-hidden");
+    renderer.refreshLayout();
     return;
   }
 
@@ -1070,6 +1071,7 @@ function toggleKeyCard(): void {
   keyCardVisible = false;
   dom.keyCardEl.classList.add("hidden");
   dom.sideColumnEl.classList.add("key-hidden");
+  renderer.refreshLayout();
 }
 
 function setKeyGuidePage(

src/main.ts

@@ -441,6 +441,21 @@ button:active {
   gap: 14px;
   align-items: start;
   min-height: 0;
+  transition: grid-template-columns var(--motion-4xl) ease, gap var(--motion-4xl) ease;
+}
+
+.arena.score-hidden {
+  grid-template-columns: minmax(0, 1fr) minmax(220px, 256px);
+}
+
+.arena.side-hidden {
+  grid-template-columns: minmax(0, 1fr) 0;
+  gap: 0;
+}
+
+.arena.side-hidden .side-column {
+  opacity: 0;
+  pointer-events: none;
 }
 
 .board-card,
@@ -455,7 +470,15 @@ button:active {
   row-gap: clamp(8px, 1vh, 12px);
   min-height: 0;
   overflow: hidden;
-  transition: grid-template-rows var(--motion-2xl) ease, row-gap var(--motion-2xl) ease;
+  transition:
+    grid-template-rows var(--motion-4xl) ease,
+    row-gap var(--motion-4xl) ease,
+    opacity var(--motion-4xl) ease;
+}
+
+.side-column.score-hidden {
+  grid-template-rows: minmax(0, 0fr) minmax(0, 1fr);
+  row-gap: 0;
 }
 
 .side-column.key-hidden {
@@ -638,7 +661,7 @@ button:active {
 }
 
 .score-card {
-  transition: opacity var(--motion-md) ease, transform var(--motion-md) ease;
+  transition: opacity var(--motion-4xl) ease, transform var(--motion-4xl) ease;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
   min-height: 0;
@@ -1659,6 +1682,12 @@ button:active {
     grid-template-columns: 1fr;
   }
 
+  .arena.score-hidden,
+  .arena.side-hidden {
+    grid-template-columns: 1fr;
+    gap: 14px;
+  }
+
   .side-column {
     grid-template-rows: auto auto;
     height: auto;

src/styles.css

@@ -25,6 +25,8 @@ export class TorusRenderer {
   private status: GameStatus = "Paused";
   private scoreVisible = true;
   private expandedScoreIndex: number | null = null;
+  private lastPoleHeight: number | null = null;
+  private poleResizeTimer: number | null = null;
 
   constructor(private readonly dom: TorusDom) {}
 
@@ -53,6 +55,7 @@ export class TorusRenderer {
   }
 
   public refreshLayout(): void {
+    this.syncSideColumnLayout();
     this.syncPanelHeights();
   }
 
@@ -63,6 +66,8 @@ export class TorusRenderer {
   public setScoreboardVisible(visible: boolean): void {
     this.scoreVisible = visible;
     this.dom.scoreCardEl.classList.toggle("hidden", !visible);
+    this.syncSideColumnLayout();
+    this.syncPanelHeights();
   }
 
   public renderScoreboard(
@@ -269,6 +274,10 @@ export class TorusRenderer {
   }
 
   private renderPole(snapshot: GameSnapshot): void {
+    const poleStageEl = this.getPoleStageElement();
+    const previousHeight = poleStageEl?.getBoundingClientRect().height ?? 0;
+    const shouldAnimateHeight = this.lastPoleHeight !== null && this.lastPoleHeight !== snapshot.poleHeight;
+
     this.dom.poleGridEl.style.gridTemplateColumns = `repeat(${snapshot.numCols}, var(--ascii-cell-width))`;
 
     const cells: string[] = [];
@@ -288,6 +297,10 @@ export class TorusRenderer {
     }
 
     this.dom.poleGridEl.innerHTML = cells.join("");
+    this.lastPoleHeight = snapshot.poleHeight;
+    if (shouldAnimateHeight) {
+      this.animatePoleStageResize(previousHeight);
+    }
   }
 
   private renderPoleCell(entry: PoleEntry, difficulty: Difficulty): string {
@@ -302,6 +315,45 @@ export class TorusRenderer {
     return this.renderStaticBoxCell(entry, difficulty);
   }
 
+  private getPoleStageElement(): HTMLDivElement | null {
+    const parent = this.dom.poleGridEl.parentElement;
+    if (!(parent instanceof HTMLDivElement)) {
+      return null;
+    }
+    return parent;
+  }
+
+  private animatePoleStageResize(previousHeight: number): void {
+    const poleStageEl = this.getPoleStageElement();
+    if (!poleStageEl || previousHeight <= 0) {
+      return;
+    }
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      return;
+    }
+
+    const nextHeight = poleStageEl.getBoundingClientRect().height;
+    if (!Number.isFinite(nextHeight) || Math.abs(nextHeight - previousHeight) < 1) {
+      return;
+    }
+
+    if (this.poleResizeTimer !== null) {
+      window.clearTimeout(this.poleResizeTimer);
+      this.poleResizeTimer = null;
+    }
+
+    poleStageEl.style.height = `${previousHeight}px`;
+    poleStageEl.style.transition = "height 280ms cubic-bezier(0.22, 1, 0.36, 1)";
+    void poleStageEl.offsetWidth;
+    poleStageEl.style.height = `${nextHeight}px`;
+
+    this.poleResizeTimer = window.setTimeout(() => {
+      poleStageEl.style.height = "";
+      poleStageEl.style.transition = "";
+      this.poleResizeTimer = null;
+    }, 320);
+  }
+
   private syncPanelHeights(): void {
     const board = this.dom.boardStageCardEl;
     const side = this.dom.sideColumnEl;
@@ -324,6 +376,21 @@ export class TorusRenderer {
 
     side.style.height = `${clamped}px`;
   }
+
+  private syncSideColumnLayout(): void {
+    const arena = this.dom.boardStageCardEl.parentElement;
+    if (!(arena instanceof HTMLElement)) {
+      return;
+    }
+
+    const scoreHidden = !this.scoreVisible;
+    const keyVisible = !this.dom.keyCardEl.classList.contains("hidden");
+    const sideHidden = scoreHidden && !keyVisible;
+
+    this.dom.sideColumnEl.classList.toggle("score-hidden", scoreHidden);
+    arena.classList.toggle("score-hidden", scoreHidden && keyVisible);
+    arena.classList.toggle("side-hidden", sideHidden);
+  }
 }
 
 function renderAsciiCell(