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

UI-looks-better-and-improved-#43 #49

Closed
lq64 wants to merge 3 commits from UI-looks-better-and-improved-#43 into main
pull from: UI-looks-better-and-improved-#43
merge into: KnockOutWhist:main
Conversation 3 Commits 3 Files Changed 7 +176 -143
7 changed files with 176 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
knockoutwhistweb/app/assets/stylesheets/dark-mode.less
View File

@@ -3,7 +3,7 @@
--background-image: url('/assets/images/background.png') !important; --background-image: url('/assets/images/background.png') !important;
--color: #f8f9fa !important; /* Light text on dark bg */ --color: #f8f9fa !important; /* Light text on dark bg */
--highlightscolor: rgba(131, 131, 131, 0.75) !important; --highlightscolor: rgba(131, 131, 131, 0.75) !important;
--background-color: #192734;
/* Bootstrap variable overrides for dark mode */ /* Bootstrap variable overrides for dark mode */
--bs-body-color: var(--color); --bs-body-color: var(--color);
--bs-link-color: #66b2ff; --bs-link-color: #66b2ff;

1
knockoutwhistweb/app/assets/stylesheets/light-mode.less
View File

@@ -2,4 +2,5 @@
--background-image: url('/assets/images/img.png'); --background-image: url('/assets/images/img.png');
--color: black; --color: black;
--highlightscolor: rgba(0, 0, 0, 0.75); --highlightscolor: rgba(0, 0, 0, 0.75);
--background-color: rgba(228, 232, 237, 1);
} }

35
knockoutwhistweb/app/assets/stylesheets/main.less
View File

