135 lines
3.2 KiB
HTML
135 lines
3.2 KiB
HTML
{% 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 %} |