better feedback

zss/gadget/touchui/component.tsx

@@ -68,15 +68,15 @@ export function TouchUI({ width, height, islandscape }: TouchUIProps) {
         <ShadeBoxDither
           width={width}
           height={height}
-          top={5}
+          top={3}
           left={0}
           right={5}
           bottom={height - 6}
         />
         <ShadeBoxDither
           width={width}
           height={height}
-          top={5}
+          top={3}
           left={width - 6}
           right={width - 1}
           bottom={height - 6}

zss/gadget/touchui/controls.tsx

@@ -1,7 +1,13 @@
+import { degToRad, radToDeg } from 'maath/misc'
+import { Vector2 } from 'three'
+import { snap } from 'zss/mapping/number'
 import {
   tokenizeandwritetextformat,
   WRITE_TEXT_CONTEXT,
 } from 'zss/words/textformat'
+import { COLOR } from 'zss/words/types'
+
+import { resetTiles } from '../hooks'
 
 type ControlsProps = {
   context: WRITE_TEXT_CONTEXT
@@ -16,13 +22,27 @@ type ControlsProps = {
   }
 }
 
+const motion = new Vector2()
+
+const decochars = [2, 1, 176, 5, 153, 177, 254]
+
 export function Controls({
   context,
   width,
   height,
   islandscape,
   drawstick,
 }: ControlsProps) {
+  resetTiles(context, 0, COLOR.WHITE, COLOR.ONCLEAR)
+  // islandscape ? COLOR.ONCLEAR : COLOR.PURPLE,
+  if (!islandscape) {
+    const size = width * height
+    for (let i = 4 * width; i < size; ++i) {
+      context.char[i] = decochars[i % decochars.length]
+      context.color[i] = COLOR.DKPURPLE
+    }
+  }
+
   // draw action button targets
   context.y = 3
   for (let i = 0; i < 3; ++i) {
@@ -41,17 +61,31 @@ export function Controls({
 
   // draw active stick
   if (drawstick.startx !== -1) {
-    console.info(drawstick)
     context.active.leftedge = 0
-    context.x = context.active.leftedge = 3 // drawstick.startx - 4
-    context.y = 3 //drawstick.starty - 4
+    context.x = context.active.leftedge = drawstick.startx - 4
+    context.y = drawstick.starty - 3
+    // 8 x 5
     for (let i = 0; i < 5; ++i) {
       tokenizeandwritetextformat(
         `$BLUE$176$176$176$176$176$176$176$176\n`,
         context,
         false,
       )
     }
+    // draw active thumb
+    // calc angle
+    motion.set(
+      drawstick.tipx - drawstick.startx,
+      drawstick.tipy - drawstick.starty,
+    )
+    const snapdir = degToRad(snap(radToDeg(motion.angle()), 45))
+    context.x = context.active.leftedge =
+      Math.round(drawstick.startx + Math.cos(snapdir) * 4) - 2
+    context.y = Math.round(drawstick.starty + Math.sin(snapdir) * 3) - 2
+    // 3 x 3
+    for (let i = 0; i < 3; ++i) {
+      tokenizeandwritetextformat(`$BLUE$177$177$177$177\n`, context, false)
+    }
   }
 
   // draw labels in portrait

zss/gadget/touchui/surface.tsx

@@ -32,12 +32,13 @@ const motion = new Vector2()
 const point = new Vector3()
 
 function coords(width: number, height: number) {
+  const cw = RUNTIME.DRAW_CHAR_WIDTH()
+  const ch = RUNTIME.DRAW_CHAR_HEIGHT()
+  const px = point.x + cw * 0.5
+  const py = point.y + ch * 0.5
   return {
-    cx:
-      Math.floor(width * 0.5) + Math.floor(point.x / RUNTIME.DRAW_CHAR_WIDTH()),
-    cy:
-      Math.floor(height * 0.5) +
-      Math.floor(point.y / RUNTIME.DRAW_CHAR_HEIGHT()),
+    cx: Math.floor(width * 0.5) + Math.floor(px / cw),
+    cy: Math.floor(height * 0.5) + Math.floor(py / ch),
   }
 }
 
@@ -86,6 +87,13 @@ export function Surface({ width, height, player, onDrawStick }: SurfaceProps) {
     movestick.tipx = -1
     movestick.tipy = -1
     movestick.pointerId = -1
+    // update visuals
+    onDrawStick(
+      movestick.startx,
+      movestick.starty,
+      movestick.tipx,
+      movestick.tipy,
+    )
   }
 
   return (
@@ -118,7 +126,7 @@ export function Surface({ width, height, player, onDrawStick }: SurfaceProps) {
           const { cx, cy } = coords(width, height)
           // calc angle
           motion.set(movestick.startx - cx, movestick.starty - cy)
-          if (motion.length() > 6) {
+          if (movestick.tipx !== -1 || motion.length() > 3) {
             const snapdir = snap(radToDeg(motion.angle()), 45)
             // track for visuals
             movestick.tipx = cx