Skip to content

Commit

Permalink
feat: 사용메소 측정 기능
Browse files Browse the repository at this point in the history
  • Loading branch information
sapiensXXV committed Jan 9, 2024
1 parent 2c60f09 commit 5ad7201
Show file tree
Hide file tree
Showing 8 changed files with 256 additions and 26 deletions.
2 changes: 2 additions & 0 deletions src/main/resources/static/css/custom/default.css
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,8 @@ p.item-title {
height: 100px;
padding-left: 5px;
padding-right: 5px;

overflow: hidden;
}

.item-price-info {
Expand Down
28 changes: 16 additions & 12 deletions src/main/resources/static/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -79,18 +79,19 @@
</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">
<input type="text" id="work-glove-10-price" placeholder=" 가격을 입력하세요" value="0" oninput="recalculateWorkGloveTotalPrice()">
</div>
<div class="item-price-input">
<label>60% 가격: </label>
<input type="text" id="work-glove-60-price" placeholder=" 가격을 입력하세요" value="0">
<input type="text" id="work-glove-60-price" placeholder=" 가격을 입력하세요" value="0" oninput="recalculateWorkGloveTotalPrice()">
</div>
<div class="item-price-input">
<label>100% 가격: </label>
<input type="text" id="work-glove-100-price" placeholder=" 가격을 입력하세요" value="0">
<input type="text" id="work-glove-100-price" placeholder=" 가격을 입력하세요" value="0" oninput="recalculateWorkGloveTotalPrice()">
</div>
<div class="item-price-info">
<div class="item-price-result">
Expand Down Expand Up @@ -189,15 +190,15 @@
<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">
<input type="text" id="dark-avarice-10-price" placeholder=" 가격을 입력하세요" value="0" oninput="recalculateDarkAvariceTotalPrice()">
</div>
<div class="item-price-input">
<label>60% 가격: </label>
<input type="text" id="dark-avarice-60-price" placeholder=" 가격을 입력하세요" value="0">
<input type="text" id="dark-avarice-60-price" placeholder=" 가격을 입력하세요" value="0" oninput="recalculateDarkAvariceTotalPrice()">
</div>
<div class="item-price-input">
<label>100% 가격: </label>
<input type="text" id="dark-avarice-100-price" placeholder=" 가격을 입력하세요" value="0">
<input type="text" id="dark-avarice-100-price" placeholder=" 가격을 입력하세요" value="0" oninput="recalculateDarkAvariceTotalPrice()">
</div>
<div class="item-price-info">
<div class="item-price-result">
Expand Down Expand Up @@ -297,15 +298,15 @@
<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">
<input type="text" id="evil-wings-10-price" placeholder=" 가격을 입력하세요" value="0" oninput="recalculateEvilWingsTotalPrice()">
</div>
<div class="item-price-input">
<label>60% 가격: </label>
<input type="text" id="evil-wings-60-price" placeholder=" 가격을 입력하세요" value="0">
<input type="text" id="evil-wings-60-price" placeholder=" 가격을 입력하세요" value="0" oninput="recalculateEvilWingsTotalPrice()">
</div>
<div class="item-price-input">
<label>100% 가격: </label>
<input type="text" id="evil-wings-100-price" placeholder=" 가격을 입력하세요" value="0">
<input type="text" id="evil-wings-100-price" placeholder=" 가격을 입력하세요" value="0" oninput="recalculateEvilWingsTotalPrice()">
</div>
<div class="item-price-info">
<div class="item-price-result">
Expand All @@ -318,9 +319,12 @@
</div>
</div>

<script type="module" src="./js/work-glove.js"></script>
<script type="module" src="./js/dark-avarice.js"></script>
<script type="module" src="./js/evil-wings.js"></script>
<script type="module" src="./js/work-glove/work-glove.js"></script>
<script type="module" src="./js/dark-avarice/dark-avarice.js"></script>
<script type="module" src="./js/evil-wings/evil-wings.js"></script>
<script type="text/javascript" src="./js/work-glove/price.js"></script>
<script type="text/javascript" src="./js/dark-avarice/price.js"></script>
<script type="text/javascript" src="./js/evil-wings/price.js"></script>

</body>
</html>
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import * as util from "./util.js";
import * as util from "../util.js";
// import {changeColor} from "./util.js";

// 속성 값들
Expand Down
70 changes: 70 additions & 0 deletions src/main/resources/static/js/dark-avarice/price.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
/**
* 주문서 버튼
*/
let darkAvariceTenPercentBtn = document.getElementById('dark-avarice-10-percent-button');
let darkAvariceSixtyPercentBtn = document.getElementById('dark-avarice-60-percent-button');
let darkAvariceHundredPercentBtn = document.getElementById('dark-avarice-100-percent-button');
let darkAvaricePriceResetBtn = document.getElementById('dark-avarice-price-reset-btn');

/**
* 주문서 시도 횟수
*/
let darkAvariceTenTrial = 0;
let darkAvariceSixtyTrial = 0;
let darkAvariceHundredTrial = 0;

/**
* 주문서 버튼 클릭 로직
* 주문서 시도횟수가 증가한다.
*/
darkAvariceTenPercentBtn.addEventListener('click', function () {
if (!checkCanProceed()) return;
darkAvariceTenTrial++;
recalculateDarkAvariceTotalPrice();
})

darkAvariceSixtyPercentBtn.addEventListener('click', function () {
if (!checkCanProceed()) return;
darkAvariceSixtyTrial++;
recalculateDarkAvariceTotalPrice();
});

darkAvariceHundredPercentBtn.addEventListener('click', function () {
if (!checkCanProceed()) return;
darkAvariceHundredTrial++;
recalculateDarkAvariceTotalPrice();
});

/**
* 사용가격 리셋
*/
darkAvaricePriceResetBtn.addEventListener('click', function () {
darkAvariceTenTrial = 0;
darkAvariceSixtyTrial = 0;
darkAvariceHundredTrial = 0;
recalculateDarkAvariceTotalPrice();
});

function recalculateDarkAvariceTotalPrice() {
let tenInputElem = document.getElementById('dark-avarice-10-price');
let sixtyInputElem = document.getElementById('dark-avarice-60-price');
let hundredInputElem = document.getElementById('dark-avarice-100-price');
let usedPriceElem = document.getElementById('dark-avarice-total-used-price');

let tenInput = parseInt(tenInputElem.value);
let sixtyInput = parseInt(sixtyInputElem.value);
let hundredInput = parseInt(hundredInputElem.value);

usedPriceElem.textContent = (
tenInput * darkAvariceTenTrial +
sixtyInput * darkAvariceSixtyTrial +
hundredInput * darkAvariceHundredTrial
).toLocaleString();
}

function checkCanProceed() {
let availableCount = document.getElementById('dark-avarice-upgrade-available-count');
let count = parseInt(availableCount.textContent);
return count > 0;

}
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import * as util from "./util.js";
import * as util from "../util.js";

// 속성 값들
let defaultAtkSpeed = 4;
Expand Down
70 changes: 70 additions & 0 deletions src/main/resources/static/js/evil-wings/price.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
/**
* 주문서 버튼
*/
let evilWingsTenPercentBtn = document.getElementById('evil-wings-10-percent-button');
let evilWingsSixtyPercentBtn = document.getElementById('evil-wings-60-percent-button');
let evilWingsHundredPercentBtn = document.getElementById('evil-wings-100-percent-button');
let evilWingsResetBtn = document.getElementById('evil-wings-price-reset-btn');

/**
* 주문서 시도 횟수
*/
let evilWingsTenTrial = 0;
let evilWingsSixtyTrial = 0;
let evilWingsHundredTrial = 0;

/**
* 주문서 버튼 클릭 로직
* 주문서 시도횟수가 증가한다.
*/
evilWingsTenPercentBtn.addEventListener('click', function () {
if (!checkCanProceed()) return;
evilWingsTenTrial++;
recalculateEvilWingsTotalPrice();
});

evilWingsSixtyPercentBtn.addEventListener('click', function () {
if (!checkCanProceed()) return;
evilWingsSixtyTrial++;
recalculateEvilWingsTotalPrice();
});

evilWingsHundredPercentBtn.addEventListener('click', function () {
if (!checkCanProceed()) return;
evilWingsHundredTrial++;
recalculateEvilWingsTotalPrice();
});

/**
* 사용가격 리셋
*/
evilWingsResetBtn.addEventListener('click', function () {
evilWingsTenTrial = 0;
evilWingsSixtyTrial = 0;
evilWingsHundredTrial = 0;
recalculateEvilWingsTotalPrice();
});

function recalculateEvilWingsTotalPrice() {
let tenInputElem = document.getElementById('evil-wings-10-price');
let sixtyInputElem = document.getElementById('evil-wings-60-price');
let hundredInputElem = document.getElementById('evil-wings-100-price');
let usedPriceElem = document.getElementById('evil-wings-total-used-price');

let tenInput = parseInt(tenInputElem.value);
let sixtyInput = parseInt(sixtyInputElem.value);
let hundredInput = parseInt(hundredInputElem.value);

usedPriceElem.textContent = (
tenInput * evilWingsTenTrial +
sixtyInput * evilWingsSixtyTrial +
hundredInput * evilWingsHundredTrial
).toLocaleString();
}

function checkCanProceed() {
let availableCount = document.getElementById('evil-wings-upgrade-available-count');
let count = parseInt(availableCount.textContent);
return count > 0;

}
70 changes: 70 additions & 0 deletions src/main/resources/static/js/work-glove/price.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
/**
* 주문서 버튼
*/
let workGloveTenPercentBtn = document.getElementById('work-glove-10-percent-button');
let workGloveSixtyPercentBtn = document.getElementById('work-glove-60-percent-button');
let workGloveHundredPercentBtn = document.getElementById('work-glove-100-percent-button');
let workGlovePriceResetBtn = document.getElementById('work-glove-price-reset-btn');

/**
* 주문서 시도 횟수
*/
let workGloveTenTrial = 0;
let workGloveSixtyTrial = 0;
let workGloveHundredTrial = 0;

/**
* 주문서 버튼 클릭 로직
* 주문서 시도횟수가 증가한다.
*/
workGloveTenPercentBtn.addEventListener('click', function () {
if (!checkCanProceed()) return;
workGloveTenTrial++;
recalculateWorkGloveTotalPrice();
});

workGloveSixtyPercentBtn.addEventListener('click', function () {
if (!checkCanProceed()) return;
workGloveSixtyTrial++;
recalculateWorkGloveTotalPrice();
});

workGloveHundredPercentBtn.addEventListener('click', function () {
if (!checkCanProceed()) return;
workGloveHundredTrial++;
recalculateWorkGloveTotalPrice();
});

/**
* 사용가격 리셋
*/
workGlovePriceResetBtn.addEventListener('click', function () {
workGloveTenTrial = 0;
workGloveSixtyTrial = 0;
workGloveHundredTrial = 0;
recalculateWorkGloveTotalPrice();
});

function recalculateWorkGloveTotalPrice() {
let tenInputElem = document.getElementById('work-glove-10-price');
let sixtyInputElem = document.getElementById('work-glove-60-price');
let hundredInputElem = document.getElementById('work-glove-100-price');
let usedPriceElem = document.getElementById('work-glove-total-used-price');

let tenInput = parseInt(tenInputElem.value);
let sixtyInput = parseInt(sixtyInputElem.value);
let hundredInput = parseInt(hundredInputElem.value);

usedPriceElem.textContent = (
tenInput * workGloveTenTrial +
sixtyInput * workGloveSixtyTrial +
hundredInput * workGloveHundredTrial
).toLocaleString();
}

function checkCanProceed() {
let availableCount = document.getElementById('work-glove-upgrade-available-count');
let count = parseInt(availableCount.textContent);
return count > 0;

}
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import * as util from "./util.js";
import {reduceCount} from "./util.js";
import * as util from "../util.js";
import {reduceCount} from "../util.js";

const tenPercentButton = document.getElementById('work-glove-10-percent-button')
const sixtyPercentButton = document.getElementById('work-glove-60-percent-button')
const hundredPercentButton = document.getElementById('work-glove-100-percent-button')
const resetButton = document.getElementById('work-glove-reset-button')
/**
* 주문서 버튼
*/
let tenPercentButton = document.getElementById('work-glove-10-percent-button')
let sixtyPercentButton = document.getElementById('work-glove-60-percent-button')
let hundredPercentButton = document.getElementById('work-glove-100-percent-button')
let resetButton = document.getElementById('work-glove-reset-button')

let defaultAtk = 0

Expand All @@ -13,11 +16,7 @@ let successGifPath = '../gif/success.gif';
let failureGifPath = '../gif/failure.gif';
let timer = null;

// 주문서 시도 횟수 메소리셋버튼을 누르면 이 값들만 0으로 만들어주면 된다
let tenTrial = 0;
let sixtyTrial = 0;
let hundredTrial = 0;

let priceResetBtn = document.getElementById('work-glove-price-reset-btn');

tenPercentButton.addEventListener('click', function () {
if (!checkAvailableCount()) return;
Expand Down Expand Up @@ -46,6 +45,22 @@ resetButton.addEventListener('click', function () {
resetItem();
});

/**
* 가격입력 텍스트 변화 이벤트
*/

// export function reCalculateTotalPay() {
// let tenInput = document.getElementById('work-glove-10-price').value;
// let sixtyInput = document.getElementById('work-glove-60-price').value;
// let hundredInput = document.getElementById('work-glove-100-price').value;
//
// console.log(typeof tenInput);
// }

/**
* function
*/

function success(atk) {
console.log('scroll success');
let gloveAtkElem = document.getElementById('work-glove-power')
Expand All @@ -67,7 +82,6 @@ function success(atk) {
playSuccessEffect()
}


function fail() {
console.log('scroll fail');
let availableCnt = document.getElementById('work-glove-upgrade-available-count')
Expand Down

0 comments on commit 5ad7201

Please sign in to comment.