From 07344ef95219aa44faf354516ec71b9058733372 Mon Sep 17 00:00:00 2001
From: Dan Cigrang <danielcigrang@me.com>
Date: Mon, 8 Jan 2024 19:37:30 -0600
Subject: [PATCH] Refactor oops

---
 src/components/Calculator.svelte | 27 +++------------------------
 src/components/Results.svelte    | 28 ++++++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 24 deletions(-)
 create mode 100644 src/components/Results.svelte

diff --git a/src/components/Calculator.svelte b/src/components/Calculator.svelte
index db37fca..9e283e2 100644
--- a/src/components/Calculator.svelte
+++ b/src/components/Calculator.svelte
@@ -1,4 +1,6 @@
 <script>
+    import Results from "./Results.svelte";
+
     const limited = 40;
     const constructed = 60;
 
@@ -121,30 +123,7 @@
 </form>
 
 <!-- TODO: Nested component> -->
-<div>
-    <p>Total Cards: {deck.format}</p>
-    <p>Total Non-Land Cards: {deck.cards}</p>
-    <p>Total Mana: {deck.total()}</p>
-    <!-- {#if deck.white.ratio} -->
-    <p class="deck white">{deck.white.ratio}-{deck.white.ratio + 1} Plains</p>
-    <!-- {/if} -->
-    {#if deck.blue.ratio}
-        <p class="deck blue">{deck.blue.ratio}-{deck.blue.ratio + 1} Islands</p>
-    {/if}
-    {#if deck.black.ratio}
-        <p class="deck black">
-            {deck.black.ratio}-{deck.black.ratio + 1} Swamps
-        </p>
-    {/if}
-    {#if deck.red.ratio}
-        <p class="deck red">{deck.red.ratio}-{deck.red.ratio + 1} Mountains</p>
-    {/if}
-    {#if deck.green.ratio}
-        <p class="deck green">
-            {deck.green.ratio}-{deck.green.ratio + 1} Forests
-        </p>
-    {/if}
-</div>
+<Results {deck}/>
 
 <style>
     /* Chrome, Safari, Edge, Opera */
diff --git a/src/components/Results.svelte b/src/components/Results.svelte
new file mode 100644
index 0000000..d51d31d
--- /dev/null
+++ b/src/components/Results.svelte
@@ -0,0 +1,28 @@
+<script>
+    export let deck;
+</script>
+
+<div>
+    <p>Total Cards: {deck.format}</p>
+    <p>Total Non-Land Cards: {deck.cards}</p>
+    <p>Total Mana: {deck.total()}</p>
+    <!-- {#if deck.white.ratio} -->
+    <p class="deck white">{deck.white.ratio}-{deck.white.ratio + 1} Plains</p>
+    <!-- {/if} -->
+    {#if deck.blue.ratio}
+        <p class="deck blue">{deck.blue.ratio}-{deck.blue.ratio + 1} Islands</p>
+    {/if}
+    {#if deck.black.ratio}
+        <p class="deck black">
+            {deck.black.ratio}-{deck.black.ratio + 1} Swamps
+        </p>
+    {/if}
+    {#if deck.red.ratio}
+        <p class="deck red">{deck.red.ratio}-{deck.red.ratio + 1} Mountains</p>
+    {/if}
+    {#if deck.green.ratio}
+        <p class="deck green">
+            {deck.green.ratio}-{deck.green.ratio + 1} Forests
+        </p>
+    {/if}
+</div>
\ No newline at end of file