diff --git a/frontend/src/config/apps.ts b/frontend/src/config/apps.ts index 80ef676..b6db70d 100644 --- a/frontend/src/config/apps.ts +++ b/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 } ]; diff --git a/frontend/src/pages/GameIframeApp.tsx b/frontend/src/pages/GameIframeApp.tsx index 07496ae..237a5b5 100644 --- a/frontend/src/pages/GameIframeApp.tsx +++ b/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 ( +
+ Missing iframeUrl for embedded game. +
+ ); + } + return ( -
-
-
-

Arcade Corner

-

Embedded Game View

-

- Enjoy a game inside Kiddos while keeping all of our safety tools and controls handy. -

-
- -
+
+ +
+
{loading && (
Loading embedded game...
)}