Better lose animation

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"/>  
   )
 }
 

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}
     /> 

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; }
+}