@@ -14,7 +14,7 @@
--bs-border-color: rgba(0, 0, 0, 0.125) !important; --bs-border-color: rgba(0, 0, 0, 0.125) !important;
--bs-heading-color: var(--color) !important; --bs-heading-color: var(--color) !important;
} }
@background-color: var(--background-color);
@highlightcolor: var(--highlightscolor); @highlightcolor: var(--highlightscolor);
@background-image: var(--background-image); @background-image: var(--background-image);
@color: var(--color); @color: var(--color);
@@ -24,10 +24,14 @@
} }
.game-field-background { .game-field-background {
background-image: @background-image; background-image: @background-image;
background-size: cover; max-width: 1400px;
background-position: center center; margin: 0 auto;
background-repeat: no-repeat; min-height: 100vh;
background-attachment: fixed; }
.lobby-background {
background-color: @background-color;
width: 100%;
height: 100vh;
} }
.navbar-header{ .navbar-header{
@@ -45,8 +49,11 @@
.bottom-div { .bottom-div {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 50%;
transform: translateX(-50%);
max-width: 1400px;
width: 100%; width: 100%;
margin: 0;
text-align: center; text-align: center;
padding: 10px; padding: 10px;
} }
@@ -205,4 +212,20 @@ body {
color: @color; color: @color;
font-size: 1.5em; font-size: 1.5em;
font-family: Arial, serif; font-family: Arial, serif;
}
.score-table {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 10px;
margin-bottom: 20px;
backdrop-filter: blur(8px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.score-header {
font-weight: bold;
color: #000000;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.score-row {
color: #000000;
} }

105
knockoutwhistweb/app/views/ingame/ingame.scala.html
View File

@@ -3,58 +3,77 @@
@(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby) @(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby)
@main("Ingame") { @main("Ingame") {
<div class="py-5 ms-4 me-4"> <div class="lobby-background vh-100">
<main class="game-field-background vh-100">
<div class="py-5 container-xxl">
<div class="row ms-4 me-4"> <div class="row ms-4 me-4">
<div class="col-4 mt-5 text-start"> <div class="col-4 mt-5 text-start">
<h4 class="fw-semibold mb-1">Current Player</h4> <h4 class="fw-semibold mb-1">Current Player</h4>
<p class="fs-5 text-primary">@gamelobby.getLogic.getCurrentPlayer.get.name</p> <p class="fs-5 text-primary">@gamelobby.getLogic.getCurrentPlayer.get.name</p>
@if(!TrickUtil.isOver(gamelobby.getLogic.getCurrentMatch.get, gamelobby.getLogic.getPlayerQueue.get)) { @if(!TrickUtil.isOver(gamelobby.getLogic.getCurrentMatch.get, gamelobby.getLogic.getPlayerQueue.get)) {
<h4 class="fw-semibold mb-1">Next Player</h4> <h4 class="fw-semibold mb-1">Next Player</h4>
@for(nextplayer <- gamelobby.getLogic.getPlayerQueue.get.duplicate()) { @for(nextplayer <- gamelobby.getLogic.getPlayerQueue.get.duplicate()) {
<p class="fs-5 text-primary">@nextplayer</p> <p class="fs-5 text-primary">@nextplayer</p>
} }
} }
</div> </div>
<div class="d-flex col-md-4 text-center justify-content-center g-3 mb-5"> <div class="col-4 text-center">
@for((cardplayed, player) <- gamelobby.getLogic.getCurrentTrick.get.cards) {
<div class="col-auto"> <div class="score-table mt-5">
<div class="card text-center shadow-sm border-0 bg-transparent" style="width: 7rem; backdrop-filter: blur(4px);"> <h4 class="fw-bold mb-3 text-black">Tricks Won</h4>
<div class="p-2">
@util.WebUIUtils.cardtoImage(cardplayed) width="100%"/> <div class="d-flex justify-content-between score-header pb-1">
</div> <div style="width: 50%">PLAYER</div>
<div class="card-body p-2 bg-transparent"> <div style="width: 50%">TRICKS</div>
<small class="fw-semibold text-secondary">@player</small> </div>
@for(player <- gamelobby.getLogic.getPlayerQueue.get.toList.sortBy { p =>
-(gamelobby.getLogic.getCurrentRound.get.tricklist.filter { trick => trick.winner.contains(p) }.size)
}) {
<div class="d-flex justify-content-between score-row pt-1">
<div style="width: 50%" class="text-truncate">@player.name</div>
<div style="width: 50%">
@(gamelobby.getLogic.getCurrentRound.get.tricklist.filter { trick => trick.winner.contains(player) }.size)
</div> </div>
</div> </div>
}
</div> </div>
} <div class="d-flex justify-content-center g-3 mb-5">
</div> @for((cardplayed, player) <- gamelobby.getLogic.getCurrentTrick.get.cards) {
<div class="col-auto">
<div class="card text-center shadow-sm border-0 bg-transparent" style="width: 7rem; backdrop-filter: blur(4px);">
<div class="p-2">
@util.WebUIUtils.cardtoImage(cardplayed) width="100%"/>
</div>
<div class="card-body p-2 bg-transparent">
<small class="fw-semibold text-secondary">@player</small>
</div>
</div>
</div>
}
</div>
</div>
<div class="col-4 mt-5 text-end">
<h4 class="fw-semibold mb-1">Trumpsuit</h4>
<p class="fs-5 text-primary">@gamelobby.getLogic.getCurrentRound.get.trumpSuit</p>
<div class="col-md-4 text-end"> <h5 class="fw-semibold mt-4 mb-1">First Card</h5>
<h4 class="fw-semibold mb-1">Trumpsuit</h4> <div class="d-inline-block border rounded shadow-sm p-1 bg-light">
<p class="fs-5 text-primary">@gamelobby.getLogic.getCurrentRound.get.trumpSuit</p> @if(gamelobby.getLogic.getCurrentTrick.get.firstCard.isDefined) {
@util.WebUIUtils.cardtoImage(gamelobby.getLogic.getCurrentTrick.get.firstCard.get) width="80px"/>
<h5 class="fw-semibold mt-4 mb-1">First Card</h5> } else {
<div class="d-inline-block border rounded shadow-sm p-1 bg-light"> @views.html.render.card.apply("images/cards/1B.png")("Blank Card") width="80px"/>
@if(gamelobby.getLogic.getCurrentTrick.get.firstCard.isDefined) { }
@util.WebUIUtils.cardtoImage(gamelobby.getLogic.getCurrentTrick.get.firstCard.get) width="80px"/> </div>
} else {
@views.html.render.card.apply("images/cards/1B.png")("Blank Card") width="80px"/>
}
</div> </div>
</div> </div>
</div>
<div class="row justify-content-center g-2 mt-4 bottom-div" style="backdrop-filter: blur(4px); margin-left: 0; margin-right: 0;">
<div class="row"> <div class="row justify-content-center" id="card-slide">
@for(i <- player.currentHand().get.cards.indices) {
</div>
<div class="row justify-content-center g-2 mt-4 bottom-div" style="backdrop-filter: blur(4px);">
<div class="row justify-content-center" id="card-slide">
@for(i <- player.currentHand().get.cards.indices) {
<div class="col-auto handcard" style="border-radius: 6px"> <div class="col-auto handcard" style="border-radius: 6px">
<form action="@(routes.IngameController.playCard(gamelobby.id))" method="post" class="m-0 p-0" style="border-radius: 6px"> <form action="@(routes.IngameController.playCard(gamelobby.id))" method="post" class="m-0 p-0" style="border-radius: 6px">
<input type="hidden" name="cardId" value="@i" /> <input type="hidden" name="cardId" value="@i" />
@@ -63,8 +82,10 @@
</button> </button>
</form> </form>
</div> </div>
} }
</div>
</div> </div>
</div> </div>
</div> </main>
</div>
} }

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

@@ -1,82 +1,73 @@
@(user: Option[model.users.User], gamelobby: logic.game.GameLobby) @(user: Option[model.users.User], gamelobby: logic.game.GameLobby)
@main("Lobby") { @main("Lobby") {
<div class="container"> <main class="lobby-background vh-100">
<div class="row"> <div class="container d-flex flex-column" style="height: calc(100vh - 1rem);">
<div class="col"> <div class="row">
<div class="p-3 fs-1 d-flex align-items-center"> <div class="col">
<div class="text-center" style="flex-grow: 1;"> <div class="p-3 fs-1 d-flex align-items-center">
Lobby-Name: @gamelobby.name <div class="text-center" style="flex-grow: 1;">
Lobby-Name: @gamelobby.name
</div>
<form action="@(routes.IngameController.leaveGame(gamelobby.id))">
<button type="submit" class="btn btn-danger ms-auto">Exit</button>
</form>
</div> </div>
<form action="@(routes.IngameController.leaveGame(gamelobby.id))">
<button type="submit" class="btn btn-danger ms-auto">Exit</button>
</form>
</div> </div>
</div> </div>
</div> <div class="row">
<div class="row"> <div class="col">
<div class="col"> <div class="p-3 text-center fs-4">Playeramount: @gamelobby.getPlayers.size / @gamelobby.maxPlayers</div>
<div class="p-3 text-center fs-4">Playeramount: @gamelobby.getPlayers.size / @gamelobby.maxPlayers</div> </div>
</div> </div>
</div> <div class="row justify-content-center align-items-center flex-grow-1">
<div class="row justify-content-center"> @if((gamelobby.getUserSession(user.get.id).host)) {
@for(playersession <- gamelobby.getPlayers.values) {
@if((gamelobby.getUserSession(user.get.id).host)) { <div class="col-auto my-auto">
@for(playersession <- gamelobby.getPlayers.values) { <div class="card" style="width: 18rem;">
<div class="col-auto"> <img src="@routes.Assets.versioned("images/profile.png")" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
<div class="card" style="width: 18rem;"> <div class="card-body">
@if(playersession.id == user.get.id) {
<h5 class="card-title">@playersession.name (You)</h5>
@* <p class="card-text">Your text could be here!</p>*@
<a href="#" class="btn btn-danger disabled" aria-disabled="true" tabindex="-1">Remove</a>
} else {
<h5 class="card-title">@playersession.name</h5>
@* <p class="card-text">Your text could be here!</p>*@
<form action="@(routes.IngameController.kickPlayer(gamelobby.id, playersession.id))" method="post">
<button type="submit" class="btn btn-danger">Remove</button>
</form>
}
</div>
</div>
</div>
}
<div class="col-12 text-center mb-5">
<a href="@(routes.IngameController.startGame(gamelobby.id))" class="btn btn-success">Start Game</a>
</div>
} else {
@for(playersession <- gamelobby.getPlayers.values) {
<div class="col-auto my-auto"> <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" /> <img src="@routes.Assets.versioned("images/profile.png")" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
<div class="card-body"> <div class="card-body">
@if(playersession.id == user.get.id) { @if(playersession.id == user.get.id) {
<h5 class="card-title">@playersession.name (You)</h5> <h5 class="card-title">@playersession.name (You)</h5>
@* <p class="card-text">Your text could be here!</p>*@
<a href="#" class="btn btn-danger disabled" aria-disabled="true" tabindex="-1">Remove</a>
} else { } else {
<h5 class="card-title">@playersession.name</h5> <h5 class="card-title">@playersession.name</h5>
@* <p class="card-text">Your text could be here!</p>*@
<form action="@(routes.IngameController.kickPlayer(gamelobby.id, playersession.id))" method="post">
<button type="submit" class="btn btn-danger">Remove</button>
</form>
} }
</div> </div>
</div>
</div>
}
<div class="row">
<div class="col text-center mt-3">
<a href="@(routes.IngameController.startGame(gamelobby.id))" class="btn btn-success">Start Game</a>
</div>
</div>
} else {
@for(playersession <- gamelobby.getPlayers.values) {
<div class="col-auto">
<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 class="row">
<div class="col mt-3">
<p class="text-center fs-4">Waiting for the host to start the game...</p>
</div>
</div>
<div class="row">
<div class="col mt-1">
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</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> }
} </div>
</div> </div>
</div> </main>
} }

7
knockoutwhistweb/app/views/main.scala.html
View File

@@ -18,15 +18,10 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
</head> </head>
<body class="d-flex flex-column min-vh-100 game-field-background"> <body class="d-flex flex-column min-vh-100">
<main>
@* And here's where we render the `Html` object containing @* And here's where we render the `Html` object containing
* the page content. *@ * the page content. *@
@content @content
</main>
<footer class="footer">
</footer>
<script src="@routes.Assets.versioned("javascripts/main.js")" type="text/javascript"></script> <script src="@routes.Assets.versioned("javascripts/main.js")" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

50
knockoutwhistweb/app/views/mainmenu/creategame.scala.html
View File

@@ -2,31 +2,33 @@
@main("Create Game") { @main("Create Game") {
@navbar(user) @navbar(user)
<form action="@routes.MainMenuController.createGame()" method="post" class="game-field-background"> <main class="lobby-background flex-grow-1">
<div class="w-50 mx-auto"> <form action="@routes.MainMenuController.createGame()" method="post">
<div class="mt-3"> <div class="w-50 mx-auto">
<label for="lobbyname" class="form-label">Lobby-Name</label>
<input type="text" class="form-control" id="lobbyname" name="lobbyname" placeholder="Lobby 1" required>
</div>
<div class="form-check form-switch mt-3">
<input class="form-check-input" type="checkbox" id="visibilityswitch" disabled>
<label class="form-check-label" for="visibilityswitch">public/private</label>
</div>
<div class="mt-3"> <div class="mt-3">
<label for="playeramount" class="form-label">Playeramount:</label> <label for="lobbyname" class="form-label">Lobby-Name</label>
<input type="range" class="form-range text-body" min="2" max="7" value="2" id="playeramount" name="playeramount"> <input type="text" class="form-control" id="lobbyname" name="lobbyname" placeholder="Lobby 1" required>
<div class="d-flex justify-content-between"> </div>
<span>2</span> <div class="form-check form-switch mt-3">
<span>3</span> <input class="form-check-input" type="checkbox" id="visibilityswitch" disabled>
<span>4</span> <label class="form-check-label" for="visibilityswitch">public/private</label>
<span>5</span> </div>
<span>6</span> <div class="mt-3">
<span>7</span> <label for="playeramount" class="form-label">Playeramount:</label>
</div> <input type="range" class="form-range text-body" min="2" max="7" value="2" id="playeramount" name="playeramount">
<div class="d-flex justify-content-between">
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
</div>
</div>
<div class="mt-3 text-center">
<button type="submit" class="btn btn-success">Create Game</button>
</div> </div>
<div class="mt-3 text-center">
<button type="submit" class="btn btn-success">Create Game</button>
</div> </div>
</div> </form>
</form> </main>
} }