오윤석 / maplespec.ga

Go to a project
Toggle navigation Toggle navigation pinning
오윤석
85569ef7 1 parent 496abba3

character page front

Inline Side-by-side
Showing 1 changed file with 261 additions and 3 deletions
...@@ -3,8 +3,98 @@ ...@@ -3,8 +3,98 @@
3 3
4 import {push} from 'svelte-spa-router'; 4 import {push} from 'svelte-spa-router';
5 import axios from 'axios'; 5 import axios from 'axios';
6 + import Loading from '../components/Loading.svelte';
6 7
7 - let character = {}; 8 + let callCount = 0;
9 + let isBuff = false;
10 + let isCharacterLoading = false;
11 + let stats;
12 +
13 + let character = {
14 + info:{
15 + avatar:'',
16 + nickname:'',
17 + characterCode:'',
18 + job:'',
19 + majorName:'',
20 + attackPowerName:'',
21 + server:{
22 + name:'',
23 + icon:''
24 + },
25 + level:237
26 + },
27 + analysis:{
28 + default:{
29 + stats:{
30 + major:{
31 + pure:0,
32 + percent:0,
33 + added:0,
34 + },
35 + minor:0,
36 + damage:{
37 + all:0,
38 + boss:0
39 + },
40 + finalDamage:0,
41 + criticalDamage:0,
42 + attackPower:{
43 + pure:0,
44 + percent:0,
45 + },
46 + ignoreGuard:0
47 + },
48 + efficiency:{
49 + major:{
50 + pure:1,
51 + percent:1
52 + },
53 + attackPower:{
54 + pure:1,
55 + percent:1
56 + },
57 + damage:1,
58 + criticalDamage:1,
59 + ignoreGuard:1
60 + }
61 + }
62 + },
63 + buff:{
64 + stats:{
65 + major:{
66 + pure:0,
67 + percent:0,
68 + added:0,
69 + },
70 + minor:0,
71 + damage:{
72 + all:0,
73 + boss:0
74 + },
75 + finalDamage:0,
76 + criticalDamage:0,
77 + attackPower:{
78 + pure:0,
79 + percent:0,
80 + },
81 + ignoreGuard:0
82 + },
83 + efficiency:{
84 + major:{
85 + pure:1,
86 + percent:1
87 + },
88 + attackPower:{
89 + pure:1,
90 + percent:1
91 + },
92 + damage:1,
93 + criticalDamage:1,
94 + ignoreGuard:1
95 + }
96 + }
97 + }
8 98
9 function init() { 99 function init() {
10 let nickname; 100 let nickname;
...@@ -16,20 +106,188 @@ ...@@ -16,20 +106,188 @@
16 106
17 nickname = decodeURI(params.character); 107 nickname = decodeURI(params.character);
18 108
109 + callCount++;
19 axios.get('/api/character', { 110 axios.get('/api/character', {
20 params:{ 111 params:{
21 nickname:nickname 112 nickname:nickname
22 } 113 }
23 }).then(function(response) { 114 }).then(function(response) {
24 - console.log(response); 115 + character = response.data;
116 + isCharacterLoading = true;
25 }).catch(function(error) { 117 }).catch(function(error) {
26 - console.log(error); 118 + switch(error.response.status) {
119 + case 404:
120 + M.toast({html:"존재하지 않는 캐릭터입니다."});
121 + break;
122 + case 403:
123 + M.toast({html:"캐릭터 정보 공개설정이 필요합니다."});
124 + setTimeout(function() {
125 + window.open("https://maplestory.nexon.com/MyMaple/Account/Character/Visibility");
126 + }, 2000);
127 + break;
128 + case 503:
129 + M.toast({html:"메이플스토리가 점검중입니다."});
130 + break;
131 + default:
132 + M.toast({html:"서버와의 통신이 원활하지 않습니다.<br><br>잠시 후에 시도해주세요."});
133 + break;
134 + }
135 + push('/');
136 + }).finally(function() {
137 + callCount--;
27 }); 138 });
28 } 139 }
29 140
141 + function showValue(value) {
142 + return parseFloat(value).toFixed(2);
143 + }
144 +
145 + function goBack() {
146 + push('/');
147 + }
148 +
149 + $:
150 + if(isCharacterLoading && isBuff) {
151 + stats = character.analysis.buff;
152 + } else {
153 + stats = character.analysis.default;
154 + }
155 +
30 init(); 156 init();
31 </script> 157 </script>
32 158
33 <svelte:head> 159 <svelte:head>
34 160
35 </svelte:head> 161 </svelte:head>
162 +
163 +<Loading count={callCount} />
164 +<section>
165 + {#if isCharacterLoading}
166 + <article class="info-box">
167 + <div class="row">
168 + <div class="col s12 m10 l8 offset-m1 offset-l2">
169 + <div class="row">
170 + <div class="col s12 m4 l3">
171 + <div class="card character-card">
172 + <div class="card-stacked">
173 + <div class="card-content">
174 + <div class="character-img">
175 + <img src={character.info.avatar} class="responsive-img" alt="캐릭터">
176 + </div>
177 + <h6 class="pink-text text-accent-3">
178 + <img src={character.info.server.icon} alt={character.info.server.name}>
179 + {character.info.nickname}
180 + </h6>
181 + <div class="job grey-text text-darken-2">
182 + {character.info.job}
183 + </div>
184 + <div class="level grey-text text-darken-2">
185 + Lv.{character.info.level}
186 + </div>
187 + </div>
188 + </div>
189 + </div>
190 + <div class="back-button-box">
191 + <button class="btn waves-light btn red accent-2" on:click={goBack}>
192 + <i class="material-icons">arrow_back</i>
193 + <span>뒤로가기</span>
194 + </button>
195 + </div>
196 + </div>
197 + <div class="col s12 m8 l9">
198 + <div class="card character-card">
199 + <div class="card-stacked">
200 + <div class="card-content">
201 + <div class="buff-switch">
202 + <div class="switch">
203 + <label>
204 + 노버프
205 + <input type="checkbox" bind:checked={isBuff}>
206 + <span class="lever"></span>
207 + 버프(자벞,링크,노블,영메)
208 + </label>
209 + </div>
210 + </div>
211 + <table class="table-efficiency">
212 + <thead>
213 + <tr>
214 + <th>스탯</th>
215 + <th>효율</th>
216 + </tr>
217 + </thead>
218 + <tbody>
219 + <tr>
220 + <th rowspan="2">{character.info.majorName} 1%</th>
221 + <td>{character.info.majorName} {showValue(stats.efficiency.major.percent)}</td>
222 + </tr>
223 + <tr>
224 + <td>{character.info.attackPowerName} {showValue(stats.efficiency.major.percent / stats.efficiency.attackPower.pure)}</td>
225 + </tr>
226 + <tr>
227 + <th>{character.info.attackPowerName} 1</th>
228 + <td>{character.info.majorName} {showValue(stats.efficiency.attackPower.pure)}</td>
229 + </tr>
230 + <tr>
231 + <th rowspan="5">{character.info.attackPowerName} 1%</th>
232 + <td>{character.info.majorName} {showValue(stats.efficiency.attackPower.percent)}</td>
233 + </tr>
234 + <tr>
235 + <td>{character.info.majorName} {showValue(stats.efficiency.attackPower.percent / stats.efficiency.major.percent)}%</td>
236 + </tr>
237 + <tr>
238 + <td>{character.info.attackPowerName} {showValue(stats.efficiency.attackPower.percent / stats.efficiency.attackPower.pure)}</td>
239 + </tr>
240 + <tr>
241 + <td>데미지(보공) {showValue(stats.efficiency.attackPower.percent / stats.efficiency.damage)}%</td>
242 + </tr>
243 + <tr>
244 + <td>방무 {showValue(stats.efficiency.attackPower.percent / stats.efficiency.ignoreGuard)}%</td>
245 + </tr>
246 + <tr>
247 + <th rowspan="2">데미지(보공) 1%</th>
248 + <td>{character.info.majorName} {showValue(stats.efficiency.damage)}</td>
249 + </tr>
250 + <tr>
251 + <td>방무 {showValue(stats.efficiency.damage / stats.efficiency.ignoreGuard)}%</td>
252 + </tr>
253 + <tr>
254 + <th rowspan="2">크뎀 1%</th>
255 + <td>{character.info.majorName} {showValue(stats.efficiency.criticalDamage)}</td>
256 + </tr>
257 + <tr>
258 + <td>{character.info.majorName} {showValue(stats.efficiency.criticalDamage / stats.efficiency.major.percent)}%</td>
259 + </tr>
260 + <tr>
261 + <th>방무 1%</th>
262 + <td>{character.info.majorName} {showValue(stats.efficiency.ignoreGuard)}</td>
263 + </tr>
264 + </tbody>
265 + </table>
266 + </div>
267 + </div>
268 + </div>
269 + </div>
270 + </div>
271 + </div>
272 + </div>
273 + </article>
274 + {/if}
275 +</section>
276 +
277 +<style>
278 +section { width:100%; height:100%; display:flex; flex-direction:column; padding:20px 0; }
279 +.info-box { margin:auto 0; }
280 +.info-box > .row > .col > .row > .col { margin-bottom:.5rem; }
281 +.character-card .card-content { text-align:center; }
282 +.character-card .card-content .job { font-size:0.8em }
283 +.character-card .card-content .level { font-size:0.8em }
284 +.character-card .card-content h6 img { width:14px; height:14px; }
285 +.character-card .card-content h6 { font-weight:bold; }
286 +.table-efficiency td, .table-efficiency th { text-align:left; }
287 +.back-button-box button { width:100%; display:block; height:48px; line-height:48px; }
288 +.back-button-box button i.material-icons { vertical-align:middle; }
289 +.back-button-box button span { vertical-align:middle; }
290 +.buff-switch .switch label input[type=checkbox]:checked+.lever:after { background-color:#e57373; }
291 +.buff-switch .switch label input[type=checkbox]:not(:checked)+.lever { background-color:#ffcdd2; }
292 +.buff-switch .switch label input[type=checkbox]:checked+.lever { background-color:#ef9a9a ; }
293 +</style>
...\ No newline at end of file ...\ No newline at end of file
......