Val Town Code SearchReturn to Val Town

3Move circles around. State is synced with the server. Open a window in another tab and watch the circles update as you move them .
4
5![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/e2a6db10-906d-4398-6e13-32475a0b6500/public)
6

195        if (logoData) {
196          return new Response(logoData, {
197            headers: { "Content-Type": "image/png" },
198          });
199        }

1165        <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169            

1165        <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169            

8
9<div align="center">
10<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="500px"/>
11</div>

4
5<div align="center">
6<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="700px"/>
7</div>

8
9<div align="center">
10<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="500px"/>
11</div>

3import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
4
5// import { getImages } from "./get-images";
6
7// const images = await getImages("image", 12);
8// export const IMAGE_URLS = images;
9
10// mock data
11const IMAGE_URLS = [
12  "https://charmaine-blob_admin.web.val.run/api/public/public%2F1738957396306_pngtree-valentine-day-gift-box-open-love-heart-and-rose-potale-greeting-png-image_6564851.png",
13  "https://charmaine-blob_admin.web.val.run/api/public/public%2F1738959510139_2020-heart-pounding-animation.gif",
14  "https://charmaine-blob_admin.web.val.run/api/public/public%2F1738959545863_sugary-heart-valentine-png-5692911.png",
15  "https://charmaine-blob_admin.web.val.run/api/public/public%2F1738957543311_Red_Happy_Valentine's_Day_PNG_Clip-Art_Image.png",
16];
17
81}
82
83function DraggableImage({ imageUrl, initialPosition, index, onPositionChange, isCreating, delay = 0 }) {
84  const [position, setPosition] = useState(initialPosition);
85  const [isDragging, setIsDragging] = useState(false);
149    >
150      <img
151        src={imageUrl}
152        alt="Valentine"
153        style={{
165  const [message, setMessage] = useState("");
166  const [isCreating, setIsCreating] = useState(false);
167  const [imagePositions, setImagePositions] = useState([]);
168  const [showEnvelope, setShowEnvelope] = useState(false);
169  const [contentVisible, setContentVisible] = useState(false);
177      if (urlMessage) setMessage(decodeURIComponent(urlMessage));
178      if (urlPositions) {
179        setImagePositions(JSON.parse(decodeURIComponent(urlPositions)));
180      } else {
181        initializeRandomPositions();
196      scale: 0.8 + Math.random() * 0.4,
197    }));
198    setImagePositions(positions);
199  };
200
201  const handlePositionChange = (index, newPosition) => {
202    const newPositions = [...imagePositions];
203    newPositions[index] = newPosition;
204    setImagePositions(newPositions);
205  };
206
208    const url = new URL(window.location.href);
209    url.searchParams.set("message", message);
210    url.searchParams.set("positions", encodeURIComponent(JSON.stringify(imagePositions)));
211    navigator.clipboard.writeText(url.toString());
212    alert("URL copied to clipboard!");
278            />
279            <div style={{ fontSize: "14px", color: "#666" }}>
280              Drag the images to arrange them
281            </div>
282            <button
347      )}
348
349      {imagePositions.map((position, index) => (
350        <DraggableImage
351          key={index}
352          index={index}
353          imageUrl={IMAGE_URLS[index % IMAGE_URLS.length]}
354          initialPosition={position}
355          onPositionChange={handlePositionChange}

4
5// export const manager = {
6//   getImages(type: string, count: number): Promise<string[]> {
7//     return getImages(type, count);
8//   },
9// };
10
11export async function getImages(type: string, count: number): Promise<string[]> {
12  // Query to select random rows of the specified type
13  const result = await sqlite.execute(
22  );
23
24  let images: string[] = [];
25  console.log(result.rows);
26  for (const row of result.rows) {
27    const blobPath = await blob.get(row["path"] as string);
28    images.push(`https://shouser-blob_admin.web.val.run/api/public/${blobPath.url}`);
29  }
30
31  return images;
32  // console.log("images", await getImages("image", 1));
33  // Extract paths from the result rows
34  // return result.rows.map(asyncrow => await blob.get(row.path as string));
35}
36
37console.log(await getImages("image", 10));

2
3
4![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/4534f57c-96cc-4eba-bc51-5b3b52e78500/public)
5
6