Val Town Code SearchReturn to Val Town

1import React from 'https://esm.sh/react@15'
2import {
3  flatten,

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import {
4  createBrowserRouter,
5  RouterProvider,
6} from "https://esm.sh/react-router-dom@6.22.2?deps=react@18.2.0&react-dom@18.2.0";
7import { StrictMode } from "https://esm.sh/react@18.2.0";
8
9import { App } from "./components/App.tsx";

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createBrowserRouter } from "https://esm.sh/react-router-dom@6.22.2?deps=react@18.2.0&react-dom@18.2.0";
3import React from "https://esm.sh/react@18.2.0";
4import { App } from "./App.tsx";
5// Then create and export the router

1# React Hono Starter
2
3This app is a starter template for client-side React and server-side Hono.
4
5- **Remix** this starter template on the top right to get started.
7- The **entrypoint** is `/backend/index.ts`. That's the backend HTTP server, which also serves the all the frontend assets.
8
9- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/components/App.tsx`.
10
11[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.

4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>React Hono Val Town Starter</title>
7    <!-- <link rel="stylesheet" href="/public/style.css"> -->
8    <link

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState } from "https://esm.sh/react@18.2.0";
3
4export function App() {
6  return (
7    <div>
8      <h1>Val Town React + Hono Starter</h1>
9      I've been clicked <button onClick={() => setClicked((c) => c + 1)}>{clicked}</button> times
10    </div>

1# Hand Drawn Cards Logo
2
3This Val creates a hand-drawn cards logo using SVG with React. It implements the ballpoint pen style for both border and cards as workshopped in the canvas.
4
5## Features
12## Usage
13
14Import this component and use it in your React application:
15
16```jsx

1/** @jsxImportSource https://esm.sh/react@18.3.1 */
2import React from "https://esm.sh/react@18.3.1";
3
4export function HandDrawnCardsLogo() {

1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { NewGameForm } from "/frontend/components/NewGameForm.tsx";
3import { PlayerForm } from "/frontend/components/PlayerForm.tsx";
4import { PlayerList } from "/frontend/components/PlayerList.tsx";
5import { Card, CARD_SETS, CardSet, Game, GameState, Player } from "/shared/types.ts";
6import { motion, Reorder } from "https://esm.sh/motion/react?deps=react@18.2.0&dev=true";
7import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0?dev";
8
9// Define the different views/routes
15  onReorder: (items: Card[]) => void;
16  allowDrag: boolean;
17  renderItem: (item: Card, index: number) => React.ReactNode;
18  className?: string;
19}
23  const [draggedOverIndex, setDraggedOverIndex] = useState<number | null>(null);
24
25  const handleDragStart = (e: React.DragEvent<HTMLDivElement>, item: Card) => {
26    if (!allowDrag) return;
27    setDraggedItem(item);
31  };
32
33  const handleDragOver = (e: React.DragEvent<HTMLDivElement>, index: number) => {
34    e.preventDefault();
35    if (!draggedItem) return;
37  };
38
39  const handleDrop = (e: React.DragEvent<HTMLDivElement>, index: number) => {
40    e.preventDefault();
41    if (!draggedItem) return;
515                        const current = card.id === gameState.currentCard?.id;
516                        return (
517                          <React.Fragment key={card.id}>
518                            <Reorder.Item
519                              value={card}
537                              </motion.div>
538                            </Reorder.Item>
539                          </React.Fragment>
540                        );
541                      })}

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function App() {