지난번에 api서버와의 통신으로 토큰을 가져오는데에 성공했다.
이번엔 그 토큰으로 내가 필요한 데이터를 받아올것이다.
그 전에, 작업을 하면서 시각적으로 변화를 확인할 수 있도록 네임플레이트를 만들어보겠다.
<template>
<v-layout row>
<v-flex
class="px-6"
xs12>
<v-card>
<v-layout>
<v-img
xs2
min-height="150px"
min-width="150px"
max-width="180px"
max-height="180px"
src="https://render-kr.worldofwarcraft.com/character/azshara/0/119314432-avatar.jpg"
></v-img>
<v-flex xs12>
<v-card-title primary-title>
<v-col
xs="12"
md="5"
lg="2"
style="min-width: 400px;"
>
<h5>TITLE</h5>
<h1>
캐릭터 닉네임
</h1>
<!--<h1 style="color: #d59012">color test</h1>-->
</v-col>
<v-col xs="12" md="6">
<v-row>
<h3>
100LV
</h3>
</v-row>
<v-row>
60레벨
종족 
<span>특성</span> 
<span>직업</span>
</v-row>
<v-row>
<span style="color: #ffa500;">
길드명
</span>
 
서버
</v-row>
</v-col>
<v-col>
</v-col>
</v-card-title>
</v-flex>
</v-layout>
</v-card>
</v-flex>
</v-layout>
</template>
<script>
export default {
name: "NamePlate"
}
</script>
<style scoped>
</style>
//네임플레이트
이제 이 네임플레이트에 사용자가 캐릭터 이름을 검색하면 해당 캐릭터의 정보가 출력되도록 해볼것이다.
이에 필요한 검색창을 하나 만들것이다.
한 캐릭터를 특정하기 위해서는 두가지 정보 - 서버와 캐릭터명이 필요하다.
현재 게임에 존재하는 서버의 리스트를 서버에서 가져온다.
export function getRealmSlug(store){
this.$axios.$get('https://kr.api.blizzard.com/data/wow/realm/index',{
params:{
region:'kr',
namespace:'dynamic-kr',
locale:'ko-KR',
access_token:store.state.accessToken
}
})
.then(function (result) {
store.commit('setRealmSlugList',getRealmSlugList(result))
})
.catch(function (error) {
console.log(error)
})
}
function getRealmSlugList(rawData){
let data = []
rawData.realms.forEach(realm => {
let tmp = {
slug: realm['slug'],
ko_KR: realm['name']['ko_KR'],
en_US: realm['name']['en_US']
}
data.push(tmp)
})
return data
}
//서버 리스트 통신
import secret from '../apiAccount'
export function getAccessToken(store) {
let data = `client_id=${secret.clientID}&client_secret=${secret.clientSecret}&grant_type=client_credentials`
return this.$axios.$post('https://us.battle.net/oauth/token', data)
.then(function (response) {
console.log(response)
store.commit('setAccessToken', response.access_token)
return true
})
.catch(function (error) {
console.log(error)
return false
})
}
//토큰 통신
async mounted() {
await this.$store.dispatch('getAccessToken')
if(this.$store.state.accessToken !== 'default Token String'){
this.$store.dispatch('getRealmSlug')
}else{
//
}
}
//layout의 mounted hook
export default {
setAccessToken(state, payload){
state.accessToken = payload
},
setRealmSlugList(state,payload){
state.realmSlugList = payload
},
}
//mutation
서버 리스트를 요청하기 전에 반드시 getAccessToken 함수가 선행되어야하기 때문에 async/await를 사용해 토큰을 받아온 후에 getRealmSlug를 실행한다.
서버 목록이 정상적으로 state에 저장된것을 확인할 수 있다.
이 다음으로는 네임플레이트에 들어갈 정보들을 불러온다.
export function getCharacterProfile(store){
this.$axios.$get(`https://kr.api.blizzard.com/profile/wow/character/${store.state.realmSlug}/${store.state.characterName}`,{
params:{
region:'kr',
namespace:'profile-kr',
locale:'en_US',
access_token: store.state.accessToken
}
})
.then(function (response) {
store.commit('setCharacterProfile',getProfileData(response))
})
.catch(function (error) {
console.log(error)
})
}
function getProfileData(rawData){
let profile ={
faction: rawData['faction']['type'],
title:'',
realm: rawData['realm']['name'],
active_spec: rawData['active_spec']['name'],
race: rawData['race']['name'],
character_class: rawData['character_class']['name'],
equipped_item_level: rawData['equipped_item_level'],
guild:'',
level: rawData['level'],
}
if(rawData.hasOwnProperty('active_title')){
profile['title'] = rawData['active_title']['name']
}
if(rawData['guild'].hasOwnProperty('name')){
profile['guild'] = rawData['guild']['name']
}
return profile
}
//캐릭터 정보
profile에 들어갈 정보중 타이틀, 길드 등 캐릭터가 가지고 있지 않을 수 있는 정보들은 예외처리를 해주어야한다. api를 불러올떄 해당 정보가 없으면 에러가 발생하기때문이다.
export function getCharacterData(store,payload){
store.commit('setSearchInfo',payload)
store.dispatch('getCharacterProfile')
}
export default {
setAccessToken(state, payload) {
state.accessToken = payload
},
setRealmSlugList(state, payload) {
state.realmSlugList = payload
},
setCharacterProfile(state, payload) {
state.characterProfile = payload
},
setSearchInfo(state,payload){
state.characterName = payload['characterName']
state.realmSlug = payload['realmSlug']
}
}
//mutation
이제 내가 검색한 캐릭터에 대한 정보를 성공적으로 받아온것을 확인할 수 있다.
이제 만들어둔 네임플레이트에 state에 저장된 정보를 알맞게 넣어주면 된다.
<template>
<v-layout
row
>
<v-flex
class="px-6"
xs12>
<v-card>
<v-layout>
<v-img
xs2
min-height="150px"
min-width="150px"
max-width="180px"
max-height="180px"
src="https://render-kr.worldofwarcraft.com/character/azshara/0/119314432-avatar.jpg"
></v-img>
<v-flex xs12>
<v-card-title primary-title>
<v-col
xs="12"
md="5"
lg="2"
style="min-width: 400px;"
>
<h5>{{this.$store.state.characterProfile['title']}}</h5>
<h1 :style="characterNameStyle">
{{this.$store.state.characterName}}
</h1>
<!--<h1 style="color: #d59012">color test</h1>-->
</v-col>
<v-col xs="12" md="6">
<v-row>
<h3 v-if="this.$store.state.characterProfile['level']">
{{this.$store.state.characterProfile['equipped_item_level']}} LV
</h3>
</v-row>
<v-row>
{{this.$store.state.characterProfile['level']}}
{{this.$store.state.characterProfile['race']}} 
<span :style="characterNameStyle">{{this.$store.state.characterProfile['active_spec']}}</span> 
<span :style="characterNameStyle">{{this.$store.state.characterProfile['character_class']}}</span>
</v-row>
<v-row>
<span style="color: #ffa500;" v-if="this.$store.state.characterProfile['guild']">
<{{this.$store.state.characterProfile['guild']}}>
</span>
 
