Val Town Code SearchReturn to Val Town

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">

139        body::before {
140            content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
141            background-image:
142                linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
143                linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
386        /* Gallery & Contact Placeholders */
387        .gallery-grid { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; padding: 1rem; }
388        .gallery-grid .image-container {
389            width: 150px; height: 150px; border-radius: 15px; overflow: hidden;
390            border: 1px solid var(--color-border); background: var(--color-bg);
391             box-shadow: 0 4px 15px var(--shadow-color);
392        }
393        .gallery-grid .image-container img { width: 100%; height: 100%; object-fit: cover; }
394
395        /* Crystal Container for static info page (if used) */
515            <h2 class="tab-title" data-translate="galleryTitle">Gallery</h2>
516            <div class="gallery-grid">
517                <div class="image-container"><img src="https://images.unsplash.com/photo-1677756119517-756a188d2d94?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600" alt="AI 1"></div>
518                <div class="image-container"><img src="https://images.unsplash.com/photo-1696258680260-492036cd6559?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600" alt="AI 2"></div>
519                <div class="image-container"><img src="https://images.unsplash.com/photo-1684495809981-394107651435?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600" alt="AI 3"></div>
520            </div>
521        </div>

43    }
44
45    // Set temporary image on "Yes" click
46    setCurrentImg(tempYesImg);
47
48    // Revert back to the default image after 1 second
49    setTimeout(() => {
50      setCurrentImg(yesImg);
55    setIsNoClicked(true);
56    setIsYesClicked(false);
57    setCurrentImg(noImg); // Keep no image as long as "No" is clicked
58  };
59

130            width: 100%;
131            height: 100%;
132            background-image:
133                linear-gradient(to right, rgba(200, 200, 200, 0.1) 1px, transparent 1px), /* Slightly darker grid */
134                linear-gradient(to bottom, rgba(200, 200, 200, 0.1) 1px, transparent 1px);

67    - 'name': The name of the race (string).
68    - 'description': A brief description (string, 1-2 sentences maximum).
69    - 'styleHint': 3-5 descriptive keywords for generating an image (string).
70    - 'effectColor': A valid CSS hexadecimal color code string (e.g., "#RRGGBB").
71

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    return c.body(await iconImage(), 200, headers);
17  });
18}
19
20export async function homeImage() {
21  return await ogImage(
22    <div tw="w-full h-full flex justify-start items-end text-[100px] bg-black text-white p-[50px]">
23      <div tw="flex flex-col items-start gap-[10px]">
31}
32
33export async function iconImage() {
34  return await ogImage(
35    <div tw="w-full h-full flex justify-center items-center text-[100px] bg-black text-white p-[50px]">
36      <img tw="w-[350px] h-[350px]" src={base64Icon(SquareDashed)} />
45//////////
46
47export async function ogImage(body, options = {}) {
48  const svg = await satori(
49    body,
57        if (code === "emoji") {
58          const unicode = segment.codePointAt(0).toString(16).toUpperCase();
59          return `data:image/svg+xml;base64,` + btoa(await loadEmoji(unicode));
60        }
61        return "";
94  const base64 = Buffer.from(svg).toString("base64");
95  // console.log('getIconDataUrl', name, svg, base64)
96  return `data:image/svg+xml;base64,${base64}`;
97};

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",
58        "splashBackgroundColor": "#111111",
59        "primaryCategory": "developer-tools",

3Protect your vals behind a password. Use session cookies to persist authentication.
4
5![6ed0648ae8813e958dbe79468572cb52f578239c0fae55857a13660beebdc5fd.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/36c1dc4f-4e19-457b-ad89-0bf139754e00/public)
6
7## Usage

3View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by [LibSQL Studio](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page. 
4
5![image.webp](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c8e102fd-39ca-4bfb-372a-8d36daf43900/public)
6
7## Install