[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { SlotMachine } from "@/components/slot-machine" export default function Home() { return (

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.4", "next-themes": "^0.4.6", "react": "19.1.0", "react-day-picker": "9.8.0", "react-dom": "19.1.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="lib/led-display.ts" isMerged="true" var CHAR_SPACE = 1 var CHAR_WIDTH = 5 var CHAR_HEIGHT = 5 var CHAR_COUNT = 8 var BUF_CHAR_COUNT = 128 var DM_WIDTH = CHAR_COUNT * (CHAR_WIDTH + CHAR_SPACE) var BUF_WIDTH = BUF_CHAR_COUNT * (CHAR_WIDTH + CHAR_SPACE) var DM_HEIGHT = CHAR_HEIGHT var DOT_RADIUS = 3 var DOT_PAD = 1 var OUT_PAD = 5 var LED_COLOR = "#1e4" var TIME_STEP = 1.0 / 15 var FONT = Object.freeze({ A: [0xe, 0x11, 0x1f, 0x11, 0x11], B: [0x1e, 0x11, 0x1e, 0x11, 0x1e], C: [0xf, 0x10, 0x10, 0x10, 0xf], D: [0x1e, 0x11, 0x11, 0x11, 0x1e], E: [0x1f, 0x10, 0x1e, 0x10, 0x1f], F: [0x1f, 0x10, 0x1e, 0x10, 0x10], G: [0xf, 0x10, 0x17, 0x11, 0xf], H: [0x11, 0x11, 0x1f, 0x11, 0x11], I: [0xe, 0x4, 0x4, 0x4, 0xe], J: [0x7, 0x2, 0x2, 0x12, 0xc], K: [0x11, 0x12, 0x1c, 0x12, 0x11], L: [0x10, 0x10, 0x10, 0x10, 0x1f], M: [0x11, 0x1b, 0x15, 0x11, 0x11], N: [0x11, 0x19, 0x15, 0x13, 0x11], O: [0xe, 0x11, 0x11, 0x11, 0xe], P: [0x1e, 0x11, 0x1e, 0x10, 0x10], Q: [0xe, 0x11, 0x15, 0x13, 0xf], R: [0x1e, 0x11, 0x1e, 0x11, 0x11], S: [0xf, 0x10, 0xe, 0x1, 0x1e], T: [0x1f, 0x4, 0x4, 0x4, 0x4], U: [0x11, 0x11, 0x11, 0x11, 0xe], V: [0x11, 0x11, 0xa, 0xa, 0x4], W: [0x11, 0x11, 0x15, 0x1b, 0x11], X: [0x11, 0xa, 0x4, 0xa, 0x11], Y: [0x11, 0x11, 0xa, 0x4, 0x4], Z: [0x1f, 0x2, 0x4, 0x8, 0x1f], "0": [0x1f, 0x13, 0x15, 0x19, 0x1f], "1": [0x4, 0xc, 0x4, 0x4, 0xe], "2": [0x1f, 0x01, 0x1f, 0x10, 0x1f], "3": [0x1f, 0x01, 0xf, 0x01, 0x1f], "4": [0x11, 0x11, 0x1f, 0x01, 0x01], "5": [0x1f, 0x10, 0x1f, 0x01, 0x1f], "6": [0x1f, 0x10, 0x1f, 0x11, 0x1f], "7": [0x1f, 0x01, 0x7, 0x01, 0x01], "8": [0x1f, 0x11, 0x1f, 0x11, 0x1f], "9": [0x1f, 0x11, 0x1f, 0x01, 0x1f], "!": [0xe, 0xe, 0x4, 0x00, 0x4], "?": [0x1f, 0x11, 0x7, 0x00, 0x4], ":": [0x0, 0x4, 0x0, 0x4, 0x0], ";": [0x0, 0x4, 0x0, 0x4, 0x8], ",": [0x0, 0x0, 0x0, 0x4, 0x8], ".": [0x0, 0x0, 0x0, 0x0, 0x8], }) function lerp(a, b, t) { return (1 - t) * a + b * t } function Display(canvas, update, maxFrames) { this.canvas = canvas || document.createElement("canvas") this.ctx = this.canvas.getContext("2d") this.mat = new Array(BUF_WIDTH * DM_HEIGHT) // Update function this.update = update || ((d) => {}) this.frame = 0 this.maxFrames = maxFrames || 100 this.set = function (x, y, v) { v = v || false var i = x + y * BUF_WIDTH this.mat[i] = v } this.sprite = function (x, y, image) { if (!image) return for (var j = 0; j < 5; j++) { var row = image[j] for (var i = 0; i < 5; i++) { var col = (row >> (4 - i)) & 0b01 var tx = x + i var ty = y + j if (tx < 0 || tx >= BUF_WIDTH || ty < 0 || ty >= DM_HEIGHT) continue if (col === 1) { this.set(tx, ty, true) } } } } this.clear = function () { for (var i = 0; i < this.mat.length; i++) this.mat[i] = false } this.text = function (x, y, txt) { var space = CHAR_SPACE txt = txt.toUpperCase() var ox = 0 for (var i = 0; i < txt.length; i++) { this.sprite(x + ox, y, FONT[txt.charAt(i)]) ox += space + CHAR_WIDTH } } this.textCenter = function (txt) { const tw = ~~(CHAR_SPACE * txt.length - 1 + txt.length * CHAR_WIDTH * 0.5) this.text(~~(DM_WIDTH / 2) - tw, 0, txt) } this.invert = function () { for (var i = 0; i < this.mat.length; i++) this.mat[i] = !this.mat[i] } this.scroll = function (speed) { var oldm = this.mat.slice() for (var row = 0; row < DM_HEIGHT; row++) { for (var x = 0; x < BUF_WIDTH - 1; x++) { if (x + speed > BUF_WIDTH || x + speed < 0) continue if (row < 0 || row > DM_HEIGHT) continue var ti = x + speed + row * BUF_WIDTH var si = x + row * BUF_WIDTH this.mat[ti] = oldm[si] } } } this.redraw = function () { var ctx = this.ctx var pad = DOT_PAD * 2 var rad = DOT_RADIUS + pad / 2 this.canvas.width = DM_WIDTH * rad * 2 + OUT_PAD * 2 this.canvas.height = DM_HEIGHT * rad * 2 + OUT_PAD * 2 ctx.fillStyle = "#000" ctx.fillRect(0, 0, canvas.width, canvas.height) for (var y = 0; y < DM_HEIGHT; y++) { for (var x = 0; x < DM_WIDTH; x++) { var dx = x * rad * 2 + OUT_PAD, dy = y * rad * 2 + OUT_PAD var idx = x + y * BUF_WIDTH ctx.fillStyle = "#222" ctx.beginPath() ctx.arc(dx + rad, dy + rad, DOT_RADIUS, 0, Math.PI * 2) ctx.fill() if (this.mat[idx]) { ctx.fillStyle = LED_COLOR ctx.shadowColor = LED_COLOR ctx.shadowBlur = rad + OUT_PAD ctx.shadowOffsetX = 0 ctx.shadowOffsetY = 0 ctx.beginPath() ctx.arc(dx + rad, dy + rad, DOT_RADIUS, 0, Math.PI * 2) ctx.fill() ctx.shadowBlur = 0 } } } } this.start = function () { setInterval(() => { this.redraw() this.update(this, this.frame) this.frame++ this.frame = this.frame % this.maxFrames }, TIME_STEP * 1000) } } var canvas = document.getElementById("display") var ctx = canvas.getContext("2d") function inRange(v, a, b) { return v >= a && v < b } function pingPong(i, min, max) { var range = max - min return min + Math.abs(((i + range) % (range * 2)) - range) } var tx = DM_WIDTH var clr = 1.0 var t = 0 function sequence(d, f) { if (f == 0) { clr = 1.0 tx = DM_WIDTH d.clear() d.textCenter("HELLO") } else if (inRange(f, 0, 50)) { if (f % 4 == 0) d.invert() } else if (f == 51) { d.clear() d.text(tx, 0, "WORLD...") } else if (inRange(f, 51, 100)) { if (tx > 0) d.scroll(-1) } else if (inRange(f, 150, 200)) { for (var i = 0; i < DM_HEIGHT; i++) d.set(DM_WIDTH, i, true) d.scroll(-1) } else if (inRange(f, 201, 300)) { var t = new Date().toLocaleTimeString("en-US", { hour12: false, hour: "numeric", minute: "numeric", second: "numeric", }) d.clear() d.text(0, 0, t) } } var d = new Display(canvas, sequence, 300) d.start() [V0_FILE]typescriptreact:file="components/led-sign.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useRef } from "react" const CHAR_SPACE = 1 const CHAR_WIDTH = 5 const CHAR_HEIGHT = 5 const CHAR_COUNT = 12 const BUF_CHAR_COUNT = 128 const DM_WIDTH = CHAR_COUNT * (CHAR_WIDTH + CHAR_SPACE) const BUF_WIDTH = BUF_CHAR_COUNT * (CHAR_WIDTH + CHAR_SPACE) const DM_HEIGHT = CHAR_HEIGHT const DOT_RADIUS = 2 const DOT_PAD = 1 const OUT_PAD = 3 const LED_COLOR = "#ffd700" // Color dorado para los LEDs const TIME_STEP = 1.0 / 15 const FONT: Record = { A: [0xe, 0x11, 0x1f, 0x11, 0x11], B: [0x1e, 0x11, 0x1e, 0x11, 0x1e], C: [0xf, 0x10, 0x10, 0x10, 0xf], D: [0x1e, 0x11, 0x11, 0x11, 0x1e], E: [0x1f, 0x10, 0x1e, 0x10, 0x1f], F: [0x1f, 0x10, 0x1e, 0x10, 0x10], G: [0xf, 0x10, 0x17, 0x11, 0xf], H: [0x11, 0x11, 0x1f, 0x11, 0x11], I: [0xe, 0x4, 0x4, 0x4, 0xe], J: [0x7, 0x2, 0x2, 0x12, 0xc], K: [0x11, 0x12, 0x1c, 0x12, 0x11], L: [0x10, 0x10, 0x10, 0x10, 0x1f], M: [0x11, 0x1b, 0x15, 0x11, 0x11], N: [0x11, 0x19, 0x15, 0x13, 0x11], O: [0xe, 0x11, 0x11, 0x11, 0xe], P: [0x1e, 0x11, 0x1e, 0x10, 0x10], Q: [0xe, 0x11, 0x15, 0x13, 0xf], R: [0x1e, 0x11, 0x1e, 0x11, 0x11], S: [0xf, 0x10, 0xe, 0x1, 0x1e], T: [0x1f, 0x4, 0x4, 0x4, 0x4], U: [0x11, 0x11, 0x11, 0x11, 0xe], V: [0x11, 0x11, 0xa, 0xa, 0x4], W: [0x11, 0x11, 0x15, 0x1b, 0x11], X: [0x11, 0xa, 0x4, 0xa, 0x11], Y: [0x11, 0x11, 0xa, 0x4, 0x4], Z: [0x1f, 0x2, 0x4, 0x8, 0x1f], "0": [0x1f, 0x13, 0x15, 0x19, 0x1f], "1": [0x4, 0xc, 0x4, 0x4, 0xe], "2": [0x1f, 0x01, 0x1f, 0x10, 0x1f], "3": [0x1f, 0x01, 0xf, 0x01, 0x1f], "4": [0x11, 0x11, 0x1f, 0x01, 0x01], "5": [0x1f, 0x10, 0x1f, 0x01, 0x1f], "6": [0x1f, 0x10, 0x1f, 0x11, 0x1f], "7": [0x1f, 0x01, 0x7, 0x01, 0x01], "8": [0x1f, 0x11, 0x1f, 0x11, 0x1f], "9": [0x1f, 0x11, 0x1f, 0x01, 0x1f], "!": [0xe, 0xe, 0x4, 0x00, 0x4], "?": [0x1f, 0x11, 0x7, 0x00, 0x4], ":": [0x0, 0x4, 0x0, 0x4, 0x0], $: [0xf, 0x14, 0xe, 0x5, 0x1e], " ": [0x0, 0x0, 0x0, 0x0, 0x0], } class LEDDisplay { canvas: HTMLCanvasElement ctx: CanvasRenderingContext2D mat: boolean[] frame: number maxFrames: number update: (d: LEDDisplay, f: number) => void constructor(canvas: HTMLCanvasElement, update: (d: LEDDisplay, f: number) => void, maxFrames: number) { this.canvas = canvas this.ctx = canvas.getContext("2d")! this.mat = new Array(BUF_WIDTH * DM_HEIGHT).fill(false) this.update = update this.frame = 0 this.maxFrames = maxFrames } set(x: number, y: number, v = false) { const i = x + y * BUF_WIDTH this.mat[i] = v } sprite(x: number, y: number, image?: number[]) { if (!image) return for (let j = 0; j < 5; j++) { const row = image[j] for (let i = 0; i < 5; i++) { const col = (row >> (4 - i)) & 0b01 const tx = x + i const ty = y + j if (tx < 0 || tx >= BUF_WIDTH || ty < 0 || ty >= DM_HEIGHT) continue if (col === 1) { this.set(tx, ty, true) } } } } clear() { for (let i = 0; i < this.mat.length; i++) this.mat[i] = false } text(x: number, y: number, txt: string) { const space = CHAR_SPACE txt = txt.toUpperCase() let ox = 0 for (let i = 0; i < txt.length; i++) { this.sprite(x + ox, y, FONT[txt.charAt(i)]) ox += space + CHAR_WIDTH } } textCenter(txt: string) { const tw = Math.floor((CHAR_SPACE * (txt.length - 1) + txt.length * CHAR_WIDTH) * 0.5) this.text(Math.floor(DM_WIDTH / 2) - tw, 0, txt) } scroll(speed: number) { const oldm = this.mat.slice() for (let row = 0; row < DM_HEIGHT; row++) { for (let x = 0; x < BUF_WIDTH - 1; x++) { if (x + speed > BUF_WIDTH || x + speed < 0) continue if (row < 0 || row > DM_HEIGHT) continue const ti = x + speed + row * BUF_WIDTH const si = x + row * BUF_WIDTH this.mat[ti] = oldm[si] } } } redraw() { const ctx = this.ctx const pad = DOT_PAD * 2 const rad = DOT_RADIUS + pad / 2 this.canvas.width = DM_WIDTH * rad * 2 + OUT_PAD * 2 this.canvas.height = DM_HEIGHT * rad * 2 + OUT_PAD * 2 ctx.fillStyle = "#1a0a2e" ctx.fillRect(0, 0, this.canvas.width, this.canvas.height) for (let y = 0; y < DM_HEIGHT; y++) { for (let x = 0; x < DM_WIDTH; x++) { const dx = x * rad * 2 + OUT_PAD const dy = y * rad * 2 + OUT_PAD const idx = x + y * BUF_WIDTH ctx.fillStyle = "#2a1a4e" ctx.beginPath() ctx.arc(dx + rad, dy + rad, DOT_RADIUS, 0, Math.PI * 2) ctx.fill() if (this.mat[idx]) { ctx.fillStyle = LED_COLOR ctx.shadowColor = LED_COLOR ctx.shadowBlur = rad + OUT_PAD ctx.shadowOffsetX = 0 ctx.shadowOffsetY = 0 ctx.beginPath() ctx.arc(dx + rad, dy + rad, DOT_RADIUS, 0, Math.PI * 2) ctx.fill() ctx.shadowBlur = 0 } } } } start() { const interval = setInterval(() => { this.redraw() this.update(this, this.frame) this.frame++ this.frame = this.frame % this.maxFrames }, TIME_STEP * 1000) return () => clearInterval(interval) } } interface LEDSignProps { messages: string[] className?: string blink?: boolean } export function LEDSign({ messages, className = "", blink = false }: LEDSignProps) { const canvasRef = useRef(null) useEffect(() => { if (!canvasRef.current || messages.length === 0) return let currentMessageIndex = 0 let tx = DM_WIDTH let blinkState = true function sequence(d: LEDDisplay, f: number) { const currentMessage = messages[currentMessageIndex] if (blink) { if (f % 8 === 0) { blinkState = !blinkState } d.clear() if (blinkState) { d.textCenter(currentMessage) } if (f % 30 === 0 && f > 0) { currentMessageIndex = (currentMessageIndex + 1) % messages.length } } else { if (f === 0) { tx = DM_WIDTH d.clear() d.text(tx, 0, currentMessage) } else { if (tx > -currentMessage.length * (CHAR_WIDTH + CHAR_SPACE)) { d.scroll(-1) tx-- } else { currentMessageIndex = (currentMessageIndex + 1) % messages.length tx = DM_WIDTH d.clear() d.text(tx, 0, messages[currentMessageIndex]) } } } } const display = new LEDDisplay(canvasRef.current, sequence, 1000) const cleanup = display.start() return cleanup }, [messages, blink]) return (

About

Tags

Share

More from tomasr

More Templates Like This

About

Tags

Share

About

Tags

Share

More from tomasr

More Templates Like This