feat: 메소정보 HTML

sapiensXXV · Jan 9, 2024 · 2c60f09 · 2c60f09
1 parent 9bd0ac4
commit 2c60f09
Show file tree

Hide file tree

Showing 6 changed files with 146 additions and 5 deletions.
diff --git a/src/main/resources/static/css/bootstrap/bootstrap.min.css b/src/main/resources/static/css/bootstrap/bootstrap.min.css
diff --git a/src/main/resources/static/css/default.css → ...n/resources/static/css/custom/default.css b/src/main/resources/static/css/default.css → ...n/resources/static/css/custom/default.css
@@ -159,9 +159,73 @@ p.item-title {
 }
 
 .scroll-image {
-    height: 47px;
+    height: 44px;
 }
 
 .nomok-power {
     display: inline-block;
 }
+
+.item--price-calculator-container {
+    font-size: 15px;
+    font-family: "Noto Sans KR";
+}
+
+.item-price-input {
+    margin-bottom: 3px;
+}
+
+.item-price-input label {
+    display: inline-block;
+    text-align: left;
+    width: 80px;
+    font-weight: bold;
+    font-size: 15px;
+}
+
+.item-price-input input {
+    width: 200px;
+    height: 100px;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.item-price-info {
+    margin-top: 10px;
+    display: flex
+}
+
+.item-price-result {
+    display: flex;
+    width: 265px
+
+}
+
+.item-price-result img {
+    display: inline-block;
+    margin-right: 5px;
+}
+
+.item-price-result button {
+    float: right;
+    font-weight: bold;
+}
+
+
+.item-price-result span {
+    font-size: 18px;
+
+}
+
+item-price-result #work-glove-reset-btn {
+    display: inline-block;
+    float: right;
+}
+
+.item--price-calculator-container input {
+    height: 18px;
+    border: #0d6efd solid 1px;
+    border-radius: 5px;
+}
+
+
diff --git a/src/main/resources/static/img/etc/meso.png b/src/main/resources/static/img/etc/meso.png
diff --git a/src/main/resources/static/img/etc/reset2.png b/src/main/resources/static/img/etc/reset2.png
diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html
@@ -2,18 +2,19 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>강화 시뮬레이터</title>
+    <title>메이플 주문서 시뮬레이터</title>
     <link rel="icon" href="./10-raw.png">
 </head>
-<link rel="stylesheet" href="css/default.css">
+<!--<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">-->
+<link rel="stylesheet" href="css/custom/default.css">
+
 <body>
     <div class="item-container">
         <!--노가다 목장갑-->
         <div class="item">
             <div class="item-info">
                 <p id="work-glove-title" class="item-title">
                     노가다 목장갑<span id="work-glove-additional" hidden="hidden"> (+<span id="work-glove-upgraded-count">0</span>)</span></p>
-
                 <!-- 아이템 이미지, 필요 능력치-->
                 <div class="image-and-status" >
                     <div class="tmp-container">
@@ -78,8 +79,30 @@
                     </button>
                 </div>
             </div>
+            <div class="item--price-calculator-container">
+                <div class="item-price-input">
+                    <label>10% 가격: </label>
+                    <input type="text" id="work-glove-10-price" placeholder=" 가격을 입력하세요" value="0">
+                </div>
+                <div class="item-price-input">
+                    <label>60% 가격: </label>
+                    <input type="text" id="work-glove-60-price" placeholder=" 가격을 입력하세요" value="0">
+                </div>
+                <div class="item-price-input">
+                    <label>100% 가격: </label>
+                    <input type="text" id="work-glove-100-price" placeholder=" 가격을 입력하세요" value="0">
+                </div>
+                <div class="item-price-info">
+                    <div class="item-price-result">
+                        <img src ="img/etc/meso.png" width="30px" height="30px">
+                        <span id="work-glove-total-used-price">0</span>
+                    </div>
+                    <button class="item-price-result-btn" id="work-glove-price-reset-btn">리셋</button>
+                </div>
+            </div>
         </div>
 
+
         <!--다크 보닌-->
         <div class="item">
             <div class="item-info">
@@ -132,7 +155,6 @@
                 <button id="dark-avarice-three-upper-option-btn" class="item-option-btn" type="button">3상옵</button>
             </div>
 
-
             <div class="scroll-list">
                 <div class="scroll-btn-container">
                     <button id="dark-avarice-10-percent-button" class ="scroll-button" type="button">
@@ -164,6 +186,27 @@
                     </button>
                 </div>
             </div>
+            <div class="item--price-calculator-container">
+                <div class="item-price-input">
+                    <label>10% 가격: </label>
+                    <input type="text" id="dark-avarice-10-price" placeholder=" 가격을 입력하세요" value="0">
+                </div>
+                <div class="item-price-input">
+                    <label>60% 가격: </label>
+                    <input type="text" id="dark-avarice-60-price" placeholder=" 가격을 입력하세요" value="0">
+                </div>
+                <div class="item-price-input">
+                    <label>100% 가격: </label>
+                    <input type="text" id="dark-avarice-100-price" placeholder=" 가격을 입력하세요" value="0">
+                </div>
+                <div class="item-price-info">
+                    <div class="item-price-result">
+                        <img src ="img/etc/meso.png" width="30px" height="30px">
+                        <span id="dark-avarice-total-used-price">0</span>
+                    </div>
+                    <button class="item-price-result-btn" id="dark-avarice-price-reset-btn">리셋</button>
+                </div>
+            </div>
         </div>
 
         <!--이블 윙즈-->
@@ -251,6 +294,27 @@
                     </button>
                 </div>
             </div>
+            <div class="item--price-calculator-container">
+                <div class="item-price-input">
+                    <label>10% 가격: </label>
+                    <input type="text" id="evil-wings-10-price" placeholder=" 가격을 입력하세요" value="0">
+                </div>
+                <div class="item-price-input">
+                    <label>60% 가격: </label>
+                    <input type="text" id="evil-wings-60-price" placeholder=" 가격을 입력하세요" value="0">
+                </div>
+                <div class="item-price-input">
+                    <label>100% 가격: </label>
+                    <input type="text" id="evil-wings-100-price" placeholder=" 가격을 입력하세요" value="0">
+                </div>
+                <div class="item-price-info">
+                    <div class="item-price-result">
+                        <img src ="img/etc/meso.png" width="30px" height="30px">
+                        <span id="evil-wings-total-used-price">0</span>
+                    </div>
+                    <button class="item-price-result-btn" id="evil-wings-price-reset-btn">리셋</button>
+                </div>
+            </div>
         </div>
     </div>
 

diff --git a/src/main/resources/static/js/work-glove.js b/src/main/resources/static/js/work-glove.js
@@ -13,6 +13,12 @@ let successGifPath = '../gif/success.gif';
 let failureGifPath = '../gif/failure.gif';
 let timer = null;
 
+// 주문서 시도 횟수 메소리셋버튼을 누르면 이 값들만 0으로 만들어주면 된다
+let tenTrial = 0;
+let sixtyTrial = 0;
+let hundredTrial = 0;
+
+
 tenPercentButton.addEventListener('click', function () {
     if (!checkAvailableCount()) return;
     if (util.getRandomResult(10)) {
@@ -61,6 +67,7 @@ function success(atk) {
     playSuccessEffect()
 }
 
+
 function fail() {
     console.log('scroll fail');
     let availableCnt = document.getElementById('work-glove-upgrade-available-count')