Val Town Code SearchReturn to Val Town

2  // Background
3  BACKGROUND:
4    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/8b501664-722e-4be8-cf71-83aab7756e00/public",
5
6  // Stevens
7  STEVENS_FRONT:
8    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/8b8432bb-add2-44ad-bb12-44b8ea215500/public",
9  STEVENS_BACK:
10    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/e28da8ab-7710-4b82-8e32-8fdf65c2ed00/public",
11  STEVENS_WALKING:
12    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/bd7b9997-09b2-4b35-6eb9-9975a85bb700/public",
13
14  // Mailman
15  MAILMAN_STANDING:
16    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/20a6493d-cc31-475e-aa83-ac97d317e400/public",
17  MAILMAN_WALKING:
18    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/61604576-8a83-4d85-d5e4-8e8e26641700/public",
19};
20

82  const [cookieAndTeaMode, setCookieAndTeaMode] = useState(false);
83
84  // Fetch images from backend instead of blob storage directly
85  useEffect(() => {
86    // Set default background color in case image doesn't load
87    if (document.body) {
88      document.body.style.backgroundColor = "#2D1700"; // Dark brown leather color
89    }
90
91    // Fetch avatar image
92    fetch("/api/images/stevens.jpg")
93      .then((response) => {
94        if (response.ok) return response.blob();
95        throw new Error("Failed to load avatar image");
96      })
97      .then((imageBlob) => {
98        const url = URL.createObjectURL(imageBlob);
99        setAvatarUrl(url);
100      })
104
105    // Fetch wood background
106    fetch("/api/images/wood.jpg")
107      .then((response) => {
108        if (response.ok) return response.blob();
109        throw new Error("Failed to load wood background");
110      })
111      .then((imageBlob) => {
112        const url = URL.createObjectURL(imageBlob);
113        setWoodUrl(url);
114
115        // Apply wood background to body
116        if (document.body) {
117          document.body.style.backgroundImage = `url(${url})`;
118        }
119      })
362      return {
363        position: SCENE_ELEMENTS.DESK_SITTING,
364        image: ASSETS.STEVENS_FRONT,
365        highlightElement: SCENE_ELEMENTS.DESK,
366        animationClass: "no-animation",
372      return {
373        position: SCENE_ELEMENTS.DESK_SITTING,
374        image: ASSETS.STEVENS_FRONT,
375        highlightElement: null,
376        animationClass: "no-animation",
387            y: SCENE_ELEMENTS.MAILBOX.y - 20,
388          },
389          image: ASSETS.STEVENS_BACK,
390          highlightElement: SCENE_ELEMENTS.MAILBOX,
391          animationClass: "walk-to-mailbox",
398            y: SCENE_ELEMENTS.CALENDAR.y + 30,
399          },
400          image: ASSETS.STEVENS_BACK,
401          highlightElement: SCENE_ELEMENTS.CALENDAR,
402          animationClass: "walk-to-calendar",
409            y: SCENE_ELEMENTS.TELEGRAM.y + 10,
410          },
411          image: ASSETS.STEVENS_BACK,
412          highlightElement: SCENE_ELEMENTS.TELEGRAM,
413          animationClass: "walk-to-telegram",
417        return {
418          position: SCENE_ELEMENTS.OUTSIDE,
419          image: ASSETS.STEVENS_FRONT,
420          highlightElement: null,
421          animationClass: "walk-to-outside",
425        return {
426          position: SCENE_ELEMENTS.DESK_SITTING,
427          image: ASSETS.STEVENS_FRONT,
428          highlightElement: SCENE_ELEMENTS.DESK,
429          animationClass: "walk-to-desk",
623          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4),
624            0 3px 8px rgba(0, 0, 0, 0.5);
625          image-rendering: pixelated;
626          cursor: pointer;
627          transition: transform 0.2s;
634        .notebook-pages {
635          background-color: #f8f1e0;
636          background-image: linear-gradient(#d6c6a5 1px, transparent 1px);
637          background-size: 100% 16px;
638          box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
639          image-rendering: pixelated;
640        }
641
652
653        .pixel-character {
654          image-rendering: pixelated;
655          position: absolute;
656          transition: left 0.7s ease-in-out, top 0.7s ease-in-out;
763          className="w-[512px] h-[512px] mx-auto relative"
764          style={{
765            backgroundImage: `url(${ASSETS.BACKGROUND})`,
766            backgroundSize: "cover",
767            backgroundPosition: "center",
768            imageRendering: "pixelated",
769          }}
770        >
799          {/* Stevens character */}
800          <img
801            src={stevensState.image}
802            alt="Stevens"
803            className={`pixel-character ${

5import * as db from "./db.ts";
6import { embedMetadata, handleFarcasterEndpoints, name } from "./farcaster.ts";
7import { handleImageEndpoints } from "./image.tsx";
8
9const app = new Hono();
10
11handleImageEndpoints(app);
12handleFarcasterEndpoints(app);
13
44        <meta name="fc:frame" content={JSON.stringify(embedMetadata(baseUrl, path))} />
45        <link rel="icon" href={baseUrl + "/icon"} />
46        <meta property="og:image" content={baseUrl + "/image"} />
47      </head>
48      <body class="bg-white text-black dark:bg-black dark:text-white">

5import satori from 'npm:satori'
6
7export function handleImageEndpoints(app: Hono) {
8  const headers = {
9    'Content-Type': 'image/png',
10    'cache-control': 'public, max-age=86400',
11  }
12  app.get('/image', async (c) => {
13    return c.body(await homeImage(), 200, headers)
14  })
15  app.get('/icon', async (c) => {
16    const rounded = !!c.req.query('rounded')
17    return c.body(await iconImage(rounded), 200, headers)
18  })
19}
20
21export async function homeImage() {
22  return await ogImage(
23    <div tw="w-full h-full flex justify-start items-end text-[100px] bg-black text-white p-[50px]">
24      <div tw="flex flex-col items-start">
32}
33
34export async function iconImage(rounded = false) {
35  const roundedClass = rounded ? 'rounded-[96px]' : ''
36  return await ogImage(
37    <div
38      tw={`w-full h-full flex justify-center items-center text-[100px] bg-[#7c65c1] text-white p-[50px] ${roundedClass}`}
49//////////
50
51export async function ogImage(body, options = {}) {
52  const svg = await satori(body, {
53    width: 945,
59      if (code === 'emoji') {
60        const unicode = segment.codePointAt(0).toString(16).toUpperCase()
61        return `data:image/svg+xml;base64,` + btoa(await loadEmoji(unicode))
62      }
63      return ''
95  const base64 = Buffer.from(svg).toString('base64')
96  // console.log('getIconDataUrl', name, svg, base64)
97  return `data:image/svg+xml;base64,${base64}`
98}
99

5export const name = "Mini App Starter";
6// export const iconUrl = "https://imgur.com/TrJLlwp.png";
7// export const ogImageUrl = "https://imgur.com/xKVOVUE.png";
8
9export function embedMetadata(baseUrl: string, path: string = "/") {
10  return {
11    version: "next",
12    imageUrl: baseUrl + "/image",
13    button: {
14      title: name,
17        name: name,
18        url: baseUrl + path,
19        splashImageUrl: baseUrl + "/icon",
20        splashBackgroundColor: "#111111",
21      },
55        "iconUrl": baseUrl + "/icon",
56        "homeUrl": baseUrl,
57        "splashImageUrl": baseUrl + "/icon?rounded=1",
58        "splashBackgroundColor": "#111111",
59        "primaryCategory": "developer-tools",

176            patternName.textContent = 'Mandelbrot Set - Infinite Complexity';
177            
178            const imageData = ctx.createImageData(canvas.width, canvas.height);
179            const data = imageData.data;
180            
181            for (let px = 0; px < canvas.width; px++) {
210            }
211            
212            ctx.putImageData(imageData, 0, 0);
213        }
214        

11        h1 { color: #2e8b57; }
12        p { color: #555; }
13        .image { width: 100%; max-width: 600px; }
14    </style>
15</head>
17    <h1>Welcome to Serene Landscapes</h1>
18    <p>Explore the tranquility of nature through art and imagination.</p>
19    <img src="https://example.com/serene-landscape.jpg" alt="Serene Landscape" class="image">
20</body>
21</html>`, {

6    <title>React Hono Val Town Starter</title>
7    <link rel="stylesheet" href="/frontend/style.css">
8    <link rel="icon" href="/frontend/favicon.svg" type="image/svg+xml">
9  </head>
10  <body>

137          <div class="panel-content">
138            <strong>East Side Gallery Start:</strong><br>
139            Cyclist silhouetted against vibrant murals, warm golden light hitting the colorful graffiti art. The contrast between the historical wall and the freedom of cycling creates a powerful opening image.
140          </div>
141        </div>

14    
15    <!-- Icons -->
16    <link rel="icon" type="image/svg+xml" href="/frontend/favicon.svg">
17    <link rel="apple-touch-icon" href="/public/icons/icon-192x192.png">
18