CSS&JS/✨개인 프로젝트

오버워치 패치노트 통계 페이지 만들어보기(2) : 소스 미리보기

arancia_ 2021. 6. 8. 16:59

모든것을 다 올리면 너무 길어...

HTML
동적으로 생성할것이기 땜시 json으로 뿌려줄 애들은 자식없이 텅텅비었다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <title>오버워치 패치노트 영웅별 통계</title>
<link rel="shortcut icon" href="data:image/x-icon" type="image/x-icon">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
<link href="./fonts/fonts.css" rel="stylesheet" type="text/css"/>
<link href="./css/reset.css" rel="stylesheet" type="text/css"/>
<link href="./css/mainGraph.css" rel="stylesheet" type="text/css"/>
<link href="./css/mostHero.css" rel="stylesheet" type="text/css"/>
<link href="./css/selectHero.css" rel="stylesheet" type="text/css"/>
<link href="./css/tableHero.css" rel="stylesheet" type="text/css"/>
<!--  -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./js/fetch.js" type="module" defer></script>
</head>
<body>
 
<!-- 🚩 경고 -->
<div id="copyright">
    <div id="maker">만든이 : 별난오크#32725</div>
    <div>본 페이지는 개인적 취미 및 공부 목적으로 제작하였으며 상업적이지 않습니다. <br>모든 이미지와 폰트의 저작권은 저에게 없습니다.</div>
</div><!-- copyright -->
 
<!-- 🚩 타이틀 -->
<section id="mainTitle">
    <div id="title__date">
        <span>2019.11.20</span> ~ <span>2021.06.04</span>
    </div>
    <h2>오버워치 패치노트</h2>
    <div class="light"></div>
    <h1>영웅별 통계</h1>
    <div class="text">
        지금까지 어떤 영웅들이<br><strong class="f_italic">얼마나 자주</strong> 패치노트에 등장했을까요?
    </div>
</section><!-- mainTitle -->
 
<!-- 🚩 그래프 -->
<section id="sect_mainGraph">
    <select id="select_graph">
        <option value="tank">돌격</option>
        <option value="dps">공격</option>
        <option value="hps">지원</option>
        <option value="all" selected>전체 보기</option>
    </select>
    
    <div id="bg_mainGraph">
        <span></span> <span></span> <span></span> <span></span> <span></span>
        <span></span> <span></span> <span></span> <span></span> <span></span>
        <span></span>
    </div><!-- line_mainGraph -->
    
    <ul id="mainGraph">
        
    </ul><!-- mainGraph -->
</section><!-- sect_mainGraph -->
 
<!-- 🚩 가장 많이 나온 영웅? -->
<div class="title__mostHero">
    <h2 class="title">지금까지 가장 많이 나온 영웅은?</h2>
    <div class="light"></div>
    <div class="more">패치노트의 으뜸 단골 손님은 바로...</div>
</div><!-- title__mostHero -->
 
<section id="sect_mostHero"><div class="wrap">
    <div id="img_mostHero"></div>
 
    <article id="right_mostHero">
        <h3 id="name_mostHero"></h3>
        <p id="info_mostHero"></p>
        <p id="cv_mostHero"></p>
 
        <ul id="status_mostHero">
            <li class="num">
                <div class="img">
                    <img src="./img/ic/level.png" alt="">
                    <div class="txt_img"><p id="mostHero_num">...</p></div>
                </div>
                <div class="txt">출연 횟수</div>
            </li>
            <li class="appear">
                <div class="img">
                    <div class="txt_img" id="mostHero_appear">....</div>
                </div>
                <div class="txt">최초 등장</div>
            </li>
            <li class="re" title="부정확합니다~!">
                <div class="img">
                    <img src="./img/skill/res_color.png" alt="">
                    <div class="txt_img"><p id="mostHero_days"></p><span>days</span></div>
                </div>
                <div class="txt">재출연 소요기간</div>
            </li>
        </ul><!-- status_mostHero -->
 
        <h6 class="title__vid_mostHero"><span>패치노트 목록</span></h6>
 
        <ul id="vid_mostHero"></ul><!-- vid_mostHero -->
    </article><!-- right_mostHero -->
