Add board compilation

src/client/app.tsx

@@ -42,7 +42,7 @@ const App = (props: { name: string }) => {
 			margin: auto;
 		`}>
 			<h1>MathU</h1>
-			<MathuscriptPlayer script={script} />
+			<MathuscriptPlayer scriptName="cantor-schroeder-bernstein" />
 		</div>
 	);
 };

src/client/content/content.ts

@@ -0,0 +1 @@
+export const content = {sections: [{"name":"cantor-schroeder-bernstein.mus","text":"# !use [board, bridget, calvin, kit, theo, axelle]\n\nboard \"Given $\\chalk{yellow}f\\chalk{white}: \\mathbb{Q} \\to \\mathbb{R}$ and $x \\in \\mathbb{Q}$, there is a unique $y \\in \\mathbb{N}$ such that $\\chalk{blue}f\\chalk{white}(x)=y$\"\n\nbridget (happy) \"Hi, friends!\"\n\ncalvin (mathstruck) \"Wow, did you know that $a^2+b^2=c^2$?\"\n\ncalvin (thinking) \"Something else\"\n\nbridget (surprised) \"Me again000000\"\n\nkit (smiling) \"I'm Kit 1!\"\n\nkit (smiling) \"I'm Kit 2!\"\n\nboard \"\"\n\ncalvin (happy) \"I'm back!\"\n\nbridget (aha) \"I'm on the right now!\"\n\ntheo (heh) \"Oh, hey guys. Didn't see you there.\"\n\naxelle \"Oh, hi.\"\n\nboard \"If $ax^2+bx+c=0$, then $x = \\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}$.\"\n\ntheo \"Did you know...\"","parsed":[{"name":"board","text":"a4dc03d7dade1daf859767ba8dd51678d73a3bf7.svg"},{"name":"bridget","emotion":"happy","text":"Hi, friends!"},{"name":"calvin","emotion":"mathstruck","text":"Wow, did you know that $a^2+b^2=c^2$?"},{"name":"calvin","emotion":"thinking","text":"Something else"},{"name":"bridget","emotion":"surprised","text":"Me again000000"},{"name":"kit","emotion":"smiling","text":"I'm Kit 1!"},{"name":"kit","emotion":"smiling","text":"I'm Kit 2!"},{"name":"board","text":""},{"name":"calvin","emotion":"happy","text":"I'm back!"},{"name":"bridget","emotion":"aha","text":"I'm on the right now!"},{"name":"theo","emotion":"heh","text":"Oh, hey guys. Didn't see you there."},{"name":"axelle","text":"Oh, hi."},{"name":"board","text":"fa97c503f244f13f97a181facac0c22c16408700.svg"},{"name":"theo","text":"Did you know..."}]}]}

src/client/player/Player.tsx

@@ -4,6 +4,7 @@ import { useCallback, useMemo, useRef, useState } from "react";
 import { MathText } from "./MathText";
 import { characterData } from "./data";
 import { DialogText, DialogTextImperatives } from "./DialogText";
+import { content } from "../content/content";
 
 type VisualState = {
 	turn: number,
@@ -57,9 +58,9 @@ const getCharData = (name: string | null) => {
 
 const allChars = Object.keys(characterData) as (keyof typeof characterData)[];
 
-export const MathuscriptPlayer = (props: { script: string }) => {
-	const {script} = props;
-	const parsedScript = useMemo(() => parseMathuscript(script), [script]);
+export const MathuscriptPlayer = (props: { scriptName: string }) => {
+	const {scriptName} = props;
+	const parsedScript = content.sections.find(s => s.name.split(".")[0] === scriptName)!.parsed; // useMemo(() => parseMathuscript(script), [script]);
 	const goAgain = useRef(false);
 	const [index, setIndex] = useState(0);
 	const [visualState, setVisualState] = useState<VisualState>({turn: 0, characters: [], board: {text: ""}, dialog: {name: null, emotion: "", text: ""}});
@@ -77,7 +78,7 @@ export const MathuscriptPlayer = (props: { script: string }) => {
 		const step = parsedScript[index];
 		if (step) {
 			setIndex(i => i+1);
-			setVisualState(state => afterStep(state, step));
+			setVisualState(state => afterStep(state, {emotion: "", ...step}));
 			if (step.name === "board") {
 				goAgain.current = true;
 			} else {
@@ -126,7 +127,12 @@ export const MathuscriptPlayer = (props: { script: string }) => {
 					padding: 1em;
 				`}>
 					<div>
-						<MathText>{visualState.board.text}</MathText>
+						{
+							visualState.board.text && <img className={css`
+								transform: scale(1.25);
+							`} src={`/assets/compiled/${visualState.board.text}`}/>
+						}
+						{/* <MathText>{visualState.board.text}</MathText> */}
 					</div>
 				</div>
 				<div className={css`

src/client/player/parse.ts

@@ -2,7 +2,7 @@
 const lineRegex = /^\s*(?<name>[a-z-]+)\s+(?:\((?<emotion>[a-z-]+)\))?\s*"(?<text>(?:[^"\\]|\\.)*)"\s*$/;
 
 export const parseMathuscript = (script: string) => {
-	return script.split("\n").filter(Boolean).map(line => {
+	return script.split("\n").filter(x => x && !x.startsWith("#")).map(line => {
 		const match = line.match(lineRegex);
 		if (!match) {
 			throw Error(`Bad Line: ${JSON.stringify(line)}`);