🕵️ FGA 02: Typewriter of the Living Dead 🐶

---

Part I — The Office of the Living Dead

The Board Was Beautiful. It Was Also Dead.

The rain had returned, hitting the Academy windows with the persistence of a frontend defect waiting for somebody to resize the browser.

Hercule Perrot stood in the investigation room.

He had made it across FGA 01 without being misplaced, duplicated or replaced by a suspiciously convenient default value.

The frontend had loaded. The backend had answered.

Detective Academy had remained open while the ranked cases stayed sealed.

A real round had carried the correct path and case through the opening comic, enforced the briefing and survived a browser refresh.

The skeleton could walk. Unfortunately, the room at the end of the journey looked like a rectangle somebody had apologised for.

No graph. No case paper. No evidence. No typewriter. Just the architectural satisfaction of knowing that it was the correct empty rectangle.

Then the design arrived. It showed a dark detective office beneath an amber lamp. A mechanical typewriter occupied the desk. A sheet of case paper rose from the carriage. Beside it waited a graph investigation panel. Brass keys represented the technologies and analytical capabilities Hercule would eventually use.

It looked excellent.

Hercule examined it carefully. Then he asked the question that ruins many beautiful interface meetings:

What happens when somebody tries to use it?

The artwork communicated the fantasy immediately. The paper would hold the case. The graph panel would reveal the network. The typewriter would become the investigation console.

But a static composition never has to display a network error. It never receives a case title twice as long as the placeholder. It never discovers that the translated button label requires seventeen additional characters. It never has to work at 200 percent browser zoom. It never needs keyboard focus. It never watches twelve graph nodes become two hundred and begin fighting over the same forty pixels.

A screenshot enjoys a sheltered existence.

Everything fits because the designer already knows what everything says.

Nothing loads late. Nothing wraps unexpectedly. Nothing is clicked by somebody using a tablet on a train.

The composition could therefore be beautiful, coherent and completely unusable without technically contradicting itself.

That was the first body on the floor.

The tempting solution was obvious:

1. Export the entire office as one enormous image.
2. Place transparent buttons over the keys.
3. Position text over the paper.
4. Mount the graph inside the dark rectangle.
5. Adjust a few coordinates.
6. Declare victory.

For one resolution, it would be magnificent. Then the browser would become twelve pixels narrower. The artwork would scale. The invisible buttons would drift.

Hercule would press Entity Resolution and activate whatever happened to be standing behind it.

Possibly the radio. Possibly an unrelated accountant in Luxembourg.

The opposite approach was equally suspicious: rebuild the whole illustration using HTML and CSS.

The desk would become a container. The typewriter would become thirty-seven nested elements. The paper would become a rotated panel with pseudo-elements and three shadows.

The result might behave perfectly. It might also resemble a banking portal that had purchased a sepia theme.

Fraud Graph Arena needed neither a poster with event listeners nor a component library wearing a fedora.

It needed a third approach.

Three Layers Enter the Office

The solution was to separate what the original illustration had combined.

The first layer contained the visual scene: office, desk, typewriter body, lamp, paper texture, graph frame, decorative shadows and objects.

The second contained real interactive regions: semantic buttons, keyboard targets, focus indicators, enabled, disabled and pending states.

The third contained dynamic content: case information, statuses, messages, graph data, translated labels, future evidence.

Each layer received its own authority.

The artwork decided how the room looked. It did not decide what a button did.

The controls decided how the player activated a capability. They did not invent whether the capability was available.

The dynamic layer projected the active investigation. It did not become the source of truth. That remained with the application.

The central rule became:

Artwork may define atmosphere and composition. It must not own behaviour, state or content.

The background provided the room. The DOM provided the controls. The application provided the truth.

Nobody was permitted to borrow another layer’s badge merely because the borders looked convenient.

---

Part II — The First Five Bodies

The Typewriter Was Too Tall

The first implementation preserved the original proportions faithfully.

The typewriter was the central object, the control surface and the strongest part of the visual metaphor. It was also enormous.

On a large monitor, it looked magnificent. On a normal laptop, it occupied enough vertical space to reduce the graph panel to something normally used for restaurant receipts.

