add lemonade stand

frontend/src/config/apps.ts

@@ -7,6 +7,15 @@ const TicTacToeApp = lazy(() => import('../pages/TicTacToeApp').then(module => (
 const DrawingPadApp = lazy(() => import('../pages/DrawingPadApp').then(module => ({ default: module.DrawingPadApp })));
 const GameIframeApp = lazy(() => import('../pages/GameIframeApp').then(module => ({ default: module.GameIframeApp })));
 
+const LemonadeStandApp: React.FC = () =>
+  React.createElement(GameIframeApp, {
+    iframeUrl: 'https://shark-app-su4b5.ondigitalocean.app/',
+    badgeText: 'Arcade Corner',
+    title: 'Lemonade Stand',
+    description: 'Watch the forecast, buy supplies, and try to turn a profit.',
+    footerNote: 'Hosted externally on DigitalOcean.'
+  });
+
 export type App = {
   id: string;
   name: string;
@@ -55,12 +64,12 @@ export const APPS: App[] = [
     component: DrawingPadApp
   },
   {
-    id: 'iframegame',
-    name: 'Embedded Game',
-    description: 'Launch an external game without leaving Kiddos.',
-    cta: 'Open Game',
+    id: 'lemonade-stand',
+    name: 'Lemonade Stand',
+    description: 'Run a virtual stand without leaving Kiddos.',
+    cta: 'Play Lemonade',
     link: '/embedded-game',
     disabled: false,
-    component: GameIframeApp
+    component: LemonadeStandApp
   }
 ];

frontend/src/pages/GameIframeApp.tsx

@@ -1,44 +1,70 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
-const IFRAME_URL = 'https://www.google.com';
+type GameIframeAppProps = {
+  iframeUrl: string;
+  badgeText?: string;
+  title?: string;
+  description?: string;
+  footerNote?: string;
+};
 
-export function GameIframeApp() {
+const DEFAULT_CONFIG = {
+  badgeText: 'Arcade Corner',
+  title: 'Embedded Game View',
+  description: 'Enjoy a game inside Kiddos while keeping all of our safety tools and controls handy.',
+  footerNote: 'Content below is provided by an external site.'
+};
+
+export function GameIframeApp({
+  iframeUrl,
+  badgeText,
+  title,
+  description,
+  footerNote
+}: GameIframeAppProps) {
   const [loading, setLoading] = useState(true);
 
+  const config = useMemo(
+    () => ({
+      iframeUrl,
+      badgeText: badgeText || DEFAULT_CONFIG.badgeText,
+      title: title || DEFAULT_CONFIG.title,
+      description: description || DEFAULT_CONFIG.description,
+      footerNote: footerNote || DEFAULT_CONFIG.footerNote
+    }),
+    [iframeUrl, badgeText, title, description, footerNote]
+  );
+
+  if (!config.iframeUrl) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background text-muted-foreground">
+        Missing iframeUrl for embedded game.
+      </div>
+    );
+  }
+
   return (
-    <div className="min-h-screen bg-background px-4 py-8">
-      <div className="max-w-5xl mx-auto space-y-6">
-        <header className="text-center space-y-2">
-          <p className="text-sm uppercase tracking-widest text-muted-foreground">Arcade Corner</p>
-          <h1 className="text-4xl font-bold text-primary">Embedded Game View</h1>
-          <p className="text-muted-foreground">
-            Enjoy a game inside Kiddos while keeping all of our safety tools and controls handy.
-          </p>
-        </header>
-
-        <div className="bg-card border border-border rounded-3xl shadow-2xl overflow-hidden">
+    <div className="min-h-screen w-full bg-background flex flex-col">
+
+      <div className="flex-1 w-full flex flex-col">
+        <div className="flex-1 w-full bg-card border border-border  overflow-hidden flex flex-col">
           {loading && (
             <div className="p-4 text-center text-muted-foreground text-sm bg-muted">
               Loading embedded game...
             </div>
           )}
           <iframe
-            src={IFRAME_URL}
+            src={config.iframeUrl}
             title="Embedded Game"
-            className="w-full min-h-[75vh] border-0"
+            className="w-full h-full flex-1 border-0"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
             sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
             allowFullScreen
             onLoad={() => setLoading(false)}
           />
         </div>
-
-        <div className="text-center text-xs text-muted-foreground">
-          Content below is provided by an external site. Replace the URL in `GameIframeApp.tsx` when your game is ready.
-        </div>
       </div>
     </div>
   );
 }
 
-