</div><!-- wrap --></section><!-- sect_mostHero -->
 
<!-- 🚩 영웅 선택 -->
<section id="sect_select_hero">
    <div class="title__select_hero">
        <h2>영웅을 선택하세요</h2>
        <div class="light"></div>
    </div><!-- title -->
 
    <ul id="select_hero">
        <li data-val="tank">
            <input type="checkbox" id="ipt_class-tank" value="tank" checked/>
            <label for="ipt_class-tank"><p>돌격</p></label>
            <!--  -->
            <input type="checkbox" id="ipt_hero-tank-dva" value="dva" checked/>
            <label for="ipt_hero-tank-dva"><p>D.Va</p></label>
 
            <input type="checkbox" id="ipt_hero-tank-reinhardt" value="reinhardt" checked/>
            <label for="ipt_hero-tank-reinhardt"><p>라인하르트</p></label>
 
            <input type="checkbox" id="ipt_hero-tank-wreckingball" value="wreckingball" checked/>
            <label for="ipt_hero-tank-wreckingball"><p>레킹볼</p></label>
 
            <input type="checkbox" id="ipt_hero-tank-roadhog" value="roadhog" checked/>
            <label for="ipt_hero-tank-roadhog"><p>로드호그</p></label>
 
            <input type="checkbox" id="ipt_hero-tank-sigma" value="sigma" checked/>
            <label for="ipt_hero-tank-sigma"><p>시그마</p></label>
 
            <input type="checkbox" id="ipt_hero-tank-orisa" value="orisa" checked/>
            <label for="ipt_hero-tank-orisa"><p>오리사</p></label>
 
            <input type="checkbox" id="ipt_hero-tank-winston" value="winston" checked/>
            <label for="ipt_hero-tank-winston"><p>윈스턴</p></label>
 
            <input type="checkbox" id="ipt_hero-tank-zarya" value="zarya" checked/>
            <label for="ipt_hero-tank-zarya"><p>자리야</p></label>
        </li><!-- tanker -->
        
        <li data-val="dps">
            <input type="checkbox" id="ipt_class-dps" value="dps" checked/>
            <label for="ipt_class-dps"><p>공격</p></label>
            <!--  -->
            <input type="checkbox" id="ipt_hero-dps-genji" value="genji" checked/>
            <label for="ipt_hero-dps-genji"><p>겐지</p></label>
 
            <input type="checkbox" id="ipt_hero-dps-doomfist" value="doomfist" checked/>
            <label for="ipt_hero-dps-doomfist"><p>둠피스트</p></label>
 
            <input type="checkbox" id="ipt_hero-dps-reaper" value="reaper" checked/>
            <label for="ipt_hero-dps-reaper"><p>리퍼</p></label>
 
            <input type="checkbox" id="ipt_hero-dps-mccree" value="mccree" checked/>
            <label for="ipt_hero-dps-mccree"><p>맥크리</p></label>
 
            <input type="checkbox" id="ipt_hero-dps-mei" value="mei" checked/>
            <label for="ipt_hero-dps-mei"><p>메이</p></label>
 
            <input type="checkbox" id="ipt_hero_none-dps-bastion" value="bastion" disabled/>
            <label for="ipt_hero_none-dps-bastion"><p>바스티온</p></label>
 
            <input type="checkbox" id="ipt_hero-dps-soldier76" value="soldier76" checked/>
            <label for="ipt_hero-dps-soldier76"><p>솔저:76</p></label>
 
            <input type="checkbox" id="ipt_hero-dps-sombra" value="sombra" checked/>
            <label for="ipt_hero-dps-sombra"><p>솜브라</p></label>
 
            <input type="checkbox" id="ipt_hero-dps-symmetra" value="symmetra" checked/>
            <label for="ipt_hero-dps-symmetra"><p>시메트라</p></label>
 
            <input type="checkbox" id="ipt_hero-dps-ashe" value="ashe" checked/>
            <label for="ipt_hero-dps-ashe"><p>애쉬</p></label>
 
            <input type="checkbox" id="ipt_hero-dps-echo" value="echo" checked/>
            <label for="ipt_hero-dps-echo"><p>에코</p></label>
 
            <input type="checkbox" id="ipt_hero-dps-widowmaker" value="widowmaker" checked/>
            <label for="ipt_hero-dps-widowmaker"><p>위도우메이커</p></label>
 
            <input type="checkbox" id="ipt_hero-dps-junkrat" value="junkrat" checked/>
            <label for="ipt_hero-dps-junkrat"><p>정크랫</p></label>
 
            <input type="checkbox" id="ipt_hero-dps-torbjorn" value="torbjorn" checked/>
            <label for="ipt_hero-dps-torbjorn"><p>정크랫</p></label>
 
            <input type="checkbox" id="ipt_hero-dps-tracer" value="tracer" checked/>
            <label for="ipt_hero-dps-tracer"><p>트레이서</p></label>
 
            <input type="checkbox" id="ipt_hero-dps-pharah" value="pharah" checked/>
            <label for="ipt_hero-dps-pharah"><p>파라</p></label>
 
            <input type="checkbox" id="ipt_hero-dps-hanzo" value="hanzo" checked/>
            <label for="ipt_hero-dps-hanzo"><p>한조</p></label>
        </li><!-- dps -->
 
        <li data-val="hps">
            <input type="checkbox" id="ipt_class-hps" value="hps" checked/>
            <label for="ipt_class-hps"><p>지원</p></label>
            <!--  -->
            <input type="checkbox" id="ipt_hero-hps-lucio" value="lucio" checked/>
            <label for="ipt_hero-hps-lucio"><p>루시우</p></label>
 
            <input type="checkbox" id="ipt_hero-hps-mercy" value="mercy" checked/>
            <label for="ipt_hero-hps-mercy"><p>메르시</p></label>
 
            <input type="checkbox" id="ipt_hero-hps-moira" value="moira" checked/>
            <label for="ipt_hero-hps-moira"><p>모이라</p></label>
 
            <input type="checkbox" id="ipt_hero-hps-baptiste" value="baptiste" checked/>
            <label for="ipt_hero-hps-baptiste"><p>바티스트</p></label>
 
            <input type="checkbox" id="ipt_hero-hps-brigitte" value="brigitte" checked/>
            <label for="ipt_hero-hps-brigitte"><p>브리기테</p></label>
 
            <input type="checkbox" id="ipt_hero-hps-ana" value="ana" checked/>
            <label for="ipt_hero-hps-ana"><p>아나</p></label>
 
            <input type="checkbox" id="ipt_hero-hps-zenyatta" value="zenyatta" checked/>
            <label for="ipt_hero-hps-zenyatta"><p>젠야타</p></label>
        </li><!-- hps -->
    </ul><!-- select_hero -->