The graph did not yet contain nodes, so the problem was easy to underestimate. An empty graph fits almost anywhere.

A real graph needs room for labels, selection states, zooming, panning, legends, warnings and enough whitespace to avoid becoming electronic spaghetti.

The question therefore changed from:

How large can the typewriter be?

to:

How large can it be after the paper and graph retain enough usable space?

The machine was reduced. It remained recognisable. The graph could breathe again.

Hercule measured the revised typewriter.

“It still occupies more of the room than its statement requires,” he said, “but at least it has stopped asking for zoning permission.”

The Paper Was Too Narrow

The paper looked authentic: tall, narrow and rising naturally from the carriage. It was also almost useless for displaying actual case information.

A short placeholder fitted.

Then we tried:

The Case of the Empty Evidence Board
Detective Academy
Active investigation
No evidence has been revealed.

The title wrapped. The metadata crowded together. A translated version would have needed either smaller text or divine intervention.

Widening the paper stole space from the graph. Shrinking the text damaged readability.

The real mistake was expecting the illustrated sheet to contain every future form of case content.

The paper could preserve the metaphor without becoming the entire application.

Its content received:

• a defined readable frame;
• independent padding;
• controlled overflow;
• clamped typography;
• priorities for constrained layouts.

The visual sheet suggested the shape of the content. It no longer dictated an impossible amount of it.

The Graph Was Suffocating

The graph panel was the quietest victim.

Three nodes fitted. Eight looked nervous. Twelve began negotiating border disputes.

The panel had been sized visually rather than functionally.

A graph is not an image inside a rectangle. It is an interactive viewport.

It needs minimum dimensions. Below those dimensions, shrinking every node and label does not create responsiveness. It creates evidence for ants.

This produced one of the most important rules in the board:

Scaling preserves an arrangement by making everything smaller. Recomposition preserves usability by changing the arrangement.

On wide screens, paper and graph could remain side by side. On constrained screens, they needed to stack or become switchable workspace views.

The visual metaphor could survive more than one composition.

The geometry was allowed to change. The investigation was not.

The Controls Appeared Beside the Machine

Temporary controls began appearing beside the typewriter.

A debug toggle. A reset button. A viewport indicator. A retry action.

Within two iterations, the detective office contained a small administrative portal growing beside the machine.

Temporary buttons have a strong survival instinct. Six months later, the board could easily have contained a beautiful mechanical typewriter surrounded by grey buttons labelled:

Reset
Refresh
Advanced
Toggle Debug
Retry Everything

The solution was to define control zones.

The application shell owned global navigation and settings. The typewriter owned investigation capabilities. The graph owned graph controls. The paper owned case-related actions.

Development controls belonged to a debug layer unavailable in production.

Controls were placed according to responsibility, not according to the first convenient gap in the furniture.

The same rule governing backend modules was now applied to the desk.

The Logos Started Testifying

The technology keys originally used familiar logos.

This looked good and explained the engineering story. It did not necessarily explain the player action.

A player might want to:

Compare possible identities

The implementation might use Zingg. But the game mechanic was not “use Zingg.”

Zingg was one provider behind the capability. The key therefore received a semantic identity:

COMPARE_IDENTITIES

Its player-facing label could change. Its icon could change. Its implementation could eventually change. The action remained stable.

The player interacts with capabilities. The article explains the technologies implementing them.

The logos remained as secondary details. They simply stopped shouting.

What the Bodies Had in Common

The failures appeared visual:

• typewriter too large;
• paper too narrow;
• graph too small;
• controls misplaced;
• logos overpowering the interface.

They all came from the same assumption. The original composition had been treated as a collection of dimensions instead of a collection of priorities.

The real hierarchy was:

1. The player must understand that they are investigating a case.
2. The active case must remain identifiable.
3. Paper and graph must remain usable.
4. Actions must remain understandable and reachable.
5. The atmosphere should survive without obstructing any of the above.

The screenshot did not have constitutional protection.

---

Part III — Reconstructing the Crime Scene

Stop Measuring the Screenshot

The early CSS contained values such as:

top: 117px;  
left: 684px;  
width: 412px;  
transform: translateX(-7px);

