3014947
/
SpotifyRoulette
1
0
Fork 0
Code Issues 20 Pull Requests Packages Projects Releases Wiki Activity

Spiel beitreten in der lobby einbinden

pull/32/head
eric 2025-08-10 18:21:03 +02:00
parent babfe4925d
commit adfaf00817
2 changed files with 46 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/main/resources/public/js/lobby.js
View File

@ -12,8 +12,13 @@ document.getElementById("createGame").addEventListener("click", () => {
window.location.href = `/create-game.html?username=${encodeURIComponent(username)}`; window.location.href = `/create-game.html?username=${encodeURIComponent(username)}`;
}); });
document.getElementById("joinGame").addEventListener("click", () => { //document.getElementById("joinGame").addEventListener("click", () => {
window.location.href = username // window.location.href = username
? `/join-game.html?username=${encodeURIComponent(username)}` // ? `/join-game.html?username=${encodeURIComponent(username)}`
: "/join-game.html"; // : "/join-game.html";
//});
// NEU: statt Redirect -> Fokus auf Eingabe
document.getElementById("joinGame")?.addEventListener("click", () => {
const input = document.getElementById("gameId");
if (input) { input.focus(); input.select(); }
}); });

41
src/main/resources/public/lobby.html
View File

@ -52,6 +52,15 @@
.tile .txt{display:flex; flex-direction:column} .tile .txt{display:flex; flex-direction:column}
.tile .txt b{font-size:16px} .tile .txt b{font-size:16px}
.tile .txt span{font-size:13px; color:var(--muted)} .tile .txt span{font-size:13px; color:var(--muted)}
/* Join form */
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
label{color:var(--muted)}
input[type="text"]{
background:#0f0f0f; color:var(--text); border:1px solid var(--border);
padding:12px 14px; border-radius:12px; outline:none; min-width:180px;
}
input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--glow)}
</style> </style>
</head> </head>
<body> <body>
@ -85,22 +94,44 @@
<div class="icon" aria-hidden="true"> <div class="icon" aria-hidden="true">
<svg width="22" height="22" viewBox="0 0 24 24" fill="#1db954"><path d="M12 2a6 6 0 0 1 6 6v2h2v12H4V10h2V8a6 6 0 0 1 6-6Zm0 2a4 4 0 0 0-4 4v2h8V8a4 4 0 0 0-4-4Z"/></svg> <svg width="22" height="22" viewBox="0 0 24 24" fill="#1db954"><path d="M12 2a6 6 0 0 1 6 6v2h2v12H4V10h2V8a6 6 0 0 1 6-6Zm0 2a4 4 0 0 0-4 4v2h8V8a4 4 0 0 0-4-4Z"/></svg>
</div> </div>
<div class="txt"><b>Bestehendem Spiel beitreten</b><span>Du hast schon einen Code? Klicke hier.</span></div> <div class="txt"><b>Bestehendem Spiel beitreten</b><span>Du hast schon einen Code? Gib ihn unten ein.</span></div>
</div> </div>
<button id="joinGame" class="btn btn-ghost">Spiel beitreten</button>
<!-- Direktes Join-Formular in der Lobby -->
<form id="joinForm" class="row" style="gap:10px; flex-wrap:nowrap">
<label for="gameId" class="muted" style="min-width:90px">Spiel‑Code</label>
<input id="gameId" name="gameId" placeholder="4‑stellig" inputmode="numeric" maxlength="4" required />
<button type="submit" class="btn btn-primary" style="width:auto">Beitreten</button>
<!-- Dummy-Button für Abwärtskompatibilität mit altem lobby.js -->
<button id="joinGame" type="button" style="display:none">Join (legacy)</button>
</form>
<p class="muted" style="margin-top:8px">Tipp: Code ist vierstellig (z.B. 3759).</p>
</div> </div>
</div> </div>
</section> </section>
</div> </div>
<!-- UI-Helfer: Username-Anzeige aus URL lesen --> <!-- Username-Anzeige oben rechts -->
<script type="module"> <script type="module">
const p = new URLSearchParams(location.search); const p = new URLSearchParams(location.search);
const u = p.get('username'); const u = p.get('username');
const $ = (s)=>document.querySelector(s); if (u) document.querySelector('#uname').textContent = u;
if (u) { $('#uname').textContent = u; }
</script> </script>
<script type="module" src="/js/lobby.js"></script> <script type="module" src="/js/lobby.js"></script>
<script type="module" src="/js/join-game.js"></script>
<!-- Optional: Klick auf alten Join-Button fokusiert Eingabefeld statt Redirect -->
<script>
const btn = document.getElementById('joinGame');
if (btn) {
btn.addEventListener('click', (ev) => {
ev.preventDefault(); ev.stopImmediatePropagation();
const input = document.getElementById('gameId');
if (input) { input.focus(); input.select(); }
}, true); // capture-Phase, um evtl. ältere Listener zu überstimmen
}
</script>
</body> </body>
</html> </html>