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

make buttons beautiful

Browse Source
This commit is contained in:
Marius Unsel 2026-02-24 03:37:36 +01:00
parent bbbd5869e6
commit 841d94df94
5 changed files with 131 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
package-lock.json generated
View File

@ -12,6 +12,7 @@
"@types/lodash": "^4.17.23",
"@types/three": "^0.182.0",
"lodash": "^4.17.23",
"lucide-react": "^0.575.0",
"popmotion": "^11.0.5",
"react": "^19.2.0",
"react-dom": "^19.2.0",
@ -2787,6 +2788,15 @@
"yallist": "^3.0.2"
}
},
"node_modules/lucide-react": {
"version": "0.575.0",
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.575.0.tgz",
"integrity": "sha512-VuXgKZrk0uiDlWjGGXmKV6MSk9Yy4l10qgVvzGn2AWBx1Ylt0iBexKOAoA6I7JO3m+M9oeovJd3yYENfkUbOeg==",
"license": "ISC",
"peerDependencies": {
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/meshoptimizer": {
"version": "0.22.0",
"resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.22.0.tgz",

1
package.json
View File

@ -14,6 +14,7 @@
"@types/lodash": "^4.17.23",
"@types/three": "^0.182.0",
"lodash": "^4.17.23",
"lucide-react": "^0.575.0",
"popmotion": "^11.0.5",
"react": "^19.2.0",
"react-dom": "^19.2.0",

33
src/components/Editor.tsx
View File

@ -1,4 +1,5 @@
import * as React from "react";
import { Play, Bug, StepForward, RotateCcw, Square, ChevronUp, ChevronDown } 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";
@ -143,49 +144,55 @@ const OpsPalette = ({ ops, setDropZoneZIdx }) => {
const RuntimeControls = ({ start, fast, step, running, level, code, autostep, toggleAutoStep, toggleSpeed, finished }) => {
let DebugButton = () => (
<div className="controlbutton"
<div className="controlbutton debug"
onClick={() => {
start(level, code, level.playerPos)
}}>
debug
<Bug size={16} />
<span>debug</span>
</div>
)
let StepButton = () => (
<div className="controlbutton"
<div className="controlbutton step"
onClick={step}>
step
<StepForward size={16} />
<span>step</span>
</div>
)
let StartButton = () => (
<div className="controlbutton"
<div className="controlbutton run"
onClick={() => {
start(level, code, level.playerPos)
toggleAutoStep()
step()
}}>
run
<Play size={16} />
<span>run</span>
</div>
)
let ResetButton = () => (
<div className="controlbutton"
<div className="controlbutton reset"
onClick={() => game.reset()}>
reset
<RotateCcw size={16} />
<span>reset</span>
</div>
)
let ToggleSpeedButton = () => (
<div className="controlbutton"
<div className="controlbutton speed"
onClick={toggleSpeed}>
{fast ? "slower" : "faster"}
{fast ? <ChevronDown size={16} /> : <ChevronUp size={16} />}
<span>{fast ? "slower" : "faster"}</span>
</div>
)
let AbortButton = () => (
<div className="controlbutton"
<div className="controlbutton abort"
onClick={() => console.log("TODO")}>
abort
</div>
<Square size={16} />
<span>abort</span>
</div>
)
if (running) {

13
src/components/GameScreen.tsx
View File

@ -15,6 +15,7 @@ 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 { LayoutGrid, ArrowRight } from "lucide-react";
const MODAL_STYLES = {
'overlay': { background: '#11111166', zIndex: 99999 },
@ -80,8 +81,16 @@ const WonMessage = ({ nextRoute }) => {
<SpeechBubble message={"Good Job!"} />
</div>
</div>
<Link to={'/levels/'}>to levels</Link>
<Link to={nextRoute}> next</Link>
<div style={{ display: "flex", justifyContent: "center", gap: "1rem", marginTop: "1rem" }}>
<Link to={'/levels/'} className="modal-button levels">
<LayoutGrid size={18} />
<span>levels</span>
</Link>
<Link to={nextRoute} className="modal-button next">
<span>next</span>
<ArrowRight size={18} />
</Link>
</div>
</div>
)
}

96
src/index.css
View File

@ -214,20 +214,102 @@ h1 {
margin-right:2rem;
margin-top:0.4rem;
height:2.4rem;
gap: 0.5rem;
}
.controlbutton {
padding:0.5rem;
display:block;
border: solid #112 0.05rem;
border-radius:0.3rem;
background:#221;
padding: 0.4rem 0.8rem;
display: flex;
align-items: center;
gap: 0.4rem;
border: none;
border-radius: 0.4rem;
cursor:pointer;
user-select:none;
font-size: 0.85rem;
font-weight: 500;
transition: all 0.15s ease;
color: #fff;
}
.controlbutton:hover {
background:#332;
.controlbutton span {
line-height: 1;
}
.controlbutton.run {
background: #2a7;
}
.controlbutton.run:hover {
background: #3b8;
}
.controlbutton.debug {
background: #eA5;
color: #222;
}
.controlbutton.debug:hover {
background: #fb6;
}
.controlbutton.step {
background: #48b;
}
.controlbutton.step:hover {
background: #59c;
}
.controlbutton.reset {
background: #4af;
}
.controlbutton.reset:hover {
background: #5bf;
}
.controlbutton.speed {
background: #636;
}
.controlbutton.speed:hover {
background: #747;
}
.controlbutton.abort {
background: #e55;
}
.controlbutton.abort:hover {
background: #f66;
}
.modal-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.2rem;
border: none;
border-radius: 0.4rem;
font-size: 1rem;
font-weight: 500;
color: #fff;
text-decoration: none;
cursor: pointer;
transition: all 0.15s ease;
}
.modal-button:hover {
filter: brightness(1.1);
}
.modal-button.levels {
background: #48b;
}
.modal-button.next {
background: #2a7;
}
.levelSelectCaption {