feat: add some results display config

src/components/Index.vue

@@ -36,7 +36,6 @@ function onSubmit() {
 
 <style scoped>
 * {
-  font-family: 'Open Sans', sans-serif;
   margin: 0 0 1em;
   padding: 0;
   border: 0;

src/components/Results.vue

@@ -1,7 +1,9 @@
 <script setup lang=ts>
 import { ref } from 'vue'
 import { onBeforeRouteUpdate, useRoute, RouteLocation } from 'vue-router'
+import { resultsConfig } from './results-config'
 import ResultsCard from './ResultsCard.vue'
+import ResultsConfig from './ResultsConfig.vue'
 
 type Cards = Array<{ name: string, count: number }>
 
@@ -35,11 +37,19 @@ function splitCardsInput(input: string): Cards {
         }
     }).filter(match => !!match) as Cards
 }
-
 </script>
 
 <template>
-    <ResultsCard v-for="card in cards" :name="card.name" :count="card.count"></ResultsCard>
+    <div class="config">
+        <ResultsConfig />
+    </div>
+
+    <div
+        :class="[resultsConfig.displayReminderText ? '' : 'hide_reminder_text']"
+        :contenteditable="resultsConfig.editableContent">
+
+        <ResultsCard v-for="card in cards" :name="card.name" :count="card.count"></ResultsCard>
+    </div>
 </template>
 
 <style>
@@ -52,6 +62,16 @@ function splitCardsInput(input: string): Cards {
     box-sizing: border-box;
 }
 
+.config {
+    margin-bottom: 1em;
+}
+
+@media print {
+    .config {
+        display: none;
+    }
+}
+
 body {
     margin: 0;
 }

src/components/ResultsCard.vue

@@ -67,7 +67,6 @@ p {
     page-break-inside: avoid;
     overflow: hidden;
     
-    font-family: 'Open Sans', sans-serif;
     font-size: 3.75mm;
     line-height: 100%;
     text-rendering: geometricPrecision;
@@ -124,6 +123,10 @@ p {
     flex: 1 1 auto;
 }
 
+.hide_reminder_text .reminder_text {
+    display: none;
+}
+
 .power_toughness {
     text-align: right;
 }

src/components/ResultsConfig.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { resultsConfig } from './results-config'
+</script>
+
+<template>
+    <div class="config">
+        <label><input type="checkbox" v-model="resultsConfig.displayReminderText" /> Display reminder text</label>
+        <label><input type="checkbox" v-model="resultsConfig.editableContent" /> Manually edit content</label>
+        <label><input type="checkbox" v-model="resultsConfig.doubleFacedOnTwoCards" /> Display double faced cards on two cards</label>
+    </div>
+</template>
+
+<style scoped>
+
+.config {
+    font-size: 0.9em;
+    display: flex;
+    flex-direction: column;
+}
+</style>

src/components/card-templates/LayoutDoubleFaced.vue

@@ -3,6 +3,7 @@ import { defineProps } from 'vue'
 import { ScryfallCard } from '../../scryfall'
 import { cardInnerTemplate } from './index'
 import CardError from './CardError.vue'
+import { resultsConfig } from '../results-config';
 
 const props = defineProps<{
     card: ScryfallCard
@@ -16,15 +17,30 @@ const error = props.card.card_faces?.length != 2;
     <CardError v-if="error" :card="card" />
 
     <template v-else>
-        <div class="card_frame">
-            <div class="card_inner">
-                <component :is="cardInnerTemplate(card.card_faces![0])" :face="card.card_faces![0]" />
+        <template v-if="resultsConfig.doubleFacedOnTwoCards">
+            <div class="card_frame">
+                <div class="card_inner">
+                    <component :is="cardInnerTemplate(card.card_faces![0])" :face="card.card_faces![0]" />
+                </div>
             </div>
-        </div>
-        <div class="card_frame">
-            <div class="card_inner">
-                <component :is="cardInnerTemplate(card.card_faces![1])" :face="card.card_faces![1]" />
+            <div class="card_frame">
+                <div class="card_inner">
+                    <component :is="cardInnerTemplate(card.card_faces![1])" :face="card.card_faces![1]" />
+                </div>
             </div>
-        </div>
+        </template>
+        <template v-else>
+            <div class="card_frame">
+                <div class="card_inner">
+                    <div class="card_inner split_left">
+                        <component :is="cardInnerTemplate(card.card_faces![0])" :face="card.card_faces![0]" />
+                    </div>
+                    <hr class="flip_divider">
+                    <div class="card_inner split_right">
+                        <component :is="cardInnerTemplate(card.card_faces![1])" :face="card.card_faces![1]" />
+                    </div>
+                </div>
+            </div>
+        </template>
     </template>
 </template>

src/components/results-config.ts

@@ -0,0 +1,41 @@
+import { reactive, watch } from 'vue'
+
+type ResultsConfig = {
+    editableContent: boolean,
+    displayReminderText: boolean,
+    doubleFacedOnTwoCards: boolean
+}
+
+const defaultResultsConfig: ResultsConfig = {
+    editableContent: false,
+    displayReminderText: true,
+    doubleFacedOnTwoCards: true
+}
+
+export const resultsConfig = reactive(defaultResultsConfig)
+
+// Load from local storage on start
+loadConfigFromLocalStorage()
+
+// Store in local storage when config changes
+watch(resultsConfig, config => {
+    localStorage.setItem('resultsConfig', JSON.stringify(config))
+})
+
+function loadConfigFromLocalStorage() {
+    const storedRawConfig = localStorage.getItem('resultsConfig')
+
+    if (storedRawConfig) {
+        const storedConfig = JSON.parse(storedRawConfig)
+
+        if (storedConfig.editableContent !== undefined) {
+            resultsConfig.editableContent = storedConfig.editableContent
+        }
+        if (storedConfig.displayReminderText !== undefined) {
+            resultsConfig.displayReminderText = storedConfig.displayReminderText
+        }
+        if (storedConfig.doubleFacedOnTwoCards !== undefined) {
+            resultsConfig.doubleFacedOnTwoCards = storedConfig.doubleFacedOnTwoCards
+        }
+    }
+}

src/style.css

@@ -0,0 +1,3 @@
+* {
+    font-family: 'Open Sans', sans-serif;
+}