Webapp visual fixtures (#173)

backend/src/main/java/fr/zelytra/session/SessionSocket.java

@@ -185,6 +185,7 @@ private void handleUpdateMessage(Player player) {
 
         foundedplayer.setReady(player.isReady());
         foundedplayer.setStatus(player.getStatus());
+        foundedplayer.setDevice(player.getDevice());
 
         sessionManager.broadcastDataToSession(player.getSessionId(), MessageType.UPDATE, fleet);
 

backend/src/main/java/fr/zelytra/session/player/Player.java

@@ -22,6 +22,8 @@ public class Player {
 
     private String clientVersion;
 
+    private PlayerDevice device;
+
     // Constructor
     public Player() {
     }
@@ -84,6 +86,14 @@ public void setClientVersion(String clientVersion) {
         this.clientVersion = clientVersion;
     }
 
+    public PlayerDevice getDevice() {
+        return device;
+    }
+
+    public void setDevice(PlayerDevice device) {
+        this.device = device;
+    }
+
     @Override
     public String toString() {
         return this.username;

backend/src/main/java/fr/zelytra/session/player/PlayerDevice.java

@@ -0,0 +1,7 @@
+package fr.zelytra.session.player;
+
+public enum PlayerDevice {
+    XBOX,
+    PLAYSTATION,
+    MICROSOFT
+}

backend/src/test/java/fr/zelytra/session/SessionSocketTest.java

@@ -55,17 +55,6 @@ void setup() throws URISyntaxException, DeploymentException, IOException {
         ContainerProvider.getWebSocketContainer().connectToServer(betterFleetClient, uri);
     }
 
-    @Test
-    void onOpen_PlayerConnect_PlayerShouldNotBeInTheTimeOutList() throws IOException, InterruptedException, EncodeException {
-        Player player = new Player();
-        player.setUsername("Player 1");
-        player.setClientVersion(appVersion);
-        betterFleetClient.sendMessage(MessageType.CONNECT, player);
-
-        assertTrue(betterFleetClient.getLatch().await(1, TimeUnit.SECONDS));
-        assertEquals(1, SessionSocket.sessionTimeoutTasks.size());
-    }
-
     @Test
     void stressTest() throws IOException, InterruptedException, EncodeException, DeploymentException {
         List<Player> fakePlayers = generateFakePlayer(50);

webapp/src/App.vue

@@ -29,7 +29,7 @@ import {LocalKey} from "@/objects/stores/LocalStore.ts";
 import {onMounted, onUnmounted, watch} from "vue";
 import FirstLogin from "@/vue/templates/FirstLogin.vue";
 import AlertComponent from "@/vue/alert/AlertComponent.vue";
-import {PlayerStates} from "@/objects/Player.ts";
+import {PlayerDevice, PlayerStates} from "@/objects/Player.ts";
 import {Fleet} from "@/objects/Fleet.ts";
 import {invoke} from "@tauri-apps/api/tauri";
 import {RustSotServer} from "@/objects/SotServer.ts";
@@ -74,6 +74,7 @@ onMounted(() => {
     isReady: false,
     status: PlayerStates.CLOSED,
     username: "",
+    device : PlayerDevice.MICROSOFT
   });
 });
 
@@ -104,7 +105,7 @@ watch(()=>UserStore.player.countDown, () => {
     height: 100vh;
     overflow: hidden;
     overflow-y: auto;
-    padding: 7px 10px;
+    padding: 12px;
     width: 100%;
     box-sizing: border-box;
     position: relative;

webapp/src/assets/locales/fr.json

@@ -62,6 +62,9 @@
   },
   "appName": "Better Fleet",
   "config": {
+    "device": {
+      "label": "Plateformes"
+    },
     "devmode": "Activer le mode développeur",
     "lang": {
       "label": "Langue"
@@ -110,6 +113,22 @@
     "es": "Español",
     "fr": "Français"
   },
+  "modal": {
+    "confirm": {
+      "launch": {
+        "cancel": "Annuler",
+        "confirm": "Levez l'ancre",
+        "content": "Pas tout les joueurs sont prêt ! Êtes vous sûr de vouloir levez l’ancre ?",
+        "title": "ATTENTION !"
+      },
+      "leave": {
+        "cancel": "Annuler",
+        "confirm": "Quitter la session",
+        "content": "Êtes vous sûr de vouloir quitter la session ?",
+        "title": "QUITTER LA SESSION"
+      }
+    }
+  },
   "session": {
     "choice": {
       "createComment": "Goûte à la liberté de régner sur les flots en pirate !",

webapp/src/components/Config.vue

@@ -33,6 +33,10 @@
                 :label="t('config.lang.label')"
                 v-model:data="langOptions"
             />
+            <SingleSelect
+                :label="t('config.device.label')"
+                v-model:data="deviceOptions"
+            />
           </div>
         </div>
       </div>
@@ -78,12 +82,17 @@ import fr from "@/assets/icons/locales/fr.svg";
 import de from "@/assets/icons/locales/de.svg";
 import es from "@/assets/icons/locales/es.svg";
 import en from "@/assets/icons/locales/en.svg";
+import xbox from "@/assets/icons/xbox.svg";
+import microsoft from "@/assets/icons/microsoft.svg";
+import playstation from "@/assets/icons/playstation.svg";
 import {UserStore} from "@/objects/stores/UserStore.ts";
 import {onBeforeRouteLeave} from "vue-router";
 import {AlertProvider, AlertType} from "@/vue/alert/Alert.ts";
+import {PlayerDevice} from "@/objects/Player.ts";
 
 const {t, availableLocales} = useI18n();
 const langOptions = ref<SingleSelectInterface>({data: []});
+const deviceOptions = ref<SingleSelectInterface>({data: []});
 const devMode = ref<boolean>(false);
 const username = ref<string>(UserStore.player.username);
 const alerts = inject<AlertProvider>("alertProvider");
@@ -97,6 +106,30 @@ onMounted(() => {
     });
   }
 
+  deviceOptions.value.data.push({
+    display: "Microsoft",
+    id: PlayerDevice.MICROSOFT,
+    image: getDeviceImgUrl('microsoft')
+  })
+  deviceOptions.value.data.push({
+    display: "Xbox",
+    id: PlayerDevice.XBOX,
+    image: getDeviceImgUrl('xbox')
+  })
+  deviceOptions.value.data.push({
+    display: "PlayStation",
+    id: PlayerDevice.PLAYSTATION,
+    image: getDeviceImgUrl('playstation')
+  })
+
+  if (UserStore.player.device) {
+    deviceOptions.value.selectedValue = deviceOptions.value.data.filter((x) =>
+        x.id == UserStore.player.device
+    )[0]
+  } else {
+    deviceOptions.value.selectedValue = deviceOptions.value.data[0]
+  }
+
   if (UserStore.player.lang) {
     langOptions.value.selectedValue = langOptions.value.data.filter(
         (x) => x.id == UserStore.player.lang,
@@ -110,6 +143,13 @@ watch(langOptions.value, () => {
   UserStore.setLang(langOptions.value.selectedValue!.id);
 });
 
+watch(deviceOptions.value, () => {
+  UserStore.player.device = deviceOptions.value.selectedValue!.id as PlayerDevice;
+  if (UserStore.player.fleet && UserStore.player.fleet.sessionId){
+    UserStore.player.fleet.updateToSession()
+  }
+});
+
 onBeforeRouteLeave((_to, _from, next) => {
   if (username.value.length == 0 || username.value.length >= 16) {
     if (UserStore.player.countDown) {
@@ -145,6 +185,19 @@ function getImgUrl(iconName: string): string {
       return en;
   }
 }
+
+function getDeviceImgUrl(iconName: string): string {
+  switch (iconName) {
+    case "microsoft":
+      return microsoft;
+    case "xbox":
+      return xbox;
+    case "playstation":
+      return playstation;
+    default:
+      return microsoft;
+  }
+}
 </script>
 
 <style scoped lang="scss">

webapp/src/components/fleet/FleetLobby.vue

@@ -23,15 +23,15 @@
         </div>
       </template>
       <template #left-content>
-        <button @click="startSession" v-if="UserStore.player.isMaster"
+        <button @click="confirmationStartSession()" v-if="UserStore.player.isMaster"
                 :class="{'session-starter':true,'pending':session.getReadyPlayers().length !=session.players.length}">
           {{ t('session.run') }}
         </button>
       </template>
     </BannerTemplate>
     <div class="lobby-content">
       <div class="player-table">
-        <ServerContainer v-if="computedSession.servers.size > 0" v-for="[hash,server] of session.servers.entries()"
+        <ServerContainer v-if="computedSession.servers.size > 0" v-for="[hash,server] of getFilteredSotServer()"
                          :server="hash.toUpperCase()+' | '+server.location" :hash="hash"
                          :player-count="server.connectedPlayers.length">
           <PlayerFleet
@@ -80,7 +80,7 @@
               </p>
             </div>
           </div>
-          <button class="session-status" @click="session.leaveSession()">
+          <button class="session-status" @click="leaveConfirmation=true">
             <p>{{ t("session.leave") }}</p>
           </button>
         </div>
@@ -89,6 +89,28 @@
     <transition>
       <SessionCountdown v-if="UserStore.player.countDown" :session="session"/>
     </transition>
+    <ConfirmationModal
+        v-model:is-confirmation-modal-open="launchConfirmation"
+        @on-confirm="startSession"
+        :cancel="t('modal.confirm.launch.cancel')"
+        :confirm="t('modal.confirm.launch.confirm')"
+        :content="t('modal.confirm.launch.content')"
+        :title="t('modal.confirm.launch.title')"
+        cancel-class="important"
+        confirm-class="warning"
+        title-class="warning"
+    />
+    <ConfirmationModal
+        v-model:is-confirmation-modal-open="leaveConfirmation"
+        @on-confirm="session.leaveSession()"
+        :cancel="t('modal.confirm.leave.cancel')"
+        :confirm="t('modal.confirm.leave.confirm')"
+        :content="t('modal.confirm.leave.content')"
+        :title="t('modal.confirm.leave.title')"
+        cancel-class="information"
+        confirm-class="important"
+        title-class="important"
+    />
   </section>
 </template>
 
@@ -101,9 +123,12 @@ import BannerTemplate from "@/vue/templates/BannerTemplate.vue";
 import {UserStore} from "@/objects/stores/UserStore.ts";
 import SessionCountdown from "@/components/fleet/SessionCountdown.vue";
 import ServerContainer from "@/vue/templates/ServerContainer.vue";
+import ConfirmationModal from "@/vue/form/ConfirmationModal.vue";
 
 const {t} = useI18n();
 const displayIdCopy = ref<boolean>(false);
+const launchConfirmation = ref<boolean>(false);
+const leaveConfirmation = ref<boolean>(false);
 const props = defineProps({
   session: {
     type: Object as PropType<Fleet>,
@@ -133,6 +158,14 @@ const computedSession = computed({
   },
 });
 
+function confirmationStartSession() {
+  if (props.session.getReadyPlayers().length != props.session.players.length) {
+    launchConfirmation.value = true
+  } else {
+    startSession()
+  }
+}
+
 function startSession() {
   // Yes I know never trust the client... IT'S AN ALPHA !! (or a beta I don't care)
   if (!UserStore.player.isMaster) {
@@ -156,6 +189,12 @@ function getFilteredPlayerList() {
   })
 }
 
+function getFilteredSotServer() {
+  return new Map([...props.session.servers].sort((a, b) => {
+    return a[1].connectedPlayers.length - b[1].connectedPlayers.length
+  }))
+}
+
 function copyIdToClipboard(id: string) {
   navigator.clipboard.writeText(id);
   displayIdCopy.value = true;
@@ -169,7 +208,7 @@ function copyIdToClipboard(id: string) {
   height: 100%;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+
 
   .header-content {
     display: flex;
@@ -238,7 +277,8 @@ function copyIdToClipboard(id: string) {
   }
 
   .lobby-content {
-    height: calc(100% - 140px); // Minus header height
+    margin-top: 12px;
+    height: calc(100% - 128px); // Minus header height
     display: flex;
     gap: 12px;
 

webapp/src/components/fleet/FleetSessionChoice.vue

@@ -37,7 +37,7 @@ import SessionCard from "@/vue/templates/SessionCard.vue";
 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 ModaleTemplate from "@/vue/templates/ModalTemplate.vue";
 import InputText from "@/vue/form/InputText.vue";
 
 const {t} = useI18n();

webapp/src/objects/Fleet.ts

@@ -128,6 +128,7 @@ export class Fleet {
     const player: Player = receivedFleet.players.filter(x => x.username == UserStore.player.username)[0]
     UserStore.player.isMaster = player.isMaster;
     UserStore.player.isReady = player.isReady;
+    UserStore.player.device = player.device;
   }
 
   private handleSessionRunner(countdown: number) {

webapp/src/objects/Player.ts

@@ -9,17 +9,24 @@ export enum PlayerStates {
   IN_GAME = "IN_GAME", // Status when the remote IP and port was found and player is in game
 }
 
+export enum PlayerDevice {
+  XBOX = "XBOX",
+  MICROSOFT = "MICROSOFT",
+  PLAYSTATION = "PLAYSTATION",
+}
+
 export interface Player extends Preferences {
   username: string;
   status: PlayerStates;
   isReady: boolean;
   isMaster: boolean;
+  device: PlayerDevice
   fleet?: Fleet;
   sessionId?: string;
   serverHostName?: string;
   countDown?: SessionRunner;
   server?: SotServer;
-  clientVersion?:string
+  clientVersion?: string
 }
 
 export interface Preferences {