search_result.ejs 9.42 KB

Raw Blame History Permalink

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>전적 결과</title>
  <link rel="stylesheet" type="text/css" href="search_result.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<script language="JavaScript">
  function embl() {
    var rand = Math.floor(Math.random() * 8 + 1);
    return "background-image:url('metadata/emblem/emblem" + rand + ".png')";
  }
  function get_jsondata(id, kind) {
    var str;
    var local_url = 'metadata/' + kind + '.json';
    function save(data) {
      str = data;
    }
    $.ajaxSetup({
      async: false
    });
    $.getJSON(local_url, function (json) {
      var kind_json;
      if (kind == "kart") {
        kind_json = json.kart;
      }
      else if (kind == "track") {
        kind_json = json.track;
      }
      else if (kind == "character") {
        kind_json = json.character;
      }
      for (var i = 0; i < kind_json.length; i++) {
        if (kind_json[i]['id'] == id) {
          save(kind_json[i]['name']);
          break;
        }
      }
    });
    return str;
  }
</script>

<body>
  <div id="main_frame">
    <div id="most">
      <div id="emblem">
        <script>document.getElementById("emblem").style = embl()</script>
      </div>
      <div id="name">
        <text id="nick">
          <%- name %>
        </text>
      </div>
      <text id="title"><br>SAVE</text>
      <canvas id="myChart2" width="350" height="200"></canvas>
      <text id="title"><br>RANKING GRAPE</text>
      <canvas id="myChart" width="350" height="200"></canvas>
      <text id="title"><br>MOST KART</text>
      <table id="table_most" border="1" style="text-align: center;">
        <colgroup>
          <col width="10%" />
          <col width="30%" />
          <col width="10%" />
          <col width="10%" />
        </colgroup>
        <tr>
          <td>카트</td>
          <td>이름</td>
          <td>save</td>
          <td>판 수</td>
        </tr>
      </table>
    </div>

    <div id="record">
      <img id="s_home" src="metadata/image/search_image.png">
      <table id="table">
        <colgroup>
          <col width="100px" />
          <col width="100px" />
          <col width="150px" />
          <col width="200px" />
          <col width="100px" />
          <col width="100px" />
        </colgroup>
      </table>
    </div>
  </div>
</body>

