Second attempt to support bedrock skins

This time the bedrock skin support should be fully OK. Thanks to UUID stored by mcMMO we can easily know if a player is a bedrock player or not. If it is, then we use the TydiumAPI with his UUID to display his skin. Otherwise we still use player name to show his skin.

Author: Royalphax

README.md

@@ -19,7 +19,6 @@ You must provide :
 | server_name          | Your minecraft server name                                     | Hypixel     |
 | server_ip            | Your minecraft server IP address                               | 192.168.1.1 |
 | server_port          | Your minecraft server IP address's port                        | 25565       |
-| server_allow_bedrock | Is your minecraft server allowing bedrock players to connect ? | 0           |
 | db_ip                | mcMMO database's IP address                                    | 192.168.1.2 |
 | db_port              | mcMMO database's port                                          | 3306        |
 | db_name              | mcMMO database's name                                          | mcmmo_data  |

comparison.php

@@ -9,7 +9,6 @@
     <!-- chartjs -->
     <script src="https://cdn.jsdelivr.net/npm/chart.js" defer></script>
     <!-- script of the project -->
-    <script src="resources/js/common.js" defer></script>
     <script src="resources/js/main.js" defer></script>
     <script src="resources/js/comparison.js" defer></script>
 </head>

config/config.php

@@ -13,7 +13,6 @@
     'server_name'           => 'your_server_name',
     'server_ip'             => 'your_server_ip_here',
     'server_port'           => '25565',
-    'server_allow_bedrock'  => 'is_your_server_allowing_bedrock_players_to_connect_?', // 1 = yes, 0 = no
     # About your database
     'db_ip'                 => 'ip_of_your_database_here',
     'db_port'               => 'port_of_your_database_here',

index.php

@@ -9,7 +9,6 @@
     <!-- chartjs -->
     <script src="https://cdn.jsdelivr.net/npm/chart.js" defer></script>
     <!-- script of the project -->
-    <script src="resources/js/common.js" defer></script>
     <script src="resources/js/main.js" defer></script>
     <script src="resources/js/index.js" defer></script>
     <!-- css style used to correctly display data tables -->

resources/js/common.js

@@ -481,18 +481,31 @@ function chartEachAbilities(player){
 }
 
 function addBP(player){
-    const content_bp = document.querySelector('.content_bp')
-    const col1 = createElement('div', 'col')
-    for (let i = 0; i < 2; i++) {
-        const el = createCard(player.players[i], i + 1)
-        col1.appendChild(el)
-        content_bp.appendChild(col1)
-    }
-    const col2 = createElement('div', 'col')
-    for (let i = 2; i < 4; i++) {
-        const el = createCard(player.players[i], i + 1)
-        col2.appendChild(el)
-        content_bp.appendChild(col2)
+    const content_bp = document.querySelector('.content_bp');
+
+    const createColAndCards = (start, end, container) => {
+        const col = document.createElement('div');
+        col.className = 'col';
+        for (let i = start; i < end; i++) {
+            if (player.players[i]) {
+                const el = createCard(player.players[i], i + 1);
+                col.appendChild(el);
+            }
+        }
+        container.appendChild(col);
+    };
+
+    const playerCount = player.players.length;
+
+    if (playerCount >= 2) {
+        createColAndCards(0, 2, content_bp);
+        if (playerCount >= 4) {
+            createColAndCards(2, 4, content_bp);
+        } else {
+            createColAndCards(2, playerCount, content_bp);
+        }
+    } else {
+        createColAndCards(0, playerCount, content_bp);
     }
 
     function createCard(player, rank = null){

resources/js/index.js

@@ -482,4 +482,25 @@ function generateColors(numColors, value = 0) {
         return colors;
     }
 
+}
+
+
+function getSkinURL(player, type) {
+    let types = {
+        'BODY':             'player',
+        'BODY_3D':          'body',
+        'BODY_3D_REVERSE':  'body',
+        'HEAD':             'avatar',
+        'HEAD_3D':          'head'
+    };
+    if (!types[type]) {
+        throw new Error(`Invalid type "${type}". Type must be one of ${Object.keys(types).join(', ')}.`);
+    }
+    if (player.bedrock === 0) {
+        // Not a bedrock player, so we can directly use mc-heads API
+        return 'https://mc-heads.net/' + types[type] + '/' + player.name + (type === 'BODY_3D_REVERSE' ? '/left' : '');
+    } else {
+        // Bedrock player, so we should use Tydium API with uuid
+        return 'https://api.tydiumcraft.net/v1/players/skin?uuid=' + player.uuid + '&type=' + types[type] + (type === 'BODY_3D_REVERSE' ? '&direction=left' : '');
+    }
 }

resources/js/shared.js

@@ -309,7 +309,6 @@ function createLabel(array){
 }
 
 function userData(player){
-    console.log(player)
     const last_connection_user = document.querySelector('.last-connection-user')
     const last_connection = player.last_connection
     const date = getHM(last_connection)

resources/js/user.js

@@ -2,9 +2,6 @@
 
 require "../includes/secure.php";
 
-require "../includes/bedrock.php";
-/** @var ARRAY $allow_bedrock */
-
 require "../includes/db_connect.php";
 /** @var OBJECT $dbh */
 
@@ -25,7 +22,7 @@
         "rank" => $rank,
         "name" => $row['user'],
         "uuid" => $row['uuid'],
-        "bedrock" => $allow_bedrock,
+        "bedrock" => str_starts_with($row['uuid'], '00000000') ? 1 : 0,
         "total" => $row['total'],
         "last_connection" => $row['lastlogin']
     );