</section><!-- sect_select_hero -->
 
<!-- 🚩 영웅들 테이블 시작 -->
<!-- 📍 TANKER -->
<div class="wrap_tbl" data-wrap="tank"></div><!-- wrap_tbl 테이블 영역 끝 -->
<div class="wrap_tbl" data-wrap="dps"></div><!-- wrap_tbl 테이블 영역 끝 -->
<div class="wrap_tbl" data-wrap="hps"></div><!-- wrap_tbl 테이블 영역 끝 -->
 
<!-- ⚡ 페이지 스크롤 이동 관련 -->
<button id="btn_toTOP"><span>TOP</span></button>
<button id="btn_toSELECT"><span>영웅<br>선택</span></button>
</body>
</html>
cs






data/heroes.json(샘플)

하나의 json파일에 object 영웅 클래스별로 (3개) 나누었으며 그 클래스의 value(array)에 각 영웅들이 object로 들어가있음

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
{
    "tank" : [
        {
            "name" : "dva"
            ,"nameKR" : "D.Va"
            ,"solo" : true
            ,"id" : ["Pl-x9e7aaiw","kgt8cIbjEKM","OS90N6jhnmA","xhvfX2QBjkA","5NsgILB5I2s"]
            ,"date" : ["2019-12-16","2020-06-12","2020-09-25","2020-11-27","2021-05-14"]
            ,"with" : ["tracer","brigitte"]
            ,"cv" : ["김현지"]
            ,"info" : "최첨단 메카를 조종하여 조국을 수호하는 전 프로게이머"
        }
    ]
    ,"dps" : [
        {
            "name" : "genji"
            ,"nameKR" : "겐지"
            ,"solo" : true
            ,"id" : ["bfUd7rTrDDc","Se_wkCGdkN8","sdsvmffrI7M","dYFl6h83HQ8"]
            ,"date" : ["2020-04-10","2020-06-05","2020-10-16","2021-03-12"]
            ,"with" : ["hanzo","zenyatta","mercy"]
            ,"cv" : ["김혜성"]
            ,"info" : "기계가 되어버린 몸을 받아들여 내면의 평화를 찾은 강력한 전사이자 사이보그 닌자"
        }
    ]
    ,"hps" : [
        {
            "name" : "lucio"
            ,"nameKR" : "루시우"
            ,"solo" : true
            ,"id" : ["4Dva2I7sEX4","ME4Adc_IO40","fjf_rJJYl5w"]
            ,"date" : ["2020-01-22","2020-06-19","2020-08-07"]
            ,"with" : ["symmetra","reinhardt"]
            ,"cv" : ["이호산"]
            ,"info" : "자신의 음악과 행동으로 사회를 변화시키기 위해 싸우는 세계적인 유명인사"
        }
    ]
}
cs