The numbers were not necessarily wrong. They were simply unable to explain themselves.

Why 117 pixels?
Why the negative translation?
Which values represented intentional relationships and which were corrections introduced after a late-night disagreement with the browser?

Coordinates are not automatically bad architecture. Unexplained coordinates are.

The board needed a model of the room, not a collection of measurements taken from one photograph.

The Logical Canvas

The board received a stable design space:

Logical canvas: 1600 × 900

Every major region was defined relative to this canvas.

The browser could display it at different sizes, but the internal geometry remained stable.

This separated two questions:

Where does this element belong in the designed scene?
How is the scene currently being displayed?

Previously, every component had been answering both. Now one layout system handled the transformation.

Semantic Regions

The board defined named regions such as:

CASE_PAPER  
GRAPH_VIEWPORT  
TYPEWRITER_CONTROLS  
GRAPH_CONTROLS  
BOARD_STATUS  
DEBUG_OVERLAY

Each region described: bounds, layer, minimum size, overflow, interaction policy, responsive behaviour.

The graph was no longer “the dark rectangle on the right.”
It was an interactive content region with a minimum usable size and an explicit internal viewport.

The paper was no longer “the rectangle above the typewriter.”
It was a dynamic content region anchored to the carriage with a readable frame.

This made visual changes reviewable.

Move the paper: change the paper region.
Increase graph minimum width: change the graph constraint.

Nothing required searching click handlers for memories of the old furniture arrangement.

Normalized Coordinates and Anchors

Regions aligned with the artwork using normalized coordinates. A point could be represented as a proportion of the logical canvas rather than a hard-coded browser position.

The renderer calculated:

renderedX = offsetX + normalizedX × renderedCanvasWidth  
renderedY = offsetY + normalizedY × renderedCanvasHeight

Normalized coordinates preserved visual alignment. They did not guarantee usability.

A control reduced to forty percent of its original size may remain proportionally correct and practically impossible to activate. So alignment and usability remained separate concerns.

Regions also received anchors.

The paper belonged to the typewriter carriage. Graph controls belonged to the graph viewport. Status messages belonged to the region whose state they described.

Anchors expressed intentional relationships rather than coincidental proximity.

Hercule wrote in the notebook:

Proximity is not ownership. In graphs, offices or CSS.

Coordinates Must Not Reach Behaviour

The old interaction model was:

pointer coordinates  
➜ identify painted key  
➜ execute action

The new model was:

semantic button  
➜ dispatch semantic action  
➜ application validates action

Coordinates placed the button. They did not define what the button meant.

The same capability could later be activated through: the illustrated key, a keyboard, a compact menu, an accessible action list, a touch-oriented layout.

All could dispatch the same semantic action.

The typewriter was one presentation. It was not the definition of the investigation.

One Mapper, One Statement

One coordinate mapper converted the logical canvas into rendered dimensions.

For aspect-ratio-preserving containment:

scale = min(  
    viewportWidth / canvasWidth,  
    viewportHeight / canvasHeight  
)

Then:

renderedWidth = canvasWidth × scale  
renderedHeight = canvasHeight × scale  
  
offsetX = (viewportWidth - renderedWidth) / 2  
offsetY = (viewportHeight - renderedHeight) / 2

Every region used the same transform.

The paper, graph and controls could disagree about many things. They could no longer disagree about where the canvas began.

One Scale Was Not Enough

Scaling the whole scene uniformly preserved the composition. It also made text, controls and graph content increasingly unusable as the viewport shrank.

So the board separated: scene scaling, clamped typography, minimum interaction targets, true graph resizing, responsive recomposition.

The artwork could shrink continuously. Text could not.

The illustrated graph frame could scale. The graph component inside it needed actual width and height rather than a CSS transform pretending everything was fine.

The typewriter keys could become visually smaller. Their activation targets could not fall below a usable minimum.

The board stopped behaving like one picture becoming tiny. It became several coordinated systems wearing the same coat.

Content Frames and Stacking Rules

The visible paper and graph frames were larger than their usable content areas.

The board therefore defined explicit internal frames accounting for: borders, shadows, decorative labels, control space, safe padding.

Dynamic components mounted inside those frames.

