Skip to content

Commit f95403a

Browse files
EfusRyugaEfusRyuga
authored
Add files via upload
1 parent cad3918 commit f95403a

File tree

3 files changed

+387
-3
lines changed

3 files changed

+387
-3
lines changed

‎index.html

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,31 @@
1-
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>usage des classes dans Wakfu</title><link rel="stylesheet" href="styles.css"></head><body><h1>usage des classes dans Wakfu</h1><div class="dropdown-container"><label for="file-selector">Select File:</label><select id="file-selector"></select><label for="tranche-selector">Select Tranche:</label><select id="tranche-selector"></select></div><div id="json-content"></div><script src="scripts.js"></script><footer><p><a href='https://www.wakfu.com/fr/mmorpg'>WAKFU</a>est un MMORPG édité par Ankama. "Ladder-view" est un site non-officiel sans aucun lien avec Ankama. </p></br><p>En cas de bug ou question je suis disponible en message privé sur Discord ->efus_ryuga</p></footer></body></html>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>usage des classes dans Wakfu</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<h1>usage des classes dans Wakfu</h1>
11+
<div class="dropdown-container">
12+
<label for="file-selector">Select File:</label>
13+
<select id="file-selector">
14+
<!-- Options will be populated by JavaScript -->
15+
</select>
16+
17+
<label for="tranche-selector">Select Tranche:</label>
18+
<select id="tranche-selector">
19+
<!-- Options will be populated dynamically -->
20+
</select>
21+
</div>
22+
<div id="json-content"></div>
23+
24+
<script src="scripts.js"></script>
25+
<footer>
26+
<p><a href='https://www.wakfu.com/fr/mmorpg'>WAKFU</a> est un MMORPG édité par Ankama. "Ladder-view" est un site non-officiel sans aucun lien avec Ankama. </p>
27+
</br>
28+
<p>En cas de bug ou question je suis disponible en message privé sur Discord -> efus_ryuga</p>
29+
</footer>
30+
</body>
31+
</html>

‎scripts.js

