feat: modernized web application

nextjs/src/components/PlayersList.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { useTranslation } from 'react-i18next';
+
+import type { IPlayerInfo } from '@/models/IPlayerInfo';
+import style from '@/styles/web.module.scss';
+
+type Props = {
+  players: IPlayerInfo[];
+};
+
+export function PlayersList({ players }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <div className={style.guideBody}>
+      <h2>Players</h2>
+      <hr />
+      <br />
+      {players.map((el) => {
+        const charClass =
+          style[`character-${el.name_id}` as keyof typeof style] ?? '';
+        return (
+          <div
+            key={`playerInfoLoop-${el.id}`}
+            className={style.characterBlock}
+            style={{
+              animationDelay: `${el.id * 0.2}s`,
+            }}
+          >
+            <div className={charClass} />
+            <div className={style.titlePlayer}>
+              <span className={style.titlePlayerBlock}>{t('player_name')}</span>
+            </div>
+            <div>{el.player_name}</div>
+            <div className={style.titlePlayer}>
+              <span className={style.titlePlayerBlock}>{t('use_character')}</span>
+            </div>
+            <div>{el.name_jp}</div>
+            <div className={style.titlePlayer}>
+              <span className={style.titlePlayerBlock}>{t('description')}</span>
+            </div>
+            <div>{el.description}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}