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: