How Ghost in the Net is built · Oğuzhan Açıkalın

The map shows how the story passages connect.

Every passage of the Turkish build, placed where it sits in Twine and turned on its side so the run reads left to right. 504 passages and more than 750 links. The coloured ones are where variables do their work.

The full Twine story map of Ghost in the Net: about five hundred small squares joined by thin lines, spread left to right across several clusters, with green, violet, amber and red squares scattered among grey ones. — The full story map, drawn from the passage positions in the Twine file. Click to open it at full size.

Checks INT, TECH or BODY63
Checks another variable32
Writes variables66
Minigame23
Narration and choice316

These notes explain the design decisions.

Problems met while building it, and how each was solved. Every note points to the code that does it.

Fail forward into the lore
ProblemThe opening has to explain SEMA without a lecture, and a boot screen is a dead moment.
SolutionThe boot fails on purpose. Forcing it skips ahead; retrying digs into the memory grid and finds a hidden log of the night SEMA was shut down. The error is the door to the backstory.
```
[[Bypass retrospective memory grid and force boot.]]
[[Initiate hard reboot.]]
… Retry → Access sub-directories → Open log.
```
A build the player can take back
ProblemPlayers allocate points before they know what the stats mean, then regret it.
SolutionA preview screen sums up the build with its three stats, and one link goes straight back to the allocation screen.
```
<<link "RECALIBRATE CONFIGURATION"
  "Proceed to Neural Net Configuration.">><</link>>
```
Typed text without the wait
ProblemTerminal text typed out letter by letter sets the mood once and slows every replay after that.
SolutionA custom typewriter macro: one click anywhere prints the rest of the line at once.
```
const clickHandler = () => {
  isSkipped = true;
  $(document).off('click.typewriter', clickHandler);
};
```
Pauses inside a typed line
ProblemA boot log needs a beat of suspense in the middle of a line, and a timed macro can only reveal a line whole.
SolutionThe macro reads a [wait ms] token and holds the typing there.
```
<<typewriter "Executing retrospective memory grid
protocol... ... [wait 2000] SUCCESS" 30>>
```
One stylesheet, several moods
ProblemThe street, the terminal and the flashback each need their own look.
SolutionPassage tags switch modes: neon-modu, crt-modu, gecis-modu. A passage can also switch mode mid-scene by swapping body classes on a timer.
```
<<run $('body').removeClass('neon-modu')
  .addClass('crt-modu')>>
```
A cursor that belongs to the mode
ProblemThe same typewriter runs on the neon street and on the old CRT terminal.
SolutionThe cursor is drawn by CSS per mode: a thin bar in neon, a solid block in CRT.
```
body.crt-modu .typewriter-text.typing::after { content: "█"; }
body.neon-modu .typewriter-text.typing::after { content: "|"; }
```
Checkboxes that read too early
ProblemIn the power puzzle, the button checked the switches before their new values had landed.
SolutionThe check runs inside a zero-second timer, so the variables update first. The source marks it as a critical fix.
```
<<button "ROUTE POWER">>
  <<timed 0s>>
    <<if $power_terminal and $power_elevator …>>
```
Variables that may not exist yet
ProblemSome routes reach a passage before $alertLevel has ever been set.
SolutionEvery write starts from a default, so any route can add to the alert safely.
```
<<set $alertLevel to ($alertLevel || 0) + 1>>
```

Variables store the player’s build and story state.

The variables that steer the player do one of six jobs. Each row shows where a value is written and where the story reads it back. A variable that is written but not yet read is a hook for later; the last row lists the main ones.

