Add session join modal

README.md

@@ -1 +1,2 @@
+![banner](/frontend/src/assets/banners/banner.png)
 # BetterFleet

frontend/src/assets/locales/en.json

@@ -20,7 +20,12 @@
       "createComment": "TODO",
       "createSession": "Create a session",
       "joinComment": "TODO",
-      "joinSession": "Join a session"
+      "joinSession": "Join a session",
+      "modal": {
+        "button": "Join the session",
+        "comment": "TODO",
+        "title": "TODO"
+      }
     },
     "informations": {
       "title": "Informations",

frontend/src/assets/locales/fr.json

@@ -20,7 +20,12 @@
       "createComment": "Goûtez à la liberté de régner sur les flots en pirate !",
       "createSession": "Créer une session",
       "joinComment": "Hissons les voiles, monte à bord et rejoins l'équipage !",
-      "joinSession": "Rejoindre une session"
+      "joinSession": "Rejoindre une session",
+      "modal": {
+        "button": "Rejoindre la session",
+        "comment": "Vous devez saisir ci-dessous l'identifiant que le Maître de jeu vous a envoyé pour pouvoir rejoindre la session.",
+        "title": "Insérer votre identifiant de session."
+      }
     },
     "informations": {
       "title": "Informations",

frontend/src/components/Fleet.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="lobby-wrapper">
-    <FleetSessionChoice v-if="false" />
-    <FleetLobby v-if="true" :session="session" />
+    <FleetLobby v-if="session.sessionId" :session="session" />
+    <FleetSessionChoice v-else :session="session" />
   </div>
 </template>
 
@@ -11,7 +11,7 @@ import FleetLobby from "@/components/fleet/FleetLobby.vue";
 import { Fleet, PlayerStates } from "@/objects/Fleet.ts";
 import { onMounted, ref } from "vue";
 
-const session = ref<Fleet>(new Fleet("xxx"));
+const session = ref<Fleet>(new Fleet());
 onMounted(() => {
   for (let x = 0; x < 100; x++) {
     session.value.players.push({
@@ -29,4 +29,4 @@ onMounted(() => {
   height: 100%;
   box-sizing: border-box;
 }
-</style>
+</style>

frontend/src/components/fleet/FleetSessionChoice.vue

@@ -1,23 +1,65 @@
 <template>
   <section class="choice-wrapper">
-    <SessionCard :title="t('session.choice.createSession')">
+    <SessionCard
+      :title="t('session.choice.createSession')"
+      @click="createSession"
+    >
       <p>{{ t("session.choice.createComment") }}</p>
     </SessionCard>
     <SessionCard
       :title="t('session.choice.joinSession')"
       :background="'linear-gradient(270deg, rgba(50, 144, 212, 0.20) 0%, rgba(50, 144, 212, 0.07) 108.45%)'"
+      @click="isModalOpen = true"
     >
       <p>{{ t("session.choice.joinComment") }}</p>
     </SessionCard>
+    <modale-template v-model:is-modal-open="isModalOpen">
+      <div class="username-wrapper">
+        <div class="main-content">
+          <h1>{{ t("session.choice.modal.title") }}</h1>
+          <p>{{ t("session.choice.modal.comment") }}</p>
+          <InputText
+            v-model:input-value="sessionId"
+            placeholder="42B69X"
+            @validate="joinSession"
+          />
+        </div>
+        <button class="big-button" @click="joinSession">
+          <h2>{{ t("session.choice.modal.button") }}</h2>
+        </button>
+      </div>
+    </modale-template>
   </section>
 </template>
 
 <script setup lang="ts">
 import SessionCard from "@/vue/templates/SessionCard.vue";
-import {useI18n} from "vue-i18n";
+import { useI18n } from "vue-i18n";
+import { Fleet } from "@/objects/Fleet.ts";
+import { PropType, ref, watch } from "vue";
+import ModaleTemplate from "@/vue/templates/ModaleTemplate.vue";
+import InputText from "@/vue/form/InputText.vue";
+
+const { t } = useI18n();
+const isModalOpen = ref<boolean>(false);
+const sessionId = ref<string>("");
+const props = defineProps({
+  session: { type: Object as PropType<Fleet>, required: true },
+});
 
-const {t} = useI18n();
+function joinSession() {
+  props.session.joinSession(sessionId.value);
+  isModalOpen.value = false;
+}
 
+function createSession() {
+  props.session.joinSession("TODO");
+}
+watch(isModalOpen, (previous) => {
+  if (previous) {
+    sessionId.value = "";
+  }
+});
 </script>
 
 <style scoped lang="scss">
@@ -27,6 +69,72 @@ const {t} = useI18n();
   gap: 10%;
   height: 100%;
   align-items: center;
+  transition: all;
+
+  .username-wrapper {
+    background: var(--secondary-background);
+    border-radius: 5px;
+    overflow: hidden;
+    width: 400px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 15px;
+    //margin: 40px;
+
+    .main-content {
+      padding: 50px 14px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 20px;
+      box-sizing: border-box;
+
+      h1 {
+        color: var(--primary);
+        font-size: 40px;
+        font-family: BrushTip, sans-serif;
+        text-align: center;
+      }
+
+      p {
+        color: var(--secondary-text);
+        font-size: 14px;
+        line-height: 20px;
+        text-align: center;
+      }
+    }
+
+    button {
+      all: unset;
+      cursor: pointer;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: 40px 40px;
+      background: linear-gradient(
+        0deg,
+        rgba(50, 144, 212, 0.2) 0%,
+        rgba(50, 144, 212, 0.07) 108.45%
+      );
+      box-sizing: border-box;
+      gap: 15px;
+
+      h2 {
+        text-align: center;
+        font-size: 20px;
+      }
 
+      p {
+        text-align: center;
+        color: var(--secondary-text);
+        font-size: 16px;
+      }
+    }
+  }
 }
-</style>
+</style>

frontend/src/objects/Fleet.ts

@@ -1,63 +1,63 @@
 export class Fleet {
-
-    public sessionId: string
-    public sessionName: string
-    public players: Player[]
-    public servers: SotServer[]
-    public status:SessionStatus
-
-    constructor(sessionId: string) {
-        this.sessionId = sessionId;
-        this.sessionName = "TODO"
-        this.players = [];
-        this.servers = [];
-        this.status = SessionStatus.WAITING
-    }
-
-    joinSession(): void {
-
-    }
-
-    leaveSession(): void {
-
-    }
-
-    getReadyPlayers(): Player[] {
-        return this.players.filter(player => player.isReady)
-    }
-
-    public static getFormatedStatus(player: Player) {
-        return player.status.toString().toLowerCase().replace('_', '-')
-    }
-
-    public getMasters(): Player[] {
-        return this.players.filter(player => player.isMaster)
-    }
+  public sessionId: string;
+  public sessionName: string;
+  public players: Player[];
+  public servers: SotServer[];
+  public status: SessionStatus;
+
+  constructor() {
+    this.sessionId = "";
+    this.sessionName = "TODO";
+    this.players = [];
+    this.servers = [];
+    this.status = SessionStatus.WAITING;
+  }
+
+  joinSession(sessionId: string): void {
+    this.sessionId = sessionId;
+  }
+
+  leaveSession(): void {}
+
+  getReadyPlayers(): Player[] {
+    return this.players.filter((player) => player.isReady);
+  }
+
+  public static getFormatedStatus(player: Player) {
+    return player.status.toString().toLowerCase().replace("_", "-");
+  }
+
+  /**
+   * @return List of the players with the right master
+   */
+  public getMasters(): Player[] {
+    return this.players.filter((player) => player.isMaster);
+  }
 }
 
 export interface Player {
-    username: string
-    status: PlayerStates
-    isReady: boolean
-    isMaster: boolean
+  username: string;
+  status: PlayerStates;
+  isReady: boolean;
+  isMaster: boolean;
 }
 
 export interface SotServer {
-    ip: string
-    port: number
-    location: string
-    connectedPlayers: Player[]
+  ip: string;
+  port: number;
+  location: string;
+  connectedPlayers: Player[];
 }
 
 export enum PlayerStates {
-    OFFLINE, // Game not detected
-    ONLINE, // Game detected and open but not in game
-    IN_GAME, // Player in a server
+  OFFLINE, // Game not detected
+  ONLINE, // Game detected and open but not in game
+  IN_GAME, // Player in a server
 }
 
-export enum SessionStatus{
-    WAITING, // Waiting for player to be ready
-    READY, // All player ready
-    COUNTDOWN, // Countdown to start the click
-    ACTION, // Clicking in the game
-}
+export enum SessionStatus {
+  WAITING, // Waiting for player to be ready
+  READY, // All player ready
+  COUNTDOWN, // Countdown to start the click
+  ACTION, // Clicking in the game
+}