Val Town Code SearchReturn to Val Town

1/** @jsxImportSource https://esm.sh/react */
2import React, { useCallback, useEffect, useRef, useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4import { adjectives, animals, colors, Config, uniqueNamesGenerator } from "https://esm.sh/unique-names-generator";
5
231  }, [settings.defaultName]);
232
233  const getPixelIndex = useCallback((event: React.MouseEvent | React.TouchEvent) => {
234    const canvas = event.currentTarget as HTMLDivElement;
235    const rect = canvas.getBoundingClientRect();
260  }, [size, brushSize]);
261
262  const handleStart = useCallback((event: React.MouseEvent | React.TouchEvent) => {
263    event.preventDefault();
264    const { index, x, y } = getPixelIndex(event);
271  }, [getPixelIndex, pixels, size]);
272
273  const handleMove = useCallback((event: React.MouseEvent | React.TouchEvent) => {
274    event.preventDefault();
275    if (isDrawing && startPositionRef.current) {
286  }, [isDrawing, getPixelIndex, setPixel, isPainting]);
287
288  const handleEnd = useCallback((event: React.MouseEvent | React.TouchEvent) => {
289    if (isDrawing && startPositionRef.current) {
290      const { index } = getPixelIndex(event);
386        "--border-color": colorScheme.border,
387        "--shadow-color": colorScheme.shadow,
388      } as React.CSSProperties}
389    >
390      <div className="retro-border">
435    const root = createRoot(document.getElementById("root"));
436    root.render(
437      <React.StrictMode>
438        <App />
439      </React.StrictMode>,
440    );
441  } catch (error) {

4// Results are saved and displayed for each new address added, with options to delete individual results.
5
6/** @jsxImportSource https://esm.sh/react */
7import React, { useEffect, useState } from "https://esm.sh/react";
8import { createRoot } from "https://esm.sh/react-dom/client";
9
10function App() {

1/** @jsxImportSource https://esm.sh/react */
2import React, { useState, useRef, useEffect } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5function PotteryPlate({ radius, color, wobbliness, wobbleFrequency, wobbleIrregularity, rotation }) {

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

1# Routine Tracker
2
3This is a little React component to make our 7yo's after school routine self-serve so she can be a bit more independent after school.
4
5To change the items in the list, modify the `routineTasks` array of objects:

1/** @jsxImportSource https://esm.sh/react */
2import React, { useEffect, useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5function App() {
10  useEffect(() => {
11    // Load the Spline component dynamically
12    import("https://esm.sh/@splinetool/react-spline@2.2.6")
13      .then((module) => {
14        setSplineComponent(() => module.default);

1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {

1/** @jsxImportSource https://esm.sh/react */
2import React, { useEffect, useRef, useState } from "https://esm.sh/react"
3import { createRoot } from "https://esm.sh/react-dom/client"
4
5// Game board size
45  }
46
47  const handleTouchMove = (e: React.TouchEvent) => {
48    if (!isDragging || !boardRef.current) return
49

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

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