From 6f48a6cd72cbc9c4bcf4014668824ca5ced40192 Mon Sep 17 00:00:00 2001
From: Alexandre PETIT <alexbreuillet@gmail.com>
Date: Mon, 26 Feb 2024 10:11:40 +0100
Subject: [PATCH] Patch build problem and finish session overview

---
 frontend/src/components/Fleet.vue             |   2 +-
 frontend/src/components/fleet/FleetLobby.vue  | 156 ++++++++++--------
 frontend/src/vue/templates/BannerTemplate.vue |  30 ++++
 3 files changed, 117 insertions(+), 71 deletions(-)
 create mode 100644 frontend/src/vue/templates/BannerTemplate.vue

diff --git a/frontend/src/components/Fleet.vue b/frontend/src/components/Fleet.vue
index 724fb7fa..c391b73a 100644
--- a/frontend/src/components/Fleet.vue
+++ b/frontend/src/components/Fleet.vue
@@ -23,7 +23,7 @@ onMounted(() => {
   }
 })
 
-function getRandomEnum<T>(anEnum: T): T[keyof T] {
+function getRandomEnum<T>(anEnum: any): T[keyof T] {
   const enumValues = Object.values(anEnum) as T[keyof T][];
   const randomIndex = Math.floor(Math.random() * enumValues.length);
   return enumValues[randomIndex];
diff --git a/frontend/src/components/fleet/FleetLobby.vue b/frontend/src/components/fleet/FleetLobby.vue
index 74a4b18f..36827faa 100644
--- a/frontend/src/components/fleet/FleetLobby.vue
+++ b/frontend/src/components/fleet/FleetLobby.vue
@@ -1,12 +1,16 @@
 <template>
   <section class="lobby-wrapper">
-    <div class="header">
-      <div class="content">
-        <img src="@/assets/icons/sot.svg">
-        <p>{{ session.sessionName }}</p>
-      </div>
-      <button>TODO</button>
-    </div>
+    <BannerTemplate>
+      <template #content>
+        <div class="header-content">
+          <img src="@/assets/icons/sot.svg">
+          <p>{{ session.sessionName }}</p>
+        </div>
+      </template>
+      <template #left-content>
+        <button class="session-starter">TODO</button>
+      </template>
+    </BannerTemplate>
     <div class="lobby-content">
       <div class="player-table">
         <PlayerFleet
@@ -14,20 +18,21 @@
             :player="player"/>
       </div>
       <div class="lobby-details">
-        <div class="header-information">
-          <h2>{{ t('session.informations.title') }}</h2>
-        </div>
-
-        <div class="information-data">
-          <h3>{{ t('session.informations.totalPlayer') }}</h3>
-          <p>{{ session.players.length }}</p>
-        </div>
-
-        <div class="information-data important">
-          <h3>{{ t('session.informations.totalPlayer') }}</h3>
-          <p>{{ session.players.filter(x => x.isReady).length }} / <span>{{ session.players.length }}</span></p>
+        <div class="top-content">
+          <div class="header-information">
+            <h2>{{ t('session.informations.title') }}</h2>
+          </div>
+
+          <div class="information-data">
+            <h3>{{ t('session.informations.totalPlayer') }}</h3>
+            <p>{{ session.players.length }}</p>
+          </div>
+
+          <div class="information-data important">
+            <h3>{{ t('session.informations.totalPlayer') }}</h3>
+            <p>{{ session.players.filter(x => x.isReady).length }} / <span>{{ session.players.length }}</span></p>
+          </div>
         </div>
-
         <div class="session-status">
           <p>{{ t('session.status.' + SessionStatus[session.status].toString().toLowerCase()) }}</p>
         </div>
@@ -42,6 +47,7 @@ import {PropType} from "vue";
 import {Fleet, SessionStatus} from "@/objects/Fleet.ts";
 import PlayerFleet from "@/vue/fleet/PlayerFleet.vue";
 import {useI18n} from "vue-i18n";
+import BannerTemplate from "@/vue/templates/BannerTemplate.vue";
 
 const {t} = useI18n()
 defineProps({
@@ -59,37 +65,36 @@ defineProps({
   height: 100%;
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: 12px;
 
-  .header {
-    border-radius: 5px;
-    background: var(--secondary-background) url("@/assets/banners/lobby.png");
-    background-size: cover;
-    overflow: hidden;
+  .header-content {
     display: flex;
-    justify-content: space-between;
+    height: 100%;
     align-items: center;
-    height: 140px;
+    margin-left: 36px;
+    gap: 32px;
 
-    .content {
-      display: flex;
-      align-items: center;
-      margin-left: 36px;
-      gap: 32px;
-
-      img {
-        width: 64px;
-        height: 64px;
-      }
+    img {
+      width: 64px;
+      height: 64px;
+    }
 
-      p {
-        font-family: BrushTip, sans-serif;
-        font-size: 31px;
-        align-self: end;
-      }
+    p {
+      font-family: BrushTip, sans-serif;
+      margin-top: 18px;
+      font-size: 31px;
     }
   }
 
+  button.session-starter {
+    all: unset;
+    cursor: pointer;
+    height: 100%;
+    background: linear-gradient(270deg, rgba(50, 212, 153, 0.20) 0%, rgba(50, 212, 153, 0.00) 108.45%);
+    padding: 0 16px;
+  }
+
+
   .lobby-content {
     height: calc(100% - 140px); // Minus header height
     display: flex;
@@ -119,47 +124,58 @@ defineProps({
       gap: 20px;
       overflow: hidden;
       height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
 
-      .header-information {
-        background: rgba(23, 26, 33, 0.50);
-        padding: 20px 8px;
+      .top-content {
         width: 100%;
 
-        h2 {
-          font-size: 16px;
-          font-weight: 500;
-          text-align: center;
-        }
-      }
+        .header-information {
+          background: rgba(23, 26, 33, 0.50);
+          padding: 20px 0;
+          width: 100%;
 
-      .information-data {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        align-items: center;
-        padding: 20px 8px;
-        gap: 12px;
-
-        h3 {
-          height: 14px;
-          color: var(--primary);
-          white-space: nowrap;
+          h2 {
+            font-size: 16px;
+            font-weight: 500;
+            text-align: center;
+          }
         }
 
-        &.important {
-          background: rgba(50, 212, 153, 0.10);;
-        }
 
-        p {
-          span {
+        .information-data {
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+          align-items: center;
+          padding: 20px 0;
+          gap: 12px;
+
+          h3 {
+            height: 14px;
             color: var(--primary);
+            white-space: nowrap;
+          }
+
+          &.important {
+            background: rgba(50, 212, 153, 0.10);;
+          }
+
+          p {
+            span {
+              color: var(--primary);
+            }
           }
         }
       }
     }
 
     .session-status {
-      justify-self: end;
+      padding: 20px 0;
+      background: rgba(212, 147, 50, 0.50);
+      width: 100%;
+      text-align: center;
     }
 
   }
diff --git a/frontend/src/vue/templates/BannerTemplate.vue b/frontend/src/vue/templates/BannerTemplate.vue
new file mode 100644
index 00000000..95220dbf
--- /dev/null
+++ b/frontend/src/vue/templates/BannerTemplate.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="header-wrapper">
+    <div class="header">
+      <slot name="content" />
+    </div>
+    <slot name="left-content" />
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="scss">
+.header-wrapper {
+  overflow: hidden;
+  border-radius: 5px;
+  height: 120px;
+  width: 100%;
+  display: flex;
+
+  .header {
+    background: var(--secondary-background) url("@/assets/banners/lobby.png");
+    background-size: cover;
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+  }
+}
+</style>
\ No newline at end of file