Lines changed: 228 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,228 @@
1-
const fileSelector=document.getElementById("file-selector"),trancheSelector=document.getElementById("tranche-selector"),jsonContentDiv=document.getElementById("json-content"),headers=["Tranche","Feca","Osamodas","Enutrof","Sram","Xelor","Ecaflip","Eniripsa","Iop","Cra","Sadida","Sacrieur","Pandawa","Roublard","Zobal","Ouginak","Steamer","Eliotrope","Huppermage"],selectedTranches={};async function fetchData(e){try{const t=await fetch(e);if(!t.ok)throw new Error("Network response was not ok");return await t.json()}catch(e){return{}}}function generateTable(e,t=!1){const n=document.createElement("table"),a=document.createElement("thead"),o=document.createElement("tbody"),l=document.createElement("tr");headers.forEach((e=>{const t=document.createElement("th");t.textContent=e,l.appendChild(t)})),a.appendChild(l);let c=headers.slice(1).reduce(((e,t)=>({...e,[t.toLowerCase()]:0})),{}),r=[];if(Object.keys(e).forEach((t=>{const n=e[t],a=document.createElement("tr"),l=[],d=document.createElement("td");d.textContent=t,a.appendChild(d),headers.slice(1).forEach((e=>{const t=document.createElement("td"),o=n[e.toLowerCase()]||0;t.textContent=o,l.push(o),a.appendChild(t),c[e.toLowerCase()]+=o}));const s=[...l].sort(((e,t)=>t-e));a.childNodes.forEach(((e,t)=>{t>0&&e.classList.add((e=>{const t=s.indexOf(e);return 0===t?"gold":1===t?"silver":2===t?"bronze":t<10?"light-green":t<15?"light-red":t>=15?"heavy-red":""})(l[t-1]))})),o.appendChild(a),r.push(a)})),t){const e=document.createElement("tr"),t=document.createElement("td");t.textContent="Total",e.appendChild(t),headers.slice(1).forEach((t=>{const n=document.createElement("td");n.textContent=c[t.toLowerCase()]||0,e.appendChild(n)}));const n=Object.values(c),a=[...n].sort(((e,t)=>t-e)),l=e=>{const t=a.indexOf(e);return 0===t?"gold":1===t?"silver":2===t?"bronze":t<10?"light-green":t<15?"light-red":t>=15?"heavy-red":""};e.childNodes.forEach(((e,t)=>{t>0&&e.classList.add(l(n[t-1]))})),o.appendChild(e)}return n.appendChild(a),n.appendChild(o),n}function updateFileSelector(e){fileSelector.innerHTML="",e.forEach((e=>{fileSelector.appendChild(new Option(e.display_name,e.path))}))}function updateTrancheSelector(e){trancheSelector.innerHTML="",trancheSelector.appendChild(new Option("Show All","show-all")),e&&(Object.keys(e).forEach((e=>{"Total"!==e&&trancheSelector.appendChild(new Option(e,e))})),trancheSelector.appendChild(new Option("Total","total")))}async function loadFiles(){try{const e=[{path:"./ogrest/08-2024.json",display_name:"08-2024 (Ogrest)"},{path:"./rubilax/08-2024.json",display_name:"08-2024 (Rubilax)"},{path:"./pandora/08-2024.json",display_name:"08-2024 (Pandora)"}];updateFileSelector(e),fileSelector.value=e[0].path,await loadFileContent(e[0].path)}catch(e){}}async function loadFileContent(e){trancheSelector.value;const t=await fetchData(e);updateTrancheSelector(t),trancheSelector.value="show-all",displayJson(t,!0),setTimeout((()=>{trancheSelector.value=selectedTranches[e]||"show-all",displayJson(t,"show-all"===trancheSelector.value)}),0)}function displayJson(e,t=!1){jsonContentDiv.innerHTML="";const n=generateTable(e,t);jsonContentDiv.appendChild(n)}fileSelector.addEventListener("change",(function(){loadFileContent(this.value)})),trancheSelector.addEventListener("change",(function(){const e=this.value,t=fileSelector.value;selectedTranches[t]=e,fetchData(t).then((t=>{if("show-all"===e){const e=Object.values(t).reduce(((e,t)=>(Object.keys(t).forEach((n=>{e[n]=(e[n]||0)+t[n]})),e)),{});displayJson({...t,Total:e},!0)}else if("total"===e){displayJson({Total:Object.values(t).reduce(((e,t)=>(Object.keys(t).forEach((n=>{e[n]=(e[n]||0)+t[n]})),e)),{})},!1)}else displayJson({[e]:t[e]})}))})),loadFiles();
1+
const fileSelector = document.getElementById('file-selector');
2+
const trancheSelector = document.getElementById('tranche-selector');
3+
const jsonContentDiv = document.getElementById('json-content');
4+
5+
const headers = ['Tranche', 'Feca', 'Osamodas', 'Enutrof', 'Sram', 'Xelor', 'Ecaflip', 'Eniripsa', 'Iop', 'Cra', 'Sadida', 'Sacrieur', 'Pandawa', 'Roublard', 'Zobal', 'Ouginak', 'Steamer', 'Eliotrope', 'Huppermage'];
6+
7+
// Store previously selected tranche for each file
8+
const selectedTranches = {};
9+
10+
// Function to fetch JSON data
11+
async function fetchData(filePath) {
12+
try {
13+
const response = await fetch(filePath);
14+
if (!response.ok) throw new Error('Network response was not ok');
15+
return await response.json();
16+
} catch (error) {
17+
console.error('Error fetching JSON:', error);
18+
return {};
19+
}
20+
}
21+
22+
// Function to generate table from JSON data
23+
function generateTable(data, includeTotal = false) {
24+
const table = document.createElement('table');
25+
const thead = document.createElement('thead');
26+
const tbody = document.createElement('tbody');
27+
28+
// Create table header
29+
const headerRow = document.createElement('tr');
30+
headers.forEach(headerText => {
31+
const th = document.createElement('th');
32+
th.textContent = headerText;
33+
headerRow.appendChild(th);
34+
});
35+
thead.appendChild(headerRow);
36+
37+
// Create table rows
38+
let totalSum = headers.slice(1).reduce((acc, header) => ({ ...acc, [header.toLowerCase()]: 0 }), {});
39+
let rows = [];
40+
41+
Object.keys(data).forEach(key => {
42+
const values = data[key];
43+
const row = document.createElement('tr');
44+
const cellValues = [];
45+
46+
const tdKey = document.createElement('td');
47+
tdKey.textContent = key;
48+
row.appendChild(tdKey);
49+
50+
headers.slice(1).forEach(header => {
51+
const td = document.createElement('td');
52+
const value = values[header.toLowerCase()] || 0;
53+
td.textContent = value;
54+
cellValues.push(value);
55+
row.appendChild(td);
56+
totalSum[header.toLowerCase()] += value;
57+
});
58+
59+
// Apply coloring based on values
60+
const sortedValues = [...cellValues].sort((a, b) => b - a);
61+
const getClassForValue = (value) => {
62+
const index = sortedValues.indexOf(value);
63+
if (index === 0) return 'gold';
64+
if (index === 1) return 'silver';
65+
if (index === 2) return 'bronze';
66+
if (index < 10) return 'light-green';
67+
if (index < 15) return 'light-red';
68+
if (index >= 15) return 'heavy-red';
69+
return '';
70+
};
71+
72+
row.childNodes.forEach((cell, i) => {
73+
if (i > 0) { // Skip the first cell (tranche key)
74+
cell.classList.add(getClassForValue(cellValues[i - 1]));
75+
}
76+
});
77+
78+
tbody.appendChild(row);
79+
rows.push(row); // Store row for later
80+
});
81+
82+
// Add a row for total if required
83+
if (includeTotal) {
84+
const totalRow = document.createElement('tr');
85+
const totalKey = document.createElement('td');
86+
totalKey.textContent = 'Total';
87+
totalRow.appendChild(totalKey);
88+
89+
headers.slice(1).forEach(header => {
90+
const td = document.createElement('td');
91+
td.textContent = totalSum[header.toLowerCase()] || 0;
92+
totalRow.appendChild(td);
93+
});
94+
95+
// Apply coloring based on values for the total row
96+
const cellValues = Object.values(totalSum);
97+
const sortedValues = [...cellValues].sort((a, b) => b - a);
98+
const getClassForValue = (value) => {
99+
const index = sortedValues.indexOf(value);
100+
if (index === 0) return 'gold';
101+
if (index === 1) return 'silver';
102+
if (index === 2) return 'bronze';
103+
if (index < 10) return 'light-green';
104+
if (index < 15) return 'light-red';
105+
if (index >= 15) return 'heavy-red';
106+
return '';
107+
};
108+
109+
totalRow.childNodes.forEach((cell, i) => {
110+
if (i > 0) { // Skip the first cell (tranche key)
111+
cell.classList.add(getClassForValue(cellValues[i - 1]));
112+
}
113+
});
114+
115+
tbody.appendChild(totalRow);
116+
}
117+
118+
table.appendChild(thead);
119+
table.appendChild(tbody);
120+
return table;
121+
}
122+
123+
// Function to update file selector
124+
function updateFileSelector(files) {
125+
fileSelector.innerHTML = ''; // Clear previous options
126+
files.forEach(file => {
127+
fileSelector.appendChild(new Option(file.display_name, file.path));
128+
});
129+
}
130+
131+
// Function to update tranche selector
132+
function updateTrancheSelector(data) {
133+
trancheSelector.innerHTML = ''; // Clear previous options
134+
trancheSelector.appendChild(new Option('Show All', 'show-all'));
135+
if (data) {
136+
Object.keys(data).forEach(key => {
137+
if (key !== 'Total') {
138+
trancheSelector.appendChild(new Option(key, key));
139+
}
140+
});
141+
trancheSelector.appendChild(new Option('Total', 'total'));
142+
}
143+
}
144+
145+
// Function to load files
146+
async function loadFiles() {
147+
try {
148+
// Update file selector with predefined options
149+
const files = [
150+
{ path: './ogrest/08-2024.json', display_name: '08-2024 (Ogrest)' },
151+
{ path: './rubilax/08-2024.json', display_name: '08-2024 (Rubilax)' },
152+
{ path: './pandora/08-2024.json', display_name: '08-2024 (Pandora)' }
153+
];
154+
155+
updateFileSelector(files);
156+
fileSelector.value = files[0].path;
157+
158+
// Load initial file
159+
await loadFileContent(files[0].path);
160+
} catch (error) {
161+
console.error('Error loading files:', error);
162+
}
163+
}
164+
165+
// Function to load file content
166+
async function loadFileContent(filePath) {
167+
const previousTranche = trancheSelector.value;
168+
const data = await fetchData(filePath);
169+
updateTrancheSelector(data);
170+
171+
// Set tranche selector to 'Show All' and display the data
172+
trancheSelector.value = 'show-all';
173+
displayJson(data, true);
174+
175+
// Restore the previous tranche after a delay to ensure 'Show All' is applied
176+
setTimeout(() => {
177+
trancheSelector.value = selectedTranches[filePath] || 'show-all';
178+
displayJson(data, trancheSelector.value === 'show-all');
179+
}, 0);
180+
}
181+
182+
// Function to display JSON data
183+
function displayJson(data, includeTotal = false) {
184+
jsonContentDiv.innerHTML = ''; // Clear previous content
185+
const table = generateTable(data, includeTotal);
186+
jsonContentDiv.appendChild(table);
187+
}
188+
189+
// Handle file selector change
190+
fileSelector.addEventListener('change', function() {
191+
loadFileContent(this.value);
192+
});
193+
194+
// Handle tranche selector change
195+
trancheSelector.addEventListener('change', function() {
196+
const selectedTranche = this.value;
197+
const filePath = fileSelector.value;
198+
199+
// Save the selected tranche for the current file
200+
selectedTranches[filePath] = selectedTranche;
201+
202+
fetchData(filePath).then(data => {
203+
if (selectedTranche === 'show-all') {
204+
const totalData = Object.values(data).reduce((acc, tranche) => {
205+
Object.keys(tranche).forEach(key => {
206+
acc[key] = (acc[key] || 0) + tranche[key];
207+
});
208+
return acc;
209+
}, {});
210+
211+
displayJson({ ...data, 'Total': totalData }, true);
212+
} else if (selectedTranche === 'total') {
213+
const totalData = Object.values(data).reduce((acc, tranche) => {
214+
Object.keys(tranche).forEach(key => {
215+
acc[key] = (acc[key] || 0) + tranche[key];
216+
});
217+
return acc;
218+
}, {});
219+
220+
displayJson({ 'Total': totalData }, false);
221+
} else {
222+
displayJson({ [selectedTranche]: data[selectedTranche] });
223+
}
224+
});
225+
});
226+
227+
// Initialize
228+
loadFiles();

