⌨️ Tui

import { crayon } from "https://deno.land/x/crayon@2.1.11/mod.ts";
import { Canvas, Tui } from "https://deno.land/x/tui@2.1.11/mod.ts";

const tui = new Tui({
  style: crayon.bgBlack, // Make background black
  refreshRate: 1000 / 60, // Run in 60FPS
});

tui.dispatch(); // Close Tui on CTRL+C

import { handleInput, handleKeyboardControls, handleMouseControls } from "https://deno.land/x/tui@2.1.11/mod.ts";
...

handleInput(tui);
handleMouseControls(tui);
handleKeyboardControls(tui);

import { Button } from "https://deno.land/x/tui@2.1.11/src/components/mod.ts";
import { Signal, Computed } from "https://deno.land/x/tui@2.1.11/mod.ts";

...

// Create signal to make number automatically reactive
const number = new Signal(0);

const button = new Button({
  parent: tui,
  zIndex: 0,
  label: {
    text: new Computed(() => number.value.toString()), // cast number to string
  },
  theme: {
    base: crayon.bgRed,
    focused: crayon.bgLightRed,
    active: crayon.bgYellow,
  },
  rectangle: {
    column: 1,
    row: 1,
    height: 5,
    width: 10,
  },
});

  // If button is active (pressed) make number bigger by one
button.state.when("active", (state) => {
  ++number.value;
});

// Listen to mousePress event
button.on("mousePress", ({ drag, movementX, movementY }) => {
  if (!drag) return;

  // Use peek() to get signal's value when it happens outside of Signal/Computed/Effect
  const rectangle = button.rectangle.peek();
  // Move button by how much mouse has moved while dragging it
  rectangle.column += movementX;
  rectangle.row += movementY;
});

...

tui.run();