splash require

@@ -38,7 +38,7 @@
     "babel-register": "^6.22.0",
     "chalk": "^2.0.1",
     "chromedriver": "^2.27.2",
-    "copy-webpack-plugin": "^4.0.1",
+    "copy-webpack-plugin": "^4.6.0",
     "cross-spawn": "^5.0.1",
     "css-loader": "^0.28.0",
     "eslint": "^4.15.0",

@@ -3,44 +3,44 @@
     <div class="header">
       <h1>{{ userId }}</h1>
     </div>
+    
     <div class="body">
       <div class="assist">
-        <b-button>Pick Assistant</b-button>
+        <b-button v-b-toggle.collapse-predict variant="outline-primary">Pick Assistant</b-button>
+        <b-collapse id="collapse-predict">
+          <h1>the world of sound</h1>          
+          <span v-for="champion in championList">
+            <img v-bind:src="splashLoader(champion)">
+          </span>
+        </b-collapse>
       </div>    
+
       <div class="team">
+        <div class="team_summary">
           <div class="team_best">
-          <h1>tb {{ inference_team[0]['id'] }}</h1>
+            <h1>Best : {{ nameTranslator(inference_team[0]['id']) }}</h1>
+            <img v-bind:src="splashLoader(inference_team[0]['id'])">
           </div>
           <div class="team_worst">
-          <h1>tw {{ inference_team[inference_team.length -1]['id'] }}</h1>
+            <h1>Worst {{ nameTranslator(inference_team[inference_team.length - 1]['id']) }}</h1>
+            <img v-bind:src="splashLoader(inference_team[inference_team.length - 1]['id'])">          
           </div>
         </div>
-
+        <b-button v-b-toggle.collapse-1 variant="primary">More</b-button>
+        <b-collapse id="collapse-1">
           <b-container fluid class="wrap">
             <b-row class="items flex-row flex-nowrap">
-          <template v-for="team in inference_team">
+              <template v-for="team, index in inference_team">
                 <b-card class="card">
-              <b-card-text>{{ team['id'] }}</b-card-text>
-              <b-card-text>{{ team['coefficient'] }}</b-card-text>
+                  <img v-bind:src="splashLoader(team['id'])">
+                  <h3>{{ index + 1 }}. {{ nameTranslator(team['id']) }}</h3>
                 </b-card>
               </template>
             </b-row>
           </b-container>
-
-      <div class="wrap">
-        <div class="items">
-          <h1>1234123412348123840182304981-23841-2034812-384123479012374917340917394073907409172394071092374901723940172394710923749012734091723407102374</h1>
-        </div>
+        </b-collapse>
       </div>
 
-      <div class="enemy">
-        <div class="enemy_best">
-          <h1>eb {{ inference_enemy[0]["id"] }}</h1>
-        </div>
-        <div class="enemy_worst">
-          <h1>ew {{ inference_enemy[inference_enemy.length -1]["id"] }}</h1>
-        </div>
-      </div>
       <div class="myPick">
       </div>
     </div>
@@ -48,6 +48,8 @@
 </template>
 
 <script>
+import championTable from '../assets/champion_table.json';
+
 export default {
   name: 'DetailPage',
   data () {
@@ -58,27 +60,25 @@ export default {
       inference_enemy: [],
       inference_secondary: [],
       myPick: [],
+      splash: [],
+      championList: Array.from(Array(145).keys())
     }
   },
   created () {
-    //this.userId = $route.params.userId
-    //this.axios.post('http://127.0.0.1:8000/GameData/search/', {'game_id': "laurelwoods"}, {
-    //  headers: { 'Content-Type': 'application/json'}
-    //})
     this.axios.get('http://127.0.0.1:8000/GameData/search/', { params: { game_id: 'laurelwoods' }})
     .then((response) => {
       this.userPk = response.data.id;
       this.userId = response.data.game_id;
       // inference : team
-      this.axios.get('http://127.0.0.1:8000/GameData/' + this.userPk + '/inference/', { params: { model_type: 'team'}})
+      this.axios.get('http://127.0.0.1:8000/GameData/' + this.userPk + '/inference/', { params: { model_type: 'team' } })
       .then((response) => { this.inference_team = response.data; })
 
       // inference : enemy
-      this.axios.get('http://127.0.0.1:8000/GameData/' + this.userPk + '/inference/', { params: { model_type: 'enemy'}})
+      this.axios.get('http://127.0.0.1:8000/GameData/' + this.userPk + '/inference/', { params: { model_type: 'enemy' } })
       .then((response) => { this.inference_enemy = response.data; })
 
       // inference : secondary
-      this.axios.get('http://127.0.0.1:8000/GameData/' + this.userPk + '/inference/', { params: { model_type: 'secondary'}})
+      this.axios.get('http://127.0.0.1:8000/GameData/' + this.userPk + '/inference/', { params: { model_type: 'secondary' } })
       .then((response) => {
         this.inference_secondary = response.data; })
       
@@ -89,7 +89,15 @@ export default {
     .catch((error) => { 
       console.log(error.response)
     })
-
+  },
+  methods: {
+    nameTranslator: function (championId) {      
+      return championTable[championId]['name_ko']
+    },
+    splashLoader: function (championId) {
+      const path = require('../assets/splash/' + String(championId) + '.png')
+      return path
+    }
   }
 }
 </script>
@@ -106,7 +114,7 @@ export default {
   overflow: auto;
 }
 .card {
-  min-height: 300px;
-  min-width: 300px;
+  min-height: 200px;
+  min-width: 250px;
 }
 </style>