From 0667ac58fb575ae36a610eb3df0f992facb3886c Mon Sep 17 00:00:00 2001
From: syui <syui@syui.ai>
Date: Sat, 26 Jul 2025 19:51:55 +0900
Subject: [PATCH] test game

---
 my-blog/templates/game.html | 135 ++++++++++++++++++++++++++++++++++++
 oauth/src/App.jsx           |   8 +++
 src/generator.rs            |  27 ++++++++
 3 files changed, 170 insertions(+)
 create mode 100644 my-blog/templates/game.html

diff --git a/my-blog/templates/game.html b/my-blog/templates/game.html
new file mode 100644
index 0000000..69d04f8
--- /dev/null
+++ b/my-blog/templates/game.html
@@ -0,0 +1,135 @@
+{% extends "base.html" %}
+
+{% block title %}Game - {{ config.title }}{% endblock %}
+
+{% block content %}
+<div id="gameContainer" class="game-container">
+    <div id="gameAuth" class="game-auth-section">
+        <h1>Login to Play</h1>
+        <p>Please authenticate with your AT Protocol account to access the game.</p>
+        <div id="authRoot"></div>
+    </div>
+    <div id="gameFrame" class="game-frame-container" style="display: none;">
+        <iframe 
+            id="pixelStreamingFrame"
+            src="https://verse.syui.ai/simple-noui.html"
+            frameborder="0"
+            allowfullscreen
+            allow="microphone; camera; fullscreen; autoplay"
+            class="pixel-streaming-iframe"
+        ></iframe>
+    </div>
+</div>
+
+<style>
+/* Game specific styles */
+.game-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background: #000;
+    overflow: hidden;
+}
+
+.game-auth-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+    color: white;
+}
+
+.game-auth-section h1 {
+    font-size: 2.5em;
+    margin-bottom: 20px;
+    color: #fff;
+}
+
+.game-auth-section p {
+    font-size: 1.2em;
+    margin-bottom: 30px;
+    color: #ccc;
+}
+
+.game-frame-container {
+    width: 100%;
+    height: 100vh;
+    position: relative;
+}
+
+.pixel-streaming-iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+
+/* Override auth button for game page */
+.game-auth-section .auth-section {
+    background: transparent;
+    box-shadow: none;
+}
+
+.game-auth-section .auth-button {
+    font-size: 1.2em;
+    padding: 12px 30px;
+}
+
+/* Hide header and footer on game page */
+body:has(.game-container) header,
+body:has(.game-container) footer,
+body:has(.game-container) nav {
+    display: none !important;
+}
+
+/* Remove any body padding/margin for full screen game */
+body:has(.game-container) {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+</style>
+
+<script>
+// Wait for OAuth component to be loaded
+document.addEventListener('DOMContentLoaded', function() {
+    // Check if user is already authenticated
+    const checkAuthStatus = () => {
+        // Check if OAuth components are available and user is authenticated
+        if (window.currentUser && window.currentAgent) {
+            showGame();
+            return true;
+        }
+        return false;
+    };
+
+    // Show game iframe
+    const showGame = () => {
+        document.getElementById('gameAuth').style.display = 'none';
+        document.getElementById('gameFrame').style.display = 'block';
+    };
+
+    // Listen for OAuth success
+    window.addEventListener('oauth-success', function(event) {
+        console.log('OAuth success:', event.detail);
+        showGame();
+    });
+
+    // Check auth status on load
+    if (!checkAuthStatus()) {
+        // Check periodically if OAuth components are loaded
+        const authCheckInterval = setInterval(() => {
+            if (checkAuthStatus()) {
+                clearInterval(authCheckInterval);
+            }
+        }, 500);
+    }
+});
+</script>
+
+<!-- Include OAuth assets -->
+{% include "oauth-assets.html" %}
+{% endblock %}
\ No newline at end of file
diff --git a/oauth/src/App.jsx b/oauth/src/App.jsx
index 2105ab5..ba431ae 100644
--- a/oauth/src/App.jsx
+++ b/oauth/src/App.jsx
@@ -118,6 +118,14 @@ export default function App() {
     }
   }, [adminData])
 
+  // Expose current user and agent for game page
+  useEffect(() => {
+    if (user && agent) {
+      window.currentUser = user
+      window.currentAgent = agent
+    }
+  }, [user, agent])
+
   // Event listeners for blog communication
   useEffect(() => {
     // Clear OAuth completion flag once app is loaded
diff --git a/src/generator.rs b/src/generator.rs
index f5cd32e..d2006c6 100644
--- a/src/generator.rs
+++ b/src/generator.rs
@@ -89,6 +89,9 @@ impl Generator {
         // Generate PDS page
         self.generate_pds_page().await?;
 
+        // Generate Game page
+        self.generate_game_page().await?;
+
         println!("{} {} posts", "Generated".cyan(), posts.len());
 
         Ok(())
@@ -517,6 +520,30 @@ impl Generator {
         
         Ok(())
     }
+
+    async fn generate_game_page(&self) -> Result<()> {
+        let public_dir = self.base_path.join("public");
+        let game_dir = public_dir.join("game");
+        fs::create_dir_all(&game_dir)?;
+        
+        // Generate Game page using the game.html template
+        let config_with_timestamp = self.create_config_with_timestamp()?;
+        let mut context = tera::Context::new();
+        context.insert("config", &config_with_timestamp);
+        context.insert("site", &self.config.site);
+        context.insert("page", &serde_json::json!({
+            "title": "Game",
+            "description": "Play the game with AT Protocol authentication"
+        }));
+        
+        let rendered_content = self.template_engine.render("game.html", &context)?;
+        let output_path = game_dir.join("index.html");
+        fs::write(output_path, rendered_content)?;
+        
+        println!("{} Game page", "Generated".cyan());
+        
+        Ok(())
+    }
     
     fn extract_plain_text(&self, html_content: &str) -> String {
         // Remove HTML tags and extract plain text