cadoles-arcad/template/layouts/highscore.html.tmpl

{{define "title"}}{{.App.Manifest.Title}} - Tableau des scores - Arcad{{end}}
{{define "body"}}
{{template "header" .}}
<section class="block">
  <div>
      <div class="flex">
        <h1 class="text-4xl mt-2 text-center">{{.App.Manifest.Title}}</h1>
        <a class="flex m-5" 
          href="/apps/{{ .App.ID }}">
          <span>Ouvrir</span>
          <img class="custom-icon" width="50" height="50" src="/icons/chevron-right-solid.svg"/>
        </a>
      </div>
    <div>
      <div>
        <h2 class="text-xl text-center">Podium</h2>
        {{template "podium" .}}
      </div>
      <div class="mb-4">
        <h2 class="text-xl">Tableau des scores</h2>
        {{template "highscores" .}}
      </div>
    </div>
  </div>
</section>
{{end}}
{{template "base" .}}

{{define "podium"}}
<div class="podium-container">
  <div class="podium">
    <div class="pod second">
      {{ if gt (len .Highscores) 1 }}
      {{ $secondPlayerHighscore := index .Highscores 1 }}
      {{if $secondPlayerHighscore}}
      <div class="pod-player">
        {{ $secondPlayer := (index .Users $secondPlayerHighscore.UserID) }}
        <span class="player-nickname">{{with $secondPlayer}}{{ .Nickname }}{{else}}???{{end}}</span>
        <span class="player-score">{{ $secondPlayerHighscore.Score }}</span>
      </div>
      {{end}}
      {{end}}
      <div class="pod-stair">
        <span class="pod-position">2</span>
      </div>
    </div>

    <div class="pod first">
      {{ if gt (len .Highscores) 0 }}
      {{ $firstPlayerHighscore := index .Highscores 0 }}
      {{if $firstPlayerHighscore}}
      <div class="pod-player">
        {{ $firstPlayer := (index .Users $firstPlayerHighscore.UserID) }}
        <svg class="icon player-crown">
          <use xlink:href="#crown"></use>
        </svg>
        <span class="player-nickname">{{with $firstPlayer}}{{ .Nickname }}{{else}}???{{end}}</span>
        <span class="player-score">{{ $firstPlayerHighscore.Score }}</span>
      </div>
       {{end}}
      {{end}}
      <div class="pod-stair">
        <span class="pod-position">1</span>
      </div>
    </div>
    <div class="pod third">
      {{ if gt (len .Highscores) 2 }}
      {{ $thirdPlayerHighscore := index .Highscores 2 }}
      {{if $thirdPlayerHighscore}}
      <div class="pod-player">
        {{ $thirdPlayer := (index .Users $thirdPlayerHighscore.UserID) }}
        <span class="player-nickname">{{with $thirdPlayer}}{{ .Nickname }}{{else}}???{{end}}</span>
        <span class="player-score">{{ $thirdPlayerHighscore.Score }}</span>
      </div>
      {{end}}
      {{end}}
      <div class="pod-stair">
        <div class="pod-position">3</div>
      </div>
    </div>
  </div>
</div>
{{end}}


{{define "highscores"}}
{{ $users := .Users }}
  <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
    <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
        <tr>
            <th scope="col" class="px-6 py-3">
                Position
            </th>
            <th scope="col" class="px-6 py-3">
                Pseudonyme
            </th>
            <th scope="col" class="px-6 py-3">
                Score
            </th>
            <th scope="col" class="px-6 py-3">
                Date
            </th>   
        </tr>
    </thead>            
    <tbody>      
    {{range $i, $h := .Highscores}}
    {{ $user := (index $users $h.UserID) }}
      <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
        {{ $position := addInt $i 1 }}
        <td scope="row" class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
          {{ $position }}
        </td>
        <td class="px-6 py-4">
          {{with $user}}{{ .Nickname }}{{else}}???{{end}}
        </td>
        <td class="px-6 py-4">
          {{ $h.Score }}
        </td>
        <td class="px-6 py-4">
          {{ localeTimeFormat $h.CreationTime "02/01/2006 15:04" "fr_FR" }}
        </td>
    </tr>
    {{else}}
      <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
        <td colspan="4" class="has-text-centered is-italic">Aucun score pour l'instant.</td>
      </tr>
    {{end}}
    </tbody>
  </table>
{{end}}