/** @jsxImportSource https://esm.sh/react */ import React from "https://esm.sh/react"; import { renderToString } from "https://esm.sh/react-dom/server"; function createScreenBuffer(width: number, height: number): string[][] { const buffer: string[][] = []; for (let y = 0; y < height; y++) { buffer[y] = []; for (let x = 0; x < width; x++) { buffer[y][x] = " "; } } return buffer; } const themes = { light: { name: "Light", trunk: "#dd7878", darkWood: "#dc8a78", lightWood: "#e64553", leaves: "#40a02b", youngLeaves: "#df8e1d", blossoms: "#ea76cb", fruits: "#fe640b", dying: "#d20f39", background: "#eff1f5", containerBg: "#e6e9ef", treeBg: "#dce0e8", text: "#4c4f69", button: "#40a02b", buttonHover: "#179299", link: "#04a5e5", linkHover: "#1e66f5", }, dark: { name: "Dark", trunk: "#dd7878", darkWood: "#dc8a78", lightWood: "#e64553", leaves: "#40a02b", youngLeaves: "#df8e1d", blossoms: "#ea76cb", fruits: "#fe640b", dying: "#d20f39", background: "#4c4f69", containerBg: "#5c5f77", treeBg: "#6c6f85", text: "#eff1f5", button: "#40a02b", buttonHover: "#179299", link: "#04a5e5", linkHover: "#1e66f5", }, cyberpunk: { name: "Cyberpunk", trunk: "#FF00FF", darkWood: "#00FFFF", lightWood: "#FF00AA", leaves: "#00FF00", youngLeaves: "#FFFF00", blossoms: "#FF1493", fruits: "#FF4500", dying: "#FF0000", background: "#000000", containerBg: "#1A1A1A", treeBg: "#0D0D0D", text: "#00FF00", button: "#FF00FF", buttonHover: "#00FFFF", link: "#00FFFF", linkHover: "#FF00FF", }, night: { name: "Night", trunk: "#4A4A4A", darkWood: "#3D3D3D", lightWood: "#575757", leaves: "#1E3F20", youngLeaves: "#2D5A2D", blossoms: "#4A0E4E", fruits: "#8B0000", dying: "#4B0000", background: "#0F0F0F", containerBg: "#1A1A1A", treeBg: "#151515", text: "#CCCCCC", button: "#2D5A2D", buttonHover: "#1E3F20", link: "#4169E1", linkHover: "#1E90FF", }, synthwave: { name: "Synthwave", trunk: "#FF00FF", darkWood: "#FF1493", lightWood: "#FF69B4", leaves: "#00FF00", youngLeaves: "#7FFF00", blossoms: "#FF00FF", fruits: "#FF4500", dying: "#FF0000", background: "#190033", containerBg: "#2B0057", treeBg: "#3B0075", text: "#FF00FF", button: "#00FFFF", buttonHover: "#FF00FF", link: "#00FFFF", linkHover: "#FF00FF", }, pastel: { name: "Pastel", trunk: "#D2B48C", darkWood: "#DEB887", lightWood: "#F4A460", leaves: "#98FB98", youngLeaves: "#90EE90", blossoms: "#FFC0CB", fruits: "#FFB6C1", dying: "#CD5C5C", background: "#F0E6FA", containerBg: "#E6E6FA", treeBg: "#FFF0F5", text: "#696969", button: "#DDA0DD", buttonHover: "#DA70D6", link: "#20B2AA", linkHover: "#48D1CC", }, monochrome: { name: "Monochrome", trunk: "#404040", darkWood: "#303030", lightWood: "#505050", leaves: "#606060", youngLeaves: "#707070", blossoms: "#808080", fruits: "#909090", dying: "#A0A0A0", background: "#FFFFFF", containerBg: "#F0F0F0", treeBg: "#E0E0E0", text: "#000000", button: "#C0C0C0", buttonHover: "#A0A0A0", link: "#808080", linkHover: "#606060", }, }; function bufferToHtml(buffer: string[][], colors: any): string { let html = "

";
  for (let y = 0; y < buffer.length; y++) {
    for (let x = 0; x < buffer[y].length; x++) {
      const char = buffer[y][x];
      let color = "";
      let className = "tree-part";

      switch (char) {
        case "/":
        case "\\":
        case "|":
          color = colors.trunk;
          className += " trunk";
          break;
        case "Y":
        case "v":
        case "^":
          color = colors.darkWood;
          className += " branch";
          break;
        case "~":
        case "-":
        case "+":
          color = colors.lightWood;
          className += " twig";
          break;
        case "&":
        case "@":
          color = colors.leaves;
          className += " leaf";
          break;
        case "%":
        case "$":
          color = colors.youngLeaves;
          className += " young-leaf";
          break;
        case "*":
        case ".":
          color = colors.blossoms;
          className += " blossom";
          break;
        case "o":
        case "O":
          color = colors.fruits;
          className += " fruit";
          break;
        case "?":
        case "x":
          color = colors.dying;
          className += " dying";
          break;
      }

      html += `${char}`;
    }
    html += "\n";
  }
  html += "

"; return html; } function App() { return (

Growing ASCII Bonsai Tree

View Source

); } export default async function server(request: Request): Promise { const app = renderToString(); const html = ` Growing ASCII Bonsai Tree

${app}

`; return new Response(html, { headers: { "Content-Type": "text/html" }, }); }

bonsai