Merge pull request #266 from Zemill/StylingNewSite

Updated player page styles
Heroes-Profile · Sep 17, 2023 · d4824a3 · d4824a3
2 parents cc408ed + 9b12401
commit d4824a3
Show file tree

Hide file tree

Showing 23 changed files with 308 additions and 91 deletions.
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -19,6 +19,7 @@ html{background-color:lightgrey; font-family: 'Open Sans', sans-serif; box-sizin
 
 body{
   font-size:18px;
+  letter-spacing: .03em;
 }
 
 .search-input{

diff --git a/resources/js/app.js b/resources/js/app.js
@@ -24,8 +24,9 @@ import SingleSelectFilter from './components/SingleSelectFilter.vue';
 import MultiSelectFilter from './components/MultiSelectFilter.vue';
 import BubbleChart from './components/BubbleChart.vue';
 import BarChart from './components/BarChart.vue';
-import HeroBoxSmall from './components/HeroBoxSmall.vue';
+import RoundBoxSmall from './components/RoundBoxSmall.vue';
 import HeroGroupBox from './components/HeroGroupBox.vue';
+import GroupBox from './components/GroupBox.vue';
 import HeroBoxLarge from './components/HeroBoxLarge.vue';
 import RoleBox from './components/RoleBox.vue';
 import CustomButton from './components/CustomButton.vue';
@@ -36,6 +37,7 @@ import MapGroupBox from './components/MapGroupBox.vue';
 import GameSummaryBox from './components/GameSummaryBox.vue';
 import MmrBox from './components/MmrBox.vue';
 import StatBox from './components/StatBox.vue';
+import StatBarBox from './components/StatBarBox.vue';
 import SearchedBattletagHolding from './components/SearchedBattletagHolding.vue';
 
 //Global Pages

diff --git a/resources/js/components/CustomTable.vue b/resources/js/components/CustomTable.vue
@@ -21,7 +21,7 @@
             </div>
             <div v-else-if="column.value === 'most_played_hero'">
               <div class="flex gap-x-2 items-center">
-                <hero-box-small :hero="row.most_played_hero"></hero-box-small>
+                <round-box-small :hero="row.most_played_hero"></round-box-small>
                 {{ row.hero_build_games_played }}
               </div>
             </div>

diff --git a/resources/js/components/GameSummaryBox.vue b/resources/js/components/GameSummaryBox.vue
@@ -3,12 +3,12 @@
     class="relative flex border border-white bg-cover bg-no-repeat bg-center"
     :style="{ backgroundImage: `url('/images/maps/match/match-${data.game_map.sanitized_map_name}.jpg')` }"
   >    
-    <div class="flex-1 bg-red-500 p-4"><hero-box-small :hero="data.hero"></hero-box-small></div>
+    <div class="flex-1 bg-red-500 p-4"><round-box-small :hero="data.hero"></round-box-small></div>
     <div class="flex-1 bg-green-500 p-4"><mmr-box :winner="data.winner" :title="'Player'" :mmr="data.player_conservative_rating" :change="data.player_change"></mmr-box></div>
     <div class="flex-1 bg-blue-500 p-4"><mmr-box :winner="data.winner" :title="'Hero'" :mmr="data.hero_conservative_rating" :change="data.hero_change"></mmr-box></div>
     <div class="flex-1 bg-yellow-500 p-4"><mmr-box :winner="data.winner" :title="'Role'" :mmr="data.role_conservative_rating" :change="data.role_change"></mmr-box></div>
 
-    <div class="flex-1">
+    <div class="flex-1 flex gap-x-1">
       <talent-box v-if="data.level_one" :talent="data.level_one"></talent-box>
       <talent-box v-if="data.level_four" :talent="data.level_four"></talent-box>
       <talent-box v-if="data.level_seven" :talent="data.level_seven"></talent-box>

diff --git a/resources/js/components/Global/Compositions/CompositionsStats.vue b/resources/js/components/Global/Compositions/CompositionsStats.vue
@@ -81,19 +81,19 @@
                 <tbody>
                   <div v-for="index in range">
                     <td>
-                      <hero-box-small :hero="getHeroData(1, row, row.compositionheroes[row.role_one.name], index)"></hero-box-small>
+                      <round-box-small :hero="getHeroData(1, row, row.compositionheroes[row.role_one.name], index)"></round-box-small>
                     </td>
                     <td>
-                      <hero-box-small :hero="getHeroData(2, row, row.compositionheroes[row.role_two.name], index)"></hero-box-small>
+                      <round-box-small :hero="getHeroData(2, row, row.compositionheroes[row.role_two.name], index)"></round-box-small>
                     </td>
                     <td>
-                      <hero-box-small :hero="getHeroData(3, row, row.compositionheroes[row.role_three.name], index)"></hero-box-small>
+                      <round-box-small :hero="getHeroData(3, row, row.compositionheroes[row.role_three.name], index)"></round-box-small>
                     </td>
                     <td>
-                      <hero-box-small :hero="getHeroData(4, row, row.compositionheroes[row.role_four.name], index)"></hero-box-small>
+                      <round-box-small :hero="getHeroData(4, row, row.compositionheroes[row.role_four.name], index)"></round-box-small>
                     </td>
                     <td>
-                      <hero-box-small :hero="getHeroData(5, row, row.compositionheroes[row.role_five.name], index)"></hero-box-small>
+                      <round-box-small :hero="getHeroData(5, row, row.compositionheroes[row.role_five.name], index)"></round-box-small>
                     </td>
                   </div>
                 </tbody>

diff --git a/resources/js/components/Global/Draft/GlobalDraftStats.vue b/resources/js/components/Global/Draft/GlobalDraftStats.vue
@@ -10,7 +10,7 @@
       <!-- Should turn into a component for easy styling? -->
       <div class="flex flex-wrap gap-1" v-if="!selectedHero">
         <div v-for="hero in heroes" :key="hero.id">
-          <hero-box-small :hero="hero" @click="clickedHero(hero)"></hero-box-small>
+          <round-box-small :hero="hero" @click="clickedHero(hero)"></round-box-small>
         </div>
       </div>
 

diff --git a/resources/js/components/Global/Hero/GlobalHeroStats.vue b/resources/js/components/Global/Hero/GlobalHeroStats.vue
@@ -110,7 +110,7 @@
         <tbody>
           <template v-for="(row, index) in sortedData">
             <tr>
-              <td class="py-2 px-3 border-b border-gray-200 flex items-center gap-1"><hero-box-small :hero="row" :includehover="false"></hero-box-small>{{ row.name }}</td>
+              <td class="py-2 px-3 border-b border-gray-200 flex items-center gap-1"><round-box-small :hero="row" :includehover="false"></round-box-small>{{ row.name }}</td>
               <td class="py-2 px-3 border-b border-gray-200">{{ row.win_rate }}</td>
               <td class="py-2 px-3 border-b border-gray-200"><span v-html="'&#177;'"></span>{{ row.confidence_interval }}</td>
               <td class="py-2 px-3 border-b border-gray-200">{{ row.win_rate_change }}</td>

diff --git a/resources/js/components/Global/Hero/Map/GlobalHeroMapStats.vue b/resources/js/components/Global/Hero/Map/GlobalHeroMapStats.vue
@@ -6,7 +6,7 @@
     <!-- Should turn into a component for easy styling? -->
     <div class="flex flex-wrap gap-1" v-if="!selectedHero">
       <div v-for="hero in heroes" :key="hero.id">
-        <hero-box-small :hero="hero" @click="clickedHero(hero)"></hero-box-small>
+        <round-box-small :hero="hero" @click="clickedHero(hero)"></round-box-small>
       </div>
     </div>
 

diff --git a/resources/js/components/Global/Matchups/GlobalMatchupsStats.vue b/resources/js/components/Global/Matchups/GlobalMatchupsStats.vue
@@ -6,7 +6,7 @@
     <!-- Should turn into a component for easy styling? -->
     <div class="flex flex-wrap gap-1" v-if="!selectedHero">
       <div v-for="hero in heroes" :key="hero.id">
-        <hero-box-small :hero="hero" @click="clickedHero(hero)"></hero-box-small>
+        <round-box-small :hero="hero" @click="clickedHero(hero)"></round-box-small>
       </div>
     </div>
 
@@ -37,8 +37,8 @@
 
 
     <div v-if="allyenemydata" class="flex flex-wrap gap-4">
-      <hero-group-box :text="'TOP 5 ALLIES ON HEROS TEAM'" :data="allyenemydata.ally.slice(0, 5)"></hero-group-box>
-      <hero-group-box :text="'TOP 5 THREATS ON ENEMIES TEAM'" :data="allyenemydata.enemy.slice(0, 5)"></hero-group-box>
+      <group-box :text="'TOP 5 ALLIES ON HEROS TEAM'" :data="allyenemydata.ally.slice(0, 5)"></group-box>
+      <group-box :text="'TOP 5 THREATS ON ENEMIES TEAM'" :data="allyenemydata.enemy.slice(0, 5)"></group-box>
 
 
 

diff --git a/resources/js/components/GroupBox.vue b/resources/js/components/GroupBox.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class=" w-auto inline-block m-1">
+       <h2 class="bg-blue rounded-t  p-2 text-sm text-center uppercase"> {{ this.text }}</h2>
+
+    <div class=" bg-black rounded-b  p-5 flex flex-wrap gap-5">
+
+      <round-box-small v-for="(item, index) in data" :key="index" :obj="item.hero !== undefined ? item.hero : (item.game_map !== undefined ? item.game_map : item.talent)" :hovertext="item.hovertext" size="big"></round-box-small>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GroupBox',
+  components: {
+  },
+  props: {
+    text: String,
+    data: Array,
+  },
+  data(){
+    return {
+    }
+  },
+  created(){
+    console.log('this.data', this.data);
+  },
+  mounted() {
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+  }
+}
+</script>
diff --git a/resources/js/components/HeroBoxSmall.vue b/resources/js/components/HeroBoxSmall.vue
@@ -1,6 +1,7 @@
 <template>
-  <div v-if="hero" class="relative group flex items-center " @mouseover="showTooltip = true" @mouseleave="showTooltip = false">
-    <img class="card-img-top relative hover:opacity-75 w-10 h-10 rounded-full" :src="getHeroImage()" :alt="hero.name" >
+  <div v-if="this.thisObj" class="relative group flex items-center " @mouseover="showTooltip = true" @mouseleave="showTooltip = false">
+    CHANGE THIS TO round-box-small
+    <img class="card-img-top relative hover:opacity-75 w-10 h-10 rounded-full" :src="getHeroImage()" :alt="this.thisObj.name" >
     <div v-if="includehover && showTooltip" class="absolute hidden bottom-11 -left-24  bg-gray-dark  text-s p-1  group-hover:block  text-white z-50 drop-shadow-md w-60 rounded-md px-2 text-center">
       {{ popuptext }}
     </div>
@@ -10,36 +11,68 @@
 
 <script>
 export default {
-  name: 'HeroBoxSmall',
+  name: 'RoundBoxSmall',
   components: {
   },
   props: {
+    obj: Object,
     hero: Object,
+    map: Object,
     hovertext: String,
+    type: String,
     includehover: Boolean
   },
   data(){
     return {
       showTooltip: false,
       popuptext: "",
+      
     }
   },
   created(){
-    if(this.hero){
-      this.popuptext = this.hovertext ? this.hovertext : this.hero.name;
+    
+    if(this.thisObj){
+      this.popuptext = this.hovertext ? this.hovertext : this.thisObj.name;
     }else{
-      console.log("hero is null")
+      console.log("obj is null")
     }
   },
   mounted() {
+    
+      
+      
+
+    
   },
   computed: {
+    thisObj(){
+      
+      if(typeof this.hero != 'undefined'){
+
+        return this.hero;
+      }
+      if(typeof this.map != 'undefined'){
+       
+        return this.map;
+      }
+      else{
+        return this.obj;
+      }
+    }
   },
   watch: {
   },
   methods: {
     getHeroImage(){
-      return `/images/heroes/${this.hero.short_name}.png`;
+     console.log(this);
+      if(this.type == "map")
+      {
+        return `/images/maps/icon/bg_${this.thisObj.sanitized_map_name}.jpg`;
+      }
+      else{
+        return `/images/heroes/${this.thisObj.short_name}.png`;
+      }
+      
     }
   }
 }

diff --git a/resources/js/components/HeroGroupBox.vue b/resources/js/components/HeroGroupBox.vue
@@ -3,7 +3,8 @@
         {{ this.text }}
 
     <div class="border border-gray-300 p-4 flex flex-wrap gap-0">
-      <hero-box-small v-for="(item, index) in data" :key="index" :hero="item.hero" :hovertext="item.hovertext"></hero-box-small>
+      CHANGE THIS TO group-box
+      <round-box-small v-for="(item, index) in data" :key="index" :obj="item.hero" :hovertext="item.hovertext"></round-box-small>
     </div>
   </div>
 </template>
@@ -22,6 +23,8 @@ export default {
     }
   },
   created(){
+    console.log('data', this.data);
+
   },
   mounted() {
   },

diff --git a/resources/js/components/MapBoxSmall.vue b/resources/js/components/MapBoxSmall.vue
@@ -1,5 +1,6 @@
 <template>
   <div v-if="map" class="relative group flex items-center " @mouseover="showTooltip = true" @mouseleave="showTooltip = false">
+    CHANGE THIS TO round-box-small
     <img class="card-img-top relative hover:opacity-75 w-10 h-10 rounded-full" :src="getMapImage()" :alt="map.name" >
     <div v-if="includehover && showTooltip" class="absolute hidden bottom-11 -left-24  bg-gray-dark  text-s p-1  group-hover:block  text-white z-50 drop-shadow-md w-60 rounded-md px-2 text-center">
       {{ popuptext }}
@@ -25,6 +26,7 @@ export default {
     }
   },
   created(){
+
     if(this.map){
       this.popuptext = this.hovertext ? this.hovertext : this.hero.name;
     }else{

diff --git a/resources/js/components/MapGroupBox.vue b/resources/js/components/MapGroupBox.vue
@@ -1,9 +1,10 @@
 <template>
   <div>
+    CHANGE THIS TO group-box
         {{ this.text }}
 
     <div class="border border-gray-300 p-4 flex flex-wrap gap-0">
-      <map-box-small v-for="(item, index) in data" :key="index" :map="item.game_map" :hovertext="'I am not sure if this is the right way to do it'"></map-box-small>
+      <round-box-small v-for="(item, index) in data" :key="index" :obj="item.game_map" :type="'map'" :hovertext="'I am not sure if this is the right way to do it'"></round-box-small>
     </div>
   </div>
 </template>
@@ -22,6 +23,7 @@ export default {
     }
   },
   created(){
+    console.log('map-data', this.data);
   },
   mounted() {
     //console.log(this.data);

diff --git a/resources/js/components/Player/Heroes/PlayerHeroSingleStats.vue b/resources/js/components/Player/Heroes/PlayerHeroSingleStats.vue
@@ -53,13 +53,13 @@
           <infobox :input="'Click a map to see more information and stats, or select all maps to view maps regardless of hero.'"></infobox>
 
           <div class="flex">
-            <map-group-box :data="data.map_data_top_played.slice(0, 3)"></map-group-box>
-            <map-group-box :data="data.map_data_top_win_rate.slice(0, 3)"></map-group-box>
-            <map-group-box :data="data.map_data_top_latest_played.slice(0, 3)"></map-group-box>
+            <group-box :data="data.map_data_top_played.slice(0, 3)"></group-box>
+            <group-box :data="data.map_data_top_win_rate.slice(0, 3)"></group-box>
+            <group-box :data="data.map_data_top_latest_played.slice(0, 3)"></group-box>
           </div>
 
           <div class="flex">
-            <map-box-small v-for="(item, index) in data.map_data" :key="index" :map="item.map_object" :hovertext="'I am not sure if this is the right way to do it'"></map-box-small>
+            <round-box-small v-for="(item, index) in data.map_data" :key="index" :map="item.map_object" :hovertext="'I am not sure if this is the right way to do it'"></round-box-small>
           </div>
         </div>
 

diff --git a/resources/js/components/Player/PlayerMatchup.vue b/resources/js/components/Player/PlayerMatchup.vue
@@ -12,8 +12,8 @@
     :includeseason="true"
     >
   </filters>
-      <hero-group-box :text="'Top 5 Allies with more than 5 games'" :data="topfiveheroes"></hero-group-box>
-      <hero-group-box :text="'Top 5 Enemies with more than 5 games'" :data="topfiveenemies"></hero-group-box>
+      <group-box :text="'Top 5 Allies with more than 5 games'" :data="topfiveheroes"></group-box>
+      <group-box :text="'Top 5 Enemies with more than 5 games'" :data="topfiveenemies"></group-box>
 
   <table class="min-w-full bg-white">
     <thead>
-Original file line number
+Diff line change
@@ Expand Up @@
     body{
       font-size:18px;
+      letter-spacing: .03em;
     }
     .search-input{
@@ Expand Down @@