They did not guess the usable area by inspecting whichever parent happened to contain them.

The layers also received named stacking levels:

scene background  
decorative foreground  
dynamic content  
graph canvas  
interactive controls  
focus and selection  
tooltips and statuses  
application overlays  
debug visualization

No component received z-index: 9999 simply because it had become emotionally invested in appearing above the lamp.

Every layer had a responsibility. Nobody received unlimited altitude.

---

Part IV — The Browser Changes Its Statement

Stretch, Cover or Contain?

The board and the browser rarely shared the same aspect ratio.

Three strategies entered the interrogation.

1. Stretch. Stretching filled the available area using independent horizontal and vertical scales. No empty space. No cropping. Also no trustworthy geometry. Keys became oval. Paper became a receipt. Hercule’s office began resembling evidence recovered from a carnival mirror. Rejected.
2. Cover. Cover preserved the ratio and filled the viewport by cropping the excess. Excellent for atmospheric backgrounds. Less suitable for applications where the cropped area might contain the button required to continue. A decorative filing cabinet may disappear. Entity Resolution may not. Useful for non-essential backgrounds, rejected for the complete interactive scene.
3. Contain. Contain preserved the full composition and introduced letterboxing where required. Nothing was cropped or distorted. But on a narrow viewport, the complete wide board shrank until the paper became a postage stamp and the graph became a rumour. Contain remained correct only while the board stayed usable.

The final policy became:

Contain while the scene remains usable. Recompose when continued scaling would damage the investigation.

Full Scene and Compact Scene

In full-scene mode:

• Paper and graph appeared together.
• Typewriter controls aligned with the artwork.
• The complete office remained visible.
• Text and targets used controlled scaling.
• The graph received real dimensions.

When minimum constraints could no longer be satisfied, the board entered compact mode.

The paper and graph became the dominant workspace. The typewriter actions moved into a compact control strip. Decorative parts of the office simplified or disappeared.

The visual metaphor remained. The furniture accepted new terms.

Crucially, the compact board did not become a second application. The same paper component, graph region and semantic actions were reused. Only the composition changed.

Hercule did not become a different detective because the desk had been rearranged.

ResizeObserver and State Preservation

The board observed its actual container using ResizeObserver.

The available space could change even when the browser window did not:

• A navigation panel could open.
• The application shell could collapse.
• Browser zoom could change effective dimensions.
• Another interface region could appear.

When the container changed, the board recalculated: layout mode, scale, offsets, transformed regions, content-frame dimensions, graph size. But layout changes could not alter investigation state.

Switching between full and compact modes was allowed to change: positions, visible decorations, active workspace arrangement.

It could not change: round, case, lifecycle, visible evidence, future selections, command history.

The browser could change its statement about geometry. It was not permitted to change the case.

---

Part V — Noir Is Not a Contrast Ratio

Atmosphere May Whisper. Evidence Must Testify.

Fraud Graph Arena is noir. This means shadows, old paper, dark metal and low amber light.

It does not mean dark-grey text on slightly darker-grey controls while the design team explains that readability would damage the mood.

The board separated decorative colour from semantic colour.

Decorative colour controlled: desk, shadows, typewriter surfaces, atmospheric lighting.

Semantic colour controlled: text, focus, selection, statuses, warnings, errors, graph categories, relationship families.

The theme controlled the room. Semantic tokens controlled the information.

The paper texture could look old. The text above it remained real, readable text rather than faint ink permanently printed into the image.

Colour Was Not Enough

Future graph entities and relationships would use colour, but colour could not carry meaning alone.

Important states needed redundant signals.

• Nodes could use: colour, shape, icon, label.
• Relationships could use: colour, line pattern, arrow style, semantic description.
• Controls could use: visual state, text, disabled semantics, explanation.

The graph would eventually require a semantic alternative for investigation-critical tasks.

A player needed a way to inspect entities, relationships, evidence, direction and provenance without relying entirely on spatial layout or precise pointing.

The graph was a view of evidence. It was not a licence to hide evidence inside pixels.

The Typewriter Needed a Keyboard

The illustrated keys were real buttons.

They had: accessible names, predictable focus order, visible focus, pointer and keyboard activation, consistent actions across full and compact modes.

