From 1bf0e035a8314fb3911d74eec12f22edd2513a4d Mon Sep 17 00:00:00 2001
From: Jazcash <jaspercashmore@gmail.com>
Date: Sun, 2 Apr 2023 02:53:58 +0100
Subject: [PATCH] minor tweaks/styling

---
 src/renderer/api/session.ts                   | 14 +++
 .../components/battle/LuaOptionsModal.vue     |  2 +
 src/renderer/components/common/TabView.vue    |  2 -
 src/renderer/components/navbar/Friends.vue    | 11 +--
 src/renderer/views/library/replays.vue        | 88 ++++++++++---------
 src/renderer/views/login.vue                  |  6 +-
 6 files changed, 67 insertions(+), 56 deletions(-)

diff --git a/src/renderer/api/session.ts b/src/renderer/api/session.ts
index fa5eca19..056a6d18 100644
--- a/src/renderer/api/session.ts
+++ b/src/renderer/api/session.ts
@@ -28,6 +28,16 @@ export class SessionAPI {
     public lastBattleResponses: Map<number, Static<typeof lobbySchema>> = new Map();
 
     constructor() {
+        // TODO: remove class initialisers, do everything in clear function, then call this.clear() from this constructor, and also call .clear() on logout
+        this.offlineMode.value = false;
+        this.offlineBattle.value = null;
+        this.onlineBattle.value = null;
+        this.users.clear();
+        this.battles.clear();
+        this.battleMessages.length = 0;
+        this.serverStats.value = null;
+        this.directMessages.clear();
+
         const userData: CurrentUser = {
             userId: -1,
             username: "Player",
@@ -67,6 +77,10 @@ export class SessionAPI {
         this.friends = computed(() => [...this.onlineUser.friendUserIds].map((id) => this.getUserById(id)!).filter(Boolean));
     }
 
+    public clear() {
+        // TODO
+    }
+
     public updateCurrentUser(myUserData: Static<typeof myUserSchema>) {
         this.users.set(myUserData.id, this.onlineUser);
 
diff --git a/src/renderer/components/battle/LuaOptionsModal.vue b/src/renderer/components/battle/LuaOptionsModal.vue
index b7633846..45a0eaca 100644
--- a/src/renderer/components/battle/LuaOptionsModal.vue
+++ b/src/renderer/components/battle/LuaOptionsModal.vue
@@ -118,6 +118,8 @@ function save() {
     padding: 0 !important;
 }
 .lua-options-panel {
+    display: flex;
+    flex-direction: column;
     width: 700px;
     height: 600px;
 }
diff --git a/src/renderer/components/common/TabView.vue b/src/renderer/components/common/TabView.vue
index 940e966d..245c8df0 100644
--- a/src/renderer/components/common/TabView.vue
+++ b/src/renderer/components/common/TabView.vue
@@ -63,8 +63,6 @@ const emits = defineEmits<Emits>();
         background: rgba(255, 255, 255, 0.05);
     }
     .p-tabview-panels {
-        min-height: calc(100% - 39px);
-        max-height: calc(100% - 39px);
         overflow-y: auto;
     }
     .p-tabview-panel {
diff --git a/src/renderer/components/navbar/Friends.vue b/src/renderer/components/navbar/Friends.vue
index 4775ff75..817ec9ce 100644
--- a/src/renderer/components/navbar/Friends.vue
+++ b/src/renderer/components/navbar/Friends.vue
@@ -11,7 +11,7 @@
                     </div>
 
                     <div class="flex-row gap-md">
-                        <InputNumber
+                        <Number
                             id="friendId"
                             v-model="friendId"
                             type="number"
@@ -82,7 +82,6 @@
  */
 
 import AccordionTab from "primevue/accordiontab";
-import InputNumber from "primevue/inputnumber";
 import { InputNumberBlurEvent } from "primevue/inputnumber";
 import TabPanel from "primevue/tabpanel";
 import { computed, inject, Ref, ref, watch } from "vue";
@@ -90,6 +89,7 @@ import { computed, inject, Ref, ref, watch } from "vue";
 import Accordion from "@/components/common/Accordion.vue";
 import TabView from "@/components/common/TabView.vue";
 import Button from "@/components/controls/Button.vue";
+import Number from "@/components/controls/Number.vue";
 import Friend from "@/components/navbar/Friend.vue";
 import PopOutPanel from "@/components/navbar/PopOutPanel.vue";
 
@@ -170,12 +170,5 @@ async function addFriend() {
 }
 :deep(.FriendId) {
     flex-grow: 1;
-    .p-inputnumber {
-        width: 100px;
-    }
-    .p-inputtext {
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        background-color: rgba(255, 255, 255, 0.2);
-    }
 }
 </style>
diff --git a/src/renderer/views/library/replays.vue b/src/renderer/views/library/replays.vue
index 33b6d830..db36d5bd 100644
--- a/src/renderer/views/library/replays.vue
+++ b/src/renderer/views/library/replays.vue
@@ -20,49 +20,53 @@
                 </div>
             </div>
 
-            <DataTable
-                v-model:first="offset"
-                v-model:selection="selectedReplay"
-                :lazy="true"
-                :value="replays"
-                :paginator="true"
-                :rows="limit"
-                :totalRecords="totalReplays"
-                selectionMode="single"
-                dataKey="replayId"
-                :sortOrder="sortOrder === 'asc' ? 1 : -1"
-                :sortField="sortField"
-                @page="onPage"
-                @sort="onSort"
-            >
-                <Column header="Name">
-                    <template #body="{ data }">
-                        <template v-if="isBattle(data)">{{ data.battleOptions.title }}</template>
-                        <template v-else-if="isReplay(data)">
-                            <template v-if="data.preset === 'duel'">
-                                {{ data.contenders?.[0]?.name ?? "Nobody" }} vs
-                                {{ data.contenders?.[1]?.name ?? "Nobody" }}
+            <div class="flex-col fullheight">
+                <div class="scroll-container padding-right-sm">
+                    <DataTable
+                        v-model:first="offset"
+                        v-model:selection="selectedReplay"
+                        :lazy="true"
+                        :value="replays"
+                        :paginator="true"
+                        :rows="limit"
+                        :totalRecords="totalReplays"
+                        selectionMode="single"
+                        dataKey="replayId"
+                        :sortOrder="sortOrder === 'asc' ? 1 : -1"
+                        :sortField="sortField"
+                        @page="onPage"
+                        @sort="onSort"
+                    >
+                        <Column header="Name">
+                            <template #body="{ data }">
+                                <template v-if="isBattle(data)">{{ data.battleOptions.title }}</template>
+                                <template v-else-if="isReplay(data)">
+                                    <template v-if="data.preset === 'duel'">
+                                        {{ data.contenders?.[0]?.name ?? "Nobody" }} vs
+                                        {{ data.contenders?.[1]?.name ?? "Nobody" }}
+                                    </template>
+                                    <template v-else-if="data.preset === 'team'">
+                                        {{ data.teams[0].playerCount }} vs {{ data.teams[1].playerCount }}
+                                    </template>
+                                    <template v-if="data.preset === 'ffa'"> {{ data.contenders.length }} Way FFA </template>
+                                    <template v-if="data.preset === 'teamffa'"> {{ data.teams[0].playerCount }} Way Team FFA </template>
+                                </template>
                             </template>
-                            <template v-else-if="data.preset === 'team'">
-                                {{ data.teams[0].playerCount }} vs {{ data.teams[1].playerCount }}
+                        </Column>
+                        <Column header="Date" :sortable="true" sortField="startTime">
+                            <template #body="{ data }">
+                                {{ format(data.startTime, "yyyy/MM/dd hh:mm a") }}
                             </template>
-                            <template v-if="data.preset === 'ffa'"> {{ data.contenders.length }} Way FFA </template>
-                            <template v-if="data.preset === 'teamffa'"> {{ data.teams[0].playerCount }} Way Team FFA </template>
-                        </template>
-                    </template>
-                </Column>
-                <Column header="Date" :sortable="true" sortField="startTime">
-                    <template #body="{ data }">
-                        {{ format(data.startTime, "yyyy/MM/dd hh:mm a") }}
-                    </template>
-                </Column>
-                <Column header="Duration" :sortable="true" sortField="gameDurationMs">
-                    <template #body="{ data }">
-                        {{ getFriendlyDuration(data.gameDurationMs) }}
-                    </template>
-                </Column>
-                <Column field="mapScriptName" header="Map" :sortable="true" sortField="mapScriptName" />
-            </DataTable>
+                        </Column>
+                        <Column header="Duration" :sortable="true" sortField="gameDurationMs">
+                            <template #body="{ data }">
+                                {{ getFriendlyDuration(data.gameDurationMs) }}
+                            </template>
+                        </Column>
+                        <Column field="mapScriptName" header="Map" :sortable="true" sortField="mapScriptName" />
+                    </DataTable>
+                </div>
+            </div>
         </div>
         <div class="right">
             <BattlePreview v-if="selectedReplay" :battle="selectedReplay" :showSpoilers="showSpoilers">
@@ -110,7 +114,7 @@ const endedNormally: Ref<boolean | null> = ref(true);
 const showSpoilers = ref(true);
 const totalReplays = ref(0);
 const offset = ref(0);
-const limit = ref(18);
+const limit = ref(15);
 const sortField: Ref<keyof Replay> = ref("startTime");
 const sortOrder: Ref<"asc" | "desc"> = ref("desc");
 const replays: Ref<Replay[]> = shallowRef([]);
diff --git a/src/renderer/views/login.vue b/src/renderer/views/login.vue
index 5ee16365..1a29ae1c 100644
--- a/src/renderer/views/login.vue
+++ b/src/renderer/views/login.vue
@@ -19,10 +19,10 @@
             </TabView>
         </Panel>
         <div v-else class="flex-col gap-md">
-            <div class="txt-error">Could not connect to {{ serverAddress }}</div>
-            <Button class="retry" @click="onRetry">
+            <div class="txt-error">Disconnected from {{ serverAddress }}</div>
+            <Button class="retry gap-sm" @click="onRetry">
                 <Icon :icon="replayIcon" />
-                Retry
+                Reconnect
             </Button>
         </div>
         <div class="play-offline" @click="playOffline">Play Offline</div>