130 lines
3.4 KiB
Plaintext
130 lines
3.4 KiB
Plaintext
package component
|
|
|
|
import (
|
|
"fmt"
|
|
common "forge.cadoles.com/wpetit/kouiz/internal/http/handler/webui/common/component"
|
|
"forge.cadoles.com/wpetit/kouiz/internal/store"
|
|
"strconv"
|
|
)
|
|
|
|
type LeaderboardPageVModel struct {
|
|
Player *store.Player
|
|
Players []*store.Player
|
|
PlayerRank int
|
|
}
|
|
|
|
templ LeaderboardPage(vmodel LeaderboardPageVModel) {
|
|
@common.AppPage(common.WithPageOptions(
|
|
common.WithTitle("Tableau des scores"),
|
|
)) {
|
|
<h3 class="title">Podium</h3>
|
|
<div class="podium">
|
|
<div class="podium-position podium-second">
|
|
if len(vmodel.Players) > 1 {
|
|
<div class="podium-player">
|
|
<span class="has-text-weight-bold is-uppercase">{ vmodel.Players[1].Name }</span>
|
|
<br/>
|
|
<span class="has-text-grey is-size-7">{ strconv.FormatInt(int64(vmodel.Players[1].Score), 10) }pts</span>
|
|
</div>
|
|
}
|
|
<div class="podium-step">2ème</div>
|
|
</div>
|
|
<div class="podium-position podium-first">
|
|
if len(vmodel.Players) > 0 {
|
|
<div class="podium-player">
|
|
<span class="icon is-size-4 has-text-warning"><i class="fas fa-trophy"></i></span>
|
|
<br/>
|
|
<span class="has-text-weight-bold is-uppercase">{ vmodel.Players[0].Name }</span>
|
|
<br/>
|
|
<span class="has-text-grey is-size-7">{ strconv.FormatInt(int64(vmodel.Players[0].Score), 10) }pts</span>
|
|
</div>
|
|
}
|
|
<div class="podium-step">1er</div>
|
|
</div>
|
|
<div class="podium-position podium-third">
|
|
if len(vmodel.Players) > 2 {
|
|
<div class="podium-player">
|
|
<span class="has-text-weight-bold is-uppercase">{ vmodel.Players[2].Name }</span>
|
|
<br/>
|
|
<span class="has-text-grey is-size-7">{ strconv.FormatInt(int64(vmodel.Players[2].Score), 10) }pts</span>
|
|
</div>
|
|
}
|
|
<div class="podium-step">3ème</div>
|
|
</div>
|
|
</div>
|
|
<h3 class="title mt-5">Tableau des scores</h3>
|
|
<div class="table-container">
|
|
<table class="table is-fullwidth">
|
|
<thead>
|
|
<tr>
|
|
<th>Position</th>
|
|
<th>Pseudonyme</th>
|
|
<th>Score</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
for i, p := range vmodel.Players {
|
|
<tr
|
|
if p.ID == vmodel.Player.ID {
|
|
class="has-text-weight-bold is-info"
|
|
}
|
|
id={ fmt.Sprintf("player-%d", p.ID) }
|
|
>
|
|
<td>{ strconv.FormatInt(int64(i+1), 10) }</td>
|
|
<td>{ p.Name }</td>
|
|
<td>{ strconv.FormatInt(int64(p.Score), 10) }</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<style>
|
|
.podium {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.podium .podium-step {
|
|
width: 100px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
font-weight: bold;
|
|
color: white;
|
|
text-shadow: 1px 1px #333;
|
|
}
|
|
|
|
.podium .podium-position {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.podium .podium-player {
|
|
text-shadow: none;
|
|
color: #333;
|
|
text-align: center;
|
|
}
|
|
|
|
.podium .podium-first .podium-step {
|
|
height: 70px;
|
|
background-color: hsl(141, 71%, 48%) ;
|
|
}
|
|
|
|
.podium .podium-second .podium-step {
|
|
height: 50px;
|
|
background-color: hsl(204, 86%, 53%);
|
|
}
|
|
|
|
.podium .podium-third .podium-step {
|
|
height: 30px;
|
|
background-color: #66d1ff;
|
|
}
|
|
</style>
|
|
}
|
|
}
|