add levels button to editor

src/components/Editor.tsx

@@ -1,11 +1,12 @@
 import * as React from "react";
-import { Play, Bug, StepForward, RotateCcw, Square, ChevronUp, ChevronDown } from "lucide-react";
+import { Play, Bug, StepForward, RotateCcw, Square, ChevronUp, ChevronDown, LayoutGrid } 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";
 import { AppState } from "../store";
 import game from "../game/game"
 import { connect } from "react-redux";
+import { Link } from "react-router-dom";
 import { START_EXECUTING, STEP_EXECUTION, TOGGLE_AUTOSTEP, TOGGLE_SPEED } from "../store/executionState/types";
 
 
@@ -171,6 +172,12 @@ const RuntimeControls = ({ start, fast, step, running, level, code, autostep, to
             <span>run</span>
         </div>
     )
+    let LevelsButton = () => (
+        <Link to="/levels/" className="controlbutton levels">
+            <LayoutGrid size={16} />
+            <span>levels</span>
+        </Link>
+    )
     let ResetButton = () => (
         <div className="controlbutton reset"
             onClick={() => game.reset()}>
@@ -217,6 +224,7 @@ const RuntimeControls = ({ start, fast, step, running, level, code, autostep, to
         </div>)
     }
     return (<div className="controlbuttons">
+        <LevelsButton />
         <StartButton />
         <DebugButton />
     </div>)

src/index.css

@@ -244,6 +244,14 @@ h1 {
     background: #3b8;
 }
 
+.controlbutton.levels {
+    background: #48b;
+}
+
+.controlbutton.levels:hover {
+    background: #59c;
+}
+
 .controlbutton.debug {
     background: #eA5;
     color: #222;