marius/floppy-venture
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix UI bugs

Browse Source
This commit is contained in:
Marius Unsel 2026-02-24 16:31:16 +01:00
parent 64c777a38e
commit d2c71a22d1
6 changed files with 73 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/textures/startscreen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

3
src/components/GameScreen.tsx
View File

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

14
src/components/StartScreen.tsx
View File

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

49
src/game/levels.ts
View File

@ -45,7 +45,7 @@ export const levels: LevelInitializer[] = [
{ name: "action", containerIndex: 0 }] { name: "action", containerIndex: 0 }]
}], }],
activeCodeview: "main", 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 }, introMessages: [{ message: "Hit run and watch.", image: null },
{ message: "second page of intro message", 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: 2, z: 0 },
{ x: 3, y: 3, z: 0, actionable: { type: BUTTON_ACTIONABLE.type, pushed: BUTTON_ACTIONABLE.pushed } }], { x: 3, y: 3, z: 0, actionable: { type: BUTTON_ACTIONABLE.type, pushed: BUTTON_ACTIONABLE.pushed } }],
playerPos: { voxelIdx: 0, direction: "east" }, 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: [{ codeviews: [{
name: "main", name: "main",
nMaxBlocks: 3, nMaxBlocks: 3,
@ -72,16 +91,17 @@ export const levels: LevelInitializer[] = [
}], }],
activeCodeview: "main", activeCodeview: "main",
allowedCodeBlocks: ["forward", "turn_right", "turn_left", "jump", "action", "f1"], 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", 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: 1, z: 1 },
{ x: 0, y: 2, z: 1 }, { x: 0, y: 2, z: 1 , actionable: { type: BUTTON_ACTIONABLE.type, pushed: BUTTON_ACTIONABLE.pushed } },
{ x: 0, y: 3, z: 0 }, { x: 0, y: 3, z: 2 },
{ x: 0, y: 4, z: 0 }, { x: 0, y: 4, z: 2 , actionable: { type: BUTTON_ACTIONABLE.type, pushed: BUTTON_ACTIONABLE.pushed } },
{ x: 0, y: 5, z: 0, 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" }, playerPos: { voxelIdx: 0, direction: "north" },
codeviews: [{ name: "main", nMaxBlocks: 4, blocks: [] }, codeviews: [{ name: "main", nMaxBlocks: 4, blocks: [] },
{ name: "f1", nMaxBlocks: 3, blocks: [] }], { name: "f1", nMaxBlocks: 3, blocks: [] }],
@ -91,15 +111,16 @@ export const levels: LevelInitializer[] = [
}, },
{ {
name: "jump n run 2", 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: 1, z: 1 },
{ x: 0, y: 2, z: 1 }, { x: 0, y: 2, z: 1 , actionable: { type: BUTTON_ACTIONABLE.type, pushed: BUTTON_ACTIONABLE.pushed } },
{ x: 1, y: 2, z: 0 }, { x: 1, y: 2, z: 2 },
{ x: 2, y: 2, z: 0 }, { x: 2, y: 2, z: 2 , actionable: { type: BUTTON_ACTIONABLE.type, pushed: BUTTON_ACTIONABLE.pushed } },
{ x: 3, y: 2, z: 0, 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" }, playerPos: { voxelIdx: 0, direction: "north" },
codeviews: [{ name: "main", nMaxBlocks: 4, blocks: [] }, codeviews: [{ name: "main", nMaxBlocks: 1, blocks: [] },
{ name: "f1", nMaxBlocks: 3, blocks: [] }], { name: "f1", nMaxBlocks: 5, blocks: [] }],
activeCodeview: "main", activeCodeview: "main",
allowedCodeBlocks: ["forward", "turn_right", "turn_left", "jump", "action", "f1"], allowedCodeBlocks: ["forward", "turn_right", "turn_left", "jump", "action", "f1"],
introMessages: null introMessages: null

34
src/index.css
View File

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

2
src/store/codeBlocks/reducers.ts
View File

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