박현우 / winrate-frontend

Go to a project
Toggle navigation Toggle navigation pinning
박현우
618a42ea 1 parent 3163d3e6

fully functional

Inline Side-by-side
Showing 1 changed file with 96 additions and 29 deletions
......@@ -8,41 +8,96 @@
<div class="assist">
<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-button v-b-toggle.collapse-team variant="outline-primary">Team</b-button>
<b-collapse id="collapse-team">
<h1>Team Combination</h1>
<h1 v-if="teamData">{{ teamData }}</h1>
<span v-for="championId in championList">
<button v-on:click="inputTeamData(championId)">
<img v-bind:src="splashLoader(championId)">
</button>
</span>
</b-collapse>
<b-button v-b-toggle.collapse-enemy variant="outline-primary">Enemy</b-button>
<b-collapse id="collapse-enemy">
<h1>Enemy Combination</h1>
<h1 v-if="enemyData">{{ enemyData }}</h1>
<span v-for="championId in championList">
<button v-on:click="inputEnemyData(championId)">
<img v-bind:src="splashLoader(championId)">
</button>
</span>
</b-collapse>
<b-button v-on:click="makePredict(userPk)">Predict</b-button>
<div v-for="result in predictResult">
<b-card :title="nameTranslator(result['champion'])" :img-src="splashLoader(result['champion'])"></b-card>
</div>
</b-collapse>
</div>
<div class="team">
<div class="team_summary">
<div class="team_best">
<h1>Best : {{ nameTranslator(inference_team[0]['id']) }}</h1>
<img v-bind:src="splashLoader(inference_team[0]['id'])">
<b-button v-b-toggle.collapse-team_combination variant="outline-primary">Best Team Combination</b-button>
<b-collapse id="collapse-team_combination">
<div class="team">
<div class="team_summary">
<div class="team_best">
<h1>Best : {{ nameTranslator(inference_team[0]['id']) }}</h1>
<img v-bind:src="splashLoader(inference_team[0]['id'])">
</div>
<div class="team_worst">
<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>
<div class="team_worst">
<h1>Worst {{ nameTranslator(inference_team[inference_team.length - 1]['id']) }}</h1>
<img v-bind:src="splashLoader(inference_team[inference_team.length - 1]['id'])">
<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, index in inference_team">
<b-card class="card">
<img v-bind:src="splashLoader(team['id'])">
<h3>{{ index + 1 }}. {{ nameTranslator(team['id']) }}</h3>
</b-card>
</template>
</b-row>
</b-container>
</b-collapse>
</div>
</b-collapse>
<b-button v-b-toggle.collapse-enemy_combination variant="outline-primary">Best Enemy Counterpart</b-button>
<b-collapse id="collapse-enemy_combination">
<div class="enemy">
<div class="enemy_summary">
<div class="enemy_best">
<h1>Best : {{ nameTranslator(inference_enemy[0]['id']) }}</h1>
<img v-bind:src="splashLoader(inference_enemy[0]['id'])">
</div>
<div class="enemy_worst">
<h1>Worst {{ nameTranslator(inference_enemy[inference_enemy.length - 1]['id']) }}</h1>
<img v-bind:src="splashLoader(inference_enemy[inference_enemy.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="enemy, index in inference_enemy">
<b-card class="card">
<img v-bind:src="splashLoader(enemy['id'])">
<h3>{{ index + 1 }}. {{ nameTranslator(enemy['id']) }}</h3>
</b-card>
</template>
</b-row>
</b-container>
</b-collapse>
</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, index in inference_team">
<b-card class="card">
<img v-bind:src="splashLoader(team['id'])">
<h3>{{ index + 1 }}. {{ nameTranslator(team['id']) }}</h3>
</b-card>
</template>
</b-row>
</b-container>
</b-collapse>
</div>
</b-collapse>
<div class="myPick">
</div>
</div>
</div>
</template>
......@@ -61,7 +116,10 @@ export default {
inference_secondary: [],
myPick: [],
splash: [],
championList: Array.from(Array(145).keys())
championList: Array.from(Array(145).keys()),
teamData: [],
enemyData: [],
predictResult: {}
}
},
created () {
......@@ -97,6 +155,15 @@ export default {
splashLoader: function (championId) {
const path = require('../assets/splash/' + String(championId) + '.png')
return path
},
inputTeamData: function (championId) { this.teamData.push(championId) },
inputEnemyData: function (championId) { this.enemyData.push(championId) },
makePredict: function (pk) {
this.axios.post('http://127.0.0.1:8000/GameData/' + String(pk) + '/predict/', { team: this.teamData, enemy: this.enemyData })
.then((response) => {
console.log(response.data)
this.predictResult = response.data
})
}
}
}
......