Finish Katex and Statement components to render statements

src/components/Katex.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import {HTMLString} from '../types'
+import {computed} from 'vue'
+import {MathStatement} from '../support/parse'
+
+const props = defineProps<{
+  statement: MathStatement,
+  size?: 'big' | 'small',
+}>()
+
+let displayHtml: HTMLString = props.statement.toHTMLString()
+computed(() => displayHtml = props.statement.toHTMLString())
+</script>
+
+<style>
+  .big {
+    transform: scale(1.3);
+  }
+
+  .small {
+    transform: scale(0.9);
+  }
+</style>
+
+<template>
+  <div class="big" v-if="props?.size === 'big'" v-html="displayHtml"></div>
+  <div class="small" v-else-if="props?.size === 'small'" v-html="displayHtml"></div>
+  <div v-else v-html="displayHtml"></div>
+</template>

src/components/Scratch.vue

@@ -1,7 +1,16 @@
 <script setup lang="ts">
+  import {MathPage} from '../support/page'
+  import {v4 as uuidv4} from 'uuid'
+  import Statement from './Statement.vue'
 
+  const page = new MathPage(uuidv4())
+  const stmt1Id = page.addRaw('x = y+3/4')
+  const stmt2Id = page.addRaw('y = 9')
+  const evaluation = page.evaluate()
+  console.log({page, stmt1Id})
 </script>
 
 <template>
   <p>Scratch page for testing!</p>
+  <Statement :statement="page.getStatement(stmt1Id)" :evaluation="evaluation"/>
 </template>

src/components/Statement.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import {EvaluationResult, Maybe} from '../types'
+import {MathStatement} from '../support/parse'
+import {computed} from 'vue'
+import Katex from './Katex.vue'
+
+const props = defineProps<{
+  statement: MathStatement,
+  evaluation: EvaluationResult,
+}>()
+
+const getValueStatement = (): Maybe<MathStatement> => {
+  const value = props.evaluation.statements[props.statement.id]
+  if ( value ) {
+    return MathStatement.temp(String(value))
+  }
+}
+
+let value = getValueStatement()
+computed(() => value = getValueStatement())
+</script>
+
+<style>
+  .math-statement {
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    padding: 10px;
+  }
+</style>
+
+<template>
+  <div class="math-statement">
+    <Katex :statement="statement" size="big"/>
+    <div class="result" v-if="value">
+      <hr v-if="value" style="border: 1px solid #ccc; border-bottom: 0">
+      <Katex :statement="value" size="small" style="color: #666"/>
+    </div>
+  </div>
+</template>