- 생각해보니 경우에 따라 파일로 내리는 케이스가 있겠지만, 그게 귀찮을 수도 있으니 텍스트 박스 하나 두고, 복사를 붙여넣기 해서 하도록 추가 작업을 진행함
<!DOCTYPE html>
<html>
<head>
<title>Card List Parser</title>
</head>
<textarea id="textInput" rows="10" cols="50"></textarea><br>
<button id="applyButton">Apply</button>
<button id="resetButton">Reset</button>
<input type="file" id="fileInput" />
<label><input type="checkbox" id="toggleInfo"> Show card names only</label>
<div id="cardListOutput"></div>
<script>
document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
document.getElementById('toggleInfo').addEventListener('change', handleToggleChange, false);
document.getElementById('applyButton').addEventListener('click', function() {
const textInput = document.getElementById('textInput').value;
const cards = parseCardList(textInput);
displayCards(cards, false);
});
document.getElementById('resetButton').addEventListener('click', function() {
document.getElementById('textInput').value = '';
document.getElementById('cardListOutput').innerHTML = '';
});
let cards = [];
function handleFileSelect(event) {
const file = event.target.files[0];
if (!file) {
return;
}
const reader = new FileReader();
reader.onload = function(fileEvent) {
const text = fileEvent.target.result;
cards = parseCardList(text);
const sortedCards = sortCards(cards);
displayCards(sortedCards, false);
};
reader.readAsText(file);
}
function handleToggleChange() {
const isChecked = document.getElementById('toggleInfo').checked;
displayCards(cards, isChecked);
}
function displayCards(cards, showNamesOnly) {
const outputDiv = document.getElementById('cardListOutput');
outputDiv.innerHTML = '';
// 장수별 컬러
const quantityColorMap = {
2: 'blue',
3: 'green',
4: 'orange',
5: 'red'
};
cards.forEach(card => {
let color = quantityColorMap[card.quantity] || 'black';
// 카드 정보 표시
const cardElement = document.createElement('div');
if (showNamesOnly) {
cardElement.innerHTML = `<strong style="color: ${color};">${card.name}</strong><hr>`;
} else {
cardElement.innerHTML = `<br>${card.edition} (${card.condition}, Quantity: ${card.quantity}, Price: $${card.price.toFixed(2)}, Total: $${card.total.toFixed(2)})</br><strong style="color: ${color};">${card.name}</strong><hr>`;
}
// 클릭 시, 바뀌는 배경 컬러
const bgColors = ['white', '#add8e6', '#90ee90'];
let currentColorIndex = 0;
// 클릭시 배경 변경
cardElement.style.cursor = 'pointer';
cardElement.onclick = function() {
currentColorIndex = (currentColorIndex + 1) % bgColors.length;
this.style.backgroundColor = bgColors[currentColorIndex];
};
outputDiv.appendChild(cardElement);
});
}
function parseCardList(cardListText)
{
const lines = cardListText.split('\\n');
let currentCondition = '';
lines.forEach(line => {
if ((/^\\s*$/.test(line)) || (/SINGLES\\s*$/.test(line)) || (/Description\\s*/.test(line))) {
return;
}
const firstColonIndex = line.indexOf(':');
if (firstColonIndex === -1) return; // 카드명, 판본 분리, ':'가 없으면 유효 X
const name = line.substring(0, firstColonIndex).trim();
const restLine = line.substring(firstColonIndex + 1).trim();
const parts = restLine.split('\\t'); // 나머지 분리
if (parts.length >= 4) {
const edition = parts[0].trim();
const condition = parts[1].trim();
const quantity = parseInt(parts[2]);
const price = parseFloat(parts[3].substring(1));
const total = parseFloat(parts[4].substring(1));
cards.push({
name,
edition,
condition,
quantity,
price,
total
});
}
});
return cards;
}
function sortCards(cards) {
const conditionOrder = {
'NM': 1,
'EX': 2,
'G': 3,
'VG': 4
};
// 상태 / 판본 / 이름 순 정렬
return cards.sort((a, b) => {
const conditionCompare = (conditionOrder[a.condition] || 5) - (conditionOrder[b.condition] || 5);
if (conditionCompare !== 0) return conditionCompare;
const editionCompare = a.edition.localeCompare(b.edition);
if (editionCompare !== 0) return editionCompare;
return a.name.localeCompare(b.name);
});
}
</script>
</body>
</html>
- 코드는 거의 같고, 텍스트 박스에 잘 복사해서 ctrl cv 한 뒤에 apply 누르면 동작함.
- 경우에 따라 파일로 내려야 할 수 있어서, 파일로 부터 동작하는 기능은 그냥 둠