Create a 3D game for kids to practice their math - this should in clude adition, subtraction, multiplication and division.The game should be fun and similar to roblox where kids can run around a world solving math problems. It should be mulit-player and connected to the internet.Use Typescript, Hono.js, React.js, Drizzle, SQLIte and Three.js plus any other technologies you suggest. Take your time, ask me any questions thay you need.
the vite config is empty?
how do I start the game
Uncaught SyntaxError: The requested module '/src/client/game/GameScene.tsx' does not provide an export named 'default' (at App.tsx:4:8)
react-dom.development.js:15408 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:1. You might have mismatching versions of React and the renderer (such as React DOM)2. You might be breaking the Rules of Hooks3. You might have more than one copy of React in the same appSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. at Object.current (Player.tsx:17:54)
I can see the world, b ut I can only move the camera. I cant move around. Please Make it so I can run around the world and select different math questions. I should be able to see my character running as well
When i start moving, it wont slow down and I fall off the world. If I let go of the arrows it should stop. I also cannoy click or run into any of the math problems
now i just fall through the earth as soon as it loads
it should slow down quicker
After I press forward for a bit, the back button doesnt work
Okay, now when I run into the boxes, nothing hapens. I should be presented with a math problem and possible options. Keep score. Build this whole game out for me
the arrows still are weird. Once I move past the boxes it seems the arrows reset. It should be simple: I press forward to go forward, back to go back, etc...
That didnt work. It should be simple! FIX IT
Good. now allow the character to move a bit faster and face the direction they are running in.
How do I solve a math problem? Running into the box turns it yellow, but thats all that happens
I am unable to get a math problem to trigger. It should happen as soon as I run into it without any mose
I still do not see any math problems pop up. It it only green for a split second
[plugin:vite:react-babel] /Users/wesbos/Sites/mathl33t/src/client/components/HUD.tsx: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment ? (52:10) 55 |
I see - the HUD is off screen. Overlap it on top of the game please
It should be absolute, and have a top 0
you silly goose. Tailwind is not installed
change those styles back to tailwind
the HUD is off the top of the screen. You dont need the fancy translate values
The game should show if the selected answer is correct or not - play a sound if they get it right/wrong. Highlight the correct anser in green, and the incorrect answer in red
The cursor keeps disappearing. Remove whatever is doing that.
add a gitignore file
Now the functionality is working, plrease improve the graphics. Make everything blocky like Minecraft. The character should look like a person and be able to run with arms + legs. Make this look like a million bucks
Keep going - add clouds to the sky but have them be the shape of math symbols and numbers. Add birds and planes
The clouds should be blocky and make the shapes. You just added clouds with numbers on them
I dont see any clouds now. Add lots
the clouds should still be numbers or math symbols
If I walk away from a math problem, dismiss the HUD
Okay. Lets work on the world. There should be Math problems in random places. When I finish a problem, that box should go away. Make the world interesting - I could go into buildings, or jump on things to get to math problems
The boxes are now in the sky - how do I get to them?
too difficult, Please make the boxes reachable by placing them on items
let me jump higher
the boxes should disappear when I solve one
remove all the buildings, its too much.
can you make it so the camer follows behind the character?
the controls are backawards - left is right, and forward is back
now the world is glitching out
the camera no long follows from 3rd person
A few fixes:1. The clouds are too low and there are too many. Maybe 4-5 max. Make them smaller2. When I jump, I float for too long. Make the jump upn and down faster.3. The boxes Should not say "Math Problem", but each side should say the question. For example 1 + 1 would be three sides. When I solve a question, remove the box from the world and pop up a ne wone
I rejected by accident. Please restore
2GameScene.tsx:165 Uncaught ReferenceError: Building is not defined
at GameScene.tsx:165:10
at Array.map (
the jumping is still too slow
that just mad me jump higher
the jump is still too slow. Make it faster, both up and down
YOU KEEP MAKING IT JUMP HIGHER. MAKE IT JUMP NORMALLY BUT NOT FLOAT FOR 5 SECONDS LISTEN PLEASE
STILL WAY TOO LONG
STILL THE SAME MAKE IT WAY FASTER ARE YOU LISTENING
you just made him jump higher and its still slow. Holy shit please get it right
I want the same jump, but it should come back down to earth much quicker.
The jump should be a bit higher, but the gravity even more
Make the world better and more fun to explore
you just added boxes. BORING. Add these very detailed items:1. a pit of fire2. A posion goose3. a car you can drive
continue
remove all the floating blocks - put all the math questions on the ground
There should only be at most 6 blocks in the world. The blocks should have their math question wrirrten on them
GameScene.tsx:252 Uncaught ReferenceError: useState is not defined at MathBlock (GameScene.tsx:252:37) at renderWithHooks (react-reconciler.development.js:7363:18) at mountIndeterminateComponent (react-reconciler.development.js:12327:13) at beginWork (react-reconciler.development.js:13831:16) at HTMLUnknownElement.callCallback2 (react-reconciler.development.js:14219:14) at Object.invokeGuardedCallbackDev (react-reconciler.development.js:14268:16) at invokeGuardedCallback (react-reconciler.development.js:14329:31) at beginWork$1 (react-reconciler.development.js:19537:7) at performUnitOfWork (react-reconciler.development.js:18686:12) at workLoopConcurrent (react-reconciler.development.js:18672:5)6GameScene.tsx:252 Uncaught ReferenceError: useState is not defined at MathBlock (GameScene.tsx:252:37) at renderWithHooks (react-reconciler.development.js:7363:18) at mountIndeterminateComponent (react-reconciler.development.js:12327:13) at beginWork (react-reconciler.development.js:13831:16) at HTMLUnknownElement.callCallback2 (react-reconciler.development.js:14219:14) at Object.invokeGuardedCallbackDev (react-reconciler.development.js:14268:16) at invokeGuardedCallback (react-reconciler.development.js:14329:31) at beginWork$1 (react-reconciler.development.js:19537:7) at performUnitOfWork (react-reconciler.development.js:18686:12) at workLoopSync (react-reconciler.development.js:18597:5)6hook.js:608 The above error occurred in the
The answers seem to be wrong - when It asks what is 5 +3, it says the answer is "53"
When I answer a block correctly, remove that block from the world
the blocks remain when answered
The question block is STILL THERE after answering it.LIsten carefully: REMOVE IT ENTIRELY
Its still on the page.
still not being removed
still not removed! Can you add logging for when blocks are written and removed?
there is not loggin happening when the block is solved correctly. THis is what I see:Rendering block problem-1GameScene.tsx:402 Rendering block problem-2GameScene.tsx:402 Rendering block problem-3GameScene.tsx:402 Rendering block problem-4GameScene.tsx:402 Rendering block problem-5GameScene.tsx:402 Rendering block problem-6GameScene.tsx:261 MathBlock problem-1 - RenderingGameScene.tsx:261 MathBlock problem-2 - RenderingGameScene.tsx:261 MathBlock problem-3 - RenderingGameScene.tsx:261 MathBlock problem-4 - RenderingGameScene.tsx:261 MathBlock problem-5 - RenderingGameScene.tsx:261 MathBlock problem-6 - Rendering2GameScene.tsx:294 MathBlock problem-3 - Collision detected
that fixed it! Thank you
right now when you select the right/wrote answer, it shows the value for a few seconds. When you remove the block, its immedately removed as well. Can you add a delay so we can visualize the right answer
change the 2000ms to 1200ms
When I walk away from a block, close the question
add a store where you can spend your points to buy things: laptop, phone, candy bar or a soda. Each item has a price
2events-776716bd.esm.js:36 Uncaught Error: R3F: Span is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively at createInstance (events-776716bd.esm.js:36:15) at completeWork (react-reconciler.development.js:10851:28) at completeUnitOfWork (react-reconciler.development.js:18725:16) at performUnitOfWork (react-reconciler.development.js:18697:5) at workLoopSync (react-reconciler.development.js:18597:5) at renderRootSync (react-reconciler.development.js:18565:7) at recoverFromConcurrentError (react-reconciler.development.js:17948:20) at performConcurrentWorkOnRoot (react-reconciler.development.js:17848:22) at workLoop (scheduler.development.js:266:34) at flushWork (scheduler.development.js:239:14)
the store should be rendered inside the game, not just in HTML and CSS
walking into the store doesnt work
i cant get into the store - there is not door
I see the door buy i cant walk into it still
make this app realtime and mutiplayer. There is a server vbut im not sure its doing anything
is the websocket stuff hooked up?
I dont see mulitple players on the game
Still nothing. I just see {"type":"connected"} being sent over the websocket, and then pings every now and then. Should it not render every player on every canvas?
You removed all the math questions! And it still doesnt do anything
I still do not see any other players when opening in a new tab. No info is being sent through the websocket
Oh wait I dont' see ANY websocket connection in dev tools. Are you sure its being instansiated? Add logging if you needI see this error in the console:
> mathl33t@0.0.1 dev:server /Users/wesbos/Sites/mathl33t
> tsx watch src/server/index.ts
Setting up new WebSocket connection
/Users/wesbos/Sites/mathl33t/src/server/websocket/index.ts:117
ws.send(JSON.stringify({ type: 'CONNECTED' }));
^
TypeError: ws.send is not a function
at setupWebSocketServer (/Users/wesbos/Sites/mathl33t/src/server/websocket/index.ts:117:6)
at
Can you add a PIT where the character can fall down into and die?
the lavapit doesnt make you die. Make it die
Create a character changer UI. add the ability to customize the character. This should include eyes, hair, skin color, lips and shirt. Provide a list of possible options for each.
this error happens:[plugin:vite:esbuild] Transform failed with 1 error:
/Users/wesbos/Sites/mathl33t/src/client/store/gameStore.ts:226:2: ERROR: Expected "}" but found "connectToServer"
/Users/wesbos/Sites/mathl33t/src/client/store/gameStore.ts:226:2
Expected "}" but found "connectToServer"
224| playerId,
225| appearance: { ...appearance, ...updates }
226| connectToServer: () => {
| ^
227| const socket = new WebSocket(`ws://${window.location.host}/ws`);
228| const playerId = Math.random().toString(36).substring(7);
at failureErrorWithLog (/Users/wesbos/Sites/mathl33t/node_modules/.pnpm/esbuild@0.21.5/node_modules/esbuild/lib/main.js:1472:15)
at /Users/wesbos/Sites/mathl33t/node_modules/.pnpm/esbuild@0.21.5/node_modules/esbuild/lib/main.js:755:50
at responseCallbacks.
i dont see a button to open the player customizer
add control for touch screens like iphone and ipad