계정 정보 받아오기 (2/6)

지난번에 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레벨
                  종족&nbsp
                  <span>특성</span>&nbsp
                  <span>직업</span>
                </v-row>
                <v-row>
                  <span style="color: #ffa500;">
                      길드명
                  </span>
                  &nbsp
                  서버
                </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']}}&nbsp
                  <span :style="characterNameStyle">{{this.$store.state.characterProfile['active_spec']}}</span>&nbsp
                  <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>
                  &nbsp
                  {{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>

직업 구분을 위해 폰트에 직업에 맞는 색상을 지정하고 넣어주었다.

프로필 정보를 받아올때와 마찬가지로, 길드와 타이틀은 예외처리를 해주어야한다.