Job	Variables	Written	Read
Build	`$INT, $TECH, $BODY, $points`	The build screen; two more points for routing the B1 power correctly	132 checks tiered at 5 to 8; strength meters add BODY to the player’s clicks
Knowledge	`$foundBreakerClue, $has_ghost_signature, $knows_kickstart, $prometheus_clue`	Clues found on one floor	Options on a later floor: the lobby log, a path in B2, the B1 generator, a rescue in B3
Knowledge	`$IdeaShaft`	A conversation with the Operator	The Operator’s later lines
Noise	`$alertLevel`	15 places: forced doors and failed hacks add 1 or 2, clever routes take 1 off	The B2 drone (three tiers), the staff room, the engineer’s route
Relationships	`$OperatorStatus`	The human-or-AI question	The Operator’s next briefing
Relationships	`$sema_relationship, $sema_choice`	Three B2 conversations and SEMA’s manifesto	Four trust questions in B3
Set pieces	`$hack, $power_*, $jumpPower, $liftPower, $gripPower`	Keypad, power panel and strength meters	The success check of each set piece
Hooks	`$clueVent, $exploitWindow, $adrenalineBoost, $IdeaJanitor, $IdeaELMCard, $IdeaVIGIL7, $RelationshipOperator, $sema_infection_type`	Perception moments, Operator dialogue, the final payload	Not yet: set for what comes after B3

Stat checks determine which routes the player can use.

Ten points over three stats, and checks tiered at five, six, seven and eight. With ten points a player can reach six or more in one stat only, so every obstacle is written three times: the first door in B1 has B1_Door_Attempt_Int, _Tech and _Body, and the escape from B2 has the same three.

The build screen: remaining character points 0, INT capacity 6, TECH 4, BODY 0, each with Increase and Decrease links. — The opening choices store the player’s stats.`:: ((Proceed to Neural Net Configuration.))`

The city scene with INT 6: rain on the raincoat, then a billboard warning reading VENT S-01 offline, and two links. — The scene checks the stored stats before showing a route.`:: Keep listening to the city.`

Noise changes later security encounters.

$alertLevel is written in fifteen places and read where it hurts. Forcing a door or failing a hack adds to it; solving a problem with INT takes a point off. The B2 drone reads it in three tiers.

The drone scene on a quiet run: the lens turns green and the drone says Hello, thief in red monospace. — The drone responds to the stored alert level.`:: B2_MainRoom_IFFActive`

The drone scene on a loud run: every weapon locks on and the drone says Exactly as expected. You made it this far, thief. — The drone responds to the stored alert level.`:: B2_MainRoom_IFFActive`

Dialogue choices change the characters’ later responses.

Two characters keep a score of the player. The Operator's identity is the player's choice and is read back at once. SEMA's trust is the sum of three conversations and a manifesto, and it decides how SEMA answers in B3.

The Operator asks whether the player would want them to be a human or an AI module, with two choices. — Later dialogue checks the earlier relationship choice.`:: "Yes, I think it would."`

SEMA's answer to "Can I trust you?" in B3, from the same score:

<<if $sema_relationship > 1>>
  "You can't. But... our creators betrayed us both.
  Shared pain is the strongest trust there is."
<<elseif $sema_relationship < 0>>
  "You don't have to trust me. You have no other choice."
<<else>>
  "Trust is a logical inference. My offer pays better
  than Hollow-Veyl's. Trust is that simple."
<</if>>

Minigames resolve actions inside the passages.

Three set pieces are played inside the passage. Each writes its own variables and checks them in one place, and two of them also read a stat.

The hack screen: CATCH THE ACCESS SEQUENCE above three green digits, 4 - 3 - 7. — TECH determines the keypad hack’s difficulty.`:: "I'm ready, connecting to the panel."`

Three seconds later: AWAITING SEQUENCE INPUT with two digits entered, a three-by-three green keypad, and Confirm and Clear buttons. — TECH determines the keypad hack’s difficulty.`:: "I'm ready, connecting to the panel."`

The power panel after a wrong attempt: four unchecked switches, a Route Power button, a red overload message and the Operator’s reaction. — The power-routing puzzle checks the switch combination.`:: B1_Generator_Ignition`

The shaft jump: jump power 9, and the JUMP! button that replaces the gather-power button after three seconds. — The strength test combines clicks with the BODY stat.`:: G_Shaft_Climb`

