Covid & Flu Sprites

src/components/Game.scss

@@ -5,3 +5,19 @@
   overflow: hidden;
   box-shadow: 0 0 20px #000;
 }
+
+.flu-sprite {
+	width: 40px;
+	height: 40px;
+
+	background: transparent url('/images/flu-sprite.png') no-repeat top center;
+	background-size: 100% auto;
+}
+
+.covid-sprite {
+	width: 40px;
+	height: 40px;
+
+	background: transparent url('/images/covid-sprite.png') no-repeat top center;
+	background-size: 100% auto;
+}

src/components/Game.tsx

@@ -191,37 +191,23 @@ function GameObject({ position, velocity, type }: ObjectProps) {
     case 'flu':
       return (
         <div
-          className="flu"
+          className="flu-sprite"
           style={{
-            color: '#fff',
-            borderLeft: '20px solid rgba(100, 180, 220, 0.7)',
-            borderRight: '20px solid transparent',
-            borderTop: '7px solid transparent',
-            borderBottom: '7px solid transparent',
             position: 'absolute',
             top: position.y - 7,
             left: position.x - 20,
-            width: 0,
-            height: 0,
             transform: `rotate(${velocity.angle}rad)`,
           }}
         />
       );
     case 'covid':
       return (
         <div
-          className="covid"
+          className="covid-sprite"
           style={{
-            color: '#fcba03',
-            borderLeft: '20px solid rgba(252, 186, 3, 0.7)',
-            borderRight: '20px solid transparent',
-            borderTop: '7px solid transparent',
-            borderBottom: '7px solid transparent',
             position: 'absolute',
             top: position.y - 7,
             left: position.x - 20,
-            width: 0,
-            height: 0,
             transform: `rotate(${velocity.angle}rad)`,
           }}
         />