From a17e3e54d105fa4a9101d5f2266e25c9f9d0739a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Klingler?= <francois@klingler.fr>
Date: Thu, 29 Feb 2024 12:37:11 +0100
Subject: [PATCH] feat: add some results display config

---
 src/components/Index.vue                      |  1 -
 src/components/Results.vue                    | 24 ++++++++++-
 src/components/ResultsCard.vue                |  5 ++-
 src/components/ResultsConfig.vue              | 20 +++++++++
 .../card-templates/LayoutDoubleFaced.vue      | 32 +++++++++++----
 src/components/results-config.ts              | 41 +++++++++++++++++++
 src/style.css                                 |  3 ++
 7 files changed, 114 insertions(+), 12 deletions(-)
 create mode 100644 src/components/ResultsConfig.vue
 create mode 100644 src/components/results-config.ts

diff --git a/src/components/Index.vue b/src/components/Index.vue
index c20c349..aa64c26 100644
--- a/src/components/Index.vue
+++ b/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;
diff --git a/src/components/Results.vue b/src/components/Results.vue
index 65913a8..bdc346e 100644
--- a/src/components/Results.vue
+++ b/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;
 }
diff --git a/src/components/ResultsCard.vue b/src/components/ResultsCard.vue
index 7c44299..190cb83 100644
--- a/src/components/ResultsCard.vue
+++ b/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;
 }
diff --git a/src/components/ResultsConfig.vue b/src/components/ResultsConfig.vue
new file mode 100644
index 0000000..5079952
--- /dev/null
+++ b/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>
diff --git a/src/components/card-templates/LayoutDoubleFaced.vue b/src/components/card-templates/LayoutDoubleFaced.vue
index 4ad0c14..a93a6a9 100644
--- a/src/components/card-templates/LayoutDoubleFaced.vue
+++ b/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>
diff --git a/src/components/results-config.ts b/src/components/results-config.ts
new file mode 100644
index 0000000..7d5337e
--- /dev/null
+++ b/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
+        }
+    }
+}
diff --git a/src/style.css b/src/style.css
index e69de29..5db250e 100644
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,3 @@
+* {
+    font-family: 'Open Sans', sans-serif;
+}