Focus indicators lived above the decorative artwork and showed the real activation target.

Hover remained useful for supplementary tooltips, but no essential information existed only on hover.

Unavailable capabilities explained why they were unavailable.

“Not implemented yet,” “locked by state,” “pending” and “failed” did not all become one mysterious grey key.

Localisation Entered Carrying a Long German Noun

No dynamic text was printed permanently into the artwork.

Labels came from message catalogues, while semantic action identifiers remained stable regardless of language.

That separation mattered because English has an irritating habit of making interface designers believe text is naturally short. It is not.

A perfectly comfortable label such as:

Check identity matches

can become:

Auf mögliche Identitätsübereinstimmungen prüfen

in German.

The English label fitted comfortably. The German translation arrived carrying Identitätsübereinstimmungen in its luggage. The key no longer did.

So before the real translations arrived, the board used pseudo-localisation*: deliberately expanding interface text to simulate the pressure that longer translations would eventually create.*

The objective was not to produce convincing fake languages. It was to make the layout uncomfortable on purpose.

That quickly exposed:

• Typewriter keys that only worked with short English labels.
• Paper headings with no wrapping strategy.
• Buttons whose text escaped their boundaries.
• Containers quietly clipping content.
• Layouts that solved every problem by making the font smaller.

Each failure required an explicit response: wrap the text, expand the available region, allow controlled scrolling, recompose the layout, or use a shorter display label while preserving the complete accessible description.

What was not acceptable was:

Keep shrinking the text until nobody complains.

“Shrink until it fits” was not considered an internationalisation strategy.

Hercule looked at the German catalogue. The typewriter requested a wider desk.

Reduced Motion and Decorative Assets

Reduced-motion settings removed unnecessary transitions and animation. They did not alter evidence, timing, scoring or progression.

The furniture could stop sliding. The fraud did not become more innocent. Decorative assets remained hidden from assistive technology and transparent to pointer input. The office background did not need to announce every lamp, stain and paper clip.

The semantic regions explained the investigation. Atmosphere was allowed to remain atmosphere.

---

Part VI — The Empty Room Must Remain Empty

Export the Room, Not the Case

The first reusable template already contained a faint Academy title printed on the paper.

The board had chosen its first client before the second had arrived.

Anything that could change by case, state, player, language or iteration needed to remain outside the artwork.

That included: case titles, path names, statuses, evidence, graph nodes, scores, action labels, technology names, availability messages.

The artwork supplied spaces for content. It did not supply the content.

The board remained empty of case knowledge while remaining explicit about structure.

Safe Zones

The template documented:

CASE_PAPER_CONTENT_FRAME  
GRAPH_CONTENT_FRAME  
TYPEWRITER_CONTROL_ZONE  
STATUS_ZONE  
DECORATIVE_ONLY_ZONE  
DO_NOT_PLACE_TEXT

These development overlays identified where dynamic content could appear without colliding with folds, shadows, borders or controls.

They were not shown to players. They were the artwork’s statement under oath.

The paper no longer merely claimed to contain room for text. It identified exactly where that room was.

Asset Boundaries

Assets were divided by responsibility rather than exported as one scene or hundreds of tiny decorative fragments.

A practical package included groups such as:

scene/  
typewriter/  
paper/  
graph/  
decoration/

Related overlays shared stable transparent bounds and the same logical origin. Transparent pixels still participated in geometry.

Cropping one layer differently could move the artwork away from its interactive regions even when the visible image appeared unchanged.

The player would click one key and activate the ghost of a previous export. Consistent bounds prevented this particularly theatrical defect.

No Fake Evidence

The graph panel contained no decorative nodes or red lines.

A blank panel could use a restrained texture, grid or empty-state message. It could not pretend that evidence existed.

The paper contained no fake case narrative baked into the asset.

Its sparse content came from the active round:

The Case of the Empty Evidence Board  
Detective Academy  
Active investigation  
No evidence has been revealed.

The board made absence intentional. It did not counterfeit activity for the screenshot.

Manifest, Fallbacks and Versioning

Board assets were registered through a manifest describing: identity, version, dimensions, layer, purpose, transparency, whether they were decorative, whether failure was fatal.

