Implement battle controls icons

index.html

@@ -48,6 +48,9 @@
 		<link rel="prefetch" href="wins_small.png" />
 		<link rel="prefetch" href="money_small.png" />
 		<link rel="prefetch" href="Freeze icon.png" />
+		<link rel="prefetch" href="autoplay.png" />
+		<link rel="prefetch" href="play.png" />
+		<link rel="prefetch" href="fast forward.png" />
 
 		<title>Profectus</title>
 		<meta name="description" content="A project made in Profectus"/>

src/data/common.css

@@ -255,20 +255,20 @@
 
 .battle-controls {
     display: flex;
+    margin-top: -2vmin;
 }
 
 .battle-controls .button {
-    display: flex;
-    flex-direction: column;
-    font-size: 2vmin;
     margin: 1vmin;
-    border: solid 2px var(--link);
-    border-radius: var(--border-radius);
 }
 
 .battle-controls .button.active {
-    background: var(--link);
+    filter: brightness(0.65);
-    color: var(--feature-foreground);
+}
+
+.battle-controls .button img {
+    height: 7vmin;
+    image-rendering: pixelated;
 }
 
 .outcome {

src/data/projEntry.tsx

@@ -12,6 +12,9 @@ import settings from "game/settings";
 import { formatWhole } from "util/bignum";
 import { render } from "util/vue";
 import { computed, ref, TransitionGroup } from "vue";
+import autoplay from "../../public/autoplay.png";
+import fast from "../../public/fast forward.png";
+import freezeShop from "../../public/Freeze shop.png";
 import heart_small from "../../public/heart_small.png";
 import ludwig from "../../public/Ludwig Coots.png";
 import maid from "../../public/Maid Coots.png";
@@ -19,15 +22,15 @@ import mail from "../../public/Mogul Mail Coots.png";
 import money from "../../public/Mogul Money Coots.png";
 import money_small from "../../public/money_small.png";
 import coots from "../../public/Normal Coots.png";
+import play from "../../public/play.png";
 import star_small from "../../public/presence_small.png";
 import qt from "../../public/QT Coots.png";
 import shopGif from "../../public/shop.gif";
 import shopStill from "../../public/shop1.png";
+import sellShop from "../../public/shop_Sell1.png";
 import stanz from "../../public/Stanz Coots.png";
 import startStream from "../../public/start stream.png";
 import vespa from "../../public/Vespa Coots.png";
-import sellShop from "../../public/shop_Sell1.png";
-import freezeShop from "../../public/Freeze shop.png";
 import CharacterSlot from "./CharacterSlot.vue";
 import "./common.css";
 import "./socket";
@@ -480,8 +483,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
                                     prepareMove();
                                 }}
                             >
-                                <span class="material-icons">play_arrow</span>
+                                <img src={play} />
-                                <span>Play</span>
                             </button>
                             <button
                                 class={{ button: true, active: settings.autoplay }}
@@ -492,15 +494,13 @@ export const main = createLayer("main", function (this: BaseLayer) {
                                     }
                                 }}
                             >
-                                <span class="material-icons">all_inclusive</span>
+                                <img src={autoplay} />
-                                <span>Autoplay</span>
                             </button>
                             <button
                                 class={{ button: true, active: settings.fast }}
                                 onClick={() => (settings.fast = !settings.fast)}
                             >
-                                <span class="material-icons">fast_forward</span>
+                                <img src={fast} />
-                                <span>Fast</span>
                             </button>
                         </div>
                         <div