Update kart recommend page

@@ -48,15 +48,32 @@ app.get("/inf/result",(req,res)=>{
 
 
 app.post("/game/result",(req,res)=>{
 app.post("/game/result",(req,res)=>{
     vec=req.body.test;
     vec=req.body.test;
+    var item=["empty", "추억", "empty", "신중함","안정적","empty","열정","책임감","아이템","스피드","믿음직","호기심","헌신적","자유로움"];
+    keyword=[];
+    for(var i=1; i<vec.length; i++){
+        if(i%2!=0){
+            if(vec[i]=="1"){
+                keyword.push(item[i-1]);
+            }
+            else{
+                keyword.push(item[i]);
+            }
+        }
+    }
 })
 })
 
 
 app.get("/game/result",(req,res)=>{
 app.get("/game/result",(req,res)=>{
+    var temp="";
+    for(var i=0; i<vec.length; i++){
+        if(i!=2 && i!=3 && i!=4 && i!=5 && i!=10 && i!=11)
+            temp+=vec[i];
+    }
     var fs=require('fs');
     var fs=require('fs');
-    var url="kart_special"+vec+"/";
-    var testFolder="metadata/kart_special"+vec;
+    var url="kart_find"+temp+"/";
+    var testFolder="metadata/kart_find"+temp;
     fs.readdir(testFolder, function(error, list){
     fs.readdir(testFolder, function(error, list){
         var rand=Math.floor(Math.random()*list.length);
         var rand=Math.floor(Math.random()*list.length);
-        res.render('game_result',{url:url,body:list[rand]});
+        res.render('game_result',{url:url,body:list[rand],keyword:keyword});
     });
     });
 });
 });
 
 

+#total
+{
+    position:absolute;
+    background-image:url("result/background.png");
+    top:50%;
+    left:50%;
+    width:1300px;
+    height:650px;
+    margin:-325px 0px 0px -650px;
+}
+#words
+{
+    position:absolute;
+    top:42%;
+    left:16%;
+    width:400px;
+    height:350px;
+    margin:-75px 0px 0px 0px; 
+}
+#imgkey
+{
+    position:relative;
+    left:15%;
+}
+#rkart
+{
+    position:absolute;
+    background-image: url("result/kart.png");
+    width:350px;
+    height:350px;
+    top:30%;
+    left:60%;
+}
+#imgId
+{
+    position:relative;
+    top:20%;
+    left:15%;
+    width:70%;
+    height:60%;
+
+}
+#word1
+{
+    position:relative;
+    font-family: 'Nanum Gothic';
+    font-size:large;
+    font-weight: bold;
+    top:10%;
+    width:160px;
+    height:40px;
+    border-radius: 30px;
+    border:0;
+    background: rgb(192, 234, 250);
+    box-shadow: 3px 3px 3px rgb(209, 207, 207); 
+}
+#word2
+{
+    position:relative;
+    font-family: 'Nanum Gothic';
+    font-size:large;
+    font-weight: bold;
+    top:19%;
+    left:15%;
+    width:160px;
+    height:40px;
+    border-radius: 30px;
+    border:0;
+    background: rgb(192, 234, 250);
+    box-shadow: 3px 3px 3px rgb(209, 207, 207); 
+}
+#word3
+{
+    position:relative;
+    font-family: 'Nanum Gothic';
+    font-size:large;
+    font-weight: bold;
+    top:19%;
+    width:160px;
+    height:40px;
+    border-radius: 30px;
+    border:0;
+    background: rgb(192, 234, 250);
+    box-shadow: 3px 3px 3px rgb(209, 207, 207); 
+}
+#word4
+{
+    position:relative;
+    font-family: 'Nanum Gothic';
+    font-size:large;
+    font-weight: bold;
+    top:28%;
+    left:15%;
+    width:160px;
+    height:40px;
+    border-radius: 30px;
+    border:0;
+    background: rgb(192, 234, 250);
+    box-shadow: 3px 3px 3px rgb(209, 207, 207); 
+}
+#word5
+{
+    position:relative;
+    font-family: 'Nanum Gothic';
+    font-size:large;
+    font-weight: bold;
+    top:28%;
+    width:160px;
+    height:40px;
+    border-radius: 30px;
+    border:0;
+    background: rgb(192, 234, 250);
+    box-shadow: 3px 3px 3px rgb(209, 207, 207); 
+}
+#word6
+{
+    position:relative;
+    font-family: 'Nanum Gothic';
+    font-size:large;
+    font-weight: bold;
+    top:35%;
+    left:15%;
+    width:160px;
+    height:40px;
+    border-radius: 30px;
+    border:0;
+    background: rgb(192, 234, 250);
+    box-shadow: 3px 3px 3px rgb(209, 207, 207); 
+}
+#word7
+{
+    position:relative;
+    font-family: 'Nanum Gothic';
+    font-size:large;
+    font-weight: bold;
+    top:38%;
+    width:160px;
+    height:40px;
+    border-radius: 30px;
+    border:0;
+    background: rgb(192, 234, 250);
+    box-shadow: 3px 3px 3px rgb(209, 207, 207); 
+}
+#text1
+{
+    position:relative;
+    left:15%;
+    font-family: 'Nanum Gothic';
+    font-size:50px;
+    font-weight: bold;
+}
+#text2
+{
+    position:relative;
+    left:15%;
+    font-family: 'Nanum Gothic';
+    font-size:70px;
+    font-weight: bold;
+    color:rgb(0, 153, 255);
+}
\ No newline at end of file

-212라인 안함
-1라인 안함
\ No newline at end of file

+#uni
+{
+  position:absolute;
+  top:60%;
+  left:80%;
+}
+#dao
+{
+  position:absolute;
+  top:55%;
+}
+
 div
 div
 {
 {
     width: 500px;
     width: 500px;
@@ -60,3 +72,10 @@ div
   border-radius: 50%;
   border-radius: 50%;
   animation: spin 1s linear infinite;
   animation: spin 1s linear infinite;
 }
 }
+
+#index
+{
+  position:absolute;
+  left:55%;
+
+}
\ No newline at end of file

@@ -35,7 +35,10 @@
 </head>
 </head>
 
 
 <body>
 <body>
+  <img id="dao" src="image/bdao.png"></img>
+  <img id="uni" src="image/buni.png"></img>
   <div class="box" id="div1">
   <div class="box" id="div1">
+    <img id="index" src="image/one.png"></img>
     <text id="tex1">Q1.</text><br>
     <text id="tex1">Q1.</text><br>
     <text id="tex2">대표 카트를 지정할 때</text>
     <text id="tex2">대표 카트를 지정할 때</text>
     <button id="btn" onClick="any(1,1)">가장 좋은 신규 카트로 전시한다.</button>
     <button id="btn" onClick="any(1,1)">가장 좋은 신규 카트로 전시한다.</button>
@@ -43,6 +46,7 @@
   </div>
   </div>
 
 
   <div class="box" id="div2" style="display:none">
   <div class="box" id="div2" style="display:none">
+    <img id="index" src="image/two.png"></img>
     <text id="tex1">Q2.</text><br>
     <text id="tex1">Q2.</text><br>
     <text id="tex2">3....2.....1 GAME START</text>
     <text id="tex2">3....2.....1 GAME START</text>
     <button id="btn" onClick="any(2,1)">부스터를 사용하여 치고나간다.</button>
     <button id="btn" onClick="any(2,1)">부스터를 사용하여 치고나간다.</button>
@@ -50,6 +54,7 @@
   </div>
   </div>
 
 
   <div class="box" id="div3" style="display:none">
   <div class="box" id="div3" style="display:none">
+    <img id="index" src="image/three.png"></img>
     <text id="tex1">Q3.</text><br>
     <text id="tex1">Q3.</text><br>
     <text id="tex2">스피드 전에서 중요하게 생각하는 것</text>
     <text id="tex2">스피드 전에서 중요하게 생각하는 것</text>
     <button id="btn" onClick="any(3,1)">부스터 갯수</button>
     <button id="btn" onClick="any(3,1)">부스터 갯수</button>
@@ -57,6 +62,7 @@
   </div>
   </div>
 
 
   <div class="box" id="div4" style="display:none">
   <div class="box" id="div4" style="display:none">
+    <img id="index" src="image/four.png"></img>
     <text id="tex1">Q4.</text><br>
     <text id="tex1">Q4.</text><br>
     <text id="tex2">팀전을 하는 경우</text>
     <text id="tex2">팀전을 하는 경우</text>
     <button id="btn" onClick="any(4,1)">1등이 우선! 혼자 치고 나가기</button>
     <button id="btn" onClick="any(4,1)">1등이 우선! 혼자 치고 나가기</button>
@@ -64,6 +70,7 @@
   </div>
   </div>
 
 
   <div class="box" id="div5" style="display:none">
   <div class="box" id="div5" style="display:none">
+    <img id="index" src="image/five.png"></img>
     <text id="tex1">Q5.</text><br>
     <text id="tex1">Q5.</text><br>
     <text id="tex2">현재 1등을 잡기위해</text>
     <text id="tex2">현재 1등을 잡기위해</text>
     <button id="btn" onClick="any(5,1)">아이템을 사용하여 격추한다.</button>
     <button id="btn" onClick="any(5,1)">아이템을 사용하여 격추한다.</button>
@@ -71,6 +78,7 @@
   </div>
   </div>
 
 
   <div class="box" id="div6" style="display:none">
   <div class="box" id="div6" style="display:none">
+    <img id="index" src="image/six.png"></img>
     <text id="tex1">Q6.</text><br>
     <text id="tex1">Q6.</text><br>
     <text id="tex2">나는 카트를 볼 때</text>
     <text id="tex2">나는 카트를 볼 때</text>
     <button id="btn" onClick="any(6,1)">성능이 우선이다.</button>
     <button id="btn" onClick="any(6,1)">성능이 우선이다.</button>
@@ -78,11 +86,11 @@
   </div>
   </div>
 
 
   <div class="box" id="div7" style="display:none">
   <div class="box" id="div7" style="display:none">
+    <img id="index" src="image/seven.png"></img>
     <text id="tex1">Q7.</text><br>
     <text id="tex1">Q7.</text><br>
     <text id="tex2">넥슨 캐쉬가 생겼다.</text>
     <text id="tex2">넥슨 캐쉬가 생겼다.</text>
     <button id="btn" onClick="any2(1); location.href='game/result'">유료 카트를 구매한다.</button>
     <button id="btn" onClick="any2(1); location.href='game/result'">유료 카트를 구매한다.</button>
     <button id="btn" onClick="any2(2); location.href='game/result'">다른 게임(피파, 메이플)에 투자</button>
     <button id="btn" onClick="any2(2); location.href='game/result'">다른 게임(피파, 메이플)에 투자</button>
   </div>
   </div>
-
 </body>
 </body>
 </html>
 </html>
\ No newline at end of file

 <!DOCTYPE html>
 <!DOCTYPE html>
 <html>
 <html>
 <head>
 <head>
+<link rel="stylesheet" type="text/css" href="game_result.css" />
+</head>
 <script>
 <script>
     var item='<%- body %>';
     var item='<%- body %>';
     var url='<%- url %>';
     var url='<%- url %>';
+    var stritem=item.split(".");
+    function load() {
+      return fetch("kart.json")
+        .then((response) => response.json())
+        .then((json) => json.kart);
+    }
+    load().then((kart) => {
+      const div_target = document.querySelector("#total");
+      var obj = document.createElement('text');
+      var obj2=document.createElement('text');
+      for (var i = 0; i < kart.length; i++) {
+        if (kart[i]['id'] == stritem[0]) {
+          obj.id="text1";
+          obj2.id="text2";
+          obj.innerText = "나에게 맞는 카트는 ";
+          obj2.innerText=kart[i]['name'];
+          break;
+        }
+      }
+      div_target.append(obj);
+      div_target.append(obj2);
+    });
+
     function Img() {
     function Img() {
       return url+item;
       return url+item;
     }
     }
 </script>
 </script>
-</head>
 <body>
 <body>
+  <div id="total">
+    <div id="words">
+        <img id="imgkey" src="result/keyword.png">
+    </div>
+    <div id="rkart">
     <img id="imgId" src="">
     <img id="imgId" src="">
     <script>document.getElementById("imgId").src = Img()</script>
     <script>document.getElementById("imgId").src = Img()</script>
-    
+  </div>
+  </div>  
 </body>
 </body>
+<script>
+  var keyword="<%- keyword %>";
+  var keyarr=keyword.split(',');
+  const div_target=document.querySelector("#words");
+  var i=0, index=0;
+  while(index<7){
+    if(keyarr[index]!="empty"){
+      var obj=document.createElement('button');
+      obj.id="word"+(i+1);
+      obj.innerText='#'+keyarr[index];
+      div_target.append(obj);
+      i++;
+    }
+    index++;
+  }
+</script>
 </html>
 </html>
\ No newline at end of file

@@ -3,54 +3,104 @@
 
 
 <head>
 <head>
   <meta charset="utf-8">
   <meta charset="utf-8">
-  <title>Hello World!</title>
-  <!--
-    <link rel="stylesheet" href="/css/master.css" >
-        -->
+  <link rel="stylesheet" type="text/css" href="search.css" />
 </head>
 </head>
-
-<body>
-  <script language="JavaScript">
-    var name = '<%-name%>';
-    var level = '<%-level%>';
-    var trackId= '<%-trackId%>';
-    var kart='<%-kart%>';
-
-    document.write(name);
-    document.write("\n");
-
-    function Img() {
+<script language="JavaScript">
+    function character(){
       var a = Math.floor(Math.random() * 9) + 1;
       var a = Math.floor(Math.random() * 9) + 1;
       return "main_character/" + a + ".png";
       return "main_character/" + a + ".png";
     }
     }
-    function Img2(){
-      return "level/"+level+".png"
+    function level(){
+      return "level/" + '<%- level %>' + ".png";
     }
     }
-    function Img3(){
-      return "track/"+trackId+".png"
-    }
-    function Img4(){
-      return "kart/"+kart+".png"
-    }
-  </script>
-    <img id="imgId" src="" width="135" height="100">
-    <script>document.getElementById("imgId").src = Img()</script>
-    <p>레벨</p>
-    <img id="imgId2" src="">
-  <script>document.getElementById("imgId2").src = Img2()</script>
-  <H1>――――――――――――――――경기 정보――――――――――――――</H1>
-  <p>등수</p>
-  <span class="rank"><%= rank %></span>
-  <p>주행 시간</p>
-  <span class="time"><%= time %></span>
-  <p>트랙정보</p>
-  <img id="imgId3" src="">
-  <script>document.getElementById("imgId3").src = Img3()</script>
-  <p>카트정보</p>
-  <img id="imgId4" src="" width="135" height="100">
-  <script>document.getElementById("imgId4").src = Img4()</script>
+</script>
+<body>
+  <div id="div">
+    <img id="imgId" src="" width="150" height="120">
+    <script>document.getElementById("imgId").src = character()</script>
+    <text id="nick">  <%- name %> </text>
+    <img id="imgId2" src="" width="30" height="30">
+    <script>document.getElementById("imgId2").src = level()</script>
+  </div>
 
 
+  <div id="sebo">
+
+  </div>
+  
+  <div id="resu">
+    <div id="most">
+    
+    </div>
+
+    <div id="div1"> 
+      <div id="div2"></div>
+    </div>
+  </div>
+
+  <div id="hle">
+    <text >  문의사항 : mjoo1106@naver.com | blog.naver.com/mjoo1106 </text>
+  </div>
 
 
 </body>
 </body>
+<script>
+    var body = '<%- body -%>';
+    var match = JSON.parse(body);
+    var head=["승","타입","카트","맵","시간","순위","플레이"];
+    const target=document.querySelector('#div2');
+    for(var i=1; i<=7; i++){
+      var obj=document.createElement('div');
+      obj.id="tet"+i;
+      obj.innerText=head[i-1];
+      target.append(obj);
+    }
+
+    const div_target=document.querySelector('#div1');
+    for(var i=1; i<=5; i++){
+      var obj=document.createElement('div');
+      obj.id="fordiv";
+      div_target.append(obj);
 
 
+      var win = match.matches[0].matches[i-1].player.matchWin;
+      var tId = match.matches[0].matches[i-1].trackId;
+      var kartId = match.matches[0].matches[i-1].player.kart;
+      var mrank = match.matches[0].matches[i-1].player.matchRank;
+      var players = match.matches[0].matches[i-1].playerCount;
+      var stime = new Date(match.matches[0].matches[i-1].startTime.split('T')[0] + " " + match.matches[0].matches[i-1].startTime.split('T')[1]);
+      var etime = new Date(match.matches[0].matches[i-1].endTime.split('T')[0] + " " + match.matches[0].matches[i-1].endTime.split('T')[1]);
+      var diff = etime - stime
+      var minute = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+      var second = Math.floor((diff % (1000 * 60)) / 1000);
+      var ranking = mrank + " / " + players
+      var diff_time=minute + " : " + second;
+      if(win==0)
+        win="패";
+      else
+        win="승";
+      if (mrank == "99") {
+        ranking = "retire";
+        diff_time = "retire";
+      }
+      var arr=[win,"타입",kartId,tId,diff_time,ranking,"몇 일전?"];
+      for(var j=1; j<=7; j++){
+          var sobj=document.createElement('div');
+          sobj.id="tet"+j;
+          if(j==3){
+            var img=document.createElement('img');
+            img.id="IMG";
+            img.src="kart/"+arr[j-1]+".png";
+            sobj.append(img);
+          }
+          else if(j==4){
+            var img=document.createElement('img');
+            img.id="IMG";
+            img.src="track/"+arr[j-1]+".png";
+            sobj.append(img);
+          }
+          else{
+            sobj.innerText=arr[j-1];
+          }
+          obj.append(sobj);
+      }
+    }
+</script>
 </html>
 </html>
\ No newline at end of file