make buttons beautiful

package-lock.json

@@ -12,6 +12,7 @@
         "@types/lodash": "^4.17.23",
         "@types/three": "^0.182.0",
         "lodash": "^4.17.23",
+        "lucide-react": "^0.575.0",
         "popmotion": "^11.0.5",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
@@ -2787,6 +2788,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.575.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.575.0.tgz",
+      "integrity": "sha512-VuXgKZrk0uiDlWjGGXmKV6MSk9Yy4l10qgVvzGn2AWBx1Ylt0iBexKOAoA6I7JO3m+M9oeovJd3yYENfkUbOeg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/meshoptimizer": {
       "version": "0.22.0",
       "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.22.0.tgz",

package.json

@@ -14,6 +14,7 @@
     "@types/lodash": "^4.17.23",
     "@types/three": "^0.182.0",
     "lodash": "^4.17.23",
+    "lucide-react": "^0.575.0",
     "popmotion": "^11.0.5",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",

src/components/Editor.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Play, Bug, StepForward, RotateCcw, Square, ChevronUp, ChevronDown } from "lucide-react";
 import { CodeBlockContainer, INIT_CODEBLOCKS, CodeBlock, INSERT_CODEBLOCK, REMOVE_CODEBLOCK, SET_DROPZONE_Z_INDEX } from "../store/codeBlocks/types";
 import { LevelInitializer, IPlayerData } from "../game/levels";
 import { initCodeBlocks, insertCodeBlock, removeCodeBlock } from "../store/codeBlocks/actions";
@@ -143,49 +144,55 @@ const OpsPalette = ({ ops, setDropZoneZIdx }) => {
 
 const RuntimeControls = ({ start, fast, step, running, level, code, autostep, toggleAutoStep, toggleSpeed, finished }) => {
     let DebugButton = () => (
-        <div className="controlbutton"
+        <div className="controlbutton debug"
             onClick={() => {
                 start(level, code, level.playerPos)
             }}>
-            debug
+            <Bug size={16} />
+            <span>debug</span>
         </div>
     )
     let StepButton = () => (
-        <div className="controlbutton"
+        <div className="controlbutton step"
             onClick={step}>
-            step
+            <StepForward size={16} />
+            <span>step</span>
         </div>
     )
 
     let StartButton = () => (
-        <div className="controlbutton"
+        <div className="controlbutton run"
             onClick={() => {
                 start(level, code, level.playerPos)
                 toggleAutoStep()
                 step()
             }}>
-            run
+            <Play size={16} />
+            <span>run</span>
         </div>
     )
     let ResetButton = () => (
-        <div className="controlbutton"
+        <div className="controlbutton reset"
             onClick={() => game.reset()}>
-            reset
+            <RotateCcw size={16} />
+            <span>reset</span>
         </div>
     )
 
     let ToggleSpeedButton = () => (
-        <div className="controlbutton"
+        <div className="controlbutton speed"
             onClick={toggleSpeed}>
-            {fast ? "slower" : "faster"}
+            {fast ? <ChevronDown size={16} /> : <ChevronUp size={16} />}
+            <span>{fast ? "slower" : "faster"}</span>
         </div>
     )
 
     let AbortButton = () => (
-        <div className="controlbutton"
+        <div className="controlbutton abort"
             onClick={() => console.log("TODO")}>
-            abort
+            <Square size={16} />
-	</div>
+            <span>abort</span>
+        </div>
     )
 
     if (running) {

src/components/GameScreen.tsx

@@ -15,6 +15,7 @@ import { openModal, closeModal } from "../store/gameScreenState/slice";
 import game from "../game/game"
 import { setLevel, nextLevel } from "../store/level/slice";
 import { RESET_EXECUTION } from "../store/executionState/types";
+import { LayoutGrid, ArrowRight } from "lucide-react";
 
 const MODAL_STYLES = {
     'overlay': { background: '#11111166', zIndex: 99999 },
@@ -80,8 +81,16 @@ const WonMessage = ({ nextRoute }) => {
                     <SpeechBubble message={"Good Job!"} />
                 </div>
             </div>
-            <Link to={'/levels/'}>to levels</Link>
+            <div style={{ display: "flex", justifyContent: "center", gap: "1rem", marginTop: "1rem" }}>
-            <Link to={nextRoute}> next</Link>
+                <Link to={'/levels/'} className="modal-button levels">
+                    <LayoutGrid size={18} />
+                    <span>levels</span>
+                </Link>
+                <Link to={nextRoute} className="modal-button next">
+                    <span>next</span>
+                    <ArrowRight size={18} />
+                </Link>
+            </div>
         </div>
     )
 }

src/index.css

@@ -214,20 +214,102 @@ h1 {
     margin-right:2rem;
     margin-top:0.4rem;
     height:2.4rem;
+    gap: 0.5rem;
 }
 
 .controlbutton {
-    padding:0.5rem;
+    padding: 0.4rem 0.8rem;
-    display:block;
+    display: flex;
-    border: solid #112 0.05rem;
+    align-items: center;
-    border-radius:0.3rem;
+    gap: 0.4rem;
-    background:#221;
+    border: none;
+    border-radius: 0.4rem;
     cursor:pointer;
     user-select:none;
+    font-size: 0.85rem;
+    font-weight: 500;
+    transition: all 0.15s ease;
+    color: #fff;
 }
 
-.controlbutton:hover {
+.controlbutton span {
-    background:#332;
+    line-height: 1;
+}
+
+.controlbutton.run {
+    background: #2a7;
+}
+
+.controlbutton.run:hover {
+    background: #3b8;
+}
+
+.controlbutton.debug {
+    background: #eA5;
+    color: #222;
+}
+
+.controlbutton.debug:hover {
+    background: #fb6;
+}
+
+.controlbutton.step {
+    background: #48b;
+}
+
+.controlbutton.step:hover {
+    background: #59c;
+}
+
+.controlbutton.reset {
+    background: #4af;
+}
+
+.controlbutton.reset:hover {
+    background: #5bf;
+}
+
+.controlbutton.speed {
+    background: #636;
+}
+
+.controlbutton.speed:hover {
+    background: #747;
+}
+
+.controlbutton.abort {
+    background: #e55;
+}
+
+.controlbutton.abort:hover {
+    background: #f66;
+}
+
+.modal-button {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.6rem 1.2rem;
+    border: none;
+    border-radius: 0.4rem;
+    font-size: 1rem;
+    font-weight: 500;
+    color: #fff;
+    text-decoration: none;
+    cursor: pointer;
+    transition: all 0.15s ease;
+}
+
+.modal-button:hover {
+    filter: brightness(1.1);
+}
+
+.modal-button.levels {
+    background: #48b;
+}
+
+.modal-button.next {
+    background: #2a7;
 }
 
 .levelSelectCaption {