‎styles.css

Lines changed: 128 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,128 @@
1-
body{font-family:Arial,sans-serif;font-size:14px;margin:0;padding:0;box-sizing:border-box;background-color:#1e1e1e;color:#e0e0e0}h1{font-size:18px;color:#ffffff;text-align:center;margin-top:20px}.dropdown-container{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:20px}label{color:#e0e0e0;margin:0 10px}select{background-color:#2a2a2a;color:#e0e0e0;border:1px solid #ffffff;padding:5px}#json-content{overflow-x:auto;margin:20px auto;max-width:95%}#json-content table{width:100%;border-collapse:collapse;margin-top:20px;table-layout:fixed;background-color:#2a2a2a}#json-content table,#json-content th,#json-content td{border:1px solid #444}#json-content th,#json-content td{padding:9px;text-align:center;color:#e0e0e0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#json-content th{background-color:#1e1e1e;font-weight:bold}#json-content tr:nth-child(even){background-color:#333}#json-content tr:nth-child(odd){background-color:#2a2a2a}.rank{display:block;font-size:20px;color:#666666;text-align:center;margin-bottom:4px}.gold{background-color:#c69d53;color:#000000}.silver{background-color:#777474;color:#000000}.bronze{background-color:#76582b;color:#000000}.light-green{background-color:#689d69}.light-red{background-color:#ad4036}.heavy-red{background-color:#6e1717;color:#000000}footer{background-color:#1e1e1e;padding:20px;margin-top:20px;box-shadow:0 0 10px rgba(0,0,0,.5);text-align:center}footer p{margin:0}footer a{color:#87CEEB}
1+
body {
2+
font-family: Arial, sans-serif;
3+
font-size: 14px;
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
background-color: #1e1e1e; /* Dark background */
8+
color: #e0e0e0; /* Light gray text */
9+
}
10+
11+
h1 {
12+
font-size: 18px;
13+
color: #ffffff;
14+
text-align: center;
15+
margin-top: 20px;
16+
}
17+
18+
.dropdown-container {
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
gap: 20px; /* Space between dropdowns */
23+
margin-top: 20px;
24+
}
25+
26+
label {
27+
color: #e0e0e0; /* Light gray text for labels */
28+
margin: 0 10px; /* Adjust space around labels */
29+
}
30+
31+
select {
32+
background-color: #2a2a2a; /* Darker select background */
33+
color: #e0e0e0; /* Light gray text */
34+
border: 1px solid #ffffff; /* White border */
35+
padding: 5px;
36+
}
37+
38+
#json-content {
39+
overflow-x: auto;
40+
margin: 20px auto;
41+
max-width: 95%;
42+
}
43+
44+
#json-content table {
45+
width: 100%;
46+
border-collapse: collapse;
47+
margin-top: 20px;
48+
table-layout: fixed; /* Ensure columns have equal width */
49+
background-color: #2a2a2a; /* Dark table background */
50+
}
51+
52+
#json-content table, #json-content th, #json-content td {
53+
border: 1px solid #444; /* Darker borders for contrast */
54+
}
55+
56+
#json-content th, #json-content td {
57+
padding: 9px; /* Increase padding for more space */
58+
text-align: center;
59+
color: #e0e0e0; /* Light gray text */
60+
white-space: nowrap; /* Prevent word splitting */
61+
overflow: hidden; /* Hide overflow */
62+
text-overflow: ellipsis; /* Add ellipsis for overflow text */
63+
}
64+
65+
#json-content th {
66+
background-color: #1e1e1e; /* Slightly darker header background */
67+
font-weight: bold;
68+
}
69+
70+
#json-content tr:nth-child(even) {
71+
background-color: #333; /* Dark gray for even rows */
72+
}
73+
74+
#json-content tr:nth-child(odd) {
75+
background-color: #2a2a2a; /* Darker gray for odd rows */
76+
}
77+
78+
.rank {
79+
display: block;
80+
font-size: 20px;
81+
color: #666666; /* Dark gray color for rank */
82+
text-align: center;
83+
margin-bottom: 4px;
84+
}
85+
86+
.gold {
87+
background-color: #c69d53; /* Softer gold color */
88+
color: #000000; /* Black text for better contrast */
89+
}
90+
91+
.silver {
92+
background-color: #777474; /* Softer silver color */
93+
color: #000000; /* Black text for better contrast */
94+
}
95+
96+
.bronze {
97+
background-color: #76582b; /* Softer bronze color */
98+
color: #000000; /* Black text for better contrast */
99+
}
100+
101+
.light-green {
102+
background-color: #689d69; /* Softer light green */
103+
}
104+
105+
.light-red {
106+
background-color: #ad4036; /* Softer light red */
107+
}
108+
109+
.heavy-red {
110+
background-color: #6e1717; /* Softer heavy red */
111+
color: #000000; /* Black text for better contrast */
112+
}
113+
footer {
114+
background-color: #1e1e1e; /* Darker blue for the footer background */
115+
padding: 20px;
116+
margin-top: 20px; /* Adjust margin as needed */
117+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 3D-style box shadow */
118+
text-align: center;
119+
}
120+
121+
footer p {
122+
margin: 0;
123+
}
124+
125+
/* Adjust the color of links in the footer if needed */
126+
footer a {
127+
color: #87CEEB; /* Light blue color for links in the footer */
128+
}

0 commit comments

Comments
 (0)