fix UI bugs

src/components/GameScreen.tsx

@@ -15,6 +15,8 @@ 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 { INIT_CODEBLOCKS } from "../store/codeBlocks/types";
+import store from "../store/store";
 import { LayoutGrid, ArrowRight } from "lucide-react";
 
 const MODAL_STYLES = {
@@ -126,6 +128,7 @@ const GameScreen = ({ nextLevel, won, open, openModal, closeModal, setLevel, res
     useEffect(() => {
         resetState();
         game.init(level);
+        store.dispatch({ type: INIT_CODEBLOCKS, level: level });
         if (!level.introMessages || level.introMessages.length === 0) {
             closeModal();
         }

src/components/StartScreen.tsx

@@ -1,14 +1,16 @@
 import * as React from "react";
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
+import { LayoutGrid, Settings } from "lucide-react";
 
 const StartScreen = () => (
-    <div className="startContainer">
-        <img className="gameName" src="/assets/textures/gamename.png" />
-        <Link to="/levels">
-            <div className="startButton">Levels</div>
+    <div className="startContainer start-screen">
+        <Link to="/levels/" className="controlbutton levels">
+            <LayoutGrid size={18} />
+            <span>Levels</span>
         </Link>
-        <Link to="/settings">
-            <div className="startButton">Settings</div>
+        <Link to="/settings" className="controlbutton settings">
+            <Settings size={18} />
+            <span>Settings</span>
         </Link>
     </div>
 );

src/game/levels.ts

@@ -45,7 +45,7 @@ export const levels: LevelInitializer[] = [
                 { name: "action", containerIndex: 0 }]
         }],
         activeCodeview: "main",
-        allowedCodeBlocks: ["forward", "turn_right", "turn_left", "jump", "action", "f1"],
+        allowedCodeBlocks: ["forward", "turn_right", "turn_left", "jump", "action"],
         introMessages: [{ message: "Hit run and watch.", image: null },
         { message: "second page of intro message", image: null }]
     },
@@ -59,6 +59,25 @@ export const levels: LevelInitializer[] = [
         { x: 3, y: 2, z: 0 },
         { x: 3, y: 3, z: 0, actionable: { type: BUTTON_ACTIONABLE.type, pushed: BUTTON_ACTIONABLE.pushed } }],
         playerPos: { voxelIdx: 0, direction: "east" },
+        codeviews: [{
+            name: "main",
+            nMaxBlocks: 9,
+            blocks: [{ name: "forward" }, { name: "forward" }]
+        }],
+        activeCodeview: "main",
+        allowedCodeBlocks: ["forward", "turn_right", "turn_left", "jump", "action"],
+        introMessages: [{ message: "light up all dark cubes!", image: null }]
+    },
+     {
+        name: "hello fn",
+        voxels: [{ x: 0, y: 0, z: 0 },
+        { x: 1, y: 0, z: 0 },
+        { x: 2, y: 0, z: 0 },
+        { x: 3, y: 0, z: 0, actionable: { type: BUTTON_ACTIONABLE.type, pushed: BUTTON_ACTIONABLE.pushed } },
+        { x: 3, y: 1, z: 0 },
+        { x: 3, y: 2, z: 0 },
+        { x: 3, y: 3, z: 0, actionable: { type: BUTTON_ACTIONABLE.type, pushed: BUTTON_ACTIONABLE.pushed } }],
+        playerPos: { voxelIdx: 0, direction: "east" },
         codeviews: [{
             name: "main",
             nMaxBlocks: 3,
@@ -72,16 +91,17 @@ export const levels: LevelInitializer[] = [
         }],
         activeCodeview: "main",
         allowedCodeBlocks: ["forward", "turn_right", "turn_left", "jump", "action", "f1"],
-        introMessages: [{ message: "light up all dark cubes!", image: null }]
+        introMessages: [{ message: "Use a function for repeating patterns!", image: null }]
     },
     {
         name: "jump n run",
-        voxels: [{ x: 0, y: 0, z: 0, actionable: { type: BUTTON_ACTIONABLE.type, pushed: BUTTON_ACTIONABLE.pushed } },
+        voxels: [{ x: 0, y: 0, z: 0},
         { x: 0, y: 1, z: 1 },
-        { x: 0, y: 2, z: 1 },
-        { x: 0, y: 3, z: 0 },
-        { x: 0, y: 4, z: 0 },
-        { x: 0, y: 5, z: 0, actionable: { type: BUTTON_ACTIONABLE.type, pushed: BUTTON_ACTIONABLE.pushed } }],
+        { x: 0, y: 2, z: 1 , actionable: { type: BUTTON_ACTIONABLE.type, pushed: BUTTON_ACTIONABLE.pushed } },
+        { x: 0, y: 3, z: 2 },
+        { x: 0, y: 4, z: 2 , actionable: { type: BUTTON_ACTIONABLE.type, pushed: BUTTON_ACTIONABLE.pushed } },
+        { x: 0, y: 5, z: 3},
+        { x: 0, y: 6, z: 3, actionable: { type: BUTTON_ACTIONABLE.type, pushed: BUTTON_ACTIONABLE.pushed } }],
         playerPos: { voxelIdx: 0, direction: "north" },
         codeviews: [{ name: "main", nMaxBlocks: 4, blocks: [] },
         { name: "f1", nMaxBlocks: 3, blocks: [] }],
@@ -91,15 +111,16 @@ export const levels: LevelInitializer[] = [
     },
     {
         name: "jump n run 2",
-        voxels: [{ x: 0, y: 0, z: 0, actionable: { type: BUTTON_ACTIONABLE.type, pushed: BUTTON_ACTIONABLE.pushed } },
+        voxels: [{ x: 0, y: 0, z: 0},
         { x: 0, y: 1, z: 1 },
-        { x: 0, y: 2, z: 1 },
-        { x: 1, y: 2, z: 0 },
-        { x: 2, y: 2, z: 0 },
-        { x: 3, y: 2, z: 0, actionable: { type: BUTTON_ACTIONABLE.type, pushed: BUTTON_ACTIONABLE.pushed } }],
+        { x: 0, y: 2, z: 1 , actionable: { type: BUTTON_ACTIONABLE.type, pushed: BUTTON_ACTIONABLE.pushed } },
+        { x: 1, y: 2, z: 2 },
+        { x: 2, y: 2, z: 2 , actionable: { type: BUTTON_ACTIONABLE.type, pushed: BUTTON_ACTIONABLE.pushed } },
+        { x: 2, y: 1, z: 3},
+     { x: 2, y: 0, z: 3,  actionable: { type: BUTTON_ACTIONABLE.type, pushed: BUTTON_ACTIONABLE.pushed }}],
         playerPos: { voxelIdx: 0, direction: "north" },
-        codeviews: [{ name: "main", nMaxBlocks: 4, blocks: [] },
-        { name: "f1", nMaxBlocks: 3, blocks: [] }],
+        codeviews: [{ name: "main", nMaxBlocks: 1, blocks: [] },
+        { name: "f1", nMaxBlocks: 5, blocks: [] }],
         activeCodeview: "main",
         allowedCodeBlocks: ["forward", "turn_right", "turn_left", "jump", "action", "f1"],
         introMessages: null

src/index.css

@@ -1,5 +1,4 @@
 body {
-    background:#223;
 }
 
 * {
@@ -218,15 +217,15 @@ h1 {
 }
 
 .controlbutton {
-    padding: 0.4rem 0.8rem;
+    padding: 0.7rem 1.4rem;
     display: flex;
     align-items: center;
-    gap: 0.4rem;
+    gap: 0.5rem;
     border: none;
-    border-radius: 0.4rem;
+    border-radius: 0.5rem;
     cursor:pointer;
     user-select:none;
-    font-size: 0.85rem;
+    font-size: 1rem;
     font-weight: 500;
     transition: all 0.15s ease;
     color: #fff;
@@ -252,6 +251,14 @@ h1 {
     background: #59c;
 }
 
+.controlbutton.settings {
+    background: #636;
+}
+
+.controlbutton.settings:hover {
+    background: #747;
+}
+
 .controlbutton.debug {
     background: #eA5;
     color: #222;
@@ -374,21 +381,28 @@ h1 {
     margin:auto;
 }
 
+.start-screen {
+    background: url('/assets/textures/startscreen.png') no-repeat center center fixed;
+    background-size: cover;
+}
+
 .startContainer {
-    display:flex;
+    display: flex;
     flex-direction: column;
-    width: 850px;
-    height:600px;
-    margin:auto;
-    justify-content: flex-start;
+    align-items: flex-end;
+    justify-content: flex-end;
+    height: 80vh;
+    padding-right: 30%;
+    padding-bottom: 20%;
+    gap: 3rem;
 }
 
 .startContainer a {
-    margin-top:2rem;
+    margin-top: 0;
 }
 
 .gameName {
-    margin-top:4rem;
+    margin-top: 4rem;
 }
 
 .start-button {

src/store/codeBlocks/reducers.ts

@@ -5,7 +5,7 @@ import { cloneDeep, pullAt } from "lodash"
 export function codeBlocksReducer(state: Array<CodeBlockContainer> = [], action: CodeBlocksActionTypes): Array<CodeBlockContainer> {
     switch (action.type) {
         case INIT_CODEBLOCKS:
-            return Object.assign([], state, action.level.codeviews)
+            return cloneDeep(action.level.codeviews)
         case REMOVE_CODEBLOCK:
             return reduceRemoveBlock(state, action)
         case INSERT_CODEBLOCK: