Small improvement

src/client/player/Player.tsx

@@ -3,6 +3,7 @@ import { Mathuscript, parseMathuscript } from "./parse";
 import katex from "katex";
 import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { MathText } from "./MathText";
+import { characterData } from "./data";
 
 type VisualState = {
 	characters: {name: string, emotion: string, x: number}[],
@@ -19,6 +20,7 @@ const afterStep = (state: VisualState, step: Mathuscript[number]): VisualState =
 		let char = characters.find(c => c.name === step.name);
 		if (!char) {
 			char = {name: step.name, emotion: "default", x: 0.5};
+			characters.push(char);
 		}
 		char.emotion = step.emotion ?? char.emotion;
 		dialog.name = step.name;
@@ -28,6 +30,13 @@ const afterStep = (state: VisualState, step: Mathuscript[number]): VisualState =
 	return newState;
 }
 
+const getCharData = (name: string | null) => {
+	if (name && name in characterData) {
+		return characterData[name as keyof typeof characterData];
+	}
+	return null;
+}
+
 export const MathuscriptPlayer = (props: { script: string }) => {
 	const {script} = props;
 	const parsedScript = useMemo(() => parseMathuscript(script), [script]);
@@ -45,6 +54,8 @@ export const MathuscriptPlayer = (props: { script: string }) => {
 		}
 	}, [index, parsedScript, setIndex, setVisualState]);
 
+	const speakingChar = getCharData(visualState.dialog.name);
+
 	return (
 		<>
 			<div className={css`
@@ -58,6 +69,7 @@ export const MathuscriptPlayer = (props: { script: string }) => {
 				background-size: 118%;
 				background-position-x: center;
 				background-position-y: bottom;
+				overflow: hidden;
 			`}>
 				<div className={css`
 					position: absolute;
@@ -76,6 +88,33 @@ export const MathuscriptPlayer = (props: { script: string }) => {
 						<MathText>{visualState.board.text}</MathText>
 					</div>
 				</div>
+				<div className={css`
+					position: absolute;
+					width: 100%;
+					height: 100%;
+					top: 0;
+					left: 0;
+				`}>
+					{
+						visualState.characters.map(c => {
+							// TODO: make it change with emotion
+							const char = getCharData(c.name);
+							if (!char) {
+								return null;
+							}
+							return <img
+								className={css`
+									position: absolute;
+									left: -20%;
+									height: 90%;
+									bottom: 0;
+								`}
+								key={c.name}
+								src={char.assets["default"]}
+							/>
+						})
+					}
+				</div>
 				<div className={css`
 					padding: 1em;
 					display: flex;
@@ -94,8 +133,8 @@ export const MathuscriptPlayer = (props: { script: string }) => {
 						color: white;
 					`}>
 						{
-							visualState.dialog.name && <>
-								<strong>{visualState.dialog.name}.</strong> <MathText>{visualState.dialog.text}</MathText>
+							speakingChar && <>
+								<strong>{speakingChar.displayName}.</strong> <MathText>{visualState.dialog.text}</MathText>
 							</>
 						}
 					</div>

src/client/player/data.ts

@@ -0,0 +1,16 @@
+export const characterData = {
+	bridget: {
+		displayName: "Bridget",
+		assets: {
+			default: "/assets/bridget.png",
+			fallback: "/assets/bridget.png",
+		},
+	},
+	axelle: {
+		displayName: "Axelle",
+		assets: {
+			default: "/assets/bridget.png",
+			fallback: "/assets/bridget.png",
+		},
+	}
+}