Val Town Code SearchReturn to Val Town

682  background-color: var(--highlight);
683}
684.card-image {
685  display: flex;
686  align-items: center;
704}
705
706.image-placeholder,
707.image-thumbnail {
708  width: 40px;
709  height: 40px;
711  object-fit: cover;
712}
713.image-placeholder {
714  background-color: var(--muted);
715}
722}
723
724.image-row {
725  display: flex;
726  gap: var(--space-1);
727}
728.input-image {
729  position: relative;
730  border: 1px solid var(--muted);
731  border-radius: 6px;
732}
733.remove-image-button {
734  position: absolute;
735  top: 0;
744  opacity: 0;
745}
746.input-image:hover .remove-image-button {
747  opacity: 1;
748}
749
750.image-drop-overlay {
751  position: fixed;
752  top: 0;
761  justify-content: center;
762}
763.image-drop-inner {
764  padding: var(--space-2);
765  background-color: var(--background);
766}
767
768.transition, .input-box, .icon-button, .button, .remove-image-button {
769  transition-property: color, background-color, border-color, opacity;
770  transition-duration: 200ms;

48  user: {
49    username: string;
50    profileImageUrl: string|null;
51  };
52  project: any;
55    <div className="card">
56
57    {project.imageUrl ? (
58      <img src={project.imageUrl} className="card-image" />
59    ) : user.profileImageUrl ? (
60      <div className="card-image">
61        <img
62          src={user.profileImageUrl}
63          width="48"
64          height="48"
67      </div>
68    ) : (
69      <div className="card-image placeholder" />
70    )}
71      <div className="card-body">

2import { useRef, useState, useEffect } from "https://esm.sh/react@18.2.0?dev";
3import { PlusIcon, ArrowUpIcon, Square, XIcon } from "./icons.tsx";
4import { processFiles } from "../utils/images.ts";
5
6export function InputBox ({
11  running,
12  error,
13  images,
14  setImages,
15} : {
16  value: string;
20  running: boolean;
21  error: any;
22  images: (string|null)[];
23  setImages: (images: (string|null)[]) => void;
24}) {
25  const form = useRef(null);
57          autoFocus={true}
58        />
59        <ImageRow images={images} setImages={setImages} />
60        <div className="toolbar">
61          <UploadButton
62            disabled={running}
63            images={images}
64            setImages={setImages}
65          />
66          <div className="spacer" />
88}
89
90export function ImageDropContainer ({
91  images,
92  setImages,
93  running,
94  children,
95}: {
96  images: (string|null)[];
97  setImages: (images: (string|null)[]) => void;
98  running: boolean;
99  children: React.ReactNode;
100}) {
101  const dragging = useImageDrop({ images, setImages, running });
102
103  return (
105      {children}
106      {dragging && (
107        <div className="image-drop-overlay">
108          <div className="image-drop-inner">
109            Drop images here to upload
110          </div>
111        </div>
115}
116
117export function useImageDrop ({ images, setImages, running }: {
118  images: (string|null)[];
119  setImages(images: (string|null)[]) => void;
120  running: boolean;
121}) {
143    setDragging(false);
144    if (e.dataTransfer?.files && !running) {
145      processFiles(Array.from(e.dataTransfer.files), images, setImages);
146    }
147  }
164}
165
166function ImageRow ({ images, setImages }: {
167  images: (string|null)[];
168  setImages: (images: (string|null)[]) => void;
169}) {
170  return (
171    <div className="image-row">
172      {images.map((image, i) => (
173        <Thumbnail
174          key={i}
175          image={image}
176          onRemove={() => {
177            setImages([
178              ...images.slice(0, i),
179              ...images.slice(i + 1),
180            ]);
181          }}
186}
187
188function Thumbnail ({ image, onRemove }: {
189  image: string|null;
190  onRemove: () => void;
191}) {
192  if (!image) return null;
193
194  return (
195    <div className="input-image">
196      <img
197        src={image}
198        alt="User uploaded image"
199        className="image-thumbnail"
200      />
201      <button
202        type="button"
203        title="Remove image"
204        className="remove-image-button"
205        onClick={onRemove}
206      >
212
213function UploadButton ({
214  images,
215  setImages,
216  disabled,
217}: {
218  images: (string|null)[];
219  setImages: (images: (string|null)[]) => void;
220  disabled: boolean;
221}) {
226      <button
227        type="button"
228        title="Upload image"
229        disabled={disabled}
230        onClick={e => {
234        <PlusIcon />
235        <div className="sr-only">
236          Upload image
237        </div>
238      </button>
243        onChange={e => {
244          if (e.target.files) {
245            processFiles(Array.from(e.target.files), images, setImages);
246          }
247        }}

1
2export const PROMPT_IMAGE_LIMIT = 5;
3
4export const processFiles = async (files: File[], images: (string | null)[], setImages: (images: (string | null)[]) => void) => {
5  const imageFiles = files.filter(file => file.type.startsWith('image/'));
6  const filesToProcess = imageFiles.slice(0, PROMPT_IMAGE_LIMIT - images.filter(Boolean).length);
7
8  if (filesToProcess.length === 0) return;
9
10  const newImages = [...images, ...Array(filesToProcess.length).fill(null)];
11  setImages(newImages);
12
13  const processedImages = await Promise.all(
14    filesToProcess.map(async (file) => {
15      return await readFileAsDataURL(file);
17  );
18
19  const updatedImages = [...images];
20  processedImages.forEach((dataUrl, index) => {
21    updatedImages[images.length + index] = dataUrl;
22  });
23
24  setImages(updatedImages.slice(0, PROMPT_IMAGE_LIMIT));
25};
26
30    reader.onload = () => {
31      const result = reader.result as string;
32      console.log("Image loaded, size:", result.length, "bytes");
33      resolve(result);
34    };

13  return new Response(svg, {
14    headers: {
15      "Content-Type": "image/svg+xml",
16    },
17  });

10import { useUsageStats } from "../hooks/useUsageStats.ts";
11import { Messages } from "./Messages.tsx";
12import { InputBox, ImageDropContainer } from "./InputBox.tsx";
13import { PreviewFrame } from "./PreviewFrame.tsx";
14import { BranchSelect } from "./BranchSelect.tsx";
64}) {
65  const { token, anthropicApiKey } = useAuth();
66  const [images, setImages] = useState<(string|null)[]>([]);
67  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
68  const { audio } = useContext(AppContext);
84    bearerToken: token,
85    selectedFiles,
86    images,
87    soundEnabled: audio,
88  });
108
109  return (
110    <ImageDropContainer
111      running={running}
112      images={images}
113      setImages={setImages}>
114      <div
115        className="chat-container container">
131              onSubmit={e => {
132                handleSubmit(e);
133                setImages([]);
134              }}
135              onCancel={handleStop}
136              running={running}
137              error={error}
138              images={images}
139              setImages={setImages}
140            />
141          </div>
149                rel="norefferer"
150                className="block-link text-link lockup">
151                {project.imageUrl ? (
152                  <img src={project.imageUrl} className="image-thumbnail" />
153                ) : (
154                  <div className="image-placeholder" />
155                )}
156                <div>
173      </div>
174      <pre hidden>{JSON.stringify(messages, null, 2)}</pre>
175    </ImageDropContainer>
176  );
177}

2title: "Knee Slide Cursor"
3description: "A fun, interactive soccer-themed cursor effect that reacts to your mouse movements! Featuring a smooth knee-slide animation and goal celebration messages."
4imageUrl: "https://chatgpt.com/backend-api/public_content/enc/eyJpZCI6Im1fNjgwZDhkYjBiNzdjODE5MTkxOTM3Y2ZlODk3NThjM2E6ZmlsZV8wMDAwMDAwMGY4NDg2MjMwOTU5NDRkOTE0ZTFhMTk3ZCIsInRzIjoiNDg0OTIxIiwicCI6InB5aSIsInNpZyI6ImE2MTRjMjZlMTA1ODM0ZmFkZGQzZDU4YTcyMDdjZmYzMzAyZGEzMGNhZWI0ZGEyMjI2YWM5ZGFiNDM4MTdlNjIiLCJ2IjoiMCIsImdpem1vX2lkIjpudWxsfQ=="
5author: "dcm31"
6tags: ["javascript","react","cursor-effects","val-town","soccer","interactive","tes"]

2title: "usmnt_world_cup_roster_tracker"
3description: "US Men's 2026 World Cup roster probability tracker"
4imageUrl: "https://chatgpt.com/backend-api/public_content/enc/eyJpZCI6Im1fNjgxMzk5N2RmMWUwODE5MWE0NGY2ZmE1MTIxOGYyODU6ZmlsZV8wMDAwMDAwMGM4YmM2MWY3YWM2MTgzYzIzMmFjMDZhZiIsInRzIjoiNDg1MDMxIiwicCI6InB5aSIsInNpZyI6IjVhMGZmNzc1ZDYxNTA3MjQ2NzAyYTk4MjAwYmI0YjY4NTA1OTcwOTA0YjExODBhYzNkZjA2ZTdlZjg0YmMwYzgiLCJ2IjoiMCIsImdpem1vX2lkIjpudWxsfQ=="
5author: "dcm31"
6tags: ["val-town"]

56}
57
58#image-upload-section {
59  background-color: rgba(255, 255, 255, 0.8);
60  padding: 20px;
68}
69
70#image-upload-section h2 {
71  margin-bottom: 15px;
72  color: #557492;
73}
74
75#image-upload-section p {
76  margin-bottom: 15px;
77  color: #666;
78}
79
80#image-upload {
81  opacity: 0;
82  position: absolute;
120}
121
122#image-container {
123  display: none;
124  background-color: rgba(255, 255, 255, 0.8);
133}
134
135#uploaded-image {
136  max-width: 100%;
137  max-height: 500px;
177}
178
179#cropped-image-container {
180  display: none;
181  background-color: rgba(255, 255, 255, 0.8);
190}
191
192#cropped-image {
193  max-width: 100%;
194  border-radius: 10px;
215
216@media (max-width: 768px) {
217  #image-upload-section {
218    padding: 15px;
219  }
248
249@media (max-width: 480px) {
250  #image-upload-section {
251    padding: 10px;
252  }
282    </header>
283    <main>
284        <section id="image-upload-section">
285            <h2>Upload Your Image</h2>
286            <p>Select an image to crop</p>
287            <div class="file-upload-wrapper">
288                <span class="file-upload-text">Choose File</span>
289                <span class="file-upload-button">Browse</span>
290                <input type="file" id="image-upload" accept="image/*">
291            </div>
292        </section>
293        <section id="image-container">
294            <img id="uploaded-image" src="#" alt="Uploaded Image">
295            <button id="crop-button">Crop Image</button>
296            <button id="download-button">Download Cropped Image</button>
297        </section>
298        <section id="cropped-image-container">
299            <h2>Cropped Image</h2>
300            <img id="cropped-image" src="#" alt="Cropped Image">
301        </section>
302    </main>
307
308<script>
309const imageUpload = document.getElementById('image-upload');
310const imageContainer = document.getElementById('image-container');
311const uploadedImage = document.getElementById('uploaded-image');
312const cropButton = document.getElementById('crop-button');
313const croppedImageContainer = document.getElementById('cropped-image-container');
314const croppedImage = document.getElementById('cropped-image');
315const downloadButton = document.getElementById('download-button');
316
317let cropper;
318
319imageUpload.addEventListener('change', (event) => {
320    const file = event.target.files[0];
321
324
325        reader.onload = (e) => {
326            uploadedImage.src = e.target.result;
327            imageContainer.style.display = 'block';
328            croppedImageContainer.style.display = 'none';
329            downloadButton.style.display = 'none';
330
333            }
334
335            cropper = new Cropper(uploadedImage, {
336                aspectRatio: 1,
337                viewMode: 1,
350    if (cropper) {
351        const canvas = cropper.getCroppedCanvas();
352        croppedImage.src = canvas.toDataURL();
353        croppedImageContainer.style.display = 'block';
354        downloadButton.style.display = 'inline-block';
355    }
359    const canvas = document.createElement('canvas');
360    const ctx = canvas.getContext('2d');
361    const img = new Image();
362
363    img.onload = () => {
364        canvas.width = img.width;
365        canvas.height = img.height;
366        ctx.drawImage(img, 0, 0, img.width, img.height);
367
368        const link = document.createElement('a');
369        link.href = canvas.toDataURL('image/png');
370        link.download = 'cropped_image.png';
371        document.body.appendChild(link);
372        link.click();
374    };
375
376    img.src = croppedImage.src;
377});
378</script>

74    - 'name': The race name.
75    - 'description': 1-2 sentences max.
76    - 'styleHint': 3-5 descriptive keywords for image generation.
77    - 'effectColor': A hex color code (#RRGGBB format) associated with the race.
78    - 'borderAnimationHint': OPTIONAL. A single keyword suggesting a subtle border animation style for the active card. Choose from 'shimmer', 'pulse', or 'none'. If unsure, use 'none'.
273    /* --- Animated Border Styles --- */
274    @keyframes border-shimmer { /* Gradient sweep */
275      0% { border-image-source: linear-gradient(90deg, transparent 0%, var(--effect-color) 50%, transparent 100%); }
276      25% { border-image-source: linear-gradient(90deg, transparent 25%, var(--effect-color) 75%, transparent 100%); }
277      50% { border-image-source: linear-gradient(90deg, transparent 50%, var(--effect-color) 100%); }
278      75% { border-image-source: linear-gradient(90deg, var(--effect-color) 0%, transparent 25%); }
279      100% { border-image-source: linear-gradient(90deg, var(--effect-color) 50%, transparent 100%); }
280    }
281     @keyframes border-pulse { /* Simple fade in/out */
288        border-width: 2px;
289        border-style: solid;
290        border-image-slice: 1;
291        border-image-source: linear-gradient(90deg, transparent 0%, var(--effect-color) 50%, transparent 100%); /* Initial state */
292        animation: border-shimmer var(--border-anim-duration) linear infinite;
293    }
298
299
300    /* --- Other Styles (Images, Content, Effects - mostly unchanged) --- */
301    .race-card img { pointer-events: none; height: 60%; border-radius: 16px 16px 0 0; width: 100%; object-fit: cover; display: block; background-color: #333;}
302    .race-card .card-content { pointer-events: none; padding: 20px; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; position: relative; z-index: 2; background: inherit; border-radius: 0 0 16px 16px;} /* Ensure content bg matches card */
448
449         const prompt = encodeURIComponent(\`disney fantasy character portrait, \${safeStyleHint}, \${safeName}, detailed illustration, cinematic lighting, high fantasy art style\`);
450         const imageUrl = \`http://maxm-imggenurl.web.val.run//\${prompt}.jpg\`; // Using Pollinations.ai as example
451         const fallbackColor = safeEffectColor.substring(1);
452         const fallbackUrl = \`https://placehold.co/400x400/\${fallbackColor}/1A1A1E?text=\${encodeURIComponent(safeName)}\`;
453
454         card.innerHTML = \`
455           <img src="\${imageUrl}" alt="Image of \${safeName}" loading="lazy" onerror="this.onerror=null; this.src='\${fallbackUrl}'; console.warn('Image failed for \${safeName}. Using fallback.');">
456           <div class="\${EFFECT_CONTAINER_CLASS}"><div class="energy-surge"></div></div>
457           <div class="card-content">