Deel 2 - Het laadscherm, en het inlogscherm
Introductie
Sinds de opname van de video is de verbinding via Microsoft aangekomen. De details om deze stap te configureren vindt u in deel 4 (verschijnt binnenkort)
Video
Deze handleiding is gebaseerd op de onderstaande video (in het Frans)
Het veranderen van het laadlogo
Onder GitHub Desktop, ga naar Repository-->Toon in Verkenner
. Navigeer dan naar app/assets/images
. LoadingSeal.png
zal de afbeelding zijn die op de achtergrond blijft, terwijl LoadingText.png
de afbeelding zal zijn die draait. Zorg ervoor dat u afbeeldingen in vierkant formaat zijn, zodat het ontwerp van de launcher niet op problemen stuit.
Vervang de 2 bovenstaande foto's door de uwe, zo simpel is het.
Mojang login scherm aanpassing
De verbinding via Mojang wordt alleen aangeboden voor achterwaartse compatibiliteit.
Onder app/login.ejs
, kunt u zich aanpassen zoals hieronder (Dit voorbeeld is veranderd in het Frans):
<div id="loginContainer" style="display: none;">
<div id="loginCancelContainer" style="display: none;">
<button id="loginCancelButton">
<div id="loginCancelIcon">X</div>
<span id="loginCancelText">Annuler</span>
</button>
</div>
<div id="loginContent">
<form id="loginForm">
<img id="loginImageSeal" src="assets/images/SealCircle.png"/>
<span id="loginSubheader">CONNEXION VIA MOJANG</span>
<div class="loginFieldContainer">
<svg id="profileSVG" class="loginSVG" viewBox="40 37 65.36 61.43">
<g>
<path d="M86.77,58.12A13.79,13.79,0,1,0,73,71.91,13.79,13.79,0,0,0,86.77,58.12M97,103.67a3.41,3.41,0,0,0,3.39-3.84,27.57,27.57,0,0,0-54.61,0,3.41,3.41,0,0,0,3.39,3.84Z"/>
</g>
</svg>
<span class="loginErrorSpan" id="loginEmailError">* Valeur invalide</span>
<input id="loginUsername" class="loginField" type="text" placeholder="EMAIL OU NOM D'UTILISATEUR"/>
</div>
<div class="loginFieldContainer">
<svg id="lockSVG" class="loginSVG" viewBox="40 32 60.36 70.43">
<g>
<path d="M86.16,54a16.38,16.38,0,1,0-32,0H44V102.7H96V54Zm-25.9-3.39a9.89,9.89,0,1,1,19.77,0A9.78,9.78,0,0,1,79.39,54H60.89A9.78,9.78,0,0,1,60.26,50.59ZM70,96.2a6.5,6.5,0,0,1-6.5-6.5,6.39,6.39,0,0,1,3.1-5.4V67h6.5V84.11a6.42,6.42,0,0,1,3.39,5.6A6.5,6.5,0,0,1,70,96.2Z"/>
</g>
</svg>
<span class="loginErrorSpan" id="loginPasswordError">* Requis</span>
<input id="loginPassword" class="loginField" type="password" placeholder="MOT DE PASSE"/>
</div>
<div id="loginOptions">
<span class="loginSpanDim">
<a href="https://minecraft.net/password/forgot/">mot de passe oublié?</a>
</span>
<label id="checkmarkContainer">
<input id="loginRememberOption" type="checkbox" checked>
<span id="loginRememberText" class="loginSpanDim">rester connecté?</span>
<span class="loginCheckmark"></span>
</label>
</div>
<button id="loginButton" disabled>
<div id="loginButtonContent">
CONNEXION
<svg id="loginSVG" 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>
<div class="circle-loader">
<div class="checkmark draw"></div>
</div>
<!--<div class="spinningCircle" id="loginSpinner"></div>-->
</div>
</button>
<div id="loginDisclaimer">
<span class="loginSpanDim" id="loginRegisterSpan">
<a href="https://minecraft.net/store/minecraft-java-edition/">Vous n'avez pas de compte Minecraft?</a>
</span>
<p class="loginDisclaimerText">Votre mot de passe est directement envoyé de mannière sécurisée sur les serveurs de Mojang, sans intermédiaire.</p>
<p class="loginDisclaimerText">Mon Launcher n'est pas affilié avec Mojang Studios.</p>
</div>
</form>
</div>
<script src="./assets/js/scripts/login.js"></script>
</div>
Ga dan naar app/assets/lang/en_US.json
en vertaal indien nodig (onderstaand voorbeeld is vertaald van Engels naar Frans)
{
"html": {
"avatarOverlay": "Modifier"
},
"js": {
"login": {
"error": {
"invalidValue": "* Valeur invalide",
"requiredValue": "* Requis",
"userMigrated": {
"title": "Erreur durant la connexion:<br>Identifiants invalides",
"desc": "Vous avez essayé de vous connecter avec un compte migré vers Mojang. Essayez de vous connecter avec l'email à la place du nom d'utilisateur."
},
"invalidCredentials": {
"title": "Erreur durant la connexion:<br>Identifiants invalides",
"desc": "L'e-mail ou le mot de passe que vous avez entré est incorrect. Veuillez réessayer."
},
"rateLimit": {
"title": "Erreur lors de la connexion:<br>Trop de tentatives",
"desc": "Il y a eu trop de tentatives de connexion avec ce compte récemment. Veuillez réessayer plus tard."
},
"noInternet": {
"title": "Erreur lors de la connexion:<br>Pas de connexion Internet",
"desc": "Vous devez être connecté à Internet pour vous connecter. Veuillez vous connecter et réessayer."
},
"authDown": {
"title": "Erreur lors de la connexion:<br>Serveur d'authentification hors ligne",
"desc": "Le serveur d'authentification de Mojang est actuellement hors ligne ou inaccessible. Veuillez patienter un peu et réessayer."
},
"notPaid": {
"title": "Erreur lors de la connexion:<br>Jeu non acheté",
"desc": "Le compte avec lequel vous essayez de vous connecter n'a pas acheté de copie de Minecraft.<br>Vous pouvez acheter une copie sur <a href=\"https://minecraft.net/\">Minecraft.net</a>."
},
"unknown": {
"title": "Erreur lors de la connexion:<br>Erreur inconnue"
}
},
"login": "CONNEXION",
"loggingIn": "CONNEXION EN COURS",
"success": "CONNECTÉ",
"tryAgain": "Veuillez réessayer"
},
"landing": {
"launch": {
"pleaseWait": "Veuillez patienter..."
}
}
}
}
Bij het opnemen van de video had ik een extensie die de ingevoerde tekst corrigeerde, vandaar dat mijn bestand vol fouten zat. Normaal zou het bestand toch geldig moeten zijn.
De beelden van het laadscherm
In GitHub Desktop, druk op Repository-->Toon in verkenner.
Open dan de map app/assets/images
. U hebt 2 bestanden: LoadingSeal.png
en LoadingText.png
. De eerste afbeelding wordt gebruikt als vaste achtergrond voor de tweede die zal roteren.
Om deze stap te voltooien, hoeft u slechts de 2 afbeeldingen te verwijderen en te vervangen door die van uw keuze.
Als u LoadingText.png wilt verwijderen, kun u deze afbeelding downloaden (rechtsklik--->Beeld opslaan als
als de afbeelding zichzelf niet downloadt als u de link opent).
Test de veranderingen
Start
npm start
Als u nog steeds verbinding kunt maken via Mojang, kunt u verbinding maken met de launcher. Anders zullen we in deel 4 zien hoe we Microsoft kunnen configureren.
Stuur wijzigingen naar GitHub
Ga terug naar GitHub Desktop, en vul het formulier linksonder in, en geef aan welke veranderingen u gemaakt hebt (of niet, maar daar zijn deze velden in principe voor), en druk dan op Commit to master
. Druk dan op Push origin
bovenaan.