{{this.$store.state.characterProfile['realm']}}
</v-row>
</v-col>
<v-col>
</v-col>
</v-card-title>
</v-flex>
</v-layout>
</v-card>
</v-flex>
</v-layout>
</template>
<script>
export default {
name: "NamePlate",
computed: {
characterNameStyle: function () {
let red = 255
let green = 255
let blue = 255
let alpha = 255
let characterClass = this.$store.state.characterProfile['character_class']
let characterRGBA = {
none: [255, 255, 255, 255], // RGBA
Warrior: [175, 145, 100, 255],
Mage: [140, 200, 255, 255],
'Death Knight': [205, 0, 0, 255],
Hunter: [130, 210, 90, 255],
Priest: [255, 255, 255, 255],
'Demon Hunter': [130, 60, 120, 255],
Monk: [70, 210, 150, 255],
Paladin: [255, 170, 220, 255],
Rogue: [240, 255, 150, 255],
Shaman: [40, 60, 255, 255],
Warlock: [100, 70, 200, 255],
Druid: [210, 145, 20, 255]
}
if (characterRGBA.hasOwnProperty(characterClass)) {
return {
color: `rgba(
${characterRGBA[characterClass][0]},
${characterRGBA[characterClass][1]},
${characterRGBA[characterClass][2]},
${characterRGBA[characterClass][3]})`
}
} else {
return {
color: `rgba(
${characterRGBA['none'][0]},
${characterRGBA['none'][1]},
${characterRGBA['none'][2]},
${characterRGBA['none'][3]})`
}
}
}
}
}
</script>
<style scoped>
</style>
직업 구분을 위해 폰트에 직업에 맞는 색상을 지정하고 넣어주었다.
프로필 정보를 받아올때와 마찬가지로, 길드와 타이틀은 예외처리를 해주어야한다.
