CodePen Embed

Live

 
<html>
<body>
<div id="toolbar">
  <div style="color: #ffffff; font-weight: bold;">
  <span>
  ランク帯：
  <select id="tier" class="form-control">
    <option value="0">ルーキー</option>
    <option value="5">ブロンズⅣ</option>
    <option value="8">ブロンズⅢ</option>
    <option value="11">ブロンズⅡ</option>
    <option value="14">ブロンズⅠ</option>
    <option value="17">シルバーⅣ</option>
    <option value="20">シルバーⅢ</option>
    <option value="23">シルバーⅡ</option>
    <option value="26">シルバーⅠ</option>
    <option value="29">ゴールドⅣ</option>
    <option value="32">ゴールドⅢ</option>
    <option value="35">ゴールドⅡ</option>
    <option value="38">ゴールドⅠ</option>
    <option value="41">プラチナⅣ</option>
    <option value="44">プラチナⅢ</option>
    <option value="47">プラチナⅡ</option>
    <option value="50">プラチナⅠ</option>
    <option value="53">ダイヤⅣ</option>
    <option value="56">ダイヤⅢ</option>
    <option value="59">ダイヤⅡ</option>
    <option value="62">ダイヤⅠ</option>
    <option value="65">マスター</option>
  </select>
  味方のKP：
  <select id="pp" class="form-control" style="width:80px;">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
  </select>
  <span>参加費(コスト)：<span id="entry_fee">0</span>RP</span>
  </div>
</div>
<div>
<table id="table1">
  <thead>
        <tr>
            <th>順位/<br>キル&アシスト</th>
            <th>14+位</th>
            <th>11~13位</th>
            <th>9~10位</th>
            <th>7~8位</th>
            <th>6位</th>
            <th>5位</th>
            <th>4位</th>
            <th>3位</th>
            <th>2位</th>
            <th>1位</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>15</td>
            <td>15</td>
            <td>80</td>
            <td>160</td>
            <td>200</td>
            <td>240</td>
            <td>285</td>
            <td>325</td>
            <td>370</td>
            <td>440</td>
            <td>500</td>
        </tr>
        <tr>
            <td>14</td>
            <td>15</td>
            <td>80</td>
            <td>160</td>
            <td>200</td>
            <td>240</td>
            <td>285</td>
            <td>325</td>
            <td>370</td>
            <td>440</td>
            <td>500</td>
        </tr>
        <tr>
            <td>13</td>
            <td>15</td>
            <td>80</td>
            <td>160</td>
            <td>200</td>
            <td>240</td>
            <td>285</td>
            <td>325</td>
            <td>370</td>
            <td>440</td>
            <td>500</td>
        </tr>
        <tr>
            <td>12</td>
            <td>15</td>
            <td>80</td>
            <td>160</td>
            <td>200</td>
            <td>240</td>
            <td>285</td>
            <td>325</td>
            <td>370</td>
            <td>440</td>
            <td>500</td>
        </tr>
        <tr>
            <td>11</td>
            <td>15</td>
            <td>80</td>
            <td>160</td>
            <td>200</td>
            <td>240</td>
            <td>285</td>
            <td>325</td>
            <td>370</td>
            <td>440</td>
            <td>500</td>
        </tr>
        <tr>
            <td>10</td>
            <td>15</td>
            <td>80</td>
            <td>160</td>
            <td>200</td>
            <td>240</td>
            <td>285</td>
            <td>325</td>
            <td>370</td>
            <td>440</td>
            <td>500</td>
        </tr>
        <tr>
            <td>9</td>
            <td>15</td>
            <td>80</td>
            <td>160</td>
            <td>200</td>
            <td>240</td>
            <td>285</td>
            <td>325</td>
            <td>370</td>
            <td>440</td>
            <td>500</td>
        </tr>
        <tr>
            <td>8</td>
            <td>15</td>
            <td>80</td>
            <td>160</td>
            <td>200</td>
            <td>240</td>
            <td>285</td>
            <td>325</td>
            <td>370</td>
            <td>440</td>
            <td>500</td>
        </tr>
        <tr>
            <td>7</td>
            <td>15</td>
            <td>80</td>
            <td>160</td>
            <td>200</td>
            <td>240</td>
            <td>285</td>
            <td>325</td>
            <td>370</td>
            <td>440</td>
            <td>500</td>
        </tr>
        <tr>
            <td>6</td>
            <td>15</td>
            <td>80</td>
            <td>160</td>
            <td>200</td>
            <td>240</td>
            <td>285</td>
            <td>325</td>
            <td>370</td>
            <td>440</td>
            <td>500</td>
        </tr>
        <tr>
            <td>5</td>
            <td>15</td>
            <td>80</td>
            <td>160</td>
            <td>200</td>
            <td>240</td>
            <td>285</td>
            <td>325</td>
            <td>370</td>
            <td>440</td>
            <td>500</td>
        </tr>
        <tr>
            <td>4</td>
            <td>15</td>
            <td>80</td>
            <td>160</td>
            <td>200</td>
            <td>240</td>
            <td>285</td>
            <td>325</td>
            <td>370</td>
            <td>440</td>
            <td>500</td>
        </tr>
        <tr>
            <td>3</td>
            <td>15</td>
            <td>80</td>
            <td>160</td>
            <td>200</td>
            <td>240</td>
            <td>285</td>
            <td>325</td>
            <td>370</td>
            <td>440</td>
            <td>500</td>
        </tr>
        <tr>
            <td>2</td>
            <td>15</td>
            <td>80</td>
            <td>160</td>
            <td>200</td>
            <td>240</td>
            <td>285</td>
            <td>325</td>
            <td>370</td>
            <td>440</td>
            <td>500</td>
        </tr>
        <tr>
            <td>1</td>
            <td>15</td>
            <td>80</td>
            <td>160</td>
            <td>200</td>
            <td>240</td>
            <td>285</td>
            <td>325</td>
            <td>370</td>
            <td>440</td>
            <td>500</td>
        </tr>
        <tr>
            <td>0</td>
            <td>15</td>
            <td>80</td>
            <td>160</td>
            <td>200</td>
            <td>240</td>
            <td>285</td>
            <td>325</td>
            <td>370</td>
            <td>440</td>
            <td>500</td>
        </tr>
  </tbody>
