I’m making a personal card database for the One Piece Trading Card Game. It’s written in HTML, JavaScrip, and CSS, and when I run the HTML with the “Preview on Web Server” VSCode extension, it gives me exactly 72,819 copies of that error and spins my laptop’s fans while it does so. I’m running it in Microsoft Edge because my school has “Inspect” blocked on Chrome. Aside from that, it is running perfectly. Any advice is appreciated! (Code below)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="Search/OP_search.css">
<title>THE ONE PIIIIEEEECE</title>
<script src="./Search/OP_search_logic.js" defer></script>
</head>
<body>
<form>
<select name="color" id="colors" oninput="searchCards()">
<option value="All">All Colors</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Purple">Purple</option>
<option value="Black">Black</option>
<option value="Yellow">Yellow</option>
</select>
<select name="type" id="types" oninput="searchCards()">
<option value="All">All Types</option>
<!--JS will add the rest from JSON-->
</select>
<select name="card_type" id="card_types" oninput="searchCards()">
<option value="All">All Card Types</option>
<option value="Character">Character</option>
<option value="Leader">Leader</option>
<option value="Event">Event</option>
</select>
<select name="cost" id="costs" oninput="searchCards()">
<option value="All">All Costs</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<select name="counter" id="counters" oninput="searchCards()">
<option value="All">All Cards</option>
<option value="0">0</option>
<option value=">0">>0</option>
<option value="1000">1000</option>
<option value="2000">2000</option>
</select>
<select name="set" id="sets" oninput="searchCards()">
<option value="All">All</option>
<!--JS will add sets from JSON-->
</select>
</form>
<div id="card_body" class="card_list">
<!--JS will add displays for individual cards-->
</div>
</body>
</html>
function getSearchTerms() {
//Taking info from selected options in the HTML
let color = document.getElementById("colors").value;
let type = document.getElementById("types").value;
let card_type = document.getElementById("card_types").value;
let cost = document.getElementById("costs").value;
let counter = document.getElementById("counters").value;
let set = document.getElementById("sets").value;
//returning info as a list
return [card_type, cost, color, type, counter];
};
async function getStorage(file) {
//Obtaining a JSON
const response = await fetch(file);
const json = await response.json();
return json;
};
async function getDropdowns() {
let optcgJSON = await getStorage('./Storage/OPTCG.json');
getTypes(optcgJSON);
getSets(optcgJSON);
}
function getTypes(optcgJSON) {
let set = new Set();
let split;
//Pulling all unique 'Types' from the JSON
for (let i = 0; i < optcgJSON.length; i++) {
split = optcgJSON[i].types.split(';');
for (let j = 0; j < split.length; j++) {
set.add(split[j]);
}
}
//Adding new elements to the 'Types' search term (from the JSON)
let typesSelect = document.querySelector('#types');
for (i of [...set.values()].sort()) {
let tempEl = document.createElement('option');
tempEl.value = i;
tempEl.innerHTML = i;
typesSelect.appendChild(tempEl);
}
};
function getSets(optcgJSON) {
let set = new Set();
//Pulling all unique 'Sets' from the JSON
for (let i = 0; i < optcgJSON.length; i++) {
set.add(optcgJSON[i].id.split('-')[0]);
}
let setSelect = document.querySelector('#sets');
for (i of [...set.values()].sort()) {
let tempEl = document.createElement('option');
tempEl.value = i;
tempEl.innerHTML = i;
setSelect.appendChild(tempEl);
}
};
function displayText(txtid) {
console.log(txtid);
let text = document.getElementById(txtid);
text = text.firstChild;
if (text.style.display == "none") {
text.style.display = "block";
} else {
text.style.display = "none";
}
};
function clearElementById(id) {
document.getElementById(id).innerHTML = "";
};
async function displayCards(arr) {
//Get the cardBody div
let cardBody = document.querySelector('#card_body');
for (i of arr) {
//temporary div (for the card, to be referenced with CSS)
let carddiv = document.createElement('div');
carddiv.class = "card";
cardBody.appendChild(carddiv);
//img div
let imgdiv = document.createElement('div');
let i_img = document.createElement('img');
i_img.style.float = "left";
imgdiv.class = "card_individual";
i_img.setAttribute("src", i.imageUrl);
imgdiv.appendChild(i_img);
//text div
let txtdiv1 = document.createElement('div');
txtdiv1.id = `${i.cleanName}`;
txtdiv1.style = "background-color:#f5f3f1; border-radius: 5vw 5vw 5vw 5vw;";
let txtdiv2 = document.createElement('div');
txtdiv2.id = "txtdiv";
let i_text = document.createElement('p');
i_text.id = "itxt";
i_text.style = 'padding-left: 5vw; padding-right: 5vw; font-family: "Courier-New", monospace; font-size: 10pt;';
i_text.style.display = "none";
i_img.setAttribute("onclick", `displayText('${txtdiv1.id}')`);
//Add text
i_text.innerHTML = `Name: ${i.name}`;
i_text.innerHTML += `<br>Id: ${i.id}`;
i_text.innerHTML += `<br>Card Type: ${i.card_type}`;
i_text.innerHTML += `<br>Color(s): ${i.colors}`;
i_text.innerHTML += `<br>Type(s): ${i.types}`;
if (i.attribute != null)
i_text.innerHTML += `<br>Attribute: ${i.attribute}`;
if (i.power != null)
i_text.innerHTML += `<br>Power: ${i.power}`;
if (i.counter != null)
i_text.innerHTML += `<br>Counter: ${i.counter}`;
if (i.cardText != null)
i_text.innerHTML += `<br>Effect: ${i.cardText}`;
txtdiv1.appendChild(i_text);
txtdiv2.appendChild(txtdiv1);
carddiv.appendChild(imgdiv);
carddiv.appendChild(txtdiv1);
}
};
async function searchCards() {
clearElementById('card_body');
let optcgJSON = await getStorage('./Storage/OPTCG.json');
//0 = card_type, 1 = cost, 2 = color, 3 = type, 4 = counter
let terms = getSearchTerms();
//Array of cards that are included in the search
let includedCards = [];
//Search logic
//"optcgJSON" is a global variable (all cards stored as an array of objects)
for (let i in optcgJSON) {
//card_type (0)
if (optcgJSON[i].card_type != terms[0]
&& terms[0] != "All") {
continue;
}
//cost (1)
if (optcgJSON[i].cost != terms[1]
&& terms[1] != "All") {
continue;
}
//color (2)
ColorCheck: {
if (terms[2] == "All") {
break ColorCheck;
}
if (optcgJSON[i].colors.split(';').length == 1) {
if (optcgJSON[i].colors != terms[2]) {
continue;
}
} else if (optcgJSON[i].colors.split('/')[0] != terms[2]
&& optcgJSON[i].colors.split('/')[1] != terms[2]
&& terms[2] != "All") {
continue;
}
}
//type (3)
let booleanGuy = false;
TypeCheck: {
if (terms[3] == "All") {
break TypeCheck;
}
for (j of optcgJSON[i].types.split(';')) {
if (j == terms[3]) {
booleanGuy = true;
break;
}
}
if (booleanGuy == false) {
continue;
}
}
//counter (4)
booleanGuy = false
CounterCheck: {
if (terms[4] == "All") {
break CounterCheck;
}
if (terms[4] == ">0") {
if (optcgJSON[i].counter > 0) {
break CounterCheck;
} else {
continue;
}
}
if (optcgJSON[i].counter != terms[4]) {
continue;
}
}
includedCards.push(optcgJSON[i]);
}
//duh
displayCards(includedCards);
};
window.onload = () => {
getDropdowns();
searchCards();
};
body {
background-color: #d9d9d9;
width: 100vw;
}
#txtdiv {
background-color:white;
border-radius: 0px 0px 5vw 5vw;
outline-color: black;
}
#txtdiv p {
padding-left: 5vw;
padding-right: 5vw;
font-family: "Courier-New", monospace;
font-size: 10pt;
}
.card_list {
width: 80vw;
padding-left: 10vw;
padding-right: 10vw;
padding-top: 10vw;
margin: auto;
}
.card_individual {
width: 100%;
padding-top: 5vw
}
.card_list img {
width: 100%;
margin: auto;
}
I’ll only give one example of what one of the JSON elements looks like, as there are 2000+ items in the JSON. the JSON file contains an array of all of the card objects.
{
"name": "Trafalgar Law (002)",
"cleanName": "Trafalgar Law 002",
"imageUrl": "https://tcgplayer-cdn.tcgplayer.com/product/453505_200w.jpg",
"cardType": "Leader",
"rarity": "L",
"types": "Heart Pirates;Supernovas",
"id": "OP01-002",
"color": "Green;Red",
"life": "4",
"cardText": "[Activate:Main] [Once Per Turn] (2) <em>(You may rest the specified number of DON!! cards in your cost area.)</em>: If you have 5 Characters, return 1 of your Characters to your hand. Then, play up to 1 Character with a cost of 5 or less from your hand that is a different color than the returned Character.<br><br>rn<a href="https://en.onepiece-cardgame.com/rules/errata_card/#group_20221111-1">This card has been officially errata'd.</a>",
"cost": null,
"power": "5000",
"counter": null,
"attribute": "Slash",
"count": ""
}
I’ve sifted through my code, looking for anything that might produce a cookie, but I honestly have no idea what could be doing this. This warning has shown up a few times on occasion, but never to this degree or scale.