JSFiddle - React, Tailwind, and code Playground

by hbsto

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<div class="input-group">
  <div class="input-group-prepend">
    <select class="custom-select" id="selStage"></select>
    <span class="input-group-text">1회 클리어 시간(분)</span>
    <input type="number" min="0" value="1" step=1 class="form-control" id="txtClear">
    <span class="input-group-text">쫄 마리 수</span>
  </div>
  <input type="number" placeholder="마리" min="0" value="1" step=1 class="form-control" id="txtPets">
  <div class="input-group-append">
    <button type="button" class="btn btn-primary" id="btnStart">계산</button>
  </div>
</div>
<a href="#" class="badge badge-pill badge-primary" data-toggle="modal" data-target="#modalVersionHistory">Ver 1.1</a>
<!-- Modal -->
<div class="modal fade" id="modalVersionHistory" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Update History</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" style="max-height:200px; overflow: auto;">
        <h5>ver1.0 : 2018.01.11</h5>
        최초 버전. 스테이지 4-4, 9-4 추가
        <h5>ver1.1 : 2018.01.12</h5>
        에스타 1-2 추가<br/>
        에스타 1-3 추가<br/>
        스테이지 4-6 추가<br/>
        버전 변경 기록 추가<br/>
      </div>
    </div>
  </div>
</div>
<hr/>

CSS

body {
  margin: 10px;
}

JavaScript

{ // http://cafe.naver.com/overhit/254977 참고
  // 50레벨 0% 성장치 기준 경험치 증가량
  const 일반2성exp = 1; // 2.9%
  const 일반3성exp = 2; // 5.8%
  const 재료1성exp = 2.5; // 7.3%
  const 재료2성exp = 5; // 14.6%
  const 스테이지4exp = 0.58; // 1.7%
  const 스테이지9exp = 1.17; // 3.4%
  const 에스타exp = 0.79; // 2.3%
  const 장비3비율 = 2; // 2성장비 2개가 3성장비 1개와 동일
  const 원천3교환비 = 5; // 5개모아 1개 상위변환

  // 스테이지 4-4
  const Stage4_4 = {
    Stage: '4-4',
    Round: 60,
    골드: 455 * 60,
    큐브: 576,
    원천2: 38,
    원천3: 0,
    장비2: 53,
    장비3: 0,
    영웅2: 31,
    영웅3: 0,
    재료1: 13,
    재료2: 0,
    쫄경험치: 스테이지4exp,
    신발: 4,
  };

  // 스테이지 4-6
  const Stage4_6 = {
    Stage: '4-6',
    Round: 52,
    골드: 455 * 52,
    큐브: 96 * 5.2,
    원천2: 48,
    원천3: 2,
    장비2: 33,
    장비3: 6,
    영웅2: 39,
    영웅3: 0,
    재료1: 15,
    재료2: 0,
    쫄경험치: 스테이지4exp,
    신발: 4,
  };

  // 스테이지 9-4
  const Stage9_4 = {
    Stage: '9-4',
    Round: 40,
    골드: 42440,
    큐브: 720,
    원천2: 61,
    원천3: 0,
    장비2: 57,
    장비3: 0,
    영웅2: 32,
    영웅3: 0,
    재료1: 0,
    재료2: 23,
    쫄경험치: 스테이지9exp,
    신발: 6,
  };

  // 에스타 1-2
  const 에스타1_2 = {
    Stage: '에스타 1-2',
    Round: 49,
    골드: 32683,
    큐브: 810 - 16.2,
    원천2: 61,
    원천3: 0,
    장비2: 19,
    장비3: 17,
    영웅2: 35,
    영웅3: 0,
    재료1: 20,
    재료2: 0,
    쫄경험치: 에스타exp,
    신발: 6,
  };


  // 에스타 1-3
  const 에스타1_3 = {
    Stage: '에스타 1-3',
    Round: 50,
    골드: 44576,
    큐브: 810,
    원천2: 55,
    원천3: 5,
    장비2: 35,
    장비3: 16,
    영웅2: 38,
    영웅3: 3,
    재료1: 25,
    재료2: 0,
    쫄경험치: 에스타exp,
    신발: 6,
  };

  const Stages = [Stage4_4, Stage4_6, Stage9_4, 에스타1_2, 에스타1_3];
  const getPerMin = (value, Round, min) => (value / Round / min).toFixed(3);
  const getExpPerMin = ({ Round, 재료1, 재료2, 영웅2, 영웅3, 쫄경험치 }, min, pet) => (((영웅2 + 영웅3 * 일반3성exp + 재료1 * 재료1성exp + 재료2 * 재료2성exp) / Round / min) + 쫄경험치 * pet).toFixed(3);
  const printStageResult = () => {
    const Stage = Stages[+Components.selStage.val()];
    const min =...