</table>
</div>
</body>
</html>

Live

​x
 
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Patua+One|Open+Sans);
​
* { 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
}
​
body {
  font-family:'Quicksand', 'Montserrat', 'Open Sans', sans-serif;
  background:#353a40;
  width: 680px;
  margin: auto;
}
​
table {
  border-collapse: separate;
  background:#fff;
  @include border-radius(5px);
  margin:5px auto;
  @include box-shadow(0px 0px 5px rgba(0,0,0,0.3));
}
​
thead {
  @include border-radius(5px);
}
​
thead th,tr:last-child {
  font-size:16px;
  font-weight:400;
  color:#ffffff;
  @include text-shadow(1px 1px 0px rgba(0,0,0,0.5));
  text-align:left;
  padding:10px;
  @include background-image(linear-gradient(#585858, #494949));
  border-top:1px solid #858d99;
  text-align:center;
  
  &:first-child {
   @include border-top-left-radius(5px); 
  }
​
  &:last-child {
    @include border-top-right-radius(5px); 
  }
}
​
tbody tr:last-child td {color:#ffffff;}
​
tbody tr td {
  font-weight:400;
  color:#5f6062;
  font-size:14px;
  padding:10px;
  border-bottom:1px solid #e0e0e0;
  text-align:center;
  font-weight: bold;
}
​
tbody tr:nth-child(2n) {
  background:#eaeaea;
}
​
tbody tr:last-child td {
  border-bottom:none;
  &:first-child {
    @include border-bottom-left-radius(5px);
  }
  &:last-child {
    @include border-bottom-right-radius(5px);
  }
}
​
tbody td.negative-number {
  /*color:red;*/
  color:#ffffff;
  background:#D0504A;
}
tbody td.positive-number {
  /*color:black;*/
  color:#ffffff;
  background:#52CC87;
}
​
tbody td:nth-child(1) {
  font-size:16px;
  font-weight:400;
  color:#fff;
  @include text-shadow(1px 1px 0px rgba(0,0,0,0.5));
  text-align:left;
  padding:10px;
  @include background-image(linear-gradient(#585858, #494949));
  border-top:1px solid #858d99;
  text-align:center;
}
​
tbody:hover > tr td {
  @include opacity(0.5);
  @include text-shadow(0px 0px 2px rgba(0,0,0,2));
}
​
tbody:hover > tr:hover td {
  @include text-shadow(none);
  @include opacity(1.4);
}
​
#toolbar {
  font-family:'Quicksand', 'Montserrat', 'Open Sans', sans-serif;
  background:#fffff;
  margin:10px auto;
}
#toolbar select {
  width:100px;
  height:25px;
  font-family:'Quicksand', 'Montserrat', 'Open Sans', sans-serif;
  font-size:14px;
  margin:5px 20px 5px 0px;
}

Live

xxxxxxxxxx
 
import $ from "https://cdn.skypack.dev/jquery@3.6.0";
$(function(){
  var kcList = [15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0];
  var rankList = [[0,1],[5,5],[10,10],[20,12],[30,14],[45,16],[55,18],[70,20],[95,23],[125,25]];
  
  //初回実行
  bulidTable(0, 0);
 
  //セレクトボックスが切り替わったら発動
  $('select').change(function(){
    var cost = $('select#tier').val();
    var pp = $('select#pp').val();
    $('#entry_fee').text(cost);
    bulidTable(cost, pp);
  });
​
  // テーブルを自動生成する
  function bulidTable(cost, pp){
    // 行削除
    removeTr();
    var tableBody = "";
    $(kcList).map(function(index, kc){
      var tr = ""
      var td = "<td>" + kc + "</td>";
​
      $(rankList).map(function(index, ranks){
        var rp = 0;
        rp = Math.ceil(getKp(kc, ranks));
        rp = rp + Math.ceil(getKp(pp, ranks)/2);
        rp = ranks[0] + rp - cost;
        var strColor = "positive-number";
        if (rp < 0) { strColor = "negative-number"; }
        td += "<td class='" + strColor + "'>" + (rp) + "</td>";
      });
      tr += "<tr>" + td + "</tr>\r\n"
      tableBody += tr;
    });
    $('table tbody').append(tableBody);
    $('table tbody').append("<tr><td>順位/<br>キル&アシスト</td><td>14+位</td><td>11~13位</td><td>9~10位</td><td>7~8位</td><td>6位</td><td>5位</td><td>4位</td><td>3位</td><td>2位</td><td>1位</td></tr>");
  }
​
  function getKp(kc, ranks){
    var kp = 0;
    if (kc <= 3) {
      kp = kc * ranks[1];
    } else if (kc >= 4 && kc <= 6){
      kp = 3 * ranks[1];
      kp = kp + ((kc-3) * ranks[1] * 0.8);
    } else if (kc >= 7 && kc <= 9){
      kp = 3 * ranks[1];
      kp = kp + (3 * ranks[1] * 0.8);
      kp = kp + ((kc-6) * ranks[1] * 0.6);
    } else if (kc >= 10 && kc <= 12){
      kp = 3 * ranks[1];
      kp = kp + (3 * ranks[1] * 0.8);
      kp = kp + (3 * ranks[1] * 0.6);
      kp = kp + ((kc-9) * ranks[1] * 0.4);
    } else {
      kp = 3 * ranks[1];
      kp = kp + (3 * ranks[1] * 0.8);
      kp = kp + (3 * ranks[1] * 0.6);
      kp = kp + (3 * ranks[1] * 0.4);
      kp = kp + ((kc-12) * ranks[1] * 0.2);
    }
​
    return kp;
  }
​
  // 行削除
  function removeTr(){
    $("table tbody tr").remove();
  }
​
  $('#entry_fee').text(0);
  // 表の自動生成
  bulidTable(0, 0);
​
});

This Pen is owned by jbjb on CodePen.

See more by @jb_jb on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.