@littlepartytime/dev-kit 1.6.1 → 1.7.0

package/dist/webapp/components/PhoneFrame.tsx

@@ -9,6 +9,10 @@ const INNER_R = OUTER_R - BEZEL;
 const BODY_W = SCREEN_W + BEZEL * 2;
 const BODY_H = SCREEN_H + BEZEL * 2;
 
+// iPhone 14/15 safe area insets (portrait)
+const SAFE_AREA_TOP = 59; // Dynamic Island
+const SAFE_AREA_BOTTOM = 34; // Home Indicator
+
 export default function PhoneFrame({ children }: { children: React.ReactNode }) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [scale, setScale] = useState(1);
@@ -74,7 +78,21 @@ export default function PhoneFrame({ children }: { children: React.ReactNode })
               contain: 'paint',
             }}
           >
-            {children}
+            {/* Safe area: game content is constrained here.
+                contain:paint makes this the containing block for
+                position:fixed elements inside the game. */}
+            <div
+              className="absolute overflow-hidden"
+              style={{
+                top: SAFE_AREA_TOP,
+                left: 0,
+                right: 0,
+                bottom: SAFE_AREA_BOTTOM,
+                contain: 'paint',
+              }}
+            >
+              {children}
+            </div>
           </div>
 
           {/* Dynamic Island */}

package/dist/webapp/pages/Preview.tsx

@@ -191,15 +191,35 @@ export default function Preview() {
         {/* Player Switcher */}
         <div className="bg-zinc-900 rounded-lg p-3">
           <h3 className="text-sm font-bold text-zinc-400 mb-2">Current Player</h3>
-          <select
-            value={playerIndex}
-            onChange={(e) => setPlayerIndex(Number(e.target.value))}
-            className="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-sm"
-          >
-            {mockPlayers.map((p, i) => (
-              <option key={p.id} value={i}>{p.nickname}{p.isHost ? ' (Host)' : ''}</option>
-            ))}
-          </select>
+          <div className="space-y-1">
+            {mockPlayers.map((p, i) => {
+              const isActive = i === playerIndex;
+              const hue = (i * 137) % 360; // deterministic color per player
+              return (
+                <button
+                  key={p.id}
+                  onClick={() => setPlayerIndex(i)}
+                  className={`w-full flex items-center gap-2 px-2 py-1.5 rounded text-sm text-left transition-colors ${
+                    isActive
+                      ? 'bg-amber-600/20 ring-1 ring-amber-500 text-white'
+                      : 'bg-zinc-800 hover:bg-zinc-700 text-zinc-300'
+                  }`}
+                >
+                  {/* Avatar */}
+                  <div
+                    className="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold shrink-0"
+                    style={{ background: `hsl(${hue}, 55%, 45%)` }}
+                  >
+                    {p.nickname[0]}
+                  </div>
+                  <span className="truncate">{p.nickname}</span>
+                  {p.isHost && (
+                    <span className="ml-auto text-[10px] text-amber-400 shrink-0">HOST</span>
+                  )}
+                </button>
+              );
+            })}
+          </div>
         </div>
 
         {/* Game Result */}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@littlepartytime/dev-kit",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "Development toolkit CLI for Little Party Time game developers",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",