캐릭터 장비 컴포넌트 제작 - 2 (6/6)

캐릭터 장비 데이터를 모두 불러왔으니 이제 장비 정보창을 만들어보자.

	<template>
	<v-card
	v-if="this.$store.state.characterName"
	class="mx-auto"
	max-width="1300"
	>
	<v-img
	class="align-center"
	height="900px"
	:src = "imgSource"
	>
	<v-container>
	<v-row>
	<v-col
	class="d-flex align-start flex-column"
	>
	<gear-slot :gear="gearData[0]" class="py-2 transParent"></gear-slot>
	<gear-slot :gear="gearData[1]" class="py-2 transParent"></gear-slot>
	<gear-slot :gear="gearData[2]" class="py-2 transParent"></gear-slot>
	<gear-slot :gear="gearData[3]" class="py-2 transParent"></gear-slot>
	<gear-slot :gear="gearData[4]" class="py-2 transParent"></gear-slot>
	<gear-slot :gear="gearData[5]" class="py-2 transParent"></gear-slot>
	<gear-slot :gear="gearData[6]" class="py-2 transParent"></gear-slot>
	<gear-slot :gear="gearData[7]" class="py-2 transParent"></gear-slot>
	</v-col>
	<v-col
	class="d-flex align-end flex-column"
	>
	<gear-slot :gear="gearData[8]" class="py-2 transParent"></gear-slot>
	<gear-slot :gear="gearData[9]" class="py-2 transParent"></gear-slot>
	<gear-slot :gear="gearData[10]" class="py-2 transParent"></gear-slot>
	<gear-slot :gear="gearData[11]" class="py-2 transParent"></gear-slot>
	<gear-slot :gear="gearData[12]" class="py-2 transParent"></gear-slot>
	<gear-slot :gear="gearData[13]" class="py-2 transParent"></gear-slot>
	<gear-slot :gear="gearData[14]" class="py-2 transParent"></gear-slot>
	<gear-slot :gear="gearData[17]" class="py-2 transParent"></gear-slot>
	</v-col>
	</v-row>
	<v-col
	class="d-flex align-center justify-center"
	>
	<gear-slot :gear="gearData[15]" class="px-2 transParent"></gear-slot>
	<gear-slot :gear="gearData[16]" class="px-2 transParent"></gear-slot>
	</v-col>
	<v-row>
	</v-row>
	</v-container>
	</v-img>
	</v-card>
	</template>
	<script>
	import GearSlot from "./GearSlot"
	export default {
	name: "CharacterGear",
	components: {
	GearSlot
	},
	data(){
	return {
	}
	},
	computed:{
	gearData(){
	return this.$store.state.characterGearSlot
	},
	imgSource(){
	if(this.$store.state.characterMedia.hasOwnProperty('render')){
	return this.$store.state.characterMedia['render']
	}
	return this.$store.state.characterMedia['main']
	}
	}
	}
	</script>
	<style scoped>
	.transParent {
	background-color: rgba(255,255,255,0);
	}
	</style>

view raw CharacterGear.vue hosted with ❤ by GitHub

api에서 캐릭터 장비 정보를 불러올 때 해당 캐릭터가 장착하지 않은 장비는 장비칸 정보가 아예 누락되어 오기 때문에 미리 캐릭터가 장비할 수 있는 장비 객체를 만들어 정보를 정리했다.

그리고 해당 정보를 GearSlot 컴포넌트에 prop으로 넘겨주었다.

자꾸 실수하는 부분이 있는데, 변수안의 정보가 바뀔 수 있는 경우에는 computed로 관리해주어야하는데, 자꾸 data에 넣어놓는다... data에 들어간 변수는 페이지에서 다른 캐릭터를 검색했을 경우 해당 정보가 바뀌질 않는다. 주의하자.

	<template>
	<div>
	<v-tooltip right>
	<template v-slot:activator="{ on }">
	<v-card
	v-on="on"
	max-width="75px"
	elevation="0"
	>
	<v-img
	:src="imgSource"
	></v-img>
	<v-btn
	text
	max-height="22px"
	:style="itemColor"
	disabled
	tile
	block
	>
	{{itemLevel}}
	</v-btn>
	</v-card>
	</template>
	<gear-spec style="max-width: 25vw;" :gearData="gear"></gear-spec>
	</v-tooltip>
	</div>
	</template>
	<script>
	import GearSpec from "./GearSpec";
	export default {
	name: "GearSlot",
	components: {
	GearSpec
	},
	data() {
	return {
	imgUrl: 'https://render-us.worldofwarcraft.com/icons/56/inv_sword_39.jpg',
	defaultIMG: 'https://render-us.worldofwarcraft.com/icons/56/inv_sword_39.jpg'
	}
	},
	computed: {
	imgSource() {
	if(this.$store.state.gearImage[`${this.gear['gearType']}`]) {
	return this.$store.state.gearImage[`${this.gear['gearType']}`]
	}
	else{
	return 'https://render-us.worldofwarcraft.com/icons/56/inv_sword_39.jpg'
	}
	},
	itemLevel() {
	if (this.gear['gearData']) {
	return this.gear['gearData']['level']['value']
	}
	},
	itemColor() {
	let itemColor = this.$store.state.itemQualityRGBA
	let itemQuality = (this.gear.hasOwnProperty('gearData')) ? this.gear['gearData']['quality']['type'] : 'POOR'
	function getStyleObject(itemQuality) {
	return {
	color: 'rgba(255,255,255,255) !important',
	backgroundColor: `rgba(
	${itemColor[itemQuality][0]},
	${itemColor[itemQuality][1]},
	${itemColor[itemQuality][2]},
	${itemColor[itemQuality][3]})
	!important`
	}
	}
	return getStyleObject(itemQuality)
	}
	},
	methods: {},
	props: {
	gear: {
	type: Object,
	required: true
	}
	}
	}
	</script>
	<style scoped>
	</style>

