Skip to content

Commit 4912f21

Browse files
NicolasVaillantNicolasVaillant
committed
- "See profile" button now visible for small devices
- Best player is now always on bottom of radar chart (comparison page) - All colors in chart are fix - New "setColorsToRoot" function to set tintX_50 variable with 50% opacity (JS usage)
1 parent 3ec69d3 commit 4912f21

File tree

8 files changed

+158
-30
lines changed

8 files changed

+158
-30
lines changed

‎comparison.php‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,22 @@
6464
<select name="player-1" id="s-player-1"></select>
6565
</label>
6666
<div class="cont-vs">
67-
<img src="https://mc-heads.net/avatar/mhd_steve" alt="head player 1" class="img-compare-head">
67+
<div class="player">
68+
<img src="https://mc-heads.net/avatar/mhd_steve" alt="head player 1" class="img-compare-head">
69+
<a class="a-compare btn-main">
70+
<span class="see_profile"></span>
71+
<i class="fa-solid">↗</i>
72+
</a>
73+
</div>
6874
<div class="vs-compare">VS</div>
69-
<img src="https://mc-heads.net/avatar/mhd_steve" alt="head player 2" class="img-compare-head">
70-
</div>
75+
<div class="player sec">
76+
<img src="https://mc-heads.net/avatar/mhd_steve" alt="head player 2" class="img-compare-head">
77+
<a class="a-compare btn-main">
78+
<span class="see_profile"></span>
79+
<i class="fa-solid">↗</i>
80+
</a>
81+
</div>
82+
</div>
7183
<label for="player-2">
7284
<select name="player-2" id="s-player-2"></select>
7385
</label>

‎resources/css/style.css‎

Lines changed: 56 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/css/style.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/css/style.scss‎

Lines changed: 55 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -960,6 +960,14 @@ body{
960960
}
961961
}
962962

