hack in json support

client/src/components/glyphview.svelte

@@ -1,5 +1,66 @@
 <script lang="ts">
-	let glyphSVG = $state("");
+	interface BoundingBox {
+		xmin: number,
+		xmax: number,
+		ymin: number,
+		ymax: number
+	};
+
+	interface ContourPoint {
+		x: number,
+		y: number
+	};
+
+	interface ContourElement {
+		Line?: number[],
+		Bezier?: number[]
+	}
+
+	interface Contour {
+		points: ContourPoint[],
+		elements: ContourElement[]
+	}
+
+	interface GlyphData {
+		bounding_box: BoundingBox,
+		contours: Contour[]
+	};
+
+	let glyphData: GlyphData= $state({
+		bounding_box: { xmin: 0, xmax: 0, ymin: 0, ymax: 0 },
+		contours: []
+	});
+
+	function getPathString(contour: Contour): string {
+		if (contour.elements?.length === 0) {
+			return "";
+		}
+
+		let firstPoint: number = -1;
+		if (contour.elements[0].Bezier) {
+			firstPoint = contour.elements[0].Bezier[0];
+		} else if (contour.elements[0].Line) {
+			firstPoint = contour.elements[0].Line[0];
+		} else {
+			return "";
+		}
+
+		let result = `M${contour.points[firstPoint].x} -${contour.points[firstPoint].y} `
+		contour.elements.forEach((element) => {
+			if (element.Bezier) {
+				let control = contour.points[element.Bezier[1]];
+				let end = contour.points[element.Bezier[2]];
+
+				result += `Q${control.x} -${control.y} ${end.x} -${end.y} `;
+			} else if (element.Line) {
+				let start = contour.points[element.Line[0]];
+				let end = contour.points[element.Line[1]];
+				result += `L${start.x} -${start.y} ${end.x} -${end.y} `;
+			} 
+		});
+
+		return result;
+	}
 
 	let { selectedChar = "", loading = $bindable() } = $props();
 
@@ -11,7 +72,7 @@
 		loading = true;
 		const response = fetch(`http://localhost:8000/glyph/${selectedChar}`)
 		.then((data) => {
-			data.text().then((result) => { glyphSVG = result });
+			data.json().then((result) => { glyphData = result });
 		})
 		.catch((err) => {
 			console.log(err);
@@ -26,7 +87,19 @@
 </script>
 
 <div class="glyph">
-{@html glyphSVG }
+<svg 
+	viewBox="{glyphData.bounding_box.xmin} -{glyphData.bounding_box.ymax} {glyphData.bounding_box.xmax - glyphData.bounding_box.xmin} {glyphData.bounding_box.ymax - glyphData.bounding_box.ymin}"
+	width="1000"
+	height="1000"
+	>
+
+	{#each glyphData.contours as contour}
+	<path 
+		style="fill:none; stroke:black; stroke-width: 3"
+		d="{getPathString(contour)}" 
+	/>
+	{/each}
+</svg>
 </div>
 
 <style>