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

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>