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