diff --git a/public/assets/textures/startscreen.png b/public/assets/textures/startscreen.png
new file mode 100644
index 0000000..3f98fc7
Binary files /dev/null and b/public/assets/textures/startscreen.png differ
diff --git a/src/components/GameScreen.tsx b/src/components/GameScreen.tsx
index 15e9071..6b30b27 100644
--- a/src/components/GameScreen.tsx
+++ b/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();
}
diff --git a/src/components/StartScreen.tsx b/src/components/StartScreen.tsx
index 23af05e..ab9547c 100644
--- a/src/components/StartScreen.tsx
+++ b/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 = () => (
-
-

-
-
Levels
+
+
+
+
Levels
-
-
Settings
+
+
+
Settings
);
diff --git a/src/game/levels.ts b/src/game/levels.ts
index 87a9d40..28d6afa 100644
--- a/src/game/levels.ts
+++ b/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
diff --git a/src/index.css b/src/index.css
index f9414ca..6609cb5 100644
--- a/src/index.css
+++ b/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 {
diff --git a/src/store/codeBlocks/reducers.ts b/src/store/codeBlocks/reducers.ts
index 881b0f3..3fd4c15 100644
--- a/src/store/codeBlocks/reducers.ts
+++ b/src/store/codeBlocks/reducers.ts
@@ -5,7 +5,7 @@ import { cloneDeep, pullAt } from "lodash"
export function codeBlocksReducer(state: Array
= [], action: CodeBlocksActionTypes): Array {
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: