Helios Launcher Partie 3: L'écran d'accueil

PrécédentHelios Launcher Partie 2 : L'écran de login et de chargement

Dernière mise à jour il y a 1 an

Cet article vous a-t-il été utile ?

Helios Launcher Partie 3: L'écran d'accueil

Cette version du guide est obselète et la dernière version est disponible

Bienvenue

Dans ce tutoriel, nous allons traduire l'écran d'accueil et changer les réseaux sociaux

Vidéo

Ce tutoriel est la version texte de la vidéo que vous pouvez regardez ci-dessous:

Traduire la page d'accueil

Sous /app/landing.ejs vous devez traduire l'écran d'accueil. Pour ce faire, je vous ai fournis ci-dessous un exemple de fichier:

<div id="landingContainer" style="display: none;">
    <div id="upper">
        <div id="left">
            <div id="image_seal_container">
                <img id="image_seal" src="assets/images/SealCircle.png"/>
                <div id="updateAvailableTooltip">Mise à jour disponible!</div>
            </div>
        </div>
        <div id="content">
        </div>
        <div id="right">
            <div id="rightContainer">
                <div id="user_content">
                    <span id="user_text">Nom d'utilisateur</span>
                    <div id="avatarContainer">
                        <button id="avatarOverlay">Modifier</button>
                    </div>
                </div>
                <div id="mediaContent">
                    <div id="internalMedia">
                        <div class="mediaContainer" id="settingsMediaContainer">
                            <button class="mediaButton" id="settingsMediaButton">
                                <svg id="settingsSVG" class="mediaSVG" viewBox="0 0 141.36 137.43">
                                    <path d="M70.70475616319865,83.36934004916053 a15.320781354859122,15.320781354859122 0 1 1 14.454501310561755,-15.296030496450625 A14.850515045097694,14.850515045097694 0 0 1 70.70475616319865,83.36934004916053 M123.25082856443602,55.425620905968366 h-12.375429204248078 A45.54157947163293,45.54157947163293 0 0 0 107.21227231573047,46.243052436416285 l8.613298726156664,-9.108315894326587 a9.727087354538993,9.727087354538993 0 0 0 0,-13.167456673319956 l-3.465120177189462,-3.6631270444574313 a8.489544434114185,8.489544434114185 0 0 0 -12.375429204248078,0 l-8.613298726156664,9.108315894326587 A40.442902639482725,40.442902639482725 0 0 0 81.99114759747292,25.427580514871032 V12.532383284044531 a9.108315894326587,9.108315894326587 0 0 0 -8.811305593424633,-9.306322761594556 h-4.950171681699231 a9.108315894326587,9.108315894326587 0 0 0 -8.811305593424633,9.306322761594556 v12.895197230826497 a40.17064319698927,40.17064319698927 0 0 0 -9.331073620003052,4.0591407789933704 l-8.613298726156664,-9.108315894326587 a8.489544434114185,8.489544434114185 0 0 0 -12.375429204248078,0 L25.58394128451018,23.967279868769744 a9.727087354538993,9.727087354538993 0 0 0 0,13.167456673319956 L34.19724001066683,46.243052436416285 a45.07131316187151,45.07131316187151 0 0 0 -3.6631270444574313,9.083565035918088 h-12.375429204248078 a9.083565035918088,9.083565035918088 0 0 0 -8.811305593424633,9.306322761594556 v5.197680265784193 a9.108315894326587,9.108315894326587 0 0 0 8.811305593424633,9.306322761594556 h11.979415469712139 a45.69008462208391,45.69008462208391 0 0 0 4.0591407789933704,10.642869115653347 l-8.613298726156664,9.108315894326587 a9.727087354538993,9.727087354538993 0 0 0 0,13.167456673319956 l3.465120177189462,3.6631270444574313 a8.489544434114185,8.489544434114185 0 0 0 12.375429204248078,0 l8.613298726156664,-9.108315894326587 a40.49240435629971,40.49240435629971 0 0 0 9.331073620003052,4.0591407789933704 v12.895197230826497 a9.083565035918088,9.083565035918088 0 0 0 8.811305593424633,9.306322761594556 h4.950171681699231 A9.083565035918088,9.083565035918088 0 0 0 81.99114759747292,123.68848839660077 V110.79329116577425 a40.78941465720167,40.78941465720167 0 0 0 9.331073620003052,-4.0591407789933704 l8.613298726156664,9.108315894326587 a8.489544434114185,8.489544434114185 0 0 0 12.375429204248078,0 l3.465120177189462,-3.6631270444574313 a9.727087354538993,9.727087354538993 0 0 0 0,-13.167456673319956 l-8.613298726156664,-9.108315894326587 a45.665333763675406,45.665333763675406 0 0 0 4.034389920584874,-10.642869115653347 h12.004166328120636 a9.108315894326587,9.108315894326587 0 0 0 8.811305593424633,-9.306322761594556 v-5.197680265784193 a9.083565035918088,9.083565035918088 0 0 0 -8.811305593424633,-9.306322761594556 " id="svg_3" class=""/>
                                </svg>
                                <div id="settingsTooltip">Réglages</div>
                            </button>
                        </div>
                    </div>
                    <div class="mediaDivider"></div>
                    <div id="externalMedia">
                        <div class="mediaContainer">
                            <a href="https://github.com/geekcornerght/geeklauncher" class="mediaURL" id="linkURL">
                                <svg id="linkSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500">
                                    <g>
                                        <path d="M75.37,65.51a3.85,3.85,0,0,0-1.73.42,8.22,8.22,0,0,1,.94,3.76A8.36,8.36,0,0,1,66.23,78H46.37a8.35,8.35,0,1,1,0-16.7h9.18a21.51,21.51,0,0,1,6.65-8.72H46.37a17.07,17.07,0,1,0,0,34.15H66.23A17,17,0,0,0,82.77,65.51Z"/>
                                        <path d="M66,73.88a3.85,3.85,0,0,0,1.73-.42,8.22,8.22,0,0,1-.94-3.76,8.36,8.36,0,0,1,8.35-8.35H95A8.35,8.35,0,1,1,95,78H85.8a21.51,21.51,0,0,1-6.65,8.72H95a17.07,17.07,0,0,0,0-34.15H75.13A17,17,0,0,0,58.59,73.88Z"/>
                                    </g>
                                </svg>
                            </a>
                        </div>
                        <div class="mediaContainer">
                            <a href="https://twitter.com/Mojang" class="mediaURL" id="twitterURL">
                                <svg id="twitterSVG" class="mediaSVG" viewBox="0 0 5000 4060" preserveAspectRatio="xMidYMid meet">	
                                    <g>
                                        <path d="M1210 4048 c-350 -30 -780 -175 -1124 -378 -56 -33 -86 -57 -86 -68 0 -16 7 -17 83 -9 114 12 349 1 493 -22 295 -49 620 -180 843 -341 l54 -38 -49 -7 c-367 -49 -660 -256 -821 -582 -30 -61 -53 -120 -51 -130 3 -16 12 -17 73 -13 97 7 199 5 270 -4 l60 -9 -65 -22 c-341 -117 -609 -419 -681 -769 -18 -88 -26 -226 -13 -239 4 -3 32 7 63 22 68 35 198 77 266 86 28 4 58 9 68 12 10 2 -22 -34 -72 -82 -240 -232 -353 -532 -321 -852 15 -149 79 -347 133 -418 16 -20 17 -19 49 20 377 455 913 795 1491 945 160 41 346 74 485 86 l82 7 -7 -59 c-5 -33 -7 -117 -6 -189 2 -163 31 -286 103 -430 141 -285 422 -504 708 -550 112 -19 333 -19 442 0 180 30 335 108 477 239 l58 54 95 -24 c143 -36 286 -89 427 -160 70 -35 131 -60 135 -56 19 19 -74 209 -151 312 -50 66 -161 178 -216 217 l-30 22 73 -14 c111 -21 257 -63 353 -101 99 -39 99 -39 99 -19 0 57 -237 326 -412 468 l-88 71 6 51 c4 28 1 130 -5 226 -30 440 -131 806 -333 1202 -380 745 -1036 1277 -1823 1477 -243 62 -430 81 -786 78 -134 0 -291 -5 -349 -10z"/>
                                    </g>
                                </svg>
                            </a>
                        </div>
                        <div class="mediaContainer">
                            <a href="https://ytgeek.gq" class="mediaURL" id="youtubeURL">
                                <svg id="youtubeSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500">
                                    <g>
                                        <path d="M84.8,69.52,65.88,79.76V59.27Zm23.65.59c0-5.14-.79-17.63-3.94-20.57S99,45.86,73.37,45.86s-28,.73-31.14,3.68S38.29,65,38.29,70.11s.79,17.63,3.94,20.57,5.52,3.68,31.14,3.68,28-.74,31.14-3.68,3.94-15.42,3.94-20.57"/>
                                    </g>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="lower">
        <div id="left">
            <div class="bot_wrapper">
                <div id="content">
                    <div id="server_status_wrapper">
                        <span class="bot_label" id="landingPlayerLabel">SERVEUR</span>
                        <span id="player_count">HORS-LIGNE</span>
                    </div>
                    <div class="bot_divider"></div>
                    <div id="mojangStatusWrapper">
                        <span class="bot_label">STATUS DES SERVEURS MOJANG STUDIOS</span>
                        <span id="mojang_status_icon">&#8226;</span>
                        <div id="mojangStatusTooltip">
                            <div id="mojangStatusTooltipTitle">Services</div>
                            <div id="mojangStatusEssentialContainer">
                                <!-- Essential Mojang services are populated here. -->
                            </div>
                            <div id="mojangStatusNEContainer">
                                <div class="mojangStatusNEBar"></div>
                                <div id="mojangStatusNETitle">Non&nbsp;Essentiel</div>
                                <div class="mojangStatusNEBar"></div>
                            </div>
                            <div id="mojangStatusNonEssentialContainer">
                                <!-- Non Essential Mojang services are populated here. -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="center">
            <div class="bot_wrapper">
                <div id="content">
                    <button id="newsButton">
                        <!--<img src="assets/images/icons/arrow.svg" id="newsButtonSVG"/>-->
                        <div id="newsButtonAlert" style="display: none;"></div>
                        <svg id="newsButtonSVG" viewBox="0 0 24.87 13.97">
                            <defs>
                                <style>.arrowLine{fill:none;stroke:#FFF;stroke-width:2px;}</style>
                            </defs>
                            <polyline class="arrowLine" points="0.71 13.26 12.56 1.41 24.16 13.02"/>
                        </svg>
                        &#10;<span id="newsButtonText">NEWS</span>
                    </button>
                </div>
            </div>
        </div>
        <div id="right">
            <div class="bot_wrapper">
                <div id="launch_content">
                    <button id="launch_button">JOUER</button>
                    <div class="bot_divider"></div>
                    <button id="server_selection_button" class="bot_label">&#8226; Aucun serveur sélectionné</button>
                </div>
                <div id="launch_details">
                    <div id="launch_details_left">
                        <span id="launch_progress_label">0%</span>
                        <div class="bot_divider"></div>
                    </div>
                    <div id="launch_details_right">
                        <progress id="launch_progress" value="22" max="100"></progress>
                        <span id="launch_details_text" class="bot_label">Patientez...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="newsContainer">
        <div id="newsContent" article="-1" style="display: none;">
            <div id="newsStatusContainer">
                <div id="newsStatusContent">
                    <div id="newsTitleContainer">
                        <a id="newsArticleTitle" href="#">Lorem Ipsum</a>
                    </div>
                    <div id="newsMetaContainer">
                        <div id="newsArticleDateWrapper">
                            <span id="newsArticleDate">Mar 15, 44 BC, 9:14 AM</span>
                        </div>
                        <div id="newsArticleAuthorWrapper">
                            <span id="newsArticleAuthor">by Cicero</span>
                        </div>
                        <a href="#" id="newsArticleComments">0 Comments</a>
                    </div>
                </div>
                <div id="newsNavigationContainer">
                    <button id="newsNavigateLeft">
                        <svg id="newsNavigationLeftSVG" viewBox="0 0 24.87 13.97">
                            <defs>
                                <style>.arrowLine{fill:none;stroke:#FFF;stroke-width:2px;transition: 0.25s ease;}</style>
                            </defs>
                            <polyline class="arrowLine" points="0.71 13.26 12.56 1.41 24.16 13.02"/>
                        </svg>
                    </button>
                    <span id="newsNavigationStatus">1 sur 1</span>
                    <button id="newsNavigateRight">
                        <svg id="newsNavigationRightSVG" viewBox="0 0 24.87 13.97">
                            <defs>
                                <style>.arrowLine{fill:none;stroke:#FFF;stroke-width:2px;transition: 0.25s ease;}</style>
                            </defs>
                            <polyline class="arrowLine" points="0.71 13.26 12.56 1.41 24.16 13.02"/>
                        </svg>
                    </button>
                </div>
            </div>
            <div id="newsArticleContainer">
                <div id="newsArticleContent">
                    <div id="newsArticleContentScrollable">
                        <!-- Article Content -->
                    </div>
                </div>
            </div>
        </div>
        <div id="newsErrorContainer">
            <div id="newsErrorLoading">
                <span id="nELoadSpan" class="newsErrorContent">Vérification des news...</span>
            </div>
            <div id="newsErrorFailed" style="display: none;">
                <span id="nEFailedSpan" class="newsErrorContent">Impossible de charger les news</span>
                <button id="newsErrorRetry">Réessayer</button>
            </div>
            <div id="newsErrorNone" style="display: none;">
                <span id="nENoneSpan" class="newsErrorContent">Rien de neuf...</span>
            </div>
        </div>
    </div>
    <script src="./assets/js/scripts/landing.js"></script>
</div>

Les réseaux sociaux

Pour les réseaux sociaux, nous avons ligne 30 un élément div qui est assigné à la classe mediaDivider. En dessous, vous avez divers réseaux sociaux. Ceux que vous ne voulez pas, vous les supprimez proprement, et pour les autres, modifiez la valeur de href afin de correspondre à vos liens. Puis supprimez le disabled afin d'activer les icones.

Mon skin est torse-nu!!

Les status Mojang!

Allez dans /app/assets/js/mojang.js puis modifier les valeur name afin de pouvoir traduire. Voici ici un exemple:

/**
 * Mojang
 * 
 * This module serves as a minimal wrapper for Mojang's REST api.
 * 
 * @module mojang
 */
// Requirements
const request = require('request')
const logger  = require('./loggerutil')('%c[Mojang]', 'color: #a02d2a; font-weight: bold')

// Constants
const minecraftAgent = {
    name: 'Minecraft',
    version: 1
}
const authpath = 'https://authserver.mojang.com'
const statuses = [
    {
        service: 'session.minecraft.net',
        status: 'grey',
        name: 'Service des sessions multijoueur',
        essential: true
    },
    {
        service: 'authserver.mojang.com',
        status: 'grey',
        name: 'Service d\'authentification',
        essential: true
    },
    {
        service: 'textures.minecraft.net',
        status: 'grey',
        name: 'Skins Minecraft',
        essential: false
    },
    {
        service: 'api.mojang.com',
        status: 'grey',
        name: 'API Publique',
        essential: false
    },
    {
        service: 'minecraft.net',
        status: 'grey',
        name: 'Minecraft.net',
        essential: false
    },
    {
        service: 'account.mojang.com',
        status: 'grey',
        name: 'Site des comptes Mojang',
        essential: false
    }
]

// Pas besoin de modifier la suite du fichier

Players

Pour traduire ça, rendez-vous dans le fichier /app/assets/js/scripts/landing.js puis lignes 223, 224, et 230, traduisez à votre convenance. Vous devriez avoir un résultat similaire

//extrait de landing.js lignes 219 à 249
const refreshServerStatus = async function(fade = false){
    loggerLanding.log('Refreshing Server Status')
    const serv = DistroManager.getDistribution().getServer(ConfigManager.getSelectedServer())

    let pLabel = 'SERVEUR'
    let pVal = 'HORS-LIGNE'

    try {
        const serverURL = new URL('my://' + serv.getAddress())
        const servStat = await ServerStatus.getStatus(serverURL.hostname, serverURL.port)
        if(servStat.online){
            pLabel = 'JOUEURS'
            pVal = servStat.onlinePlayers + '/' + servStat.maxPlayers
        }

    } catch (err) {
        loggerLanding.warn('Unable to refresh server status, assuming offline.')
        loggerLanding.debug(err)
    }
    if(fade){
        $('#server_status_wrapper').fadeOut(250, () => {
            document.getElementById('landingPlayerLabel').innerHTML = pLabel
            document.getElementById('player_count').innerHTML = pVal
            $('#server_status_wrapper').fadeIn(500)
        })
    } else {
        document.getElementById('landingPlayerLabel').innerHTML = pLabel
        document.getElementById('player_count').innerHTML = pVal
    }
    
}

Checking for news

Toujours dans landing.js, ligne 862, traduisez à votre convenance. Vous devriez avoir au final votre fonction qui ressemble à ceci:

// extrait de landing.js lignes 860 à 879
function setNewsLoading(val){
    if(val){
        const nLStr = 'Vérification des actualitées'
        let dotStr = '...'
        nELoadSpan.innerHTML = nLStr + dotStr
        newsLoadingListener = setInterval(() => {
            if(dotStr.length >= 3){
                dotStr = ''
            } else {
                dotStr += '.'
            }
            nELoadSpan.innerHTML = nLStr + dotStr
        }, 750)
    } else {
        if(newsLoadingListener != null){
            clearInterval(newsLoadingListener)
            newsLoadingListener = null
        }
    }
}

Pousser les modifications sur GitHub

Retournez dans GitHub Desktop et remplissez en bas à gauche le formulaire en expliquant (ou pas) les changements effectués. Puis pressez commit to master

Pour finir pressez push origin

Enjoy

Nous en avons fini avec la partie 3, j'espère bientôt faire la partie 4. 😊