Merge remote-tracking branch 'origin/master' into eric_front_and_back

srcs/requirements/svelte/api_front/public/global.css

@@ -26,6 +26,16 @@ body {
 	font-display: swap;
 }
 
+@font-face {
+	font-family: "Bit5x3";
+	src:
+		url("/fonts/Bit5x3.woff2") format("woff2"),
+		local("Bit5x3"),
+		url("/fonts/Bit5x3.woff") format("woff");
+	font-weight: normal;
+	font-style: normal;
+	font-display: swap;
+}
 
 a {
 	color: rgb(0,100,200);

srcs/requirements/svelte/api_front/src/pages/game/Game.svelte

@@ -390,19 +390,20 @@
 		{/if}
 	{/if}
 
+<div id="preload_font">.</div>
+
 </div> <!-- div "game_page" -->
 
 <style>
-@font-face {
+
+#preload_font {
 	font-family: "Bit5x3";
-	src:
-		url("/fonts/Bit5x3.woff2") format("woff2"),
-		local("Bit5x3"),
-		url("/fonts/Bit5x3.woff") format("woff");
-	font-weight: normal;
-	font-style: normal;
-	font-display: swap;
+	opacity:0;
+	height:0;
+	width:0;
+	display:inline-block;
 }
+
 .dim_background {
 	background-color: #222;
 }

srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte

@@ -175,19 +175,19 @@
 		</div>
 	{/if}
 
+<div id="preload_font">.</div>
+
 </div> <!-- div "game_page" -->
 
 <!--  -->
 <style>
-@font-face {
+
+#preload_font {
 	font-family: "Bit5x3";
-	src:
-		url("/fonts/Bit5x3.woff2") format("woff2"),
-		local("Bit5x3"),
-		url("/fonts/Bit5x3.woff") format("woff");
-	font-weight: normal;
-	font-style: normal;
-	font-display: swap;
+	opacity:0;
+	height:0;
+	width:0;
+	display:inline-block;
 }
 
 .dim_background {

srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte

@@ -51,7 +51,7 @@
 		.then((response) => {
 			if (!response.ok) {
 				success.username = ''
-				errors.username = "Something went wrong";
+				errors.username = "Max length : 50 . Use [a-zA-Z0-9] and - _ .";
 				if (response.status === 409) {
 					errors.username = `${set.username} is already in use, pick a different one.`;
 				}
@@ -93,9 +93,11 @@
 		)
 		.then((response) => {
 			if (!response.ok) {
+				success.avatar = ''
 				errors.avatar = response.statusText;
 				throw new Error("HTTP " + response.status);
 			}
+			errors.avatar = ''
 			uploadAvatarSuccess = true;
 			success.avatar = 'Your avatar has been updated';
 		})
@@ -144,6 +146,7 @@
           <div class="label">Pick a new Avatar</div>
           <input type="file" bind:files={newAvatar}/>
           <div class="error">{errors.avatar}</div>
+		  <div class="success">{success.avatar}</div>
         </div>
         <Button type={!newAvatar ? "primary" : "secondary"}>Upload Avatar</Button>
       </form>
@@ -189,6 +192,7 @@
 
   .form-field {
     padding: 10px;
+	color: #333;
   }
 
   .label {