<script>
  //////////////전적 검색 후 결과 출력 스크립트/////////////////////////////////////////////////////
  var body = '<%- body -%>';
  var most_kart = [];
  var rank_grape = [];
  var retire = 0;
  var match = JSON.parse(body);
  var Len = match.matches[0].matches.length;
  const div_target = document.querySelector('#table');
  for (var i = 1; i <= Len; i++) {
    var obj = document.createElement('tr');
    obj.id = "table_row";
    var win = match.matches[0].matches[i - 1].player.matchWin;
    var tId = match.matches[0].matches[i - 1].trackId;
    var character = match.matches[0].matches[i - 1].character;
    var kartId = match.matches[0].matches[i - 1].player.kart;
    most_kart.push(kartId);
    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));
    if (minute < 10)
      minute = '0' + minute;
    var second = Math.floor((diff % (1000 * 60)) / 1000);
    if (second < 10)
      second = '0' + second;
    var ranking = mrank + "/" + players
    var diff_time = minute + " : " + second;
    var now_time = new Date();
    var diff_day = Math.ceil((now_time - etime) / (1000 * 60 * 60 * 24)) - 1 + "일 전";

    if (win == "0") {
      win = "패";
      obj.style = "background: white";
    }
    else if (win == "1") {
      win = "승";

      obj.style = "background: rgb(163,207,236)";
    }
    else {
      win = "탈주"
    }

    if (mrank == "99" || win == "탈주") {
      ranking = "retire";
      retire += 1;
      diff_time = "retire";
      obj.style = "background: rgb(226,182,179)";
      rank_grape.push(8);
    }
    else {
      rank_grape.push(parseInt(mrank));
    }

    if (diff_day == "0일 전") {
      diff_day = Math.ceil((now_time - etime) / 1000 / 60 / 60) - 1;
      diff_day += "시간 전"
    }

    div_target.append(obj);
    var arr = ["개인전", "#" + ranking, kartId, tId, character, diff_time, ranking];
    for (var j = 1; j <= 6; j++) {
      var sobj = document.createElement('td');
      if (j == 1) {
        var tet1 = document.createElement('text');
        var tet2 = document.createElement('text');
        var br = document.createElement('br');
        tet1.innerText = arr[j - 1];
        tet2.innerText = diff_day;
        sobj.append(tet1);
        sobj.append(br);
        sobj.append(tet2);
      }
      else if (j == 2) {
        var tet1 = document.createElement('text');
        tet1.innerText = arr[j - 1];
        tet1.id = "text_ranking";
        sobj.append(tet1);
      }
      else if (j == 3) {
        var img = document.createElement('img');
        var tet1 = document.createElement('text');
        var str = get_jsondata(arr[j - 1], "kart");
        var br = document.createElement('br');
        img.id = "IMG";
        if (str == null) {
          tet1.innerText = "조회 불가능"
          img.src = "metadata/image/empty.png";
        }
        else {
          tet1.innerText = str;
          img.src = "metadata/kart/" + arr[j - 1] + ".png";
        }
        sobj.append(img);
        sobj.append(br);
        sobj.append(tet1);
      }
      else if (j == 4) {
        var img = document.createElement('img');
        var tet1 = document.createElement('text');
        var str = get_jsondata(arr[j - 1], "track");
        tet1.id = "IMG2_TEXT";
        var br = document.createElement('br');
        img.id = "IMG2";
        if (str == null || str[1] == 'r') {
          tet1.innerText = "조회 불가능"
          img.src = "metadata/image/empty.png";
        }
        else {
          tet1.innerText = str;
          img.src = "metadata/track/" + arr[j - 1] + ".png";
        }
        sobj.append(img);
        sobj.append(br);
        sobj.append(tet1);
      }
      else if (j == 5) {
        var img = document.createElement('img');
        var str = get_jsondata(arr[j - 1], "character");
        var tet1 = document.createElement('text');
        var br = document.createElement('br');
        img.id = "IMG3";
        img.src = "metadata/character/" + arr[j - 1] + ".png";
        tet1.innerText = str;
        sobj.append(img);
        sobj.append(br);
        sobj.append(tet1);
      }
      else {
        sobj.innerText = arr[j - 1];
      }
      obj.append(sobj);
    }
  }

  /////////////가장 많이 사용한 카트, 그래프 등의 표시 부분/////////////////////////
  var count = [];
  for (var i = 0; i < Len; i++) {
    var item = most_kart[i];
    count[i] = 0;
    for (var j = 0; j < Len; j++) {
      if (item == most_kart[j]) {
        count[i] += 1;
      }
    }
  }
  var max = 0;
  var index = 0; //most_kart 배열에서 어디부분이 모스트인지 알려주는 index
  for (var i = 0; i < Len; i++) {
    if (max < count[i]) {
      max = count[i];
      index = i;
    }
  }
  const most_div = document.querySelector('#table_most');
  var obj = document.createElement('tr');
  most_div.append(obj);
  /*save는 retire횟수 따져주는 것*/
  var temp_arr = [most_kart[index], get_jsondata(most_kart[index], 'kart'), (Len - retire) * 10 + "%", max];
  for (var i = 0; i < 4; i++) {
    var sobj = document.createElement('td');
    if (i == 0) {
      var img = document.createElement('img');
      img.id = "IMG3";
      if (temp_arr[1] == null) {
        temp_arr[1] = "조회 불가능"
        img.src = "metadata/image/empty.png";
      }
      else {
        img.src = "metadata/kart/" + temp_arr[i] + ".png";
      }
      sobj.append(img);
    }
    else {
      sobj.innerText = temp_arr[i];
    }
    obj.append(sobj);
  }

  rank_grape = rank_grape.reverse();
  var options = {
    type: 'line',
    data: {
      labels: ['', '', '', '', '', '', '', '', '', ''],
      datasets: [{
        label: 'rank',
        data: rank_grape,
        backgroundColor: [
          'rgba(0, 0, 0, 0)'
        ],
        borderColor: [
          'rgba(54, 162, 235, 1)'
        ],
        borderWidth: 2
      }]
    },
    options: {
      responsive: false,
      scales: {
        xAxes: [{
          gridLines: {
            display: false
          }
        }],
        yAxes: [{
          ticks: {
            reverse: true,
            min: 1,
            max: 8,
            stepSize: 1
          }
        }]
      }
    }
  };

  var ctx = document.getElementById('myChart').getContext('2d');
  new Chart(ctx, options);
  var options2 = {
    type: 'doughnut',
    data: {
      labels: ['retire', 'save'],
      datasets: [{
        data: [retire, Len - retire],
        backgroundColor: [
          'rgba(255, 100, 100, 1)',
          'rgba(54, 162, 235, 1)'
        ],
      }]
    },
  };
  var ctx2 = document.getElementById('myChart2').getContext('2d');
  new Chart(ctx2, options2);
</script>

</html>