From b53bbdfc2b365de64e2f294760a575a7ada4b44f Mon Sep 17 00:00:00 2001
From: Jonathan Marsh <hello@jonmarsh.dev>
Date: Mon, 16 Nov 2020 01:23:14 +0000
Subject: [PATCH] Better lose animation

---
 src/components/Playing/End/Lost.tsx | 17 +----------
 src/components/Playing/End/Won.tsx  |  1 -
 src/components/Playing/End/lost.svg | 44 +++++++++++++++++++++++++++++
 src/index.css                       | 22 +++++++++++++++
 4 files changed, 67 insertions(+), 17 deletions(-)
 create mode 100644 src/components/Playing/End/lost.svg

diff --git a/src/components/Playing/End/Lost.tsx b/src/components/Playing/End/Lost.tsx
index fee53ba..4993f75 100644
--- a/src/components/Playing/End/Lost.tsx
+++ b/src/components/Playing/End/Lost.tsx
@@ -1,22 +1,7 @@
 import React from 'react'
-import Confetti from 'react-confetti'
-
-var tweenFunctions = require('tween-functions')
-
 const Lost: React.FunctionComponent = ()=> {
   return (
-    <Confetti
-      recycle={false}
-      numberOfPieces={100}
-      tweenDuration={5000}
-      tweenFunction={tweenFunctions.linear}
-      drawShape={context => {
-        context.font = '2rem serif'
-        context.textAlign = "center"
-        context.textBaseline = "middle";
-        context.fillText('💩', 0, 0)
-      }}
-    />  
+    <div id="lost"/>  
   )
 }
 
diff --git a/src/components/Playing/End/Won.tsx b/src/components/Playing/End/Won.tsx
index 227333e..d3b6e37 100644
--- a/src/components/Playing/End/Won.tsx
+++ b/src/components/Playing/End/Won.tsx
@@ -4,7 +4,6 @@ import Confetti from 'react-confetti'
 const Won: React.FunctionComponent = ()=> {
   return (
     <Confetti
-      recycle={false}
       numberOfPieces={800}
       tweenDuration={5000}
     /> 
diff --git a/src/components/Playing/End/lost.svg b/src/components/Playing/End/lost.svg
new file mode 100644
index 0000000..43e492d
--- /dev/null
+++ b/src/components/Playing/End/lost.svg
@@ -0,0 +1,44 @@
+<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <text  alignment-baseline="middle">
+    💩 
+    <animate 
+      attributeType="XML" 
+      attributeName="y" 
+      values="-25;25;" 
+      dur="5s" 
+      repeatCount="indefinite"
+    />
+  </text>
+  <text  alignment-baseline="middle">
+    💩 
+    <animate 
+      attributeType="XML" 
+      attributeName="y" 
+      values="25;75;" 
+      dur="5s" 
+      repeatCount="indefinite"
+    />
+  </text>
+
+  <text x="25" alignment-baseline="middle">
+    💩 
+    <animate 
+      attributeType="XML" 
+      attributeName="y" 
+      values="25;-25;" 
+      dur="5s" 
+      repeatCount="indefinite"
+    />
+  </text>
+    <text x="25" alignment-baseline="middle">
+    💩 
+    <animate 
+      attributeType="XML" 
+      attributeName="y" 
+      values="75;25;" 
+      dur="5s" 
+      repeatCount="indefinite"
+    />
+  </text>
+
+</svg>
diff --git a/src/index.css b/src/index.css
index 92dc42d..a95fe6b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -86,3 +86,25 @@ code {
 .error {
   color:red;
 }
+
+#lost{
+  position: absolute;
+  top:0;
+  right:0;
+  left:0;
+  bottom:0;
+
+  z-index: -1;
+  opacity: 0;
+  animation: fadeIn 3s forwards;
+
+  background-image: url(./components/Playing/End/lost.svg);
+  background-repeat: repeat;
+  background-size: 50rem 50rem;
+  background-position: 0 0;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 0.2; }
+}