ai/log
1
0
Fork 0
Code Pull Requests Actions Wiki Activity

test game

Browse Source
This commit is contained in:
syui
2025-07-26 21:07:35 +09:00
parent 3c9ef78696
commit 59fe764291
4 changed files with 155 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
my-blog/static/js/ask-ai.js
View File

@@ -513,6 +513,65 @@ document.addEventListener('DOMContentLoaded', function() {
});
});
// Game functionality
function showGame() {
const gameFrame = document.getElementById('gameFrame');
const chatForm = document.getElementById('chatForm');
const chatHistory = document.getElementById('chatHistory');
const panel = document.getElementById('askAiPanel');
if (gameFrame && chatForm && panel) {
gameFrame.style.display = 'block';
chatForm.style.display = 'none';
chatHistory.style.display = 'none';
panel.classList.add('game-mode');
}
}
function closeGame() {
const gameFrame = document.getElementById('gameFrame');
const chatForm = document.getElementById('chatForm');
const chatHistory = document.getElementById('chatHistory');
const panel = document.getElementById('askAiPanel');
if (gameFrame && chatForm && panel) {
gameFrame.style.display = 'none';
chatForm.style.display = 'block';
chatHistory.style.display = 'block';
panel.classList.remove('game-mode');
}
}
// Show game button when user is authenticated
function showGameButton() {
const gameButton = document.getElementById('gameButton');
if (gameButton) {
gameButton.style.display = 'inline-block';
}
}
// Hide game button when user is not authenticated
function hideGameButton() {
const gameButton = document.getElementById('gameButton');
if (gameButton) {
gameButton.style.display = 'none';
}
}
// Override handleAuthenticationStatus to include game button logic
const originalHandleAuthenticationStatus = handleAuthenticationStatus;
function handleAuthenticationStatus(isAuthenticated) {
originalHandleAuthenticationStatus(isAuthenticated);
if (isAuthenticated) {
showGameButton();
} else {
hideGameButton();
}
}
// Global functions for onclick handlers
window.toggleAskAI = toggleAskAI;
window.askQuestion = askQuestion;
window.showGame = showGame;
window.closeGame = closeGame;

96
my-blog/templates/base.html
View File

@@ -72,6 +72,7 @@
<!-- Ask AI Panel -->
<div class="ask-ai-panel" id="askAiPanel" style="display: none;">
<div class="ask-ai-content">
<!-- Auth Check Section -->
<div id="authCheck" class="auth-check">
<div class="loading-content">
<div class="loading-spinner"></div>
@@ -79,9 +80,27 @@
</div>
</div>
<!-- Game Frame (shown when authenticated) -->
<div id="gameFrame" class="game-frame-container" style="display: none;">
<div class="game-header">
<h3>UE5 Pixel Streaming Game</h3>
<button onclick="closeGame()" class="close-game-btn">Close Game</button>
</div>
<iframe
id="pixelStreamingFrame"
src="https://verse.syui.ai/simple-noui.html"
frameborder="0"
allowfullscreen
allow="microphone; camera; fullscreen"
class="pixel-streaming-iframe"
></iframe>
</div>
<!-- AI Chat Form (shown when not playing game) -->
<div id="chatForm" class="ask-ai-form" style="display: none;">
<input type="text" id="aiQuestion" placeholder="What would you like to know?" />
<button onclick="askQuestion()" id="askButton">Ask</button>
<button onclick="showGame()" id="gameButton" class="game-toggle-btn" style="display: none;">Play Game</button>
</div>
<div id="chatHistory" class="chat-history" style="display: none;"></div>
@@ -132,6 +151,83 @@
<script src="/js/theme.js"></script>
<script src="/js/image-comparison.js"></script>
<!-- Game Panel Styles -->
<style>
/* Game frame styling within ask-ai panel */
.game-frame-container {
width: 100%;
height: 500px;
display: flex;
flex-direction: column;
background: #000;
border-radius: 8px;
overflow: hidden;
}
.game-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
background: rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.game-header h3 {
margin: 0;
color: white;
font-size: 1.1em;
}
.close-game-btn {
background: var(--theme-color, #f40);
border: none;
color: white;
padding: 5px 15px;
border-radius: 4px;
cursor: pointer;
font-size: 0.9em;
transition: all 0.2s;
}
.close-game-btn:hover {
background: rgba(255, 68, 0, 0.8);
}
.pixel-streaming-iframe {
flex: 1;
width: 100%;
height: 100%;
border: none;
}
.game-toggle-btn {
background: var(--theme-color, #f40);
border: none;
color: white;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
margin-left: 10px;
transition: all 0.2s;
}
.game-toggle-btn:hover {
background: rgba(255, 68, 0, 0.8);
}
/* Expand ask-ai panel when game is shown */
.ask-ai-panel.game-mode {
max-height: 600px;
}
/* Hide AI form when game is active */
.ask-ai-panel.game-mode #chatForm,
.ask-ai-panel.game-mode #chatHistory {
display: none !important;
}
</style>
<!-- Mermaid support -->
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
<script>

135
my-blog/templates/game.html
View File

@@ -1,135 +0,0 @@
{% 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 %}

27
src/generator.rs
View File

@@ -89,9 +89,6 @@ 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(())
@@ -521,30 +518,6 @@ 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
let mut text = String::new();