CSS는 생략




JS

js/fetch.js 을 메인으로 썼으며 import하여 다른 js파일에서 불러오는 형식
이것저것 불러와야할게 많아서 index.html에 일일히 script걸기엔 또 걸리적거리고..그래서 import로 써봤다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/*  */
import * as heroMAX from "./heroMAX.js";
import {display_graph} from "./graph.js";
import {display_mostHero} from "./mostHero.js";
import * as tableHero from "./tableHero.js";
 
import * as offGraph from "./offGraph.js";
import * as selHero from "./selHero.js";
 
import * as scWindow from "./scroll.js";
 
/*  */
function fetchMe(){
    return fetch('./data/heroes.json')
    .then(result => result.json());
}//fetchMe
 
 
/*  */
fetchMe('tank')
.then((obj)=>{
    /* display */
    heroMAX.do_heroMAX(obj);
    display_graph(obj,"tank");
    display_graph(obj,"dps");
    display_graph(obj,"hps");
    display_mostHero();
    tableHero.display_table(obj,"tank");
    tableHero.display_table(obj,"dps");
    tableHero.display_table(obj,"hps");
 
    /* select */
    offGraph.do_offGraph();
    selHero.do_selHero();
 
    /* scroll */
    scWindow.get_val_top();
});
 
cs

'CSS&JS > ✨개인 프로젝트' 카테고리의 다른 글

줄리안데이 계산기  (0) 2021.08.17
그래프 생성기 - windrose, bar, pie  (0) 2021.07.30
슈슉 생성기  (0) 2021.06.28
기상청 - STEP (그래프)  (0) 2021.06.08
오버워치 패치노트 통계 페이지 만들어보기(1)  (0) 2021.06.08

'CSS&JS/✨개인 프로젝트'의 다른글

  • 현재글오버워치 패치노트 통계 페이지 만들어보기(2) : 소스 미리보기

관련글

댓글

티스토리툴바