Add header component and overwrite step

components/Kryptos/Header.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const props = defineProps({
+  page: Number,
+  length: Number
+});
+</script>
+
+<template>
+<header>
+  <sub v-if="!page">...</sub>
+  <h1 v-if="page">k{{page}}</h1>
+  <sub v-if="page">({{length}})</sub>
+</header>
+</template>
+
+<style scoped>
+header {
+  display: flex;
+  flex-flow: row nowrap;
+  margin: 2rem 0;
+  justify-content: center;
+  align-items: stretch;
+}
+
+sub {
+  vertical-align: sub;
+  display: inline;
+}
+
+h1 {
+  font-size: 2rem;
+  margin: 0;
+}
+</style>

components/Kryptos/Step/Base.vue

@@ -4,6 +4,7 @@ import KryptosStepRotate from './Rotate.vue';
 import KryptosStepReverse from './Reverse.vue';
 import KryptosStepPad from './Pad.vue';
 import KryptosStepJump from './Jump.vue';
+import KryptosStepOverwrite from './Overwrite.vue';
 
 const emit = defineEmits(['change', 'remove']);
 
@@ -25,7 +26,8 @@ const modes = [
   KryptosStepRotate,
   KryptosStepReverse,
   KryptosStepPad,
-  KryptosStepJump
+  KryptosStepJump,
+  KryptosStepOverwrite
 ];
 </script>
 

components/Kryptos/Step/Mode.vue

@@ -9,6 +9,7 @@ const model = defineModel();
   <option value="2">Reverse</option>
   <option value="3">Pad</option>
   <option value="4">Jump</option>
+  <option value="5">Overwrite</option>
 </select>
 </template>
 

components/Kryptos/Step/Overwrite.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const emit = defineEmits(['change']);
+const props = defineProps({input: String});
+
+const modded = ref(props.input);
+
+const propagate = () => emit('change', modded.value);
+onMounted(propagate);
+watch(modded, propagate);
+</script>
+
+<template>
+<textarea v-model="modded"/>
+</template>

pages/k[id].vue

@@ -12,11 +12,8 @@ useHead({ title: 'K' + route.params.id });
 <template>
 <div id="split">
   <aside>
-    <KryptosNav />
-    <header>
-      <h1>k{{page}}</h1>
-      <sub>({{cipher.length}})</sub>
-    </header>
+    <KryptosNav/>
+    <KryptosHeader :page :length="cipher.length"/>
     <KryptosSolution :page/>
     <KryptosPipeline :input @change="cipher = $event"/>
     <KryptosResize v-model.number="width"/>