Paragraph stylehints use _par CSS classes, rather than a div selector

Some other small fixes too

Author: curiousdannii

src/common/protocol.ts

@@ -468,14 +468,14 @@ export interface WindowUpdate {
 /** CSS Properties
  *
  * CSS property names and values, with a few special property:
- * - `monospace`: sets a run to be monospaced, but adding class `monospace` to the `span`. Should only be used for `span`s, may misbehave if set on a `div`.
+ * - `monospace`: sets a run to be monospaced, by adding the class `monospace` to the `span`. Should only be used for `span`s, may misbehave if set on a `div`.
  * - `reverse`: enables reverse mode. If you provide colours then do not pre-reverse them.
  *   Ex: `background-color: #FFF, color: #000, reverse: 1` will be displayed as white text on a black background
  */
 export type CSSProperties = Record<string, string | number>
 
 /** CSS styles
- * Keys will usually be for Glk styles, ex: `div.Style_header` or `span.Style_user1`
+ * Keys will usually be for Glk styles, ex: `.Style_header_par` or `.Style_user1`
  * But they can be anything else. Use a blank string to target the window itself.
 */
 export type WindowStyles = Record<string, CSSProperties>

src/glkapi/glkapi.ts

@@ -3,7 +3,7 @@
 GlkApi
 ======
 
-Copyright (c) 2023 Dannii Willis
+Copyright (c) 2024 Dannii Willis
 MIT licenced
 https://github.com/curiousdannii/asyncglk
 
@@ -25,7 +25,7 @@ import {evtype_Arrange, evtype_CharInput, evtype_Hyperlink, evtype_LineInput, ev
 import {FileRef} from './filerefs.js'
 import * as Interface from './interface.js'
 import {DidNotReturn, GlkArray, GlkApiOptions, GlkByteArray, GlkSchannel, GlkWordArray, RefBoxArg, RefStructArg, RefStructValue} from './interface.js'
-import {CSS_STYLE_PROPERTIES, FILE_MODES, FILE_TYPES, IMAGE_ALIGNMENTS, KEY_NAMES_TO_CODES, STYLE_NAMES, TERMINATOR_KEYS, TERMINATOR_KEYS_TO_CODES} from './lib_constants.js'
+import {CSS_STYLE_PROPERTIES, FILE_MODES, FILE_TYPES, IMAGE_ALIGNMENTS, KEY_NAMES_TO_CODES, MAX_LATIN1, QUESTION_MARK, STYLE_NAMES, TERMINATOR_KEYS, TERMINATOR_KEYS_TO_CODES} from './lib_constants.js'
 import {ArrayBackedStream, FileStream, NullStream, Stream} from './streams.js'
 import {BlankWindow, BufferWindow, GraphicsWindow, GridWindow, PairWindow, TextWindow, Window, WindowBox} from './windows.js'
 
@@ -525,7 +525,7 @@ export class AsyncGlk implements Interface.GlkApi {
 
         switch (sel) {
             case gestalt_Version:
-                return 0x00000704
+                return 0x00000705
             case gestalt_CharInput:
                 // Known special keys can be returned
                 if (val <= keycode_Left && val >= keycode_Func12) {
@@ -552,6 +552,7 @@ export class AsyncGlk implements Interface.GlkApi {
             case gestalt_LineTerminatorKey:
                 return +(val === keycode_Escape || (val >= keycode_Func12 && val <= keycode_Func1))
             // These are dependent on what GlkOte tells us it supports
+            // TODO: check all of these
             case gestalt_DrawImage:
                 return +((val === wintype_Graphics || val === wintype_TextBuffer) && this.support.includes('graphics'))
             case gestalt_GarglkText:
@@ -918,14 +919,16 @@ export class AsyncGlk implements Interface.GlkApi {
         }
     }
 
-    glk_set_terminators_line_event(win: Window, keycodes: GlkArray) {
+    glk_set_terminators_line_event(win: Window, keycodes: GlkArray | null) {
         if (!win) {
             throw new Error('Invalid Window')
         }
         const terminators: TerminatorCode[] = []
-        for (const code of keycodes) {
-            if (TERMINATOR_KEYS[code]) {
-                terminators.push(TERMINATOR_KEYS[code])
+        if (keycodes) {
+            for (const code of keycodes) {
+                if (TERMINATOR_KEYS[code]) {
+                    terminators.push(TERMINATOR_KEYS[code])
+                }
             }
         }
         if (terminators.length) {
@@ -1023,7 +1026,7 @@ export class AsyncGlk implements Interface.GlkApi {
     }
 
     glk_stylehint_clear(wintype: number, style: number, hint: number) {
-        const selector = `${hint <= stylehint_Justification ? 'div' : 'span'}.Style_${STYLE_NAMES[style]}`
+        const selector = `.Style_${STYLE_NAMES[style]}${hint <= stylehint_Justification ? '_par' : ''}`
         function remove_style(styles: WindowStyles) {
             if (styles[selector]) {
                 delete styles[selector][CSS_STYLE_PROPERTIES[hint]]
@@ -1056,7 +1059,7 @@ export class AsyncGlk implements Interface.GlkApi {
         }
 
         const stylehints = wintype === wintype_TextBuffer ? this.stylehints.buffer : this.stylehints.grid
-        const selector = `${hint <= stylehint_Justification ? 'div' : 'span'}.Style_${STYLE_NAMES[style]}`
+        const selector = `.Style_${STYLE_NAMES[style]}${hint <= stylehint_Justification ? '_par' : ''}`
         const justifications = ['left', 'justify', 'center', 'right']
         const weights = ['lighter', 'normal', 'bold']
         let stylevalue: string | number | undefined
@@ -1573,8 +1576,8 @@ export class AsyncGlk implements Interface.GlkApi {
                 type = evtype_CharInput
                 if (ev.value.length === 1) {
                     val1 = ev.value.codePointAt(0)!
-                    if (!(win as TextWindow).uni_input) {
-                        val1 = val1 & 0xFF
+                    if (!(win as TextWindow).uni_input && val1 > MAX_LATIN1) {
+                        val1 = QUESTION_MARK
                     }
                 }
                 else {
@@ -1585,6 +1588,7 @@ export class AsyncGlk implements Interface.GlkApi {
                 if (!win?.input.hyperlink) {
                     return
                 }
+                delete win.input.hyperlink
                 type = evtype_Hyperlink
                 val1 = ev.value
                 break
@@ -1600,6 +1604,7 @@ export class AsyncGlk implements Interface.GlkApi {
                 if (!win?.input.mouse) {
                     return
                 }
+                delete win.input.mouse
                 type = evtype_MouseInput
                 val1 = ev.x
                 val2 = ev.y

src/glkote/web/styles.css

@@ -3,49 +3,49 @@
 GlkOte Glk styles
 ====================
 
-Copyright (c) 2022 Dannii Willis
+Copyright (c) 2024 Dannii Willis
 MIT licenced
 https://github.com/curiousdannii/asyncglk
 
 */
 
-span.Style_normal {}
+.Style_normal {}
 
-span.Style_emphasized {
+.Style_emphasized {
     font-style: italic;
 }
 
-.BufferWindow span.Style_preformatted {
+.BufferWindow .Style_preformatted {
     display: inline-block;
     font-family: var(--glkote-mono-family);
     padding: 0;
 }
 
-span.Style_header {
+.Style_header {
     font-weight: bold;
 }
 
-.BufferWindow span.Style_header {
+.BufferWindow .Style_header {
     font-size: 1.13333em; /* 17px when using the default 15px buffer window text size */
 }
 
-span.Style_subheader {
+.Style_subheader {
     font-weight: bold;
 }
 
-span.Style_alert {
+.Style_alert {
     font-weight: bold;
 }
 
-span.Style_note {
+.Style_note {
     font-style: italic;
 }
 
-div.Style_blockquote {
+.Style_blockquote_par {
     margin: 0 2em;
 }
 
-span.Style_input {
+.Style_input {
     font-weight: bold;
     color: var(--glkote-input-fg);
 }

src/glkote/web/windows.css

@@ -59,7 +59,7 @@ https://github.com/curiousdannii/asyncglk
     padding: 0;
 }
 
-.BufferLine span.Style_preformatted.proportional {
+.BufferLine .Style_preformatted.proportional {
     display: inline;
     font-family: var(--glkote-prop-family);
     padding: var(--glkote-prop-half-leading) 0;

src/glkote/web/windows.ts

@@ -206,13 +206,13 @@ abstract class TextualWindow extends WindowBase {
 
             // Copy styles for the <input>
             // May not play nice with reverse
-            if (styles[`${windowid} span.Style_input`]) {
-                styles[`${windowid} .LineInput`] = styles[`${windowid} span.Style_input`]
+            if (styles[`${windowid} .Style_input`]) {
+                styles[`${windowid} .LineInput`] = styles[`${windowid} .Style_input`]
             }
         }
 
         // Set window background colour, for normal and reverse mode
-        const normal_styles = styles[`${windowid} span.Style_normal`]
+        const normal_styles = styles[`${windowid} .Style_normal`]
         const bg = this.bg || normal_styles?.['background-color']
         const fg = this.fg || normal_styles?.color
         if (bg || fg) {
@@ -241,7 +241,7 @@ abstract class TextualWindow extends WindowBase {
     create_text_run(run: protocol.TextRun, split_words?: boolean): JQuery<HTMLElement> {
         const run_style = run.style
         // Is this run or this style monospace mode?
-        const monospace_val = run.css_styles?.monospace ?? this.styles?.[`span.Style_${run_style}`]?.monospace
+        const monospace_val = run.css_styles?.monospace ?? this.styles?.[`.Style_${run_style}`]?.monospace
         let monospace_class = ''
         // Only add the class if we're changing the default font-family for this style
         if (typeof monospace_val !== 'undefined') {
@@ -255,7 +255,7 @@ abstract class TextualWindow extends WindowBase {
             }
         }
         // Is this run or this style reverse mode?
-        const reverse = run.css_styles?.reverse ?? this.styles?.[`span.Style_${run_style}`]?.reverse
+        const reverse = run.css_styles?.reverse ?? this.styles?.[`.Style_${run_style}`]?.reverse
         // Create a template span and apply classes and styles
         const el = create('span', `Style_${run_style}${reverse ? ' reverse' : ''}${monospace_class}`)
         if (run.css_styles) {
@@ -461,7 +461,7 @@ export class BufferWindow extends TextualWindow {
                 }
                 if (!line_has_style) {
                     line_has_style = 1
-                    divel.addClass(`Style_${run.style}`)
+                    divel.addClass(`Style_${run.style}_par`)
                 }
                 divel.append(this.create_text_run(run, line_index === data.text.length ? true : undefined))
                 // Store the last text run for setting styles in the input

tests/advent.ulx

@@ -0,0 +1,63 @@
+** game: advent.ulx
+** remformat: yes
+
+* prologue
+
+ADVENTURE
+
+> east
+> get all
+set of keys: Taken.
+tasty food: Taken.
+brass lantern: Taken.
+small bottle: Taken.
+
+> west
+> south
+> south
+> south
+> unlock grate with keys
+> open it
+> down
+> west
+> west
+> turn on lamp
+A note on the wall says, "Magic word XYZZY."
+
+> xyzzy
+Inside Building
+
+* save/restore
+
+>{include} prologue
+
+> save
+>{fileref_prompt} adventtest
+Ok.
+
+> restart
+> yes
+At End Of Road
+
+> restore
+>{fileref_prompt} adventtest
+Ok.
+
+> look
+Inside Building
+
+* menu
+
+> look
+> help
+>{char} return
+I know of places, actions, and things.
+
+>{char} space
+>{char} n
+>{char} return
+Perhaps the first adventurer was a mulatto slave named Stephen Bishop
+
+>{char} space
+>{char} q
+At End Of Road

tests/advent.ulx.regtest

@@ -0,0 +1,36 @@
+** game: inputfeaturetest.ulx
+** remformat: yes
+
+# Not a complete test, but it does check the functions can be run
+
+* basic
+
+InputLineFeatureTest
+
+> noecho
+The library has been set to no-echo mode for line input.
+
+> look
+look
+A voice booooms out: Welcome to the test chamber.
+
+> echo
+The library has been set to echo mode for line input (the normal behavior).
+
+> interrupt
+Your input will be interrupted in two seconds by a timer event.
+
+>{timer}
+The timer went off! (The command line was empty, though. You should see an empty prompt on the line above. Try typing something during those two seconds.)
+
+> terminate
+There are now 13 special line input terminator keys.
+
+> even
+There are now 6 special line input terminator keys.
+
+> odd
+There are now 6 special line input terminator keys.
+
+> none
+There are now 0 special line input terminator keys.