From 54b97f28ff71e030dfe476b77a20aba9c57236a1 Mon Sep 17 00:00:00 2001
From: otivm <sandor@factoryfouroh.info>
Date: Sat, 25 Apr 2026 17:26:09 +0000
Subject: [PATCH] =?UTF-8?q?Scaffold=20multi-screen=20navigation=20?=
 =?UTF-8?q?=E2=80=94=20rename=20Game=20to=20Ledger?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                          | 36 ++++++++++++++++++++++++++--
 src/{Game.jsx => screens/Ledger.jsx} |  0
 2 files changed, 34 insertions(+), 2 deletions(-)
 rename src/{Game.jsx => screens/Ledger.jsx} (100%)

diff --git a/src/App.jsx b/src/App.jsx
index 26c5c85..87f4a58 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,15 +1,17 @@
 import { useState, useEffect } from 'react'
 import { generateToken, loadState, saveState } from './api.js'
 import { createState } from './gameState.js'
-import Game from './Game.jsx'
+import Ledger from './screens/Ledger.jsx'
 import './App.css'
 
 const TOKEN_KEY = 'otivm_token'
+const SCREENS = ['ledger', 'map']
 
 export default function App() {
   const [state, setState] = useState(null)
   const [token, setToken] = useState(null)
   const [loading, setLoading] = useState(true)
+  const [screen, setScreen] = useState('ledger')
 
   useEffect(() => {
     async function bootstrap() {
@@ -45,5 +47,35 @@ export default function App() {
     )
   }
 
-  return <Game state={state} onStateChange={onStateChange} />
+  return (
+    <div>
+      <nav className="main-nav">
+        <span className="nav-title">OTIVM</span>
+        <div className="nav-links">
+          <button
+            className={`nav-btn${screen === 'ledger' ? ' active' : ''}`}
+            onClick={() => setScreen('ledger')}
+          >
+            Ledger
+          </button>
+          <button
+            className={`nav-btn${screen === 'map' ? ' active' : ''}`}
+            onClick={() => setScreen('map')}
+          >
+            Map
+          </button>
+        </div>
+      </nav>
+      <div className="screen-wrap">
+        <div style={{ display: screen === 'ledger' ? 'block' : 'none' }}>
+          <Ledger state={state} onStateChange={onStateChange} />
+        </div>
+        <div style={{ display: screen === 'map' ? 'block' : 'none' }}>
+          <div className="placeholder">
+            <p>Map — coming in OTIVM-II</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
 }
diff --git a/src/Game.jsx b/src/screens/Ledger.jsx
similarity index 100%
rename from src/Game.jsx
rename to src/screens/Ledger.jsx