1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import React, { Component, ErrorInfo, ReactNode } from "https://esm.sh/react@18.2.0?dev";
3
4interface Props {
5 children: ReactNode;
6 fallback?: ReactNode;
7}
8
37 }
38
39 render(): ReactNode {
40 if (this.state.hasError) {
41 // You can render any custom fallback UI
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import React, { useState } from "https://esm.sh/react@18.2.0?dev";
3
4export function DebugInfo() {
7
8 // Override console methods to capture logs
9 React.useEffect(() => {
10 const originalConsoleLog = console.log;
11 const originalConsoleError = console.error;
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import React, { useState } from "https://esm.sh/react@18.2.0?dev";
3import { defaultGameFormData, Game, GameFormData } from "../../shared/types.ts";
4
13
14 // Handle form input changes
15 const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
16 const { name, value } = e.target;
17 setFormData(prev => ({
22
23 // Handle form submission
24 const handleSubmit = async (e: React.FormEvent) => {
25 e.preventDefault();
26
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import React, { useEffect, useState } from "https://esm.sh/react@18.2.0?dev";
3import { Game, Player } from "../../shared/types.ts";
4import { Header } from "./Header.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { defaultPlayerFormData, Player, PlayerFormData } from "/shared/types.ts";
3import { validatePlayerForm } from "/shared/utils.ts";
4import React, { useState } from "https://esm.sh/react@18.2.0?dev";
5
6interface PlayerFormProps {
14
15 // Handle form input changes
16 const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
17 const { name, value } = e.target;
18 setFormData(prev => ({
23
24 // Handle form submission
25 const handleSubmit = async (e: React.FormEvent) => {
26 e.preventDefault();
27
1import { useState, useEffect } from "https://esm.sh/react@18.2.0?dev";
2import { fetchProjectFiles } from "../utils/api.ts";
3
1import { useChat } from "https://esm.sh/@ai-sdk/react?dev&deps=react@18.2.0&react-dom@18.2.0";
2import React, { useCallback, useMemo, useRef, useState } from "https://esm.sh/react@18.2.0?dev";
3import { playBellSound } from "../utils/soundEffects.ts";
4
99 }, [stop, pendingMessageId, soundEnabled]);
100
101 React.useEffect(() => {
102 customStopRef.current = handleStop;
103 }, [handleStop]);
104
105 React.useEffect(() => {
106 (window as any).customStopRef = customStopRef;
107 }, []);
5- [ ] make it one click to branch off like old jp townie demos
6- [ ] Figure out a convention to teach in the anthropic prompt mod where the LLM always checks the readme for the scope (if not provided) and keeps it up to take with every change
7- [ ] Rebuild as React Router?
8- [ ] opentownie as a pr bot
9- [ ] give it the ability to see its own client-side and server-side logs by building a middleware that shoves them into a SQL light database date and then give it a tool to access them or use our trpc API in that tool
107- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
108- For persistence, use Val Town SQLite or Blob storage with `import.meta.url` for keys/table names
109- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and include the `@jsxImportSource` pragma
110- When facing client-side render issues, check if all React dependencies are pinned to the same version
111- **Styling:** Default to using TailwindCSS via `<script src="https://cdn.twind.style" crossorigin></script>` unless otherwise specified
112
220
221### Frontend Best Practices
222- Structure as a standard client-side React app
223- Use SVG for favicons (Val Town only supports text files)
224- Separate components into individual files
225- Access bootstrapped data from `window.__INITIAL_DATA__`
226- Use React 18.2.0 consistently in all imports and the `@jsxImportSource` pragma
227- Follow the React component pattern from the example project
228- Handle API calls properly with proper error catching
229
247 - Always run table creation before querying
248
2493. **React Configuration:**
250 - All React dependencies must be pinned to 18.2.0
251 - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files
252 - Rendering issues often come from mismatched React versions
253
2544. **File Handling:**
46
47OpenTownie is built with:
48- React frontend with TypeScript
49- Hono API server backend
50- Tailwind CSS for styling
