TUI Kit 1.0

Terminal-style components in plain HTML, CSS and JS. Every panel is sized in character cells, framed with box-drawing glyphs, and filled by a background layer inset half a cell so nothing outside the line is colored. Korean and other wide text snaps to 2-cell slots. Use the View menu or F2, F3, F4 to swap the border set, theme and language.

Language Theme Border set Font size cell –
0123456789ABCDEF◂ 가나다라마바사아◂ ABCD한글EFGH전각◂ ＴＵＩ　ｋｉｔ!!◂ 한A글B자C열D맞춤◂

The title is cut on a cell boundary and ends in …. Hover it to read the full text.

Every row ends on the same column: each Hangul syllable takes exactly 2 cells.

┌─┐ ├┼┤

╔═╗ ╠╬╣

┏━┓ ┣╋┫

╭─╮ ├┼┤

CSS only

Online

Turn 7

Heat 14

Ammo hit

No fill

The fill is a separate layer, inset by --tui-inset-x/y cells. At 0.5 it ends on the centre of the line, so the page shows outside the border.

x 0.5 · y 0.5

Walk3 Run5 Heat14 FacingNE

data-inset="ne 12 5": a 12 × 5 compartment that shares the box's corner edges, drawn in the box's own border set. The page styles its inside (.tui-inset) and keeps text out of it.

dim
Heat 14
dim
Heat 14
dim
Heat 14
dim
Heat 14

data-theme on one box themes it and everything inside, whatever the page theme. A select popup copies the theme of its box; a warn tone uses that theme's yellow. ice is one CSS block in this page.

Hex

Press shows reverse video. Focus shows ▸ ◂ marks. tight drops the inner spaces; field shows a value that opens an editor.

Pilot callsign > Underline variant Weapon
Movement mode
HD 9 CT 47/14 LT 32/10 RT 32/10 LA 34 RA 34 LL 41 RL 41 Atlas AS7-D · 100 t
AC/20 RT 20 LRM-20 LT 1 SRM-6 LT 2 4× Med Laser 5
Gunnery 4 Piloting 5 Hits ■ ■ □ □ □ □

Click a tab or use ← → on the focused tab.

Fire weapons
Punch
Kick
Charge
Skip
Locust LCT-1V
Griffin GRF-1N
Marauder MAD-3R
Wasp WSP-1A

The Attack menu has data-no-hover: the pointer does not move its cursor, only a click does.

ClassUnitTonsW/R/J
AssaultAtlas AS7-D1003/5/0
HeavyMarauder MAD-3R754/6/0
Warhammer WHM-6R704/6/0
MediumShadow Hawk SHD-2H555/8/3
Griffin GRF-1N555/8/5
Hunchback HBK-4G504/6/0
LightLocust LCT-1V208/12/0
Total425

Click a row or use ↑ ↓.

HeatEffect
5−1 MP
8+1 to-hit
14Shutdown, avoid on 4+
19Ammo explodes, avoid on 4+

The roster merges cells with rowspan and colspan and puts data-rule rows between classes; the heat table uses data-rules="rows" for a rule between every row.

Heat 14/30 Armor, eighth-cell precision ASCII style Indeterminate Vertical, eighth-row precision Rolling to-hit… Resolving crits

Contact bearing 040, range 9.

Heavy woods block line of sight.

Esc closes. Tab and ← → move between buttons.

hover me
Coloured runs

Hover or focus. Tooltips size themselves to the text in cells.

data-tip-at is the point of the element, data-tip-anchor the point of the tip placed on it; data-tip-xy pins the tip to a cell of another element. data-tip-runs colours parts of the text.

T1 Initiative: Blue 9, Red 6 T1 Locust runs 12 MP to 0812 T1 Atlas walks 3 MP to 0605 T1 AC/20 → Locust: 9 needed, 7 rolled T1 Med Laser → Locust: hit LL 5 T1 Heat: Atlas 6, Locust 2 T2 Initiative: Red 11, Blue 4 T2 Griffin jumps 5 MP to 0709 T2 PPC → Atlas: hit RT 10 T2 LRM-10 → Atlas: 6 missiles T2 Atlas kicks Locust: hit RL 20 T2 Locust PSR failed, falls T3 Initiative: Blue 8, Red 8 T3 Reroll: Blue 10, Red 3 T3 Locust stands, 4 MP T3 SRM-6 → Griffin: 4 hit T3 Crit: Griffin LA actuator T3 Griffin heat 9: −1 MP T4 Atlas AC/20 → Griffin CT 20 T4 Griffin destroyed
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 01 0101 0201 0301 0401 0501 0601 0701 0801 0901 1001 1101 1201 1301 1401 1501 02 0102 0202 0302 0402 0502 0602 0702 0802 0902 1002 1102 1202 1302 1402 1502 03 0103 0203 0303 0403 0503 0603 0703 0803 0903 1003 1103 1203 1303 1403 1503 04 0104 0204 0304 0404 0504 0604 0704 0804 0904 1004 1104 1204 1304 1404 1504 05 0105 0205 0305 0405 0505 0605 0705 0805 0905 1005 1105 1205 1305 1405 1505 06 0106 0206 0306 0406 0506 0606 0706 0806 0906 1006 1106 1206 1306 1406 1506 07 0107 0207 0307 0407 0507 0607 0707 0807 0907 1007 1107 1207 1307 1407 1507 08 0108 0208 0308 0408 0508 0608 0708 0808 0908 1008 1108 1208 1308 1408 1508 09 0109 0209 0309 0409 0509 0609 0709 0809 0909 1009 1109 1209 1309 1409 1509 10 0110 0210 0310 0410 0510 0610 0710 0810 0910 1010 1110 1210 1310 1410 1510 11 0111 0211 0311 0411 0511 0611 0711 0811 0911 1011 1111 1211 1311 1411 1511 12 0112 0212 0312 0412 0512 0612 0712 0812 0912 1012 1112 1212 1312 1412 1512

Wheel or shift+wheel, drag the █ thumb, or click the ▲ ▼ ◂ ▸ arrows and the ░ ▀ track.

LRM-20LT 1 SRM-6LT 2

A split from markup, with a prefab placed by data-tui-use. Drag a divider, or Tab to it and use the arrow keys.

Movement
Atlas AS7-D
T4

data-fixed: dividers are drawn but cannot be dragged or focused. Sizes mix percent, fr and cells.

34
47/14
34
LL 41 · RL 41

An hstack with a spacer pushes the last button right; a grid with data-columns="10 1fr 1fr" (cells, then fr) and a data-span="all" row. Every slot is a whole number of cells.

Built from script with TUI.h and two prefabs. The buttons call scene.update(); only the parts that changed are patched.

MOVE F1Help F5End phase TabNext unit Atlas AS7-D T4

A one-row bar. The page footer uses the same markup.

TUI F1Help F2Border F3Theme F4Language ready