maplestroy_cube_simulator

by YH Park

HTML

<h1>
  메이플 큐브 시뮬레이터
</h1>
<div id="init-area">
  <h3>
    초기화하기
  </h3>
  <form action="Javascript: fnObj.initItem();">
    아이템 종류 <select id="item-type">
      <option value="weapon">무기</option>
      <option value="emblem">엠블렘</option>
      <option value="subWeapon">보조무기</option>
      <option value="subWeapon_forceShield_soulRing">보조무기(포스실드, 소울링)</option>
      <option value="subWeapon_shield">보조무기(방패)</option>
      <option value="head">모자</option>
      <option value="upper_armor">상의</option>
      <option value="armor">한벌옷</option>
      <option value="lower_armor">하의</option>
      <option value="shoes">신발</option>
      <option value="gloves">장갑</option>
      <option value="accessory1">망토,벨트,어깨장식</option>
      <option value="accessory2">얼굴장식,눈장식,귀고리,반지,펜던트</option>
      <option value="metal_heart">기계심장</option>
    </select>
    윗잠등급 <select id="item-upper-ability-type">
      <option value="rare">레어</option>
      <option value="epic">에픽</option>
      <option value="unique">유니크</option>
      <option value="legendary">레전더리</option>
    </select>
    아랫잠등급 <select id="item-lower-ability-type">
      <option value="rare">레어</option>
      <option value="epic">에픽</option>
      <option value="unique">유니크</option>
      <option value="legendary">레전더리</option>
    </select>
    <br>
    아이템 이름 : <input type="text" id="item-name" style="width: 500px">
    <input type="submit" value="실행">
  </form>
</div>

<div id="item-info-area">
  <div id="item-info-icon">

  </div>
  <h2 id="item-info-name">
    초기화를 먼저 진행해주세요
  </h2>
  <div id="item-info-upper-ability">
    <span class="upper rare">레어등급</span>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div id="item-info-lower-ability">
    <span class="lower rare">레어등급</span>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  큐브 사용하기 -> <button onclick="fnObj.run('redCube')">레드큐브</button>
  <button onclick="fnObj.run('blackCube')">블랙큐브</button>
  <button...

CSS

#item-info-area {
  width: 500px;
  border: 1px solid black;
  padding: 0 20px 20px 20px;
  margin: 20px;
}

JavaScript

var fnObj = {
	initItem: function() {
  	var itemType = $('#init-area #item-type').val()
    var itemUpperAbilityType = $('#init-area #item-upper-ability-type').val()
    var itemLowerAbilityType = $('#init-area #item-lower-ability-type').val()
    var itemName = $('#init-area #item-name').val()
    
    item.name = itemName
    item.type = itemType
    item.ability.upper.type = itemUpperAbilityType
    item.ability.upper.option = ['미지정','미지정','미지정']
    item.ability.lower.type = itemLowerAbilityType
    item.ability.lower.option = ['미지정','미지정','미지정']
    this.isInit = true
    this.refresh()
  },
  isInit: false,
  refresh: function() {
  	$('#red-qtt').text(log.cubeQtt.redCube)
    $('#black-qtt').text(log.cubeQtt.blackCube)
    $('#additional-qtt').text(log.cubeQtt.additionalCube)
  	$('#item-info-name').text(item.name)
    if (item.name == '')
    	$('#item-info-name').text('아이템 이름을 적어주세요.')
    $('#item-info-upper-ability>span').text(this.translateRarity(item.ability.upper.type)+'등급')
    $('#item-info-upper-ability>ul>li:eq(0)').text(item.ability.upper.option[0])
    $('#item-info-upper-ability>ul>li:eq(1)').text(item.ability.upper.option[1])
    $('#item-info-upper-ability>ul>li:eq(2)').text(item.ability.upper.option[2])
    $('#item-info-lower-ability>span').text(this.translateRarity(item.ability.lower.type)+'등급')
    $('#item-info-lower-ability>ul>li:eq(0)').text(item.ability.lower.option[0])
    $('#item-info-lower-ability>ul>li:eq(1)').text(item.ability.lower.option[1])
    $('#item-info-lower-ability>ul>li:eq(2)').text(item.ability.lower.option[2])
  },
  translateRarity: function(str) {
  	if (str == 'rare')
    	return '레어'
    else if (str == 'epic')
    	return '에픽'
    else if (str == 'unique')
    	return '유니크'
    else if (str == 'legendary')
    	return '레전더리'
    else
    	return str
  },
  translateCubeType: function(str) {
  	if (str == 'redCube')
    	return '레드큐브'
    else if (str == 'blackCube')
    	return '블랙큐브'
    else if (str ==...