save creds

4 files changed, 91 insertions, 11 deletions

diff --git a/src/spectate/index.html b/src/spectate/index.html
index 394b780..5b9dc5a 100644
--- a/src/spectate/index.html
+++ b/src/spectate/index.html
@@ -12,5 +12,40 @@
             This is the GPN-Tron spectator application. You need JavaScript to
             run it.
         </noscript>
+        <div id="side">
+            <div id="info">
+                <h1>GPN-Tron</h1>
+                <p>
+                    This is the GPN-Tron Rust rewrite. It should be compatible
+                    with the original. Connect via TCP and join the fun!
+                </p>
+                <ul>
+                    <li>
+                        Spectator:
+                        <script>
+                            document.write(`HTTP ${window.location.host}`);
+                        </script>
+                    </li>
+                    <li>
+                        Player:
+                        <script>
+                            document.write(
+                                `TCP ${window.location.hostname}:4000`
+                            );
+                        </script>
+                    </li>
+                </ul>
+                <a href="https://codeberg.org/metamuffin/gpn-tron-rust">
+                    Source code
+                </a>
+            </div>
+            <div id="scoreboard">
+                <h2>Scoreboard</h2>
+            </div>
+            <div id="chat">
+                <h2>Chat</h2>
+            </div>
+        </div>
+        <div id="board"></div>
     </body>
 </html>
diff --git a/src/spectate/main.ts b/src/spectate/main.ts
index ea84924..508ca30 100644
--- a/src/spectate/main.ts
+++ b/src/spectate/main.ts
@@ -35,7 +35,7 @@ let ctx: CanvasRenderingContext2D
 document.addEventListener("DOMContentLoaded", () => {
     canvas = document.createElement("canvas")
     ctx = canvas.getContext("2d")!
-    document.body.append(canvas)
+    document.getElementById("board")?.append(canvas)
     canvas.width = 1000;
     canvas.height = 1000;
     redraw()
@@ -122,7 +122,6 @@ function name_color(name: string): string {
 ws.onerror = console.error
 ws.onmessage = message => {
     const p = JSON.parse(message.data) as Packet
-    console.log(p);
     if (p == "tick") {
         tick_anim = 0
         const d = []
diff --git a/src/spectate/server.rs b/src/spectate/server.rs
index da18a77..11c4d5a 100644
--- a/src/spectate/server.rs
+++ b/src/spectate/server.rs
@@ -47,6 +47,19 @@ pub async fn spectate_server(config: Config, state: Arc<State>) -> Result<()> {
     Ok(())
 }
 
+#[cfg(debug_assertions)]
+async fn index() -> Html<String> {
+    use tokio::fs::read_to_string;
+    Html(
+        read_to_string(concat!(
+            env!("CARGO_MANIFEST_DIR"),
+            "/src/spectate/index.html"
+        ))
+        .await
+        .unwrap(),
+    )
+}
+#[cfg(not(debug_assertions))]
 async fn index() -> Html<&'static str> {
     Html(include_str!("index.html"))
 }
@@ -91,13 +104,7 @@ async fn css() -> (HeaderMap, &'static str) {
     use headers::HeaderMapExt;
     let mut hm = HeaderMap::new();
     hm.typed_insert(ContentType::from_str("text/css").unwrap());
-    (
-        hm,
-        include_str!(concat!(
-            env!("CARGO_MANIFEST_DIR"),
-            "/src/spectate/style.css"
-        )),
-    )
+    (hm, include_str!("style.css"))
 }
 
 async fn broadcaster(sstate: Arc<SpectateState>, state: Arc<State>) {
diff --git a/src/spectate/style.css b/src/spectate/style.css
index 52711d0..c391020 100644
--- a/src/spectate/style.css
+++ b/src/spectate/style.css
@@ -1,4 +1,43 @@
+* {
+    color: white;
+}
+body {
+    padding: 0px;
+    margin: 0px;
+    background-color: black;
+
+    width: 100dvw;
+    height: 100dvh;
+    display: flex;
+    flex-direction: row;
+    overflow-y: hidden;
+}
+
 canvas {
-    height: min(100dvh, 70dvw);
-    float: left;
+    object-fit: contain;
+    width: 100%;
+    height: 100%;
+}
+#board {
+    width: 60%;
+    height: 100%;
+}
+#side {
+    width: 30%;
+    height: 100%;
+}
+#info {
+    width: 100%;
+    height: 30%;
+    overflow-y: scroll;
+}
+#scoreboard {
+    width: 100%;
+    height: 30%;
+    overflow-y: scroll;
+}
+#chat {
+    width: 100%;
+    height: 40%;
+    overflow-y: scroll;
 }