maimai の単曲レート計算ツール

背景

• 趣味でやってる maimai のレート計算ツールが欲しくなったのでそれを作る
• WordPress + JavaScript を試してみたい

実行例

実装

plain な html が直接書けたのでベタ書きしちゃいました．
ソースは以下のような感じで（普段 HTML も JavaScript も書かないのでよくない書き方をしていたら教えてください）

計算式は以下のリンクを参照しました
https://gamerch.com/maimai/entry/533647

左側：

<form id="calculate-solo-rating">
  <table>
    <tr>
      <th><label>譜面定数</label></th>
      <th><input type="text" id="music-coe" name="music-coe"></th>
      <th>(1.0 - )</th>
    </tr>
    <tr>
      <th><label>スコア</label></th>
      <th><input type="text" id="score" name="score"></th>
      <th>%</th>
    </tr>
    <tr>
      <th></th>
      <th></th>
      <th><input type="button" value="計算" id="calc-button"></th>
    </tr>
  </table>
</form>

右側：

<div id="solo-rating-answer"></div>
<script>
const button = document.getElementById("calc-button");

function calcRating() {
  const div = document.getElementById("solo-rating-answer");
  if (div.children.length > 0) {
    div.innerHTML = "";
  } 
  var p = document.createElement("p");

  const music_coe = Number(document.querySelector('input[id="music-coe"]').value);
  const score = Number(document.querySelector('input[id="score"]').value);

  var rank_coe = 0;
  if (score >= 100.50) {rank_coe = 22.4}
  else if (score >= 100.00) {rank_coe = 21.6}
  else if (score >= 99.50) {rank_coe = 21.1}
  else if (score >= 99.00) {rank_coe = 20.8}
  else if (score >= 98.00) {rank_coe = 20.3}
  else if (score >= 97.00) {rank_coe = 20.0}
  else if (score >= 94.00) {rank_coe = 16.8}
  else if (score >= 90.00) {rank_coe = 13.6}
  
  if (rank_coe > 0) {
    var uppered_score = 0;
    if (score > 100.5) {
      uppered_score = 1.005;
    } else {
      uppered_score = score / 100
    }
    const solo_rating = Math.round(music_coe * uppered_score * rank_coe);
    p.innerHTML = "単曲レート：" + solo_rating;
  } else {
    p.innerHTML = "単曲レート：" + "Not Supported"
  }
  div.append(p);
}

button.addEventListener("click", calcRating);
</script>

今後の課題

• データベースをつないで自分のスコアを保存できるようにする
• OCR でスコアを自動的に取得したい（かなりやりたい）