963+
.recommendations{
964+
padding: 1em;
965+
border-radius: 5px;
966+
background: red;
967+
background: linear-gradient(white, white) padding-box, linear-gradient(to right, #9867f0, #ed4e50) border-box;
968+
border: 2px solid transparent;
969+
}
970+
963971
.collapsible-body{
964972
overflow: hidden;
965973
.right-align{
@@ -1243,6 +1251,29 @@ body{
12431251
.line-top{
12441252
@include element;
12451253
width: 100%;
1254+
.player{
1255+
display: flex;
1256+
align-items: center;
1257+
width: 100%;
1258+
padding: 1em;
1259+
gap: 1em;
1260+
a{
1261+
display: none;
1262+
width: fit-content;
1263+
color: var(--active-color);
1264+
text-decoration: none;
1265+
line-height: inherit;
1266+
@media screen and (max-width: 700px){
1267+
display: flex!important;
1268+
}
1269+
@media screen and (max-width: 550px){
1270+
.see_profile{display: none}
1271+
}
1272+
}
1273+
&.sec{
1274+
flex-direction: row-reverse;
1275+
}
1276+
}
12461277
label{
12471278
width: 100%;
12481279
padding: 1em;
@@ -1266,18 +1297,18 @@ body{
12661297
}
12671298
.vs-compare{font-weight: bold}
12681299
}
1269-
@media screen and (max-width: 600px){
1300+
@media screen and (max-width: 700px){
12701301
grid-template-columns:1fr;
1271-
.cont-vs{padding: 0 1em}
1302+
//.cont-vs{padding: 0 1em}
12721303
label{
12731304
display: flex;
1274-
width: 50%;
1305+
#s-player-2{text-align: end}
12751306
&:first-child{margin-right: auto}
12761307
&:last-child{margin-left: auto}
12771308
}
12781309
}
12791310
}
1280-
@media all and (max-width: 600px) {
1311+
@media all and (max-width: 700px) {
12811312
position: relative;
12821313
top: 0;
12831314
}
@@ -1298,6 +1329,7 @@ body{
12981329
background: var(--background-op);
12991330
width: 100%;
13001331
padding: .6em 1em;
1332+
white-space: nowrap;
13011333
p{
13021334
text-transform: capitalize;
13031335
padding: 0.2em 0.5em;
@@ -1322,6 +1354,17 @@ body{
13221354
padding: .6em;
13231355
}
13241356
}
1357+
@media all and (max-width: 500px) {
1358+
flex-wrap: wrap;
1359+
gap: 0.5em;
1360+
p{
1361+
&:nth-child(2){
1362+
flex-basis: 100%;
1363+
order: -1;
1364+
text-align: center;
1365+
}
1366+
}
1367+
}
13251368
}
13261369
.line-1{
13271370
@include element;
@@ -1346,7 +1389,10 @@ body{
13461389
}
13471390
&:first-child{
13481391
justify-content: flex-end;
1349-
.label-bg{background: var(--grad1);}
1392+
.label-bg{
1393+
border: 1px solid var(--tint1_);
1394+
background: var(--tint1_50);
1395+
}
13501396
.label-bg,
13511397
.label-bg-max{
13521398
right: 0;
@@ -1359,7 +1405,10 @@ body{
13591405
}
13601406
&:last-child{
13611407
justify-content: flex-start;
1362-
.label-bg{background: var(--grad2);}
1408+
.label-bg{
1409+
border: 1px solid var(--tint2_);
1410+
background: var(--tint2_50);
1411+
}
13631412
.label-bg,
13641413
.label-bg-max{
13651414
left: 0;

‎resources/js/comparison.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,19 +153,22 @@ function setSkinCompare(players, len, a = null){
153153
const img = document.querySelectorAll('.img-compare')
154154
const a_href = document.querySelectorAll('.a-compare')
155155
const img_h = document.querySelectorAll('.img-compare-head')
156+
console.log(a_href)
156157
img.forEach((e, i) => {
157158
const { value_1, value_2 } = values();
158159
a_href[i].querySelector('span').innerHTML = translation[languageSelect].content_page.pages.comparison.link.see_profile
160+
a_href[i+2].querySelector('span').innerHTML = translation[languageSelect].content_page.pages.comparison.link.see_profile
159161
if(i === 0){
160162
e.src = getSkin(playerdata_1, 'BODY_3D').url
161163
a_href[i].href = `user.php?q=${value_1}`
164+
a_href[i+2].href = `user.php?q=${value_1}`
162165
}else{
163166
e.src = getSkin(playerdata_2, 'BODY_3D_REVERSE').url
164167
a_href[i].href = `user.php?q=${value_2}`
168+
a_href[i+2].href = `user.php?q=${value_2}`
165169
}
166170
})
167171
img_h.forEach((e, i) => {
168-
const { value_1, value_2 } = values();
169172
e.value = (i === 0) ?
170173
e.src = getSkin(playerdata_1, 'HEAD').url :
171174
e.src = getSkin(playerdata_2, 'HEAD').url
@@ -365,6 +368,13 @@ function chartComparison(data){
365368
}
366369
)
367370
}
371+
372+
datasets.sort((a, b) => {
373+
const sumA = a.data.reduce((acc, curr) => acc + curr, 0);
374+
const sumB = b.data.reduce((acc, curr) => acc + curr, 0);
375+
return sumA - sumB;
376+
});
377+
368378
let data_conf = {
369379
labels: Object.values(translation[languageSelect].ab),
370380
datasets: datasets,

‎resources/js/index.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -88,18 +88,21 @@ function dataBaseError(){
8888
function loadDatasetChartAbilities(player){
8989
const user = player.players
9090
let dataset = []
91-
91+
let color
9292
for (let i = 0; i < user.length; i++) {
9393
if(user[i] !== undefined){
94+
color = generateColors(0, i+1)[0]
95+
if(color === '')
96+
color = generateColors(0, i)[0]
9497
dataset.push(
9598
{
9699
label : user[i].name,
97100
data : function (){
98101
return user[i].skills
99102
}(),
100103
hidden: false,
101-
borderColor: generateColors(7),
102-
backgroundColor: generateColors(7, i)
104+
backgroundColor: hexToRGBA(color),
105+
borderColor: color
103106
}
104107
)
105108
}

‎resources/js/shared.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,15 @@ window.onload = function (){
3131
const elems = document.querySelectorAll('.collapsible');
3232
M.Collapsible.init(elems, options_collapsible);
3333
iconModifier(elems)
34+
setColorsToRoot()
35+
}
36+
function setColorsToRoot(){
37+
for (let i = 1; i <= 7; i++) {
38+
document.documentElement.style.setProperty(`--tint${i}_50`, hexToRGBA(
39+
getComputedStyle(document.documentElement).getPropertyValue(`--tint${i}_`)
40+
));
41+
}
3442
}
35-
3643
copyToClipboardAction.forEach(e => {
3744
e.addEventListener('click', function () {
3845
e.classList.add('clicked')
@@ -545,7 +552,6 @@ function hexToRGBA(hex) {
545552
let r = parseInt(hex.substring(0, 2), 16);
546553
let g = parseInt(hex.substring(2, 4), 16);
547554
let b = parseInt(hex.substring(4, 6), 16);
548-
let a = 1;
549555
return `rgba(${r},${g},${b},${.5})`
550556
}
551557

‎resources/js/user.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -218,8 +218,6 @@ const CalcFamilies = function (data){
218218
const ctx_compare = document.getElementById('chart_user_compare');
219219
let chartCompareGraph
220220
function chartCompare(best_player, current_player){
221-
const tint1 = getComputedStyle(document.documentElement).getPropertyValue('--tint1')
222-
const tint5 = getComputedStyle(document.documentElement).getPropertyValue('--tint5')
223221
let tp = []
224222
tp.push(current_player, best_player)
225223
let datasets = []
@@ -230,8 +228,8 @@ function chartCompare(best_player, current_player){
230228
data : function (){
231229
return tp[i].skills
232230
}(),
233-
borderColor: [tint1, tint5],
234-
backgroundColor: generateColors(7, i)
231+
borderColor : generateColors(0, i+1)[0],
232+
backgroundColor : hexToRGBA(generateColors(0, i+1)[0])
235233
}
236234
)
237235
}
@@ -867,7 +865,10 @@ function setChart(player){
867865
beginAtZero: true
868866
}
869867
},
870-
maintainAspectRatio: false
868+
maintainAspectRatio: false,
869+
plugins: {
870+
legend: {display: false}
871+
}
871872
}
872873
};
873874

0 commit comments

Comments
 (0)