view raw GearSlot.vue hosted with ❤ by GitHub

장착한 장비의 등급과 아이템 레벨에 따라 표기를 다르게 해주었다.

장비 8가지 정도 다른 등급이 있는데, 다른 컴포넌트에서도 사용될 예정이기 때문에 state에 저장해두었다.

장비칸에 마우스를 호버링해 장비의 세부 정보를 볼 수 있게 만들었다. 해당 기능은 v-tooltip을 이용했다.

	<template>
	<div>
	<div v-if="item">
	<span :style="itemColor">{{item['name']}}</span><br>
	<div v-if="hasLimitCategory">
	<span>{{item['limit_category']}}</span>
	</div>
	<div v-if="hasNameDescription">
	<span style="color:greenyellow">{{item["name_description"]['display_string']}}</span><br>
	</div>
	<div v-if="isTransMogged">
	<span>{{item['transmog']['display_string']}}</span>
	</div>
	<span>{{item['level']['display_string']}}</span><br>
	<span>{{item['binding']['name']}}</span><br>
	<span>{{item['inventory_type']['name']}}</span><br>
	<div v-if="hasStatus">
	<div
	v-for="status in item['stats']"
	>
	<div v-if="status['is_negated']">
	<span style="color: rgba(179,179,179,0.5)">{{status['display']['display_string']}}</span>
	</div>
	<div v-else>
	<span
	v-if="status['type']['name'] ==='체력'
	||status['type']['name'] ==='힘'
	||status['type']['name'] ==='지능'
	||status['type']['name'] ==='민첩성'"
	style="color:white">{{status['display']['display_string']}}
	</span>
	<span v-else style="color:#c1f15d">{{status['display']['display_string']}}</span>
	</div>
	</div>
	<div v-if="hasEnchant">
	<br>
	<span
	v-for="enchant in item['enchantments']"
	style="color: #c1f15d"
	>{{enchant['display_string']}}<br></span></div>
	</div>
	<div v-if="AzeriteGear">
	<div v-if="AzeriteNecklace">
	<span
	v-for="essence in AzeriteNecklace"
	style="color: #ff8400"
	>
	<span>{{essence['essence']['name']}}</span><br>
	</span>
	</div>
	<div v-else>
	<span style="color: #ffd500">{{item['azerite_details']['selected_powers_string']}}</span><br>
	<span
	v-for="spell in reversedAbility"
	>
	<span>-{{spell['spell_tooltip']['spell']['name']}}</span><br>&nbsp&nbsp
	<span style="color: greenyellow">{{spell['spell_tooltip']['description']}}</span><br>
	</span>
	</div>
	</div>
	<div v-if="hasSpell">
	<br>
	<span v-for="spell in item['spells']" style="color: #c1f15d">{{spell['description']}}<br></span>
	</div>
	<div v-if="hasSocket">
	<br>
	<div v-for="socket in item['sockets']">
	<span style="color: #ffe6b5">{{socket['item']['name']}}</span>:&nbsp
	<span>{{socket['display_string']}}</span>
	</div>
	</div>
	<div v-if="hasSet">
	<span style="color: gold"><br>{{item['set']['display_string']}}</span>
	<span v-for="itemPart in item['set']['items']" style="color:palegoldenrod"><br>{{itemPart['item']['name']}}</span>
	<span v-for="effect in item['set']['effects']" style="color: #c1f15d"><br><br>{{effect['display_string']}}</span>
	</div>
	</div>
	<div v-else>
	장착 아이템 없음
	</div>
	</div>
	</template>
	<script>
	export default {
	name: "GearSpec",
	data() {
	return {
	}
	},
	computed: {
	item(){
	return this.gearData['gearData']
	},
	hasSet(){
	return this.item['set']
	},
	hasSocket(){
	return this.item['sockets']
	},
	hasEnchant(){
	return this.item['enchantments']
	},
	hasLimitCategory(){
	return this.item['limit_category']
	},
	hasNameDescription() {
	return this.item['name_description']
	},
	isTransMogged() {
	return this.item['transmog']
	},
	hasStatus() {
	return this.item['stats']
	},
	AzeriteGear() {
	return this.item['azerite_details']
	},
	AzeriteNecklace() {
	return this.item['azerite_details']['selected_essences']
	},
	reversedAbility() {
	return this.item['azerite_details']['selected_powers'].slice().reverse()
	},
	hasSpell(){
	return this.item['spells']
	},
	itemColor() {
	let itemColor = this.$store.state.itemQualityRGBA
	let itemQuality = (this.gearData.hasOwnProperty('gearData')) ? this.gearData['gearData']['quality']['type'] : 'POOR'
	function getStyleObject(itemQuality) {
	return {
	color: `rgba(
	${itemColor[itemQuality][0]+60},
	${itemColor[itemQuality][1]+60},
	${itemColor[itemQuality][2]+60},
	${itemColor[itemQuality][3]})
	!important`
	}
	}
	return getStyleObject(itemQuality)
	}
	},
	props: {
	gearData: {
	type: Object,
	required: true
	}
	}
	}
	</script>
	<style scoped>
	</style>

view raw GearSpec.vue hosted with ❤ by GitHub

아이템의 세부 정보와 착용효과 등 모든 정보는 장비 데이터를 가져올때 함께 가져왔기 떄문에 그대로 넣어주기만 하면 된다. 

이것으로 캐릭터 장비 정보창을 마무리했다.