+ {picture ? (
+ 
+ ) : (
+ <>{initial}
+ )}
+
+ );
+};
diff --git a/web/samples/WordWiz/src/components/ErrorBoundary.tsx b/web/samples/WordWiz/src/components/ErrorBoundary.tsx
new file mode 100644
index 0000000000..bcc3fa68b0
--- /dev/null
+++ b/web/samples/WordWiz/src/components/ErrorBoundary.tsx
@@ -0,0 +1,48 @@
+import {
+ Component,
+ type ComponentType,
+ type GetDerivedStateFromError,
+ type PropsWithChildren,
+ type ReactNode,
+} from 'react';
+
+export interface ErrorBoundaryProps extends PropsWithChildren {
+ fallback?: ReactNode | ComponentType<{ error: unknown }>;
+}
+
+interface ErrorBoundaryState {
+ error?: unknown;
+}
+
+export class ErrorBoundary extends Component<
+ ErrorBoundaryProps,
+ ErrorBoundaryState
+> {
+ state: ErrorBoundaryState = {};
+
+ static getDerivedStateFromError: GetDerivedStateFromError<
+ ErrorBoundaryProps,
+ ErrorBoundaryState
+ > = (error) => ({ error });
+
+ componentDidCatch(error: Error) {
+ this.setState({ error });
+ }
+
+ render() {
+ const {
+ state: { error },
+ props: { fallback: Fallback, children },
+ } = this;
+
+ return 'error' in this.state ? (
+ typeof Fallback === 'function' ? (
+
+
+ );
+};
diff --git a/web/samples/WordWiz/src/components/Header.tsx b/web/samples/WordWiz/src/components/Header.tsx
new file mode 100644
index 0000000000..4f17d462b4
--- /dev/null
+++ b/web/samples/WordWiz/src/components/Header.tsx
@@ -0,0 +1,25 @@
+import { Avatar } from '@app/components/Avatar.tsx';
+import { useHeader } from '@app/components/hooks/useHeader.ts';
+import { DAILY_STREAK, ENDLESS_STREAK } from '@app/game/constants.ts';
+
+export const Header = () => {
+ const { state, stats } = useHeader();
+
+ return (
+
+ {Array.from({ length: MAX_ATTEMPTS }, (_, row) => {
+ return (
+
+
+ {Array.from({ length: WORD_LENGTH }).map((_, col) => (
+
+ ))}
+
+ );
+ })}
+ + {TIPS} +
+
+
+
+
+ );
+};
diff --git a/web/samples/WordWiz/src/components/Keyboard.tsx b/web/samples/WordWiz/src/components/Keyboard.tsx
new file mode 100644
index 0000000000..eb3b2c4cfb
--- /dev/null
+++ b/web/samples/WordWiz/src/components/Keyboard.tsx
@@ -0,0 +1,90 @@
+import { useKeyboard } from '@app/components/hooks/useKeyboard.ts';
+import { KEYBOARD_ROW } from '@app/game/constants.ts';
+
+export const Keyboard = () => {
+ const {
+ setKeyboardKeysRef,
+ handleOnScreenKeyboardKeyClick,
+ handleSubmit,
+ handleDeleteLetter,
+ } = useKeyboard();
+
+ return (
+
+
+ Guest
+
+
+ {state.mode}
++ Streak:{' '} + {stats[state.mode === 'daily' ? DAILY_STREAK : ENDLESS_STREAK]} +
+
+
+ );
+};
diff --git a/web/samples/WordWiz/src/components/Page.tsx b/web/samples/WordWiz/src/components/Page.tsx
new file mode 100644
index 0000000000..45ce1e4e6f
--- /dev/null
+++ b/web/samples/WordWiz/src/components/Page.tsx
@@ -0,0 +1,5 @@
+import { type PropsWithChildren } from 'react';
+
+export function Page({ children }: PropsWithChildren) {
+ return <>{children};
+}
diff --git a/web/samples/WordWiz/src/components/Profile.tsx b/web/samples/WordWiz/src/components/Profile.tsx
new file mode 100644
index 0000000000..b87671a33c
--- /dev/null
+++ b/web/samples/WordWiz/src/components/Profile.tsx
@@ -0,0 +1,19 @@
+import { Avatar } from '@app/components/Avatar.tsx';
+
+interface ProfileProps {
+ name?: string;
+ picture?: string;
+}
+
+export const Profile = ({ name = 'Guest', picture = '' }: ProfileProps) => {
+ return (
+
+
+
+ {KEYBOARD_ROW[0].map((key) => {
+ return (
+
+ );
+ })}
+
+
+
+
+ {KEYBOARD_ROW[1].map((key) => {
+ return (
+
+ );
+ })}
+
+
+
+
+
+ {KEYBOARD_ROW[2].map((key) => {
+ return (
+
+ );
+ })}
+
+
+
+
+
+
+ );
+};
diff --git a/web/samples/WordWiz/src/components/Result.tsx b/web/samples/WordWiz/src/components/Result.tsx
new file mode 100644
index 0000000000..ffa2177639
--- /dev/null
+++ b/web/samples/WordWiz/src/components/Result.tsx
@@ -0,0 +1,54 @@
+import logo from '@app/assets/logo.png';
+import { useResult } from '@app/components/hooks/useResult.ts';
+import HomeIcon from '@app/assets/HomeIcon.tsx';
+import NextIcon from '@app/assets/NextIcon.tsx';
+
+export const Result = () => {
+ const {
+ state,
+ didWin,
+ isOpen,
+ attemptsUsed,
+ answer,
+ handleHome,
+ handleContinue,
+ resultContainerRef,
+ } = useResult();
+
+ return (
+
+ );
+};
diff --git a/web/samples/WordWiz/src/components/Root.tsx b/web/samples/WordWiz/src/components/Root.tsx
new file mode 100644
index 0000000000..c64a2fee84
--- /dev/null
+++ b/web/samples/WordWiz/src/components/Root.tsx
@@ -0,0 +1,27 @@
+import { App } from '@app/components/App.tsx';
+import { ErrorBoundary } from '@app/components/ErrorBoundary.tsx';
+
+function ErrorBoundaryError({ error }: { error: unknown }) {
+ return (
+
+
+ {name}
+
+
+ );
+}
+
+export function Root() {
+ return (
+ An unhandled error occurred:
+
+
+ {error instanceof Error
+ ? error.message
+ : typeof error === 'string'
+ ? error
+ : JSON.stringify(error)}
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ + powered by Beamable +
+