- Better overflow management for long username

- Skin update date for bedrock players

Author: NicolasVaillant

config/parameters.js

@@ -185,7 +185,8 @@ const translation = {
         },
         'refresh' : {
             'index': 'Refreshed at _HOUR_',
-            'user': 'Last connection at _HOUR_h_MIN_, _DATE_'
+            'user': 'Last connection at _HOUR_h_MIN_, _DATE_',
+            'skin': 'Last skin update at _HOUR_h_MIN_, _DATE_'
         },
         'card': {
             'best_card_label_avt': 'Current level : _CURRENT_LVL_/_MAX_LEVEL_',
@@ -458,7 +459,8 @@ const translation = {
         },
         'refresh' : {
             'index': 'Mise à jour à _HOUR_',
-            'user': 'Dernière connexion à _HOUR_h_MIN_ le _DATE_'
+            'user': 'Dernière connexion à _HOUR_h_MIN_ le _DATE_',
+            'skin': 'Dernière mise à jour du skin à _HOUR_h_MIN_, _DATE_'
         },
         'card': {
             'best_card_label_avt': 'Niveau actuel : _CURRENT_LVL_/_MAX_LEVEL_',
@@ -732,7 +734,8 @@ const translation = {
         },
         'refresh' : {
             'index': 'Aktualisiert um _HOUR_',
-            'user': 'Zuletzt online am _DATE_ _HOUR_:_MIN_'
+            'user': 'Zuletzt online am _DATE_ _HOUR_:_MIN_',
+            'skin': 'Letztes Skin-Update um _HOUR_h_MIN_, _DATE_'
         },
         'card': {
             'best_card_label_avt': 'Aktuelles Level: _CURRENT_LVL_/_MAX_LEVEL_',

resources/css/style.css

@@ -834,11 +834,14 @@ body{
             justify-content: space-between;
             width: 100%;
             background: var(--background-op);
-            gap: 1em;
+            gap: .5em;
+            overflow-x: auto;
+            flex-wrap: wrap;
             @media all and (max-width: 600px) {
               flex-direction: column!important;
               align-items: flex-start!important;
               .container-title{padding: 1em 1em 0!important}
+              flex-wrap: nowrap;
             }
           }
           .wrapper-content{
@@ -1578,6 +1581,7 @@ body{
               z-index: 0;
               opacity: 0;
               transition: .5s all;
+              flex-wrap: wrap;
               img{
                 width: 2em;
                 aspect-ratio: 1;

resources/css/style.css.map

@@ -576,6 +576,7 @@ function getSkin(player, type) {
     if (player.bedrock === 0) {
         // Not a bedrock player, so we can directly use the name with mc-heads API
         output.url = `https://mc-heads.net/${types[type]}/${player.name}${type === 'BODY_3D_REVERSE' ? '/left' : ''}`;
+        output.type = 'java'
     } else {
         // Bedrock player, so we should get the texture ID thanks to geyser API
         const xuidHex = player.uuid.split('-').join('').toUpperCase();
@@ -596,6 +597,7 @@ function getSkin(player, type) {
             setToast('info', 'Bedrock player\'s skin can\'t be displayed for now.\nTry again later.', 5000);
             output.url = `resources/others/textures/defaultSkin/bedrock-${types[type]}${type === 'BODY_3D_REVERSE' ? '-reverse' : ''}.png`;
         }
+        output.type = 'bedrock'
     }
     return output;
 }

resources/css/style.scss

@@ -314,12 +314,40 @@ function createLabel(array){
 
 function userData(player){
     const last_connection_user = document.querySelector('.last-connection-user')
+    const skin_update = document.querySelector('.skin-update')
     const last_connection = player.last_connection
-    const date = getHM(last_connection)
+    let date = getHM(last_connection)
     last_connection_user.innerHTML = translation[languageSelect].refresh.user
         .replace('_HOUR_', date.h)
         .replace('_MIN_', date.m)
         .replace('_DATE_', date.date);
+    function formatTimestamp(timestamp) {
+        const d = new Date(timestamp);
+        let day = d.getDate();
+        let month = d.getMonth() + 1;
+        let year = d.getFullYear();
+        let hour = d.getHours();
+        let minute = d.getMinutes();
+
+        day = (day < 10 ? '0' : '') + day;
+        month = (month < 10 ? '0' : '') + month;
+        year = (year < 10 ? '0' : '') + year;
+        hour = (hour < 10 ? '0' : '') + hour;
+        minute = (minute < 10 ? '0' : '') + minute;
+        let date = day + '/' + month + '/' + year
+
+        return {hour, minute, date}
+    }
+
+    const {type, last_update} = getSkin(player, 'SKIN')
+    if(type === 'bedrock'){
+        const {hour, minute, date} = formatTimestamp(last_update)
+        skin_update.innerHTML = translation[languageSelect].refresh.skin
+            .replace('_HOUR_', hour)
+            .replace('_MIN_', minute)
+            .replace('_DATE_', date);
+    }
+
 }
 
 function setSkin(player) {

resources/js/shared.js

@@ -83,6 +83,7 @@
                 <div class="title-container">
                     <h1 class="title-section"></h1>
                     <p class="last-connection-user"></p>
+                    <p class="skin-update"></p>
                 </div>
                 <div class="wrapper-content">
                     <div class="user-skin">