merry_cromas/index.crotmp

index.md

md

<div hx-target="this" hx-swap="outerHTML">

  <p>Tree Height is 235m</p>
  <p>Tree Area is 8648m^2</p>

  <div hx-target="#svg">
    <button hx-get="/merry_cromas/tree_me">Tree Me</button>
    <button hx-get="/merry_cromas/bauble_up">Bauble Up</button>
    <button hx-get="/merry_cromas/star_bright">Star Bright</button>
    <button hx-get="/merry_cromas/illuminati">Illuminati</button>
  </div>

  <:fragment svg($_)>
  <div id="svg">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="768" width="1024">
      <g>
        <!-- Tree -->
        <polygon points="100,50 75,93.30127018922192 125,93.30127018922192" stroke="green" stroke-width="3" fill="green" />
        <polygon points="100,75 62.5,139.9519052838329 137.5,139.9519052838329" stroke="green" stroke-width="3" fill="green" />
        <polygon points="100,100 50,186.60254037844385 150,186.60254037844385" stroke="green" stroke-width="3" fill="green" />
        <rect x="90" y="185" width="20" height="40" stroke="brown" stroke-width="3" fill="brown" />

      <?.baubles>
        <!-- Top Tier -->
        <circle cx="85" cy="80" r="5" fill="red" />
        <circle cx="115" cy="80" r="5" fill="white" />
        <!-- Middle Tier -->
        <circle cx="75" cy="120" r="5" fill="white" />
        <circle cx="100" cy="120" r="5" fill="red" />
        <circle cx="125" cy="120" r="5" fill="white" />
        <!-- Bottom Tier -->
        <circle cx="60" cy="160" r="5" fill="red" />
        <circle cx="100" cy="160" r="5" fill="white" />
        <circle cx="140" cy="160" r="5" fill="red" />
      </?>

      <?.stars>
        <polygon points="100,35 95,45 85,45 93,50 90,60 100,55 110,60 107,50 115,45 105,45" fill="gold" />
      </?>
      </g>
    </svg>
  </div>
  </:>

</div>