If the office art failed, the board lost atmosphere but retained: readable paper, explicit graph region, semantic controls, active-round context.

No criminal was acquitted because the desk lamp returned a 404.

The template itself was versioned so that assets, anchors, content frames and responsive rules could not silently drift apart.

A redesigned typewriter might invalidate key positions. A wider paper might require a new frame.

Versioning made those relationships explicit before the player discovered them through experimental clicking.

---

Part VII — Every Pixel Needs an Alibi

Test the Application Beneath the Coat

The semantic board had to remain testable when every decorative asset was replaced by a grey rectangle.

Component tests verified:

• Correct case and round context.
• Paper empty, loading and error states.
• Graph empty state.
• Semantic action identities.
• Keyboard and pointer behaviour.
• Consistent full and compact actions.

The region-contract tests verified relationships:

• Paper content remained inside the paper.
• Graph content remained inside the graph frame.
• Minimum graph dimensions were respected.
• Action targets did not overlap.
• Decorative layers remained non-interactive.

The coordinate mapper received focused tests for scaling, offsets, conversions and round-trip accuracy.

Every region used the same transformation. Three witnesses were no longer permitted to provide three locations for the same desk.

Responsive and Accessibility Tests

The viewport matrix included: wide desktop;

• Conventional laptop
• Shallow window
• Near-square container
• Narrow portrait
• High zoom
• Reduced space caused by application panels
• Dimensions immediately above and below the recomposition threshold

The tests checked behaviour, not only screenshots:

• Text remained readable
• Graph dimensions stayed valid
• Actions remained reachable
• Targets did not overlap
• No essential content was cropped
• Layout changes preserved the same round
• Focus remained intentional
• Hidden layout variants were not simultaneously interactive

Pseudo-localisation became part of the test gate. So did keyboard navigation, reduced motion and automated accessibility checks.

Screenshots remained useful for detecting drift, missing layers and misalignment. They were not the sole authority.

A screenshot might look perfect while a transparent overlay blocked every button. Hercule considered that a weak alibi.

Asset Failure and Invisible Layers

The board deliberately tested what happened when all decorative assets failed.

The result looked less like noir and more like a police interview room under fluorescent lighting. It remained usable.

Tests also clicked the visible centre of every major control to confirm that no transparent highlight, shadow or glass overlay intercepted the event.

This test seemed insultingly specific. That usually means somebody had already lost an afternoon to the defect.

The Complete Browser Journey

The final browser test followed the real application route:

Launch  
➜ Detective Academy  
➜ ACADEMY_001  
➜ create round  
➜ start round  
➜ opening comic  
➜ complete briefing  
➜ enter board

Then it verified:

• The wide layout appeared
• The paper displayed ACADEMY_001
• The round was active
• The graph displayed an intentional empty state
• Future capabilities were visible but honestly unavailable
• No fake evidence appeared
• Keyboard navigation reached the primary regions
• Resizing triggered compact mode
• The same case and round remained active
• Refresh restored the same board
• Expanding the viewport restored the full composition.

The graph still did nothing. The typewriter still performed no investigation. But the office was now part of the real application rather than a prototype placed beside it.

---

Part VIII — Playable Evidence

The Office Opens

Hercule launched Fraud Graph Arena. He selected Detective Academy.

He opened:

ACADEMY_001  
The Case of the Empty Evidence Board

The backend created the round. The opening sequence appeared. The briefing completed. The investigation became active. The new board opened.

The detective office emerged from the darkness. The paper displayed the correct Academy case. The graph panel waited beside it.

Empty. No counterfeit nodes. No decorative suspects. No red lines connecting innocent objects for atmosphere.

The typewriter keys looked ready. They were not.

Graph analysis, identity comparison and evidence search had not yet entered the Academy.

The unavailable controls explained themselves. Nothing pretended to work.

Hercule resized the browser. The scene contracted. The paper remained readable. The graph retained its minimum area. The keys remained aligned.

He continued shrinking. The board recomposed. The paper and graph became the dominant workspace. The actions moved into their compact arrangement. The same round remained active.

He refreshed. The same case returned. The furniture had changed. The evidence had not.

