Skip to content

Commit 7e860ae

Browse files
NicolasVaillantNicolasVaillant
committed
New comparison page!
> Compare all players on the server > in table or with a nice radar map Also : - Group by family of abilities in the user page > You can now filter these new groups with a cool dropdown - New numeric sorting for user abilities - The back to top button now appears at the bottom of the page - Some components are now in a separate file - New opacity animation for server stats - Simplified content size with media queries
1 parent ad910cf commit 7e860ae

31 files changed

+1159
-7330
lines changed

‎comparison.php‎

Lines changed: 63 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<!-- chartjs -->
1010
<script src="https://cdn.jsdelivr.net/npm/chart.js" defer></script>
1111
<!-- script of the project -->
12+
<script src="resources/js/main.js" defer></script>
1213
<script src="resources/js/comparison.js" defer></script>
1314
</head>
1415
<body>
@@ -20,55 +21,78 @@
2021
</label>
2122
<div class="wrapper">
2223
<?php
23-
$params = array(
24-
'list' => '.table-compare',
25-
'element' => 'div.row-compare',
26-
);
27-
require "resources/php/includes/aside_min.php"
24+
$comparison = true;
25+
$params = array(
26+
'list' => '.table-compare',
27+
'element' => 'div.row-compare',
28+
);
29+
require "resources/php/includes/aside_min.php"
2830
?>
29-
<div class="content-main compare">
30-
<div class="cont">
31-
<div class="top-skin">
32-
<div class="col fp">
33-
<img src="https://mc-heads.net/body/mhd_steve" alt="skin player 1" class="img-compare">
31+
<div class="content-main content compare">
32+
<ul class="collapsible content">
33+
<li class="active avt-glass-effect" id="section_1" data-section="">
34+
<div class="collapsible-header">
35+
<h1 class="title-section">
36+
<span id="section-1"></span>
37+
<i class="fa-solid fa-chevron-right rotate"></i></h1>
3438
</div>
35-
<div class="col fp">
36-
<div class="vs"></div>
37-
<p class="label-vs">VS</p>
39+
<div class="collapsible-body">
40+
<div class="cont">
41+
<div class="top-skin">
42+
<div class="col fp">
43+
<img src="https://mc-heads.net/body/mhd_steve" alt="skin player 1" class="img-compare">
44+
</div>
45+
<div class="col fp">
46+
<div class="vs"></div>
47+
<p class="label-vs">VS</p>
48+
</div>
49+
<div class="col lp">
50+
<img src="https://mc-heads.net/body/mhd_steve/left" alt="skin player 2" class="img-compare">
51+
</div>
52+
</div>
53+
<div class="header-compare">
54+
<div class="line-top">
55+
<label for="player-1">
56+
<select name="player-1" id="s-player-1"></select>
57+
</label>
58+
<div class="cont-vs">
59+
<img src="https://mc-heads.net/avatar/mhd_steve" alt="head player 1" class="img-compare-head">
60+
<div class="vs-compare">VS</div>
61+
<img src="https://mc-heads.net/avatar/mhd_steve" alt="head player 2" class="img-compare-head">
62+
</div>
63+
<label for="player-2">
64+
<select name="player-2" id="s-player-2"></select>
65+
</label>
66+
</div>
67+
</div>
68+
<div class="table-compare"></div>
69+
</div>
3870
</div>
39-
<div class="col lp">
40-
<img src="https://mc-heads.net/body/mhd_steve/left" alt="skin player 2" class="img-compare">
71+
</li>
72+
<li class="active avt-glass-effect" id="section_2" data-section="">
73+
<div class="collapsible-header">
74+
<h1 class="title-section">
75+
<span id="section-2"></span>
76+
<i class="fa-solid fa-chevron-right rotate"></i></h1>
4177
</div>
42-
</div>
43-
<div class="header-compare">
44-
<div class="line-top">
45-
<label for="player-1">
46-
<select name="player-1" id="s-player-1"></select>
47-
</label>
48-
<div class="cont-vs">
49-
<img src="https://mc-heads.net/avatar/mhd_steve" alt="head player 1" class="img-compare-head">
50-
<div class="vs-compare">VS</div>
51-
<img src="https://mc-heads.net/avatar/mhd_steve" alt="head player 2" class="img-compare-head">
78+
<div class="collapsible-body">
79+
<div class="chart-container">
80+
<canvas id="chart_comparison"></canvas>
5281
</div>
53-
<label for="player-2">
54-
<select name="player-2" id="s-player-2"></select>
55-
</label>
5682
</div>
57-
</div>
58-
<div class="table-compare"></div>
59-
</div>
60-
<div class="chart-container">
61-
<canvas id="chart_comparison"></canvas>
62-
</div>
83+
</li>
84+
</ul>
85+
<?php require "resources/php/includes/back_to_top.php" ?>
6386
</div>
6487
</div>
6588
<?php require "resources/php/includes/footer.php" ?>
6689
<?php
67-
$params = array(
68-
'list' => '.table-compare',
69-
'element' => 'div.row-compare',
70-
);
71-
require "resources/php/includes/aside_min_wide.php"
90+
$comparison = true;
91+
$params = array(
92+
'list' => '.table-compare',
93+
'element' => 'div.row-compare',
94+
);
95+
require "resources/php/includes/aside_min_wide.php"
7296
?>
7397
</main>
7498
</body>

‎config/parameters.js‎

Lines changed: 36 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22

