.

zss/firmware/cli.ts

@@ -1,7 +1,17 @@
 import { maptostring } from 'zss/chip'
 import { tape_info } from 'zss/device/api'
 import { createfirmware } from 'zss/firmware'
-import { memoryreadchip } from 'zss/memory'
+
+function writeheader(header: string) {
+  const bar = '-'.repeat(header.length + 4)
+  tape_info('cli', `$green=${bar}=`)
+  tape_info('cli', `$green $4$white ${header} $green$4 `)
+  tape_info('cli', `$green=${bar}=`)
+}
+
+function writeoption(option: string, label: string) {
+  tape_info('cli', `$white#${option} $blue$26 ${label}`)
+}
 
 export const CLI_FIRMWARE = createfirmware({
   get(chip, name) {
@@ -33,9 +43,31 @@ export const CLI_FIRMWARE = createfirmware({
     const [labelword, inputword, ...words] = args
     const label = maptostring(labelword)
     const input = maptostring(inputword)
-    console.info('hyperlink', label, input, words)
+    const text = words.map(maptostring).join('')
+    tape_info('cli', 'player>', label, input, text)
+    return 0
+  })
+  .command('help', () => {
+    writeheader('H E L P')
+    writeoption('1', 'zss controls and inputs')
+    writeoption('2', 'text formatting')
+    writeoption('3', 'edit commands')
+    writeoption('4', 'player settings')
+    return 0
+  })
+  .command('1', () => {
+    writeheader('zss controls and inputs')
+    return 0
+  })
+  .command('2', () => {
+    writeheader('text formatting')
+    return 0
+  })
+  .command('3', () => {
+    writeheader('edit commands')
     return 0
   })
-  .command('help', (chip, args) => {
+  .command('4', () => {
+    writeheader('player settings')
     return 0
   })

zss/gadget/components/panel/content.tsx

@@ -1,6 +1,6 @@
 import {
   WRITE_TEXT_CONTEXT,
-  tokenizeAndWriteTextFormat,
+  tokenizeandwritetextformat,
 } from '../../data/textformat'
 
 type PanelItemContentProps = {
@@ -10,6 +10,6 @@ type PanelItemContentProps = {
 }
 
 export function PanelItemContent({ item, context }: PanelItemContentProps) {
-  tokenizeAndWriteTextFormat(item, context)
+  tokenizeandwritetextformat(item, context, true)
   return null
 }

zss/gadget/components/panel/hotkey.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useContext } from 'react'
 
-import { tokenizeAndWriteTextFormat } from '../../data/textformat'
+import { tokenizeandwritetextformat } from '../../data/textformat'
 import { UserHotkey, UserInput } from '../userinput'
 
 import {
@@ -27,11 +27,12 @@ export function PanelItemHotkey({
   const text = maybetext || ` ${shortcut.toUpperCase()} `
   const tcolor = inputcolor(active)
 
-  tokenizeAndWriteTextFormat(
+  tokenizeandwritetextformat(
     `${
       context.isEven ? '$black$onltgray' : '$black$ondkcyan'
     }${text}$${tcolor}$onclear ${label}`,
     context,
+    true,
   )
 
   const scroll = useContext(ScrollContext)

zss/gadget/components/panel/hypertext.tsx

@@ -1,6 +1,6 @@
-import React, { useCallback, useContext } from 'react'
+import { useCallback, useContext } from 'react'
 
-import { tokenizeAndWriteTextFormat } from '../../data/textformat'
+import { tokenizeandwritetextformat } from '../../data/textformat'
 import { UserInput } from '../userinput'
 
 import {
@@ -21,13 +21,13 @@ export function PanelItemHyperText({
   const [target, data] = [mapTo(args[0], ''), args[1]]
 
   const tcolor = inputcolor(active)
-  tokenizeAndWriteTextFormat(`  $purple$16 $${tcolor}${label}`, context)
+  tokenizeandwritetextformat(`  $purple$16 $${tcolor}${label}`, context, true)
 
   const scroll = useContext(ScrollContext)
   const invoke = useCallback(() => {
     scroll.sendmessage(chiptarget(chip, target), data)
     scroll.sendclose()
-  }, [scroll, target])
+  }, [scroll, chip, target, data])
 
   return active && <UserInput OK_BUTTON={invoke} />
 }

zss/gadget/components/panel/number.tsx

@@ -3,7 +3,7 @@ import { MAYBE_NUMBER } from 'zss/mapping/types'
 
 import {
   useCacheWriteTextContext,
-  tokenizeAndWriteTextFormat,
+  tokenizeandwritetextformat,
   writechartoend,
 } from '../../data/textformat'
 import {
@@ -68,9 +68,10 @@ export function PanelItemNumber({
     tvalue = blink ? strsplice(strvalue, cursor, 1, '$219+') : strvalue
   }
 
-  tokenizeAndWriteTextFormat(
-    `  # $${tcolor}${tlabel} $green${tvalue} \\`,
+  tokenizeandwritetextformat(
+    `  # $${tcolor}${tlabel} $green${tvalue}`,
     context,
+    false,
   )
   writechartoend(' ', context)
 

zss/gadget/components/panel/panelitem.tsx

@@ -1,8 +1,8 @@
 import { useContext } from 'react'
 import {
   WriteTextContext,
-  tokenizeAndWriteTextFormat,
-  writeTextColorReset,
+  tokenizeandwritetextformat,
+  writetextcolorreset,
 } from 'zss/gadget/data/textformat'
 import { PANEL_ITEM } from 'zss/gadget/data/types'
 
@@ -68,11 +68,15 @@ export function PanelItem({ item, active }: PanelItemProps) {
         return <PanelItemText {...props} />
       default:
         // throw an unknown input type error ?
-        tokenizeAndWriteTextFormat(`$red unknown input type ${input}`, context)
+        tokenizeandwritetextformat(
+          `$red unknown input type ${input}`,
+          context,
+          true,
+        )
         break
     }
 
-    writeTextColorReset(context)
+    writetextcolorreset(context)
   }
   return null
 }

zss/gadget/components/panel/range.tsx

@@ -1,9 +1,9 @@
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import { MAYBE_NUMBER } from 'zss/mapping/types'
 
 import {
   useCacheWriteTextContext,
-  tokenizeAndWriteTextFormat,
+  tokenizeandwritetextformat,
   writechartoend,
 } from '../../data/textformat'
 import { UserInput, UserInputHandler } from '../userinput'
@@ -57,16 +57,17 @@ export function PanelItemRange({
   // keep stable re-renders
   useCacheWriteTextContext(context)
 
-  tokenizeAndWriteTextFormat(` $red $29 $${tcolor}${tlabel} \\`, context)
+  tokenizeandwritetextformat(` $red $29 $${tcolor}${tlabel}`, context, false)
 
   // write range viewer
   const knob = active ? (blink ? '$26' : '$27') : '$4'
   const bar = strsplice('----:----', state, 1, `$green${knob}$${tcolor}`)
     .replaceAll('-', '$7')
     .replaceAll(':', '$9')
-  tokenizeAndWriteTextFormat(
-    `$${tcolor}${labelmin}${bar}${labelmax} $green${state + 1} \\`,
+  tokenizeandwritetextformat(
+    `$${tcolor}${labelmin}${bar}${labelmax} $green${state + 1}`,
     context,
+    false,
   )
   writechartoend(' ', context)
 
@@ -75,15 +76,15 @@ export function PanelItemRange({
       const step = mods.alt ? 10 : 1
       setvalue(Math.min(max, state + step))
     },
-    [max, value],
+    [max, state, setvalue],
   )
 
   const down = useCallback<UserInputHandler>(
     (mods) => {
       const step = mods.alt ? 10 : 1
       setvalue(Math.max(min, state - step))
     },
-    [min, value],
+    [min, state, setvalue],
   )
 
   return <>{active && <UserInput MOVE_LEFT={down} MOVE_RIGHT={up} />}</>

zss/gadget/components/panel/select.tsx

@@ -1,9 +1,9 @@
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import { MAYBE_NUMBER } from 'zss/mapping/types'
 
 import {
   useCacheWriteTextContext,
-  tokenizeAndWriteTextFormat,
+  tokenizeandwritetextformat,
   writechartoend,
 } from '../../data/textformat'
 import { UserInput, UserInputHandler } from '../userinput'
@@ -24,46 +24,48 @@ export function PanelItemSelect({
   const max = values.length - 1
 
   // state
-  const [value, setValue] = useSharedValue<MAYBE_NUMBER>(chip, target)
+  const [value, setvalue] = useSharedValue<MAYBE_NUMBER>(chip, target)
   const state = value ?? 0
 
   const blink = useBlink()
 
+  // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
   const tvalue = `${values[state]}`
   const tlabel = label.trim()
   const tcolor = inputcolor(active)
 
   // keep stable re-renders
   useCacheWriteTextContext(context)
 
-  tokenizeAndWriteTextFormat(` $dkred ? $${tcolor}${tlabel} \\`, context)
+  tokenizeandwritetextformat(` $dkred ? $${tcolor}${tlabel}`, context, false)
 
   // write range viewer
   const knob = active ? (blink ? '$26' : '$27') : '/'
-  tokenizeAndWriteTextFormat(
-    `${state + 1}$green${knob}$${tcolor}${max + 1} \\`,
+  tokenizeandwritetextformat(
+    `${state + 1}$green${knob}$${tcolor}${max + 1}`,
     context,
+    false,
   )
 
   // write value
-  tokenizeAndWriteTextFormat(`$green${tvalue} \\`, context)
+  tokenizeandwritetextformat(`$green${tvalue}`, context, false)
 
   writechartoend(' ', context)
 
   const up = useCallback<UserInputHandler>(
     (mods) => {
       const step = mods.alt ? 10 : 1
-      setValue(Math.min(max, state + step))
+      setvalue(Math.min(max, state + step))
     },
-    [max, value],
+    [max, state, setvalue],
   )
 
   const down = useCallback<UserInputHandler>(
     (mods) => {
       const step = mods.alt ? 10 : 1
-      setValue(Math.max(min, state - step))
+      setvalue(Math.max(min, state - step))
     },
-    [min, value],
+    [min, state, setvalue],
   )
 
   return <>{active && <UserInput MOVE_LEFT={down} MOVE_RIGHT={up} />}</>

zss/gadget/components/panel/text.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import {
   useCacheWriteTextContext,
-  tokenizeAndWriteTextFormat,
+  tokenizeandwritetextformat,
   writechartoend,
   applycolortoindexes,
   applystrtoindex,
@@ -40,16 +40,17 @@ export function PanelItemText({
   useCacheWriteTextContext(context)
 
   // prefix
-  tokenizeAndWriteTextFormat(
-    `$green  $20 $${tcolor}${tlabel}$green \\`,
+  tokenizeandwritetextformat(
+    `$green  $20 $${tcolor}${tlabel}$green`,
     context,
+    false,
   )
   const tx = context.x
   const ty = context.y
   const tyw = ty * context.width
 
   // content
-  tokenizeAndWriteTextFormat(`${tvalue}\\`, context)
+  tokenizeandwritetextformat(`${tvalue}`, context, false)
   writechartoend(' ', context)
 
   // input state

zss/gadget/components/scroll.tsx

@@ -6,7 +6,7 @@ import { snap } from 'zss/mapping/number'
 
 import {
   createwritetextcontext,
-  tokenizeAndWriteTextFormat,
+  tokenizeandwritetextformat,
 } from '../data/textformat'
 import {
   COLOR,
@@ -93,7 +93,7 @@ export function Scroll({
   const title = ` ${name} `
   let context = createwritetextcontext(width - 6, 1, color, bg)
   context.measureonly = true
-  tokenizeAndWriteTextFormat(title, context)
+  tokenizeandwritetextformat(title, context, true)
 
   // center title
   const titleWidth = context.x
@@ -106,7 +106,7 @@ export function Scroll({
     rightEdge: width - 2,
     bottomEdge: 1,
   }
-  tokenizeAndWriteTextFormat(title, context)
+  tokenizeandwritetextformat(title, context, true)
 
   // input cursor
   const [cursor, setCursor] = useState(0)

zss/gadget/components/tape.tsx

@@ -11,7 +11,7 @@ import {
 import {
   WRITE_TEXT_CONTEXT,
   createwritetextcontext,
-  tokenizeAndWriteTextFormat as tokenizeandwritetextformat,
+  tokenizeandwritetextformat,
   tokenizeandmeasuretextformat,
   applystrtoindex,
   applycolortoindexes,
@@ -113,10 +113,16 @@ export function TapeConsole() {
     //
     context.y -= measure?.y ?? 1
     const reset = context.y
-    tokenizeandwritetextformat(rowtext, context)
+    tokenizeandwritetextformat(rowtext, context, true)
     context.y = reset
   }
 
+  // write hint
+  const hint = 'if lost try #help'
+  context.x = width - hint.length - 1
+  context.y = height - 2
+  tokenizeandwritetextformat(`$dkcyan${hint}`, context, true)
+
   // input & selection
   const visiblerange = width - 3
   const inputindex = (height - 1) * width + 1
@@ -184,7 +190,7 @@ export function TapeConsole() {
   function trackselection(index: number | undefined) {
     if (ispresent(index)) {
       if (!ispresent(tapeinput.selection)) {
-        tapeinputstate.selection = clamp(index, 0, inputstate.length - 1)
+        tapeinputstate.selection = clamp(index, 0, inputstate.length)
       }
     } else {
       tapeinputstate.selection = undefined