1import { ActionFunctionArgs } from "https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0";
2import { createMessage } from "../backend/database/queries.ts";
3
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { Link, useLoaderData } from "https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0";
4import { SearchResults as SearchResultsType } from "../shared/types.ts";
5import { SearchForm } from "../frontend/components/SearchForm.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { Link, useLocation } from "https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0";
3import React from "https://esm.sh/react@18.2.0";
4import { Message } from "../../shared/types.ts";
5
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { Link, useLoaderData } from "https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0";
4import { SearchResults as SearchResultsType } from "../../shared/types.ts";
5import { SearchForm } from "./SearchForm.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3
4interface LoadingSpinnerProps {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import {
3 Form,
4 useActionData,
5 useNavigation,
6} from "https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0";
7import React from "https://esm.sh/react@18.2.0";
8import { LoadingSpinner } from "./LoadingSpinner.tsx";
9
15 const navigation = useNavigation();
16 const isSubmitting = navigation.state === "submitting";
17 let $form = React.useRef<HTMLFormElement>(null);
18
19 // reset the form on success
20 React.useEffect(function() {
21 if (navigation.state === "idle" && $form.current) {
22 $form.current.reset();
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4import App from "./components/App";
5
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import { Card as CardType, CardColor, GameState } from "../../shared/types";
4import { API_ENDPOINTS } from "../../shared/constants";
7import GameControls from "./GameControls";
8
9const App: React.FC = () => {
10 // Player and room state
11 const [playerId, setPlayerId] = useState<string>("");
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { CardColor } from "../../shared/types";
4
11}
12
13const GameControls: React.FC<GameControlsProps> = ({
14 onDrawCard,
15 onCallUno,
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { GameState, Player, Card as CardType } from "../../shared/types";
4import Card from "./Card";
9}
10
11const GameBoard: React.FC<GameBoardProps> = ({ gameState, playerId }) => {
12 const { players, discardPile, currentPlayer, direction, currentColor, lastAction } = gameState;
13
