Source ↔ Annotation Viewer (Both Editable)

Source code

Editable • Highlight driven by annotation caret →

Annotation

Caret selects block & highlights source

Annotation DSL (caret determines highlighted range)

(doctype
  [1 1]
  (type decl)
  (desc "HTML5 document type declaration")
  (depends none)
)

(Html
  [2 178]
  (type element)
  (desc "root HTML element containing head and body for the Dungeon MMO MVP client UI")
  (depends Head Body)
)

(Head
  [3 50]
  (type element)
  (desc "metadata, title, and inline CSS styles for the client")
  (depends Style)
)

(Style
  [6 49]
  (type css-block)
  (desc "layout and visual styles for page, grid, players, log, and buttons")
  (depends none)
)

(Body
  [51 177]
  (type element)
  (desc "visible UI: title, instructions, grid container, movement controls, status, log, and script")
  (depends Grid Controls Status LogView Script)
)

(Grid
  [55 55]
  (type element)
  (desc "empty grid container; cells are created dynamically by JS")
  (depends Script)
)

(Controls
  [57 62]
  (type element)
  (desc "arrow buttons wired to sendMove(dx, dy) to queue player movement")
  (depends sendMove)
)

(Status
  [64 65]
  (type element)
  (desc "displays current tick count and this client's player ID")
  (depends render connect)
)

(LogView
  [67 67]
  (type element)
  (desc "scrollable log area for connection and action messages")
  (depends log-fn)
)

(Script
  [69 176]
  (type script)
  (desc "client-side logic: websocket connection, grid rendering, action sending, and logging")
  (depends JSState GridInit connect log-fn render sendMove)
)

(JSState
  [69 80]
  (type block)
  (desc "DOM references, websocket handle, client ID, and shared client-side game state")
  (depends none)
)

(GridInit
  [82 94]
  (type block)
  (desc "initializes 10x10 grid cells, attaches them to #grid, and stores cell references")
  (depends JSState)
)

(connect
  [96 123]
  (type func)
  (desc "opens websocket to /ws, handles welcome/state messages, updates state and triggers render")
  (depends JSState render log-fn)
)

(log-fn
  [125 129]
  (type func)
  (desc "appends timestamped messages to the log panel")
  (depends JSState)
)

(render
  [131 156]
  (type func)
  (desc "renders current state: updates tick text, clears grid, and draws players with me/other classes")
  (depends JSState GridInit)
)

(sendMove
  [158 170]
  (type func)
  (desc "sends a move action over websocket and logs the queued move")
  (depends JSState log-fn)
)

(Bindings
  [172 175]
  (type block)
  (desc "exposes sendMove on window for button onclicks and initiates websocket connection on page load")
  (depends sendMove connect)
)

No block selected.