KnockOutWhist/KnockOutWhist-Web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 32 Wiki Activity

feat(api): Vue

Browse Source 
Changed ingame JQuery to Vue Components, Started changing lobby to vue components
This commit is contained in:
LQ63
2025-12-04 01:32:17 +01:00
parent eba2ad6232
commit 5eb0eac39e
5 changed files with 693 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
knockoutwhistweb/app/views/lobby/lobby.scala.html
View File

@@ -1,102 +1,38 @@
@(user: Option[model.users.User], gamelobby: logic.game.GameLobby)
@import play.api.libs.json._
<div id="lobby-app-mount"></div>
<main class="lobby-background vh-100" id="lobbybackground">
<!-- Kick Modal -->
<div class="modal fade" data-backdrop="static" data-keyboard="false" data-focus="true" id="kickedModal" tabindex="-1" role="dialog" aria-labelledby="kickedModalTitle">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="kickedModalTitle">Kicked</h5>
</div>
<div class="modal-body">
<p>You've been kicked from the lobby.</p>
</div>
</div>
</div>
</div>
<!-- Session Closed Modal -->
<div class="modal fade" data-backdrop="static" data-keyboard="false" data-focus="true" id="sessionClosed" tabindex="-1" role="dialog" aria-labelledby="sessionClosedModalTitle">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="sessionClosedModalTitle">Session Closed</h5>
</div>
<div class="modal-body">
<p>The session was closed.</p>
</div>
</div>
</div>
</div>
<!-- Lobby -->
<div class="container d-flex flex-column" style="height: calc(100vh - 1rem);">
<div class="row">
<div class="col">
<div class="p-3 fs-1 d-flex align-items-center">
<div class="text-center" style="flex-grow: 1;">
Lobby-Name: @gamelobby.name
</div>
<div class="btn btn-danger ms-auto" onclick="leaveGame('@gamelobby.id')">Exit</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="p-3 text-center fs-4" id="playerAmount">
Players: @gamelobby.getPlayers.size / @gamelobby.maxPlayers</div>
</div>
</div>
<div class="row justify-content-center align-items-center flex-grow-1">
@if((gamelobby.getUserSession(user.get.id).host)) {
<div id="players" class="justify-content-center align-items-center d-flex">
@for(playersession <- gamelobby.getPlayers.values) {
<div class="col-auto my-auto m-3">
<div class="card" style="width: 18rem;">
<img src="@routes.Assets.versioned("images/profile.png")" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
<div class="card-body">
@if(playersession.id == user.get.id) {
<h5 class="card-title">@playersession.name (You)</h5>
<a href="#" class="btn btn-danger disabled" aria-disabled="true" tabindex="-1">Remove</a>
} else {
<h5 class="card-title">@playersession.name</h5>
<div class="btn btn-danger" onclick="handleKickPlayer('@playersession.id')">
Remove</div>
}
</div>
</div>
</div>
}
</div>
<div class="col-12 text-center mb-5">
<div class="btn btn-success" onclick="startGame()">Start Game</div>
</div>
} else {
<div id="players" class="justify-content-center align-items-center d-flex">
@for(playersession <- gamelobby.getPlayers.values) {
<div class="col-auto my-auto m-3"> <div class="card" style="width: 18rem;">
<img src="@routes.Assets.versioned("images/profile.png")" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
<div class="card-body">
@if(playersession.id == user.get.id) {
<h5 class="card-title">@playersession.name (You)</h5>
} else {
<h5 class="card-title">@playersession.name</h5>
}
</div>
</div>
</div>
}
</div>
<div class="col-12 text-center mt-3">
<p class="fs-4">Waiting for the host to start the game...</p>
<div class="spinner-border mt-1" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
}
</div>
</div>
</main>
<script>
connectWebSocket()
// Initialisierung des momentanen Lobby Standes, welcher direkt gerendert werden muss.
const initialLobbyName = '@gamelobby.name';
const initialLobbyId = '@gamelobby.id';
const initialIsHost = @{user.map(u => gamelobby.getUserSession(u.id)).exists(_.host)};
const initialMaxPlayers = @{gamelobby.maxPlayers};
const initialPlayers = JSON.parse('@Html({
val currentUserId = user.map(_.id).getOrElse(java.util.UUID.randomUUID())
val playerListForVue = gamelobby.getUsers.toSeq.map { u =>
val isSelf = u.id == currentUserId
val playerDogStatus = false
Json.obj(
"id" -> u.id.toString,
"name" -> u.name,
"self" -> isSelf,
"dog" -> playerDogStatus
)
}
Json.stringify(Json.toJson(playerListForVue))
})');
connectWebSocket();
globalThis.initLobbyVueComponents(
initialLobbyName,
initialLobbyId,
initialIsHost,
initialMaxPlayers,
initialPlayers
);
</script>