feat: say each tip once and let pictures do the rest

Several screens repeated what the player had already seen. On touch,
wave 1 showed MOVE and AIM + SHOOT in the center while the ghost sticks
below said MOVE and AIM + FIRE, and the right stick's label sat on the
shop stall on a landscape phone. The stall said BUMP THE STALL TO SHOP,
CLOSED DURING WAVES, or OPENS AFTER WAVE 1 every time the player walked
by. Every endless break said THEY GOT BEEFIER with a health line, and the
character picker opened with a line of text every time.

- On touch the ghost sticks alone teach moving and shooting; the center
  hints for them show only with a keyboard and mouse.
- Firing is SHOOT everywhere in the hints: the stick label is now
  AIM + SHOOT.
- The ghost stick labels sit above their circles, out on the floor, so
  they never cover the stall or the gun slots.
- The stall's words show until the player has shopped once (the saved
  shop lesson). After that its SHOP or CLOSED sign and the bobbing coin
  do the talking.
- Only the first endless wave of a run says they got beefier. Later
  breaks show the wave number beside a green heart with a plus.
- The character picker's blurb is now for screen readers only.

Author: Tanner-Scadden

src/characterView.ts

@@ -315,8 +315,7 @@ const rowsView = (
 // DIALOG
 
 const CHARACTER_TITLE = 'Character'
-const CHARACTER_BLURB =
-  'Pick your look. It sticks around until you close the game.'
+const CHARACTER_BLURB = 'Pick your look.'
 
 const panelView = (
   picker: CharacterPicker,
@@ -328,7 +327,7 @@ const panelView = (
     [h.Class('look-header')],
     [
       h.h2([...title, h.Class('look-title')], [CHARACTER_TITLE]),
-      h.p([...description, h.Class('look-blurb')], [CHARACTER_BLURB]),
+      h.p([...description, h.Class('sr-only')], [CHARACTER_BLURB]),
     ],
   ),
   h.div(

src/endless.story.test.ts

@@ -23,6 +23,7 @@ import {
   Trap,
   initialModel,
 } from './model'
+import { endlessBannerOf } from './screens'
 import { scoreOf } from './stats'
 import { bulletInto, press, scoring, tick, zombieAt } from './testing'
 import {
@@ -392,6 +393,23 @@ describe('keep going from Victory', () => {
     )
   })
 
+  test('only the first endless wave of a run says they got beefier, later ones show a heart pip', () => {
+    story(
+      update,
+      given(victorious),
+      ...waitOutGrace(),
+      message(Message.ClickedKeepGoingButton()),
+      model(({ phase }) => {
+        expect(Option.map(preparationWave(phase), endlessBannerOf)).toEqual(
+          Option.some('Explained'),
+        )
+      }),
+    )
+    expect(endlessBannerOf(FINAL_WAVE)).toBe('None')
+    expect(endlessBannerOf(FINAL_WAVE + 2)).toBe('Pip')
+    expect(endlessBannerOf(FINAL_WAVE + 7)).toBe('Pip')
+  })
+
   test('Enter on Victory still starts a fresh campaign', () => {
     story(
       update,

src/onboarding.story.test.ts

@@ -449,7 +449,9 @@ describe('tutorial hints', () => {
       releaseFire,
       ...ticks(SHOWN_TICKS, TICK_MS),
       model(current => {
-        expect(hintIds(current)).toEqual(['Move', 'Fire'])
+        expect(isLearned(current.lessons.move)).toBe(false)
+        expect(isLearned(current.lessons.fire)).toBe(false)
+        expect(shownGhostSticks(current)).toEqual(['Move', 'Aim'])
       }),
     )
   })

src/onboarding.ts

@@ -431,20 +431,25 @@ const isTrapHintFor = (model: Model, kind: 'Barricade' | 'Turret'): boolean =>
   TrapHint.isAnyOf(['Showing'])(model.trapHint) &&
   Option.contains(maybeSelectedKind(model), kind)
 
+// NOTE: on touch the ghost sticks, drawn where the thumbs go, teach moving
+// and shooting, so the center hints for them show only with a keyboard.
+const isFirstWaveOnKeyboard = (model: Model): boolean =>
+  isFirstWave(model.phase) && model.lastDevice === 'KeyboardMouse'
+
 const HINT_RULES: ReadonlyArray<HintRule> = [
   {
     id: 'Move',
     maybeAgeMs: model =>
       ageWhen(
-        isFirstWave(model.phase) && isPending(model.lessons.move),
+        isFirstWaveOnKeyboard(model) && isPending(model.lessons.move),
         model.elapsedMs,
       ),
   },
   {
     id: 'Fire',
     maybeAgeMs: model =>
       ageWhen(
-        isFirstWave(model.phase) && isPending(model.lessons.fire),
+        isFirstWaveOnKeyboard(model) && isPending(model.lessons.fire),
         model.elapsedMs,
       ),
   },

src/ready.story.test.ts

@@ -24,6 +24,7 @@ import {
   LESSON_MIN_SHOWN_MS,
   hintIcons,
   hintWords,
+  shownGhostSticks,
   shownHints,
 } from './onboarding'
 import { accuracyPercent, totalKills } from './stats'
@@ -172,7 +173,7 @@ describe('onboarding hints', () => {
     )
   })
 
-  test('touch hints picture both thumbs and a tap on START WAVE', () => {
+  test('on touch the ghost sticks teach moving and shooting, then a tap on START WAVE', () => {
     story(
       update,
       given(readyModel),
@@ -181,10 +182,8 @@ describe('onboarding hints', () => {
       message(Message.ClickedCampaignButton()),
       model(current => {
         expect(current.lastDevice).toBe('Touch')
-        expect(hintTexts(current)).toEqual([
-          'MoveStick MOVE',
-          'AimStick AIM + SHOOT',
-        ])
+        expect(shownGhostSticks(current)).toEqual(['Move', 'Aim'])
+        expect(hintTexts(current)).toEqual([])
       }),
       touchDown(2, 100, 200),
       message(
@@ -194,7 +193,8 @@ describe('onboarding hints', () => {
       message(Message.ReleasedPointer({ pointerId: 2 })),
       ...ticks(SHOWN_TICKS, TICK_MS),
       model(current => {
-        expect(hintTexts(current)).toEqual(['AimStick AIM + SHOOT'])
+        expect(shownGhostSticks(current)).toEqual(['Aim'])
+        expect(hintTexts(current)).toEqual([])
       }),
       touchDown(3, 700, 200),
       message(

src/screens.ts

@@ -315,10 +315,7 @@ const BEEFIER = bakeText('THEY GOT BEEFIER', 'Fresh')
 const healthBoostText = (wave: number): string =>
   `ZOMBIES HAVE +${Math.round((hpScaleFor(wave) - 1) * 100)}% HEALTH`
 
-const HEALTH_BOOSTS: ReadonlyArray<BakedText> = Array.makeBy(
-  BAKED_WAVES + 1,
-  wave => bakeText(healthBoostText(wave), 'Prompt'),
-)
+const FIRST_ENDLESS_HEALTH = bakeText(healthBoostText(FINAL_WAVE + 1), 'Prompt')
 
 type KindBanner = Readonly<{ title: BakedText; tagline: BakedText }>
 
@@ -351,12 +348,19 @@ const bannerAt = (
   }),
 ]
 
-const newKindBanner = (
+const bakedFor = (
+  list: ReadonlyArray<BakedText>,
+  index: number,
+  fallback: () => BakedText,
+): BakedText => Option.getOrElse(Array.get(list, index), fallback)
+
+const iconBanner = (
   band: HintBand,
-  kind: ZombieKind,
+  icon: Sprite,
+  title: BakedText,
+  maybeTagline: Option.Option<BakedText>,
   shownMs: number,
 ): ReadonlyArray<Canvas.Shape> => {
-  const { title, tagline } = KIND_BANNERS[kind]
   const hop =
     shownMs < NEW_KIND_HOP_MS
       ? 1 + 0.5 * Math.sin((Math.PI * shownMs) / NEW_KIND_HOP_MS)
@@ -371,34 +375,80 @@ const newKindBanner = (
         y: BAND_TOP[band] + 5,
       },
       scale: { x: scale, y: scale },
-      shapes: ZOMBIE_SPRITES[kind].icon,
+      shapes: icon,
     }),
     placeBaked(title, {
       x: titleX,
       y: BAND_TOP[band],
       align: 'Center',
       scale: TITLE_SCALE,
     }),
-    centered(tagline, BAND_TOP[band] + SUBTITLE_OFFSET),
+    ...Option.match(maybeTagline, {
+      onNone: () => [],
+      onSome: tagline => [centered(tagline, BAND_TOP[band] + SUBTITLE_OFFSET)],
+    }),
   ]
 }
 
+const newKindBanner = (
+  band: HintBand,
+  kind: ZombieKind,
+  shownMs: number,
+): ReadonlyArray<Canvas.Shape> => {
+  const { title, tagline } = KIND_BANNERS[kind]
+  return iconBanner(
+    band,
+    ZOMBIE_SPRITES[kind].icon,
+    title,
+    Option.some(tagline),
+    shownMs,
+  )
+}
+
+// NOTE: the first endless wave of a run says the zombies got tougher. Every
+// later one shows only its number beside the beefy heart.
+export type EndlessBanner = 'None' | 'Explained' | 'Pip'
+
+export const endlessBannerOf = (wave: number): EndlessBanner => {
+  const depth = endlessDepth(wave)
+  if (depth === 0) {
+    return 'None'
+  } else if (depth === 1) {
+    return 'Explained'
+  } else {
+    return 'Pip'
+  }
+}
+
+const BEEFY_HEART: Sprite = spriteShapes(
+  ['.GG.GG.', 'GWGGGGG', 'GGGYGGG', 'GGYYYGG', '.GGYGG.', '..GGG..', '...G...'],
+  { G: '#6fae3f', W: '#c4ef9a', Y: '#ffe066' },
+)
+
 const beefierBanner = (
   band: HintBand,
   wave: number,
   shownMs: number,
-): ReadonlyArray<Canvas.Shape> =>
-  endlessDepth(wave) > 0 && shownMs < NEW_KIND_BANNER_MS
-    ? bannerAt(
-        band,
-        BEEFIER,
-        Option.some(
-          Option.getOrElse(Array.get(HEALTH_BOOSTS, wave), () =>
-            bakeText(healthBoostText(wave), 'Prompt'),
-          ),
-        ),
-      )
-    : []
+): ReadonlyArray<Canvas.Shape> => {
+  if (shownMs >= NEW_KIND_BANNER_MS) {
+    return []
+  }
+
+  const banner = endlessBannerOf(wave)
+  if (banner === 'Explained') {
+    return bannerAt(band, BEEFIER, Option.some(FIRST_ENDLESS_HEALTH))
+  } else if (banner === 'Pip') {
+    return iconBanner(
+      band,
+      BEEFY_HEART,
+      bakedFor(WAVE_TITLES, wave, () => bakeText(`WAVE ${wave}`, 'Defeat')),
+      Option.none(),
+      shownMs,
+    )
+  } else {
+    return []
+  }
+}
 
 const debutBanner = (
   band: HintBand,
@@ -411,12 +461,6 @@ const debutBanner = (
       shownMs < NEW_KIND_BANNER_MS ? newKindBanner(band, kind, shownMs) : [],
   })
 
-const bakedFor = (
-  list: ReadonlyArray<BakedText>,
-  index: number,
-  fallback: () => BakedText,
-): BakedText => Option.getOrElse(Array.get(list, index), fallback)
-
 const preparationBanner = (
   model: Model,
   wave: number,

src/shop.story.test.ts

@@ -25,6 +25,7 @@ import {
   type Bullet,
   type CarriedGun,
   GameEvent,
+  Lesson,
   type Model,
   Phase,
   Pierce,
@@ -912,6 +913,40 @@ describe('the stall entrance', () => {
       }),
     )
   })
+
+  test('once the player has shopped, the stall shows no words, only its sign and beacon', () => {
+    const shopped = modifyFields(readyModel, {
+      lessons: lessons =>
+        modifyFields(lessons, { shop: () => Lesson.Learned({ atMs: 0 }) }),
+    })
+    const near = (phase: Phase): Model =>
+      at(modifyFields(shopped, { phase: () => phase }), 225, 160)
+    story(
+      update,
+      given(near(preparing(2))),
+      tick(FRAME_MS),
+      model(current => {
+        expect(ShopState.guards.Away(current.shop)).toBe(true)
+        expect(stallPrompt(current)).toBe('None')
+      }),
+    )
+    story(
+      update,
+      given(near(fighting(3))),
+      tick(FRAME_MS),
+      model(current => {
+        expect(stallPrompt(current)).toBe('None')
+      }),
+    )
+    story(
+      update,
+      given(near(preparing(1))),
+      tick(FRAME_MS),
+      model(current => {
+        expect(stallPrompt(current)).toBe('None')
+      }),
+    )
+  })
 })
 
 describe('shop categories', () => {

src/shop.ts

@@ -18,6 +18,7 @@ import {
 import {
   Arsenal,
   type CarriedGun,
+  Lesson,
   type Model,
   Phase,
   type Player,
@@ -980,9 +981,15 @@ export type StallPrompt =
 const closedPrompt = (phase: Phase): StallPrompt =>
   Phase.isAnyOf(['Wave'])(phase) ? 'ClosedDuringWave' : 'ClosedUntilFirstClear'
 
+// NOTE: the words teach the stall once. After the player has shopped, its
+// sign and the bobbing coin over it say the same without words.
 export const stallPrompt = (model: Model): StallPrompt => {
-  const { phase, player, shop } = model
-  if (!Phase.isAnyOf(['Preparation', 'Wave'])(phase) || !isNearStall(player)) {
+  const { phase, player, shop, lessons } = model
+  if (
+    !Phase.isAnyOf(['Preparation', 'Wave'])(phase) ||
+    !isNearStall(player) ||
+    Lesson.isAnyOf(['Learned'])(lessons.shop)
+  ) {
     return 'None'
   } else if (!isShopOpenFor(phase)) {
     return closedPrompt(phase)

src/styles.css

@@ -511,12 +511,6 @@ body {
   font: bold 18px monospace;
 }
 
-.look-blurb {
-  margin: 4px 0 0;
-  color: #b8c2b0;
-  font-size: 12px;
-}
-
 .look-body {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -664,10 +658,6 @@ body {
     font-size: 16px;
   }
 
-  .look-blurb {
-    display: none;
-  }
-
   .look-body {
     gap: 12px;
   }
@@ -784,10 +774,12 @@ body {
   background: rgba(255, 224, 102, 0.5);
 }
 
+/* NOTE: the label sits above its ghost, out on the floor, so on a landscape
+   phone it never covers the stall or the gun slots in the bottom corners. */
 .ghost-stick-label {
   position: absolute;
-  top: 100%;
-  margin-top: 6px;
+  bottom: 100%;
+  margin-bottom: 6px;
   padding: 2px 6px;
   border-radius: 4px;
   background: rgba(8, 10, 12, 0.7);
@@ -1229,10 +1221,6 @@ body {
     padding: 12px;
   }
 
-  .look-blurb {
-    display: none;
-  }
-
   .look-body {
     grid-template-columns: 1fr;
     gap: 8px;