W.O.P.R. Upgrade Log

The JS and CSS were in good shape. The HTML wrappers needed complete replacement.

The legacy app had two HTML files. The TNT ecosystem upgrade produces five:

The cover-page pattern (an index that links to functional sub-pages) is now standard across TNT multi-page apps: Sudoku Saga, Game of Life, and now WOPR. It gives users a landing point with context before they dive into the simulation.

All five HTML pages share the same SPARK bar, cover-card, callout-box, and page-header components. Rather than duplicating these in each file, a single styles/wgStyles.css holds all shared rules. This mirrors the GOL pattern exactly (styles/golStyles.css).

The load order for terminal pages (computerConsole.html, launchCodes.html):

1. bootstrap@5.3.3       — layout, utilities, grid
2. font-awesome@6.5      — icons
3. Google Fonts          — Boogaloo, Inter, VT323, Orbitron, Courier Prime
4. tnt-base-styles.css   — TNT navbar, hero structure, footer
5. wgStyles.css          — SPARK bar, cover cards, page header, callout
6. style.css             — CRT monitor, terminal screen, scan-line effect
7. launchCode.css        — Diode display, Orbitron characters (launch page only)

Loading style.css last ensures its body { background:#000; color:#00ff00; } applies to the terminal pages as intended, while tnt-base-styles.css’s navbar rules (which use higher specificity) remain unaffected.

The cover page uses war-games.jpg (the NORAD Big Board war room scene) as its full-hero background at 40vh+ with a lighter gradient overlay (0.90/0.70) to let the dramatic image breathe. Inner pages use the same image in their compact #pageHeader section but with a heavier overlay (0.94/0.88) so the page title remains legible against the complex background.

The chatlog hero uses the same image inline (not via wgStyles.css) because the chatlog defines its hero in a <style> block, following the same pattern established in golChatlog.html. The path difference:

/* wgStyles.css — relative to styles/ subfolder */
url('../../images/war-games.jpg')

/* wargamesChatlog.html inline style — relative to app root */
url('../images/war-games.jpg')

Same physical file, two different relative paths. CSS url() paths resolve relative to the declaring file, not the HTML document. This is the same lesson documented in the GOL chatlog Stage 2.

All five pages carry the same SPARK bar with five links:

WOPR Home  |  Console  |  Launch Codes  |  About  |  S.P.A.R.K. Chat Log

The fas fa-terminal icon precedes “WOPR Home” and fas fa-comments precedes “S.P.A.R.K. Chat Log” — both matching the pattern in the GOL SPARK bar. Colors use --wg-green: #00c840, the phosphor-green of the existing terminal CSS, so the bar visually bridges the TNT chrome and the app’s own aesthetic.

The CSS cascade for navbar link font-family on a terminal page:

/* tnt-base-styles.css sets font-size but not font-family */
#mainNav .nav-link { font-size: 0.88rem; font-weight: 600; ... }

/* style.css sets the body font — cascades to ALL descendants */
body, html { font-family: 'VT323', 'Courier Prime', monospace; }

/* Result: .nav-link inherits VT323 from body.
   VT323 is correct for the terminal; wrong for the navbar chrome. */

The fix added to wgStyles.css:

#mainNav .nav-link {
    font-family: 'Inter', sans-serif !important;
}

The broader rule: whenever a page-specific stylesheet sets font-family on body, every TNT chrome element needs an explicit override. The terminal pages are the only ones in the TNT ecosystem where this applies — the fix belongs in wgStyles.css, not in the shared tnt-base-styles.css.

The link from warGamesIndex.html to warGamesSPARK.html already existed in the callout box on the cover page (added in Stage 1). The return path — from the movie clip page back to the simulation — was missing.

Added to the bottom of the .content-card in warGamesSPARK.html, after the clip wrapper and separated by a faint green rule. Placement rationale: a viewer who has just watched all five clips is at peak engagement; that is the right moment to invite them into the interactive simulation.

<!-- in movie_clips/warGamesSPARK.html -->
<a href="../WarGamesSim2026-07-24-Stg2/warGamesIndex.html">
    Access W.O.P.R. — The Simulation
</a>

The path steps up from movie_clips/ to the TNT root (../) and then down into the simulation folder. The link uses the same phosphor-green terminal font and border style as the clip frames, so it reads as part of the same thematic world rather than a generic site navigation element.

Four files updated in one pass:

The bottom-link format for news entries was verified by reading news-2026-038 (GOL). It uses a bare <p> of plain <a> tags separated by  •  — no Bootstrap .btn classes, no visual weight. The WOPR entry links cover: W.O.P.R. Home, Console, Launch Codes, About WarGames, Movie Clips, S.P.A.R.K. Chat Log, JS Apps, and Explore.

Graphics classification is earned by the launch code simulator specifically: the 10-position LED diode display, the scan-to-lock animation, Orbitron-font characters flashing from red-orange to phosphor-green, and the lockSuccess keyframe. The visual output is generated entirely by JavaScript timing and CSS animation — no video, no static image, no canvas. That qualifies as graphics. The Graphics offcanvas links to launchCodes.html directly rather than the cover page to make the graphics connection explicit.