Refactor oops

drc · Jan 9, 2024 · 07344ef · 07344ef
1 parent 3b08488
commit 07344ef
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 24 deletions.
diff --git 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
@@ -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>