✨ feat: Add assets and update rules modal

- Add new images: `board.png`, `character.png`, and `login.png`
- Update the RulesModal component to display the new images and improve the layout

client/src/ui/NewGame.tsx

@@ -46,7 +46,7 @@ const NewGame: React.FC<NewGameProps> = ({ onClick, onPseudoChange }) => {
       >
         Rules
       </button>
-      <Modal isOpen={isModalOpen} onRequestClose={toggleModal} style={{ content: { height: '60%' } }}>
+      <Modal isOpen={isModalOpen} onRequestClose={toggleModal} style={{ content: { height: '70%' } }}>
         <div className="relative">
           <button onClick={toggleModal} className="absolute top-[-10px] right-0 p-2">
             <div className="relative w-6 h-6">

client/src/ui/RulesModal.tsx

@@ -1,44 +1,39 @@
-import { useEffect, useState } from 'react';
-import { Assets, Container, Texture } from 'pixi.js';
-import { Direction, getFramesFromType, Animation } from '../utils/animation';
-import { AnimatedSprite, Stage } from '@pixi/react';
+import character from '../../public/character.png';
+import login from '../../public/login.png';
+import board from '../../public/board.png';
 
 const RulesModal = () => {
-  const [frames, setFrames] = useState<Texture[]>([]);
-  const [resource, setResource] = useState<any>(undefined);
-
-  useEffect(() => {
-    const load = async () => {
-      const resource = await Assets.load(`assets/knight/knight.json`);
-      setResource(resource);
-      setFrames(getFramesFromType('knight', Animation.Idle, Direction.S, resource));
-    };
-    load();
-  }, []);
-
   return (
     <div className="text-black flex  flex-col justify-center">
       <h2 className="mb-4 text-center">Rules of the game</h2>
       <hr className="my-4 border-2" />
-      <div className="flex items-center">
-        <p>You are playing this character:</p>
-        <Stage width={35} height={45} options={{ backgroundColor: 0xffffff }}>
-          <AnimatedSprite
-            x={15}
-            y={20}
-            animationSpeed={0.1}
-            anchor={0.5}
-            scale={2}
-            isPlaying={true}
-            textures={frames}
-          />
-        </Stage>
+      <div>
+        <img
+          src={login}
+          alt="Twitter"
+          className="w-50 h-32 mr-2"
+          style={{ imageRendering: 'pixelated', display: 'inline-block' }}
+        />
+        <span style={{ display: 'inline-block' }}>Choose your name and launch the game</span>
+      </div>
+      <div className="my-4">
+        <img
+          src={character}
+          alt="Twitter"
+          className="w-50 h-32 mr-2"
+          style={{ imageRendering: 'pixelated', display: 'inline-block' }}
+        />
+        <span style={{ display: 'inline-block' }}>You play this character</span>
+      </div>
+      <div>
+        <img
+          src={board}
+          alt="Twitter"
+          className="w-50 h-32 mr-2"
+          style={{ imageRendering: 'pixelated', display: 'inline-block' }}
+        />
+        <span style={{ display: 'inline-block' }}>Kill all the enemies to move to next level</span>
       </div>
-      <p className="my-5">- Your objective is to kill all the enemies in the map</p>
-      <p className="my-5">- Your character can move by one tile or attack around him each turn</p>
-      <p className="my-5">- Put your mouse over a character to see his allowed actions</p>
-      <p className="my-5">- When the map is clear, you move on to the next level</p>
-      <p className="my-5">- Get as much point as possible to enter the leaderboard!</p>
     </div>
   );
 };