mmainguy/space-game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix ENTER XR button centering and improve preloader styling

Browse Source 
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Michael Mainguy 2025-12-01 12:10:12 -06:00
parent 1528f54472
commit 3104859bb7
2 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/styles.css
View File

@ -750,7 +750,7 @@ body {
.preloader-content { .preloader-content {
text-align: center; text-align: center;
max-width: 600px; max-width: 800px;
width: 100%; width: 100%;
} }
@ -787,6 +787,12 @@ body {
box-shadow: 0 0 10px rgba(102, 126, 234, 0.5); box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
} }
.preloader-button-container {
display: flex;
flex-direction: column;
text-align: center;
}
.preloader-button { .preloader-button {
display: none; display: none;
padding: var(--space-lg) var(--space-3xl); padding: var(--space-lg) var(--space-3xl);
@ -859,7 +865,7 @@ body {
padding: 0; padding: 0;
margin: var(--space-md) 0 0 0; margin: var(--space-md) 0 0 0;
text-align: left; text-align: left;
max-width: 400px; max-width: 600px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }

5
src/ui/screens/preloader.ts
View File

@ -39,7 +39,10 @@ export class Preloader {
<div id="preloaderError" class="preloader-error" style="display: none;"> <div id="preloaderError" class="preloader-error" style="display: none;">
VR headset not detected. This game requires a VR device. VR headset not detected. This game requires a VR device.
</div> </div>
<div class="preloader-button-container">
<button id="preloaderStartBtn" class="preloader-button">ENTER XR</button> <button id="preloaderStartBtn" class="preloader-button">ENTER XR</button>
</div>
</div>`; </div>`;
} }
@ -104,7 +107,7 @@ export class Preloader {
private animateButtonIn(): void { private animateButtonIn(): void {
if (!this.startButton) return; if (!this.startButton) return;
this.startButton.style.display = 'block'; this.startButton.style.display = 'inline-block';
this.startButton.style.opacity = '0'; this.startButton.style.opacity = '0';
this.startButton.style.transform = 'translateY(20px)'; this.startButton.style.transform = 'translateY(20px)';
setTimeout(() => { setTimeout(() => {