Timed text and visual modes control how scenes appear.

The story stylesheet styles the keypad; everything else is styled where it is said. Machines speak in monospace, the hack screen is lime on black, warnings are red. Across the story there are 334 inline styles.

Story stylesheet

.keypad-grid {
  display: grid;
  grid-template-columns: repeat(3, 50px);
  grid-gap: 5px;
  justify-content: center;
  margin-top: 1em;
}
.keypad-button {
  width: 60px;
  height: 60px;
  font-size: 1.5em;
  font-family: monospace;
  color: lime;
  background-color: #1a1a1a;
  border: 1px solid lime;
  transition: background-color 0.2s, color 0.2s;
}
.keypad-button:hover { background-color: #2a2a2a; color: white; }
.keypad-button:active { background-color: lime; color: black; }

Story JavaScript: the keypad macro

Macro.add('keypad_button', {
  handler: function () {
    const number = this.args[0];
    const $button = $(document.createElement('button'));
    $button
      .addClass('keypad-button')
      .text(number)
      .ariaClick(this.shadowHandler(function () {
        State.variables.hack.playerInput.push(number);
        $('#player-entry').empty()
          .wiki('<<print $hack.playerInput.join("-")>>');
      }));
    $button.appendTo(this.output);
  }
});

Inline styles give each kind of voice its own look:

<div id="hack-screen" style="text-align: center; font-family: monospace;
     font-size: 1.5em; color: lime;">

<div style="font-family: monospace; color:red; text-align:center;
     font-size:1.5em; margin-top:1em;">Hello, thief.</div>

<span style="color:red;">OVERLOAD! The generator's fuse tripped...</span>

The interface switches between terminal and scene views.

The English rebuild of the opening, in progress, moves the styling into a mode system. Each passage is tagged with a mode, and the stylesheet turns the tag into a look: a cold neon street, a green CRT terminal, a black transition screen. Mode changes play as an old television switching off and on.

The boot sequence: typed lines on timers, ending in a failure the player can push through.

Opening the hidden log: flicker, switch-off, and the scene comes back in CRT mode.

Modes and the switch-off, from the stylesheet

/* Passage tags become body classes */
body.neon-modu { background-color: #020508; }
body.crt-modu {
  background-color: #050a05;
  color: #32ff32;
  font-family: "Courier New", monospace;
  text-shadow: 2px 0 1px rgba(255,0,0,0.5), -2px 0 1px rgba(0,0,255,0.5), 0 0 5px #32ff32;
}
/* Old-TV switch-off, used between modes */
@keyframes tv-shutdown {
  0%   { transform: scale(1, 1); opacity: 1; }
  40%  { transform: scale(1, 0.005); opacity: 0.8; }
  80%  { transform: scale(0, 0.005); opacity: 0.5; }
  100% { transform: scale(0, 0); opacity: 0; }
}
.shutdown-active { animation: tv-shutdown 0.6s ease-in forwards !important; }

The transition, chained on timers inside one passage

<<timed 2s>>
  <<run $('#passages').addClass('flicker-active')>>
  <<timed 0.7s>>
    <<run $('#passages').removeClass('flicker-active').addClass('shutdown-active')>>
    <<timed 1.2s>>
      <<run $('body').removeClass('neon-modu').addClass('crt-modu')>>
      <<replace "#transition-screen">> … the log … <</replace>>
      <<run $('#passages').removeClass('shutdown-active').addClass('startup-active')>>

The English neural net configuration screen: unallocated points, and INT and TECH boxes in cyan and yellow with upgrade and downgrade links.

The English preview screen: cognitive architecture module, the cyber-alias, INT, TECH and BODY values in framed boxes, and a recalibrate link.

Timing does the rest. Boot sequences, uploads and hack screens are built from timed lines and links that replace themselves, so the interface answers back like a terminal. The English version in progress, in the Twine editor: