Merge pull request #20 from LyticalApp/new-ingame-layout

New Live Game/In-Game Layout

public/all.css

@@ -14,6 +14,9 @@
   --minicard-background: #020202;
   --minicard-since-background: #5d4e73;
   --error-background: #e84057;
+  --role-icon-size: 12px;
+  --portrait-size: 70px;
+  --orb-size: 40px;
 }
 
 html{

src/LobbyView.vue

@@ -6,7 +6,7 @@
     </div>
     <div class="team">
       <div v-for="teammate in lobbyPlayers" :key="teammate.displayName">
-          <LobbyPlayerItem v-if="teammate.teamId == 1" :teammate=teammate></LobbyPlayerItem>
+        <LobbyPlayerItem v-if="teammate.teamId == 1" :teammate=teammate></LobbyPlayerItem>
       </div>
     </div>
     <div class="team">
@@ -47,9 +47,6 @@ export default {
     };
   },
   watch: {
-    lobbyPlayers() {
-      console.log(this.lobbyPlayers);
-    },
     $route() {
       // Unregister the listener..
       console.log('Unregistering Listeners on Lobby');

src/components/LobbyPlayerItem.vue

@@ -1,33 +1,35 @@
 <template>
-    <div class="miniCard">
-        <img v-if="teammate.championId" class="selectedChampion emblem"
-            :src="CHAMPIONICONURL + teammate.championId + '.png'">
-        <img class="emblem" :src='`assets/Emblem_${teammate.queueMap.RANKED_SOLO_5x5.tier}.webp`'>
-        <br>
-        <span @click="searchSummoner(teammate.username)">{{ teammate.username }}</span>
-        <br>
-        <span style="font-size:12px;">{{ capitalize(teammate.queueMap.RANKED_SOLO_5x5.tier) }}
-            {{ romanNumbers[teammate.queueMap.RANKED_SOLO_5x5.division] }}
-            ({{ teammate.queueMap.RANKED_SOLO_5x5.leaguePoints }}LP)</span>
-        <br>
-        <span style="font-size:12px;">{{ capitalize(teammate.position) }}</span>
-        <br>
-        <div v-for="(match, index) in teammate.matchHistory.games.games" :key="match.gameId" class="matchItem">
-            <div v-if="index < 5">
-                <img @click="open(getPreferredSite(match.participants[0].championId))"
-                    :src="CHAMPIONICONURL + match.participants[0].championId + '.png'" class="championIcon">
-                <div :class='`kda ${match.participants[0].stats.win ? "Victory" : "Defeat"}`'>
-                    <span style="white-space:nowrap">
-                        {{ match.participants[0].stats.kills + "/"
-                                + match.participants[0].stats.deaths + "/"
-                                + match.participants[0].stats.assists
-                        }}
-                    </span>
-                </div>
-                <span class="sinceGame">{{ sinceGame(Date.now() - match.gameCreation) }}</span>
-            </div>
+  <div class="miniCard">
+  <div v-if="teammate.championId">
+     <img v-if="teammate.championId"  :src="CHAMPIONICONURL + teammate.championId + '.png'" class="portrait">
+     <div v-if="teammate.position && teammate.position != 'NONE'" class="orb">
+        <img :src="`assets/positions/${teammate.position}.svg`" class="roleicon">
+     </div>
+  </div>
+    <img v-else class="emblem" :src='`assets/ranks/${teammate.queueMap.RANKED_SOLO_5x5.tier}.webp`'>
+    <br>
+    <span @click="searchSummoner(teammate.username)">{{ teammate.username }}</span>
+    <br>
+    <span style="font-size:12px;">{{ capitalize(teammate.queueMap.RANKED_SOLO_5x5.tier) }}
+    {{ romanNumbers[teammate.queueMap.RANKED_SOLO_5x5.division] }}
+    ({{ teammate.queueMap.RANKED_SOLO_5x5.leaguePoints }}LP)</span>
+    <br>
+    <div v-for="(match, index) in teammate.matchHistory.games.games" :key="match.gameId" class="matchItem">
+      <div v-if="index < 5">
+        <img @click="open(getPreferredSite(match.participants[0].championId))"
+          :src="CHAMPIONICONURL + match.participants[0].championId + '.png'" class="championIcon">
+        <div :class='`kda ${match.participants[0].stats.win ? "Victory" : "Defeat"}`'>
+          <span style="white-space:nowrap">
+          {{ match.participants[0].stats.kills + "/"
+          + match.participants[0].stats.deaths + "/"
+          + match.participants[0].stats.assists
+          }}
+          </span>
         </div>
+        <span class="sinceGame">{{ sinceGame(Date.now() - match.gameCreation) }}</span>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -79,6 +81,31 @@ export default {
 </script>
 
 <style scoped>
+body {
+  padding: 0px;
+  margin: 0px;
+}
+.portrait {
+    left:0px;
+    width:var(--portrait-size);
+    border-radius: 100%;
+    z-index: 0;
+}
+.orb {
+    position: absolute;
+    left:calc(50% - var(--orb-size)/2);
+    top:calc(var(--portrait-size) - calc(var(--orb-size)/4));
+    background-color: var(--minicard-background);
+    width:var(--orb-size);
+    height:var(--orb-size);
+    border-radius: 100%;
+    z-index: 1;
+}
+.roleicon {
+    padding-top:calc(50% - var(--role-icon-size));
+    left:calc(50% - var(--role-icon-size));
+    width:calc(var(--role-icon-size)*2);
+}
 .championIcon {
   border-radius: 10px;
   width: 20px;
@@ -140,6 +167,7 @@ export default {
 
 .miniCard {
   min-height: 260px;
+  min-width:160px;
   margin: 10px;
   padding: 10px;
   color: var(--minicard-text);

src/components/MatchDetailsItem.vue

@@ -96,10 +96,10 @@
                            <table style="display:inline;">
                               <td style="padding:0px;">
                                  <!-- Summoner Spells -->
-                                 <img :src='`assets/${summonerSpells[participant.spell1Id]}.webp`'
+                                 <img :src='`assets/spells/${summonerSpells[participant.spell1Id]}.webp`'
                                  class='thumbicon thumbround' style="height:15px;width:15px;">
                                  <br>
-                                 <img :src='`assets/${summonerSpells[participant.spell2Id]}.webp`'
+                                 <img :src='`assets/spells/${summonerSpells[participant.spell2Id]}.webp`'
                                  class='thumbicon thumbround' style="height:15px;width:15px;">
                               </td>
                               <td style="padding:0px;">

src/components/MatchHistoryItem.vue

@@ -30,11 +30,13 @@
                                     </td>
                                     <td style="padding:0px;">
                                         <!-- Summoner Spells -->
-                                        <img :src='`assets/${summonerSpells[data.participants[0].spell1Id]}.webp`'
-                                            class='thumbicon thumbround'>
+                                        <img
+                                          :src='`assets/spells/${summonerSpells[data.participants[0].spell1Id]}.webp`'
+                                          class='thumbicon thumbround'>
                                         <br>
-                                        <img :src='`assets/${summonerSpells[data.participants[0].spell2Id]}.webp`'
-                                            class='thumbicon thumbround'>
+                                        <img
+                                          :src='`assets/spells/${summonerSpells[data.participants[0].spell2Id]}.webp`'
+                                          class='thumbicon thumbround'>
                                     </td>
                                     <td style="padding:0px;">
                                         <!-- Runes -->

src/components/PlayerRank.vue

@@ -5,7 +5,7 @@
     <table style="width:100%;    padding-top: 10px;">
       <td>
         <img
-        :src='`assets/Emblem_${data.queueMap.RANKED_SOLO_5x5.tier}.webp`'
+        :src='`assets/ranks/${data.queueMap.RANKED_SOLO_5x5.tier}.webp`'
         class="backgroundImg" style="height:60px;"
         />
       </td>

src/components/SettingsMenu.vue

@@ -4,7 +4,7 @@
             <h1>Settings</h1>
             <table style="left:50%;margin:auto;">
                 <tr>
-                    <td>Automaticly switch to lobby</td>
+                    <td>Automatically switch to lobby</td>
                     <td>
                     <input v-model="autoSwitchLobby" type="checkbox"
                      :checked="autoSwitchLobby == 'true'">