33
//Used as template
44
const abilities = ['taming', 'mining', 'woodcutting', 'repair', 'unarmed', 'herbalism', 'excavation', 'archery', 'swords', 'axes', 'acrobatics', 'fishing', 'alchemy']
5+
const families = {
6+
'Gathering': ['Mining', 'Woodcutting', 'Herbalism', 'Fishing'],
7+
'Crafting': ['Repair', 'Alchemy', 'Taming', 'Excavation'],
8+
'Combat': ['Unarmed', 'Swords', 'Axes', 'Archery'],
9+
'Adventuring': ['Acrobatics']
10+
}
511
//If you have changed the default provided by mcMMO, change them here to
612
const abilities_cap = {
713
'swords': 1250,
@@ -45,6 +51,12 @@ const translation = {
4551
'mining': 'mining',
4652
'acrobatics': 'acrobatics'
4753
},
54+
'family': {
55+
'Gathering': 'Gathering',
56+
'Crafting': 'Crafting',
57+
'Combat': 'Combat',
58+
'Adventuring': 'Adventuring'
59+
},
4860
'ab_labels': {
4961
'sum': 'Exp',
5062
'ab': 'Abilities'
@@ -82,14 +94,12 @@ const translation = {
8294
'sc-b-1': 'Leaderboard',
8395
'sc-b-2': 'Chart by abilities',
8496
'sc-b-3': 'Best cumulative abilities',
85-
'sc-b-999': 'Back to top'
8697
},
8798
'user' : {
8899
'sc-b-1': 'Player infos',
89100
'sc-b-2': 'Abilities Level',
90101
'sc-b-3': 'Abilities',
91102
'sc-b-4': 'Comparison chart',
92-
'sc-b-999': 'Back to top',
93103
}
94104
},
95105
'search': {
@@ -102,6 +112,7 @@ const translation = {
102112
'sort_avt': 'Sort',
103113
'sort_a':'Alphabetical sorting',
104114
'sort_n':'Numerical sorting',
115+
'back_to_top': 'Back to top'
105116
},
106117
'select': {
107118
'select-before': 'Show',
@@ -299,6 +310,12 @@ const translation = {
299310
'fishing': 'pêche',
300311
'alchemy': 'potions',
301312
},
313+
'family': {
314+
'Gathering': 'Collecte',
315+
'Crafting': 'Artisanat',
316+
'Combat': 'Combat',
317+
'Adventuring': 'Aventure'
318+
},
302319
'ab_labels': {
303320
'sum': 'Exp',
304321
'ab': 'Capacités'
@@ -323,6 +340,10 @@ const translation = {
323340
'section-2': 'Toutes les capacités',
324341
'section-3': 'Comparaison des capacités',
325342
'section-3-bis': 'La comparaison est effectuée entre le meilleur joueur du serveur et le joueur sélectionné.'
343+
},
344+
'comparison': {
345+
'section-1': 'Comparaison des compétences',
346+
'section-2': 'Graphique de comparaison',
326347
}
327348
},
328349
'aside':{
@@ -336,14 +357,16 @@ const translation = {
336357
'sc-b-1': 'Classement',
337358
'sc-b-2': 'Par capacités',
338359
'sc-b-3': 'Meilleures capacités cumulées',
339-
'sc-b-999': 'Retour en haut'
340360
},
341361
'user' : {
342-
'sc-b-1': 'Informations du joueurs',
362+
'sc-b-1': 'Informations du joueur',
343363
'sc-b-2': 'Niveau de capacités',
344364
'sc-b-3': 'Capacités',
345365
'sc-b-4': 'Graphique de comparaison',
346-
'sc-b-999': 'Retour en haut',
366+
},
367+
'comparison': {
368+
'sc-b-1': 'Comparaison des compétences',
369+
'sc-b-2': 'Graphique de comparaison',
347370
}
348371
},
349372
'search': {
@@ -356,6 +379,7 @@ const translation = {
356379
'sort_avt': 'Trier',
357380
'sort_a':'Tri alphabétique',
358381
'sort_n':'Tri numérique',
382+
'back_to_top': 'Retour en haut'
359383
},
360384
'select': {
361385
'select-before': 'Afficher',
@@ -553,6 +577,12 @@ const translation = {
553577
'mining': 'Bergbau',
554578
'acrobatics': 'Akrobatik'
555579
},
580+
'family': {
581+
'Gathering': 'Sammeln',
582+
'Crafting': 'Basteln',
583+
'Combat': 'Kampf',
584+
'Adventuring': 'Abenteuer'
585+
},
556586
'ab_labels': {
557587
'sum': 'Erfahrung',
558588
'ab': 'Fähigkeiten'
@@ -590,14 +620,12 @@ const translation = {
590620
'sc-b-1': 'Alle Spieler',
591621
'sc-b-2': 'Diagramm nach Fähigkeiten',
592622
'sc-b-3': 'Beste kumulative Fähigkeiten',
593-
'sc-b-999': 'Zurück nach oben'
594623
},
595624
'user' : {
596625
'sc-b-1': 'Spieler Info',
597626
'sc-b-2': 'Fähigkeitsstufe',
598627
'sc-b-3': 'Fähigkeiten',
599628
'sc-b-4': 'Vergleichstabelle',
600-
'sc-b-999': 'Zurück nach oben',
601629
}
602630
},
603631
'search': {
@@ -610,6 +638,7 @@ const translation = {
610638
'sort_avt': 'Sortieren',
611639
'sort_a':'Alphabetische Sortierung',
612640
'sort_n':'Numerische Sortierung',
641+
'back_to_top': 'Zurück nach oben'
613642
},
614643
'select': {
615644
'select-before': 'Zeige',

0 commit comments

Comments
 (0)