Iteration 02 had produced its playable result:

Launch  
➜ Detective Academy  
➜ ACADEMY_001  
➜ opening comic  
➜ active investigation  
➜ responsive detective office  
➜ empty case paper  
➜ empty graph panel  
➜ compact composition  
➜ refresh and recover

What Iteration 02 Proves

The iteration proves that:

• The detective-office concept can become a layered interface.
• Artwork, controls and dynamic content can remain separate.
• Semantic regions can define paper, graph and actions.
• Visual keys can align with real accessible buttons.
• Coordinates can describe placement without defining behaviour.
• The complete scene can scale while usable.
• The board can recompose when shrinking becomes harmful.
• Full and compact layouts can share one set of components and actions.
• Localisation, high zoom, keyboard interaction and reduced motion can be part of the design contract.
• Artwork can fail without destroying the semantic board.
• The template can remain empty of case-specific data.

Most importantly, the visual identity of Fraud Graph Arena does not require the artwork to become the source of truth.

The office can look like a game. The application can continue behaving like software.

This arrangement was considered preferable to the reverse.

What It Does Not Prove

There is still no graph. No nodes render. No edges render.

Nothing can be selected, expanded or filtered.

The paper contains no evidence. The keys execute no analytical actions. There are no credits, commands, suspects, claims or submissions.

The board does not prove that two hundred nodes will remain readable. It does not prove that future case content will fit every paper layout. It does not prove that the typewriter remains the best control metaphor after ten capabilities arrive carrying costs, statuses and keyboard shortcuts. It does not prove that the game is fun.

The room is ready. The work intended for the room has not yet arrived.

A framed graph panel is not graph visualisation. An accessible empty state is not an investigation.

Iteration 02 refuses to award itself points for furniture.

The Arrest

Three approaches entered the interrogation.

The giant background image preserved the artwork but coupled it to coordinates, content and interactions.

The complete HTML/CSS reconstruction preserved semantic control but slowly renovated the detective office into a bank.

The layered hybrid preserved the scene while mounting real controls and dynamic components inside explicit regions.

It did not eliminate complexity. It placed the complexity in named responsibilities. That was why it won.

The background owns atmosphere. The layout owns geometry. The controls own interaction. The application owns state. Future graph and paper components will own their internal behaviour.

No participant receives the complete building merely because it has the most attractive lighting.

Evidence Handling Rules

Iteration 02 leaves several rules behind:

• Artwork may define atmosphere, not authority.
• Coordinates describe placement, not meaning.
• Dynamic text and state remain outside assets.
• Usability wins when pixel fidelity and functionality disagree.
• Decorative layers do not receive focus, intercept clicks or contain essential information.
• Every active region requires explicit dimensions, overflow, stacking and fallback rules.
• Accessibility and localisation shape the layout from the beginning.
• Empty states must remain honest.

The board may explain absence. It may not counterfeit evidence.

---

Case Closed?

The investigation board began as an illustration pretending to be an application. It ends as an application capable of wearing the illustration safely.

The paper is blank. The graph is empty. The keys are waiting. The room is ready.

Unfortunately, reaching it now depends on an expanding collection of routes, transitions, event listeners and screen-specific assumptions.

The application already contains: launch, path selection, case selection, opening comic, investigation board.

More screens are coming.

Introductions. Resolutions. Submission review. Verdicts. Leaderboards. Recovery states.

If every screen brings its own route logic, fade effect and private opinion about what happens next, the board will not become the next crime scene. Navigation will.

Hercule heard movement in the corridor. Another screen had arrived. It was carrying its own transition handler. He reached for the notebook.

---

Next in the Series: FGA 03 — Screen Me Up Before You Go-Go

Replacing navigation spaghetti with a declarative screen system

The walking skeleton can reach the board. The board now looks and behaves like a real investigation room.

The next iteration will replace duplicated navigation logic with a common screen contract, reusable transitions, schema validation and a state-driven journey.

The objective is simple:

Let configuration describe screens and transitions without becoming a programming language designed during a caffeine incident.

The room was ready. Now Hercule had to investigate the corridors.

---

The typewriter survived. The clues are still under investigation.