merge betterNameText

front/dist/index.tmpl.html

@@ -27,8 +27,6 @@
         <meta name="msapplication-TileImage" content="static/images/favicons/ms-icon-144x144.png">
         <meta name="theme-color" content="#000000">
 
-
-    <link href="/static/style/font.css" rel="stylesheet">
     <base href="/">
 
         <title>Partey</title>

front/dist/resources/fonts/fonts.css

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "Press Start 2P";
+  src: url("/fonts/press-start-2p-latin-400-normal.woff2") format('woff2');
+}

front/dist/static/style/font.css

@@ -1,40 +0,0 @@
-@font-face {
-  font-family: "Press Start 2P";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: url("./fonts/press-start-2p-cyrillic-ext-400-normal.woff2") format("woff2"), url("./fonts/press-start-2p-all-400-normal.woff") format("woff");
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-@font-face {
-  font-family: "Press Start 2P";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: url("./fonts/press-start-2p-cyrillic-400-normal.woff2") format("woff2"), url("./fonts/press-start-2p-all-400-normal.woff") format("woff");
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-@font-face {
-  font-family: "Press Start 2P";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: url("./fonts/press-start-2p-greek-400-normal.woff2") format("woff2"), url("./fonts/press-start-2p-all-400-normal.woff") format("woff");
-  unicode-range: U+0370-03FF;
-}
-@font-face {
-  font-family: "Press Start 2P";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: url("./fonts/press-start-2p-latin-ext-400-normal.woff2") format("woff2"), url("./fonts/press-start-2p-all-400-normal.woff") format("woff");
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-@font-face {
-  font-family: "Press Start 2P";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: url("./fonts/press-start-2p-latin-400-normal.woff2") format("woff2"), url("./fonts/press-start-2p-all-400-normal.woff") format("woff");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}

front/package.json

@@ -15,6 +15,7 @@
     "@typescript-eslint/parser": "^4.23.0",
     "css-loader": "^5.2.4",
     "eslint": "^7.26.0",
+    "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^6.2.9",
     "html-webpack-plugin": "^5.3.1",
     "jasmine": "^3.5.0",
@@ -34,6 +35,7 @@
     "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
+    "@fontsource/press-start-2p": "^4.3.0",
     "@types/simple-peer": "^9.6.0",
     "@types/socket.io-client": "^1.4.32",
     "axios": "^0.21.1",

front/src/Connexion/LocalUser.ts

@@ -9,9 +9,8 @@ export interface CharacterTexture {
 
 export const maxUserNameLength: number = MAX_USERNAME_LENGTH;
 
-export function isUserNameValid(value: string): boolean {
-    const regexp = new RegExp('^[A-Za-z0-9]{1,'+maxUserNameLength+'}$');
-    return regexp.test(value);
+export function isUserNameValid(value: unknown): boolean {
+    return typeof value === "string" && value.length > 0 && value.length < maxUserNameLength && value.indexOf(' ') === -1;
 }
 
 export function areCharacterLayersValid(value: string[] | null): boolean {

front/src/Phaser/Entity/Character.ts

@@ -1,6 +1,6 @@
 import {PlayerAnimationDirections, PlayerAnimationTypes} from "../Player/Animation";
 import {SpeechBubble} from "./SpeechBubble";
-import BitmapText = Phaser.GameObjects.BitmapText;
+import Text = Phaser.GameObjects.Text;
 import Container = Phaser.GameObjects.Container;
 import Sprite = Phaser.GameObjects.Sprite;
 import {TextureError} from "../../Exception/TextureError";
@@ -23,7 +23,7 @@ const interactiveRadius = 35;
 
 export abstract class Character extends Container {
     private bubble: SpeechBubble|null = null;
-    private readonly playerName: BitmapText;
+    private readonly playerName: Text;
     public PlayerValue: string;
     public sprites: Map<string, Sprite>;
     private lastDirection: PlayerAnimationDirections = PlayerAnimationDirections.Down;
@@ -56,8 +56,8 @@ export abstract class Character extends Container {
             this.invisible = false
         })
 
-        this.playerName = new BitmapText(scene, 0,  playerNameY, 'main_font', name, 7);
-        this.playerName.setOrigin(0.5).setCenterAlign().setDepth(DEPTH_INGAME_TEXT_INDEX);
+        this.playerName = new Text(scene, 0,  playerNameY, name, {fontFamily: '"Press Start 2P"', fontSize: '8px', strokeThickness: 2, stroke: "#000"});
+        this.playerName.setOrigin(0.5).setDepth(DEPTH_INGAME_TEXT_INDEX);
         this.add(this.playerName);
 
         if (this.isClickable()) {

front/src/Phaser/Game/GameScene.ts

@@ -283,7 +283,15 @@ export class GameScene extends DirtyScene implements CenterListener {
 
         this.load.spritesheet('layout_modes', 'resources/objects/layout_modes.png', {frameWidth: 32, frameHeight: 32});
         this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
-
+        //eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (this.load as any).rexWebFont({ 
+            custom: {
+                families: ['Press Start 2P'],
+                urls: ['/resources/fonts/fonts.css'],
+                testString: 'abcdefg'
+            },
+        });
+        
         //this function must stay at the end of preload function
         addLoader(this);
     }

front/src/index.ts

@@ -9,7 +9,7 @@ import {SelectCharacterScene} from "./Phaser/Login/SelectCharacterScene";
 import {SelectCompanionScene} from "./Phaser/Login/SelectCompanionScene";
 import {EnableCameraScene} from "./Phaser/Login/EnableCameraScene";
 import {CustomizeScene} from "./Phaser/Login/CustomizeScene";
-import {ResizableScene} from "./Phaser/Login/ResizableScene";
+import WebFontLoaderPlugin from 'phaser3-rex-plugins/plugins/webfontloader-plugin.js';
 import {EntryScene} from "./Phaser/Login/EntryScene";
 import {coWebsiteManager} from "./WebRtc/CoWebsiteManager";
 import {MenuScene} from "./Phaser/Menu/MenuScene";
@@ -105,6 +105,13 @@ const config: GameConfig = {
         pixelArt: true,
         roundPixels: true,
         antialias: false
+    },    
+    plugins: {
+        global: [{
+            key: 'rexWebFontLoader',
+            plugin: WebFontLoaderPlugin,
+            start: true
+        }]
     },
     physics: {
         default: "arcade",

front/src/rex-plugins.d.ts

@@ -7,6 +7,10 @@ declare module 'phaser3-rex-plugins/plugins/gestures-plugin.js' {
     const content: any; // eslint-disable-line
     export default content;
 }
+declare module 'phaser3-rex-plugins/plugins/webfontloader-plugin.js' {
+    const content: any; // eslint-disable-line
+    export default content;
+}
 declare module 'phaser3-rex-plugins/plugins/gestures.js' {
     export const Pinch: any; // eslint-disable-line
 }

front/style/fonts.scss

@@ -0,0 +1 @@
+@import "~@fontsource/press-start-2p/index.css";

front/style/index.scss

@@ -3,4 +3,5 @@
 @import "cowebsite.scss";
 @import "cowebsite-mobile.scss";
 @import "style.css";
-@import "mobile-style.scss";
+@import "mobile-style.scss";
+@import "fonts";

front/webpack.config.ts

@@ -101,6 +101,18 @@ module.exports = {
                     fullySpecified: false
                 }
             },
+            {
+                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+                use: [
+                    {
+                        loader: 'file-loader',
+                        options: {
+                            name: '[name].[ext]',
+                            outputPath: 'fonts/'
+                        }
+                    }
+                ]
+            },
             {
                 test: /\.(ttf|eot|svg|png|gif|jpg)$/,
                 exclude: /node_modules/,

front/yarn.lock

@@ -50,6 +50,11 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fontsource/press-start-2p@^4.3.0":
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/@fontsource/press-start-2p/-/press-start-2p-4.3.0.tgz#37124387f7fbfe7792b5fc9a1906b80d9aeda4c6"
+  integrity sha512-gmS4070EoZp5/6NUJ+tBnvtDiSmFcR+S+ClAOJ8NGFXDWOkO12yMnyGJEJaDCNCAMX0s2TQCcmr6qWKx5ad3RQ==
+
 "@nodelib/fs.scandir@2.1.4":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz#d4b3549a5db5de2683e0c1071ab4f140904bbf69"
@@ -2198,6 +2203,14 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
+file-loader@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d"
+  integrity sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 file-uri-to-path@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"