Devesh36/pocket-audio-player

pixel-text.tsx

import { Fragment } from "react"
import { jscad } from "tscircuit"

// Small bitmap glyphs become actual tscircuit CAD geometry, not an image decal.
const glyphs: Record<string, string[]> = {
 A:["01110","10001","10001","11111","10001","10001","10001"],
 C:["01111","10000","10000","10000","10000","10000","01111"],
 P:["11110","10001","10001","11110","10000","10000","10000"],
 S:["01111","10000","10000","01110","00001","00001","11110"],
 a:["00000","00000","01110","00001","01111","10001","01111"],
 c:["0000","0000","0111","1000","1000","1000","0111"],
 d:["00001","00001","01111","10001","10001","10001","01111"],
 e:["00000","00000","01110","10001","11111","10000","01111"],
 g:["00000","01111","10001","10001","01111","00001","01110"],
 i:["1","0","1","1","1","1","1"],
 l:["1","1","1","1","1","1","1"],
 m:["00000","00000","11010","10101","10101","10101","10101"],
 n:["00000","00000","11110","10001","10001","10001","10001"],
 o:["00000","00000","01110","10001","10001","10001","01110"],
 r:["0000","0000","1011","1100","1000","1000","1000"],
 s:["0000","0000","0111","1000","0110","0001","1110"],
 t:["010","010","111","010","010","010","001"],
 u:["00000","00000","10001","10001","10001","10001","01111"],
 y:["00000","10001","10001","10001","01111","00001","01110"],
 " ":["00","00","00","00","00","00","00"],
 "1":["010","110","010","010","010","010","111"],
 "3":["111","001","001","111","001","001","111"],
 "7":["111","001","001","010","010","100","100"],
 ".":["0","0","0","0","0","0","1"],
 V:["10001","10001","10001","10001","10001","01010","00100"],
 B:["11110","10001","10001","11110","10001","10001","11110"],
 T:["11111","00100","00100","00100","00100","00100","00100"],
 "-":["000","000","000","111","000","000","000"],
}
export function textWidth(text: string, pitch: number) {
 return [...text].reduce((n, c) => n + ((glyphs[c]?.[0].length ?? 3) + 1) * pitch, 0) - pitch
}
export function PixelText({text,x,y,z,pitch=0.5}: {text:string;x:number;y:number;z:number;pitch?:number}) {
 let cursor=x
 return <Fragment>{[...text].map((letter,i)=>{
  const rows=glyphs[letter]; if(!rows)throw new Error(`Missing CAD glyph ${letter}`)
  const left=cursor;cursor+=(rows[0].length+1)*pitch
  return <Fragment key={i}>{rows.flatMap((row,r)=>[...row].map((p,c)=>p==="1"&&
   <jscad.cuboid key={`${r}-${c}`} size={[pitch*0.99,pitch*0.99,0.025]} center={[left+c*pitch,y-r*pitch,z]}/>))}</Fragment>
 })}</Fragment>
}