feat: FRO-3 FRO-4 Added vue compontents to ingame and lobby (#100)
Added vue compontents to ingame and lobby. Co-authored-by: LQ63 <lkhermann@web.de> Reviewed-on: #100 Co-authored-by: lq64 <lq@blackhole.local> Co-committed-by: lq64 <lq@blackhole.local>
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user