김명주 / kartrider

Go to a project
Toggle navigation Toggle navigation pinning
김명주
f05497b5 1 parent a33aed9e

Design search result page

Inline Side-by-side
Showing 2 changed files with 379 additions and 0 deletions
1 +body{
2 + background:rgb(240, 239, 239)
3 +}
4 +#hle
5 +{
6 + position: relative;
7 + top:3px;
8 + left:-1120px;
9 +}
10 +#div
11 +{
12 + position: relative;
13 + width: 1150px;
14 + height: 220px;
15 + line-height: 200px;
16 + margin: 0 auto;
17 + background-image: url(search_chang.png);
18 +}
19 +
20 +#resu
21 +{
22 + position: relative;
23 + width: 1150px;
24 + height: 1400px;
25 + margin: 0 auto;
26 + top:6px;
27 +}
28 +#most
29 +{
30 + position: relative;
31 + width: 370px;
32 + height: 600px;
33 + float:left;
34 +}
35 +#imgId
36 +{
37 + vertical-align: middle;
38 +}
39 +#nick
40 +{
41 + font-size:xx-large;
42 + font-weight: bold;
43 +}
44 +#div1
45 +{
46 + position: relative;
47 + width: 500px;
48 + height: 900px;
49 + left:3%;
50 + float:left;
51 +}
52 +
53 +#IMG
54 +{
55 + width:80px;
56 + height:70px;
57 +}
58 +#IMG2
59 +{
60 + width:100px;
61 + height:60px;
62 +}
63 +#IMG2_TEXT
64 +{
65 + position: relative;
66 + top:5px;
67 +}
68 +#IMG3
69 +{
70 + width:80px;
71 + height:60px;
72 +}
73 +
74 +#img3
75 +{
76 + position: relative;
77 + width: 100%;
78 + height:100%;
79 + float:left;
80 +}
81 +
82 +#table
83 +{
84 + border-collapse: separate;
85 + border-spacing: 0 10px;
86 + text-align:center;
87 +}
88 +#table_row
89 +{
90 + background: white;
91 +
92 +}
93 +#text_ranking
94 +{
95 + font-size:x-large;
96 + font-weight: bold;
97 +}
1 +<!DOCTYPE html>
2 +<html>
3 +
4 +<head>
5 + <meta charset="utf-8">
6 + <link rel="stylesheet" type="text/css" href="search_result.css" />
7 + <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
8 +</head>
9 +<script language="JavaScript">
10 + function character(){
11 + var a = Math.floor(Math.random() * 9) + 1;
12 + return "metadata/main_character/" + a + ".png";
13 + }
14 + function level(){
15 + return "metadata/level/" + '<%- level %>' + ".png";
16 + }
17 +</script>
18 +<body>
19 + <div id="div">
20 + <img id="imgId" src="" width="150" height="120">
21 + <script>document.getElementById("imgId").src = character()</script>
22 + <text id="nick"> <%- name %> </text>
23 + <img id="imgId2" src="" width="30" height="30">
24 + <script>document.getElementById("imgId2").src = level()</script>
25 + </div>
26 +
27 +
28 + <div id="resu">
29 + <div id="most">
30 + <canvas id="myChart2"width="350" height="200"></canvas>
31 + <text>RETIRE</text>
32 + <canvas id="myChart"width="350" height="200"></canvas>
33 + <table id="table_most" border="1">
34 + <colgroup>
35 + <col width="10%"/>
36 + <col width="30%"/>
37 + <col width="10%"/>
38 + <col width="10%"/>
39 + </colgroup>
40 + <tr>
41 + <td>카트</td>
42 + <td>이름</td>
43 + <td>save</td>
44 + <td>판 수</td>
45 + </tr>
46 + </table>
47 + </div>
48 +
49 + <div id="div1">
50 + <table id="table">
51 + <colgroup>
52 + <col width="100px"/>
53 + <col width="100px"/>
54 + <col width="100px"/>
55 + <col width="100px"/>
56 + <col width="100px"/>
57 + </colgroup>
58 + </table>
59 + </div>
60 + </div>
61 +
62 + <div id="hle">
63 + <text> 문의사항 : mjoo1106@naver.com</text>
64 + </div>
65 +</body>
66 +
67 +<script>
68 + var body = '<%- body -%>';
69 + var most_kart=[];
70 + var rank_grape=[];
71 + var match = JSON.parse(body);
72 + const div_target=document.querySelector('#table');
73 + for(var i=1; i<=10; i++){
74 + var obj=document.createElement('tr');
75 + obj.id="table_row";
76 + var win = match.matches[0].matches[i-1].player.matchWin;
77 + var tId = match.matches[0].matches[i-1].trackId;
78 + var kartId = match.matches[0].matches[i-1].player.kart;
79 + most_kart.push(kartId);
80 + var mrank = match.matches[0].matches[i-1].player.matchRank;
81 + var players = match.matches[0].matches[i-1].playerCount;
82 + var stime = new Date(match.matches[0].matches[i-1].startTime.split('T')[0] + " " + match.matches[0].matches[i-1].startTime.split('T')[1]);
83 + var etime = new Date(match.matches[0].matches[i-1].endTime.split('T')[0] + " " + match.matches[0].matches[i-1].endTime.split('T')[1]);
84 + var diff = etime - stime
85 + var minute = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
86 + var second = Math.floor((diff % (1000 * 60)) / 1000);
87 + var ranking = mrank + "/" + players
88 + var diff_time=minute + " : " + second;
89 + var now_time=new Date();
90 + var diff_day=Math.ceil((now_time-etime) / (1000*60*60*24))-1+"일 전";
91 +
92 + if(win=="0"){
93 + win="패";
94 + obj.style="background: white";
95 + }
96 + else if (win =="1"){
97 + win="승";
98 +
99 + obj.style="background: rgb(163,207,236)";
100 + }
101 + else{
102 + win="탈주"
103 + }
104 +
105 + if (mrank == "99" || win=="탈주") {
106 + ranking = "retire";
107 + diff_time = "retire";
108 + obj.style="background: rgb(226,182,179)";
109 + rank_grape.push(8);
110 + }
111 + else{
112 + rank_grape.push(parseInt(mrank));
113 + }
114 +
115 + if(diff_day=="0일 전"){
116 + diff_day=Math.ceil((now_time-etime)/1000/60/60)-1;
117 + diff_day+="시간 전"
118 + }
119 +
120 + div_target.append(obj);
121 + var arr=["개인전","#"+ranking,kartId,tId,diff_time,ranking];
122 + for(var j=1; j<=5; j++){
123 + var sobj=document.createElement('td');
124 + if(j==1){
125 + var tet1=document.createElement('text');
126 + var tet2=document.createElement('text');
127 + var br=document.createElement('br');
128 + tet1.innerText=arr[j-1];
129 + tet2.innerText=diff_day;
130 + sobj.append(tet1);
131 + sobj.append(br);
132 + sobj.append(tet2);
133 + }
134 + else if(j==2){
135 + var tet1=document.createElement('text');
136 + tet1.innerText=arr[j-1];
137 + tet1.id="text_ranking";
138 + sobj.append(tet1);
139 + }
140 + else if(j==3){
141 + var img=document.createElement('img');
142 + var tet1=document.createElement('text');
143 + var br=document.createElement('br');
144 + img.id="IMG";
145 + img.src="metadata/kart/"+arr[j-1]+".png";
146 + tet1.innerText="카트이름"
147 + sobj.append(img);
148 + sobj.append(br);
149 + sobj.append(tet1);
150 + }
151 + else if(j==4){
152 + var img=document.createElement('img');
153 + var tet1=document.createElement('text');
154 + tet1.id="IMG2_TEXT";
155 + var br=document.createElement('br');
156 + img.id="IMG2";
157 + img.src="metadata/track/"+arr[j-1]+".png";
158 + tet1.innerText="맵 이름"
159 + sobj.append(img);
160 + sobj.append(br);
161 + sobj.append(tet1);
162 + }
163 + else{
164 + sobj.innerText=arr[j-1];
165 + }
166 + obj.append(sobj);
167 + }
168 + }
169 + /////////////most카트라이더 부분/////////////////////////
170 + /*const most_div=document.querySelector('#most');
171 + var obj=documnet.createElement("button");
172 + obj.innerText=most_kart[2];
173 + most_div.append(obj);*/
174 + var count=[];
175 + for(var i=0; i<10; i++){
176 + var item=most_kart[i];
177 + count[i]=0;
178 + for(var j=0; j<10; j++){
179 + if(item==most_kart[j]){
180 + count[i]+=1;
181 + }
182 + }
183 + }
184 + var max=0;
185 + var index=0; //most_kart 배열에서 어디부분이 모스트인지 알려주는 index
186 + for(var i=0; i<10; i++){
187 + if(max<count[i]){
188 + max=count[i];
189 + index=i;
190 + }
191 + }
192 + const most_div=document.querySelector('#table_most');
193 + var obj=document.createElement('tr');
194 + most_div.append(obj);
195 + /*save는 retire횟수 따져주는 것*/
196 + var temp_arr=[most_kart[index],"카트이름","30%",max];
197 + for(var i=0; i<4; i++){
198 + var sobj=document.createElement('td');
199 + if(i==0){
200 + var img=document.createElement('img');
201 + img.id="IMG3";
202 + img.src="metadata/kart/"+temp_arr[i]+".png";
203 + sobj.append(img);
204 + }
205 + else{
206 + sobj.innerText=temp_arr[i];
207 + }
208 + obj.append(sobj);
209 + }
210 + //sebo부분//////////////////////////////////////////////////////////
211 + rank_grape=rank_grape.reverse();
212 + var options={
213 + type: 'line',
214 + data:{
215 + labels: ['', '', '', '', '', '','','','',''],
216 + datasets: [{
217 + label: 'rank',
218 + data: rank_grape,
219 + backgroundColor:[
220 + 'rgba(0, 0, 0, 0)'
221 + ],
222 + borderColor:[
223 + 'rgba(54, 162, 235, 1)'
224 + ],
225 + borderWidth: 2
226 + }]
227 + },
228 + options:{
229 + responsive:false,
230 + scales:{
231 + xAxes:[{
232 + gridLines:{
233 + display:false
234 + }
235 + }],
236 + yAxes: [{
237 + ticks:{
238 + reverse:true,
239 + min:1,
240 + max:8,
241 + stepSize:1
242 + }
243 + }]
244 + }
245 + }
246 + };
247 + var ctx=document.getElementById('myChart').getContext('2d');
248 + new Chart(ctx,options);
249 + ///////////////////////
250 + var options2={
251 + type: 'doughnut',
252 + data:{
253 + datasets: [{
254 + data: [50,50],
255 + }]
256 + },
257 + options:{
258 + responsive:false,
259 + scales:{
260 + xAxes: [{
261 + gridLines:{
262 + display:false
263 + },
264 + ticks:{
265 + display:false
266 + }
267 + }],
268 + yAxes: [{
269 + gridLines:{
270 + display:false
271 + },
272 + ticks:{
273 + display:false
274 + }
275 + }]
276 + }
277 + }
278 + };
279 + var ctx2=document.getElementById('myChart2').getContext('2d');
280 + new Chart(ctx2,options2);
281 +</script>
282 +</html>
...\ No newline at end of file ...\ No newline at end of file