Hello World
filahf / r3f-spotify-game Goto Github PK
View Code? Open in Web Editor NEWA music game built with react-three-fiber and the Spotify API
Home Page: https://streamable.com/1a5mx3
A music game built with react-three-fiber and the Spotify API
Home Page: https://streamable.com/1a5mx3
Hello World
package install only works with --force, and breaks upon game loading after spotify verification. appears to be an issue with chakra-ui which utilizes @emotion-styled.
error I receive after spotify verification:
Unhandled Runtime Error
ContextError: useStyles: styles
is undefined. Seems you forgot to wrap the components in <StylesProvider />
Source
src\hooks\useSpotifyPlayer.ts (34:6) @ window.onSpotifyWebPlaybackSDKReady
32 | })
33 |
34 | useStore.setState({ spotifyWebPlayer: player })
| ^
35 |
36 | player.addListener('not_ready', ({ device_id }) => {
37 | console.error('Device ID has gone offline', device_id)
installation error (no --force tag just npm install):
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @chakra-ui/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^17.0.2" from the root project
npm ERR! peer react@">=16.8.6" from @chakra-ui/[email protected]
npm ERR! node_modules/@chakra-ui/accordion
npm ERR! @chakra-ui/accordion@"1.4.12" from @chakra-ui/[email protected]
npm ERR! node_modules/@chakra-ui/react
npm ERR! @chakra-ui/react@"^1.8.6" from the root project
npm ERR! 1 more (chakra-ui-steps)
npm ERR! 89 more (@chakra-ui/alert, @chakra-ui/avatar, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@">=18" from @chakra-ui/[email protected]
npm ERR! node_modules/@chakra-ui/system
npm ERR! @chakra-ui/system@"^2.6.1" from the root project
npm ERR! peer @chakra-ui/system@">=1.0.0" from @chakra-ui/[email protected]
npm ERR! node_modules/@chakra-ui/accordion
npm ERR! @chakra-ui/accordion@"1.4.12" from @chakra-ui/[email protected]
npm ERR! node_modules/@chakra-ui/react
npm ERR! @chakra-ui/react@"^1.8.6" from the root project
npm ERR! 1 more (chakra-ui-steps)
npm ERR! 37 more (@chakra-ui/alert, @chakra-ui/anatomy, ...)
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR! peer react@">=18" from @chakra-ui/[email protected]
npm ERR! node_modules/@chakra-ui/system
npm ERR! @chakra-ui/system@"^2.6.1" from the root project
npm ERR! peer @chakra-ui/system@">=1.0.0" from @chakra-ui/[email protected]
npm ERR! node_modules/@chakra-ui/accordion
npm ERR! @chakra-ui/accordion@"1.4.12" from @chakra-ui/[email protected]
npm ERR! node_modules/@chakra-ui/react
npm ERR! @chakra-ui/react@"^1.8.6" from the root project
npm ERR! 1 more (chakra-ui-steps)
npm ERR! 37 more (@chakra-ui/alert, @chakra-ui/anatomy, ...)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
I'll keep playing with it while I hope for a reply.
Could you add compability with Ubuntu Linux?
I have Ubuntu 22.04.4 LTS
terminal:
$ sudo ./yarn.lock
./yarn.lock: 5: @babel/code-frame@^7.0.0:: not found
./yarn.lock: 6: version: not found
./yarn.lock: 7: resolved: not found
./yarn.lock: 8: integrity: not found
./yarn.lock: 9: dependencies:: not found
./yarn.lock: 10: @babel/highlight: not found
./yarn.lock: 12: @babel/helper-module-imports@^7.12.13:: not found
./yarn.lock: 13: version: not found
./yarn.lock: 14: resolved: not found
./yarn.lock: 15: integrity: not found
./yarn.lock: 16: dependencies:: not found
./yarn.lock: 17: @babel/types: not found
./yarn.lock: 19: @babel/helper-plugin-utils@^7.16.7:: not found
./yarn.lock: 20: version: not found
./yarn.lock: 21: resolved: not found
./yarn.lock: 22: integrity: not found
./yarn.lock: 24: @babel/helper-validator-identifier@^7.16.7:: not found
./yarn.lock: 25: version: not found
...
./yarn.lock: 5212: yargs-parser@^21.0.0:: not found
./yarn.lock: 5213: version: not found
./yarn.lock: 5214: resolved: not found
./yarn.lock: 5215: integrity: not found
./yarn.lock: 5217: yargs@^17.0.0:: not found
./yarn.lock: 5218: version: not found
./yarn.lock: 5219: resolved: not found
./yarn.lock: 5220: integrity: not found
./yarn.lock: 5221: dependencies:: not found
./yarn.lock: 5222: cliui: not found
./yarn.lock: 5223: escalade: not found
./yarn.lock: 5224: get-caller-file: not found
./yarn.lock: 5225: require-directory: not found
./yarn.lock: 5226: string-width: not found
./yarn.lock: 5227: y18n: not found
./yarn.lock: 5228: yargs-parser: not found
./yarn.lock: 5230: [email protected]:: not found
./yarn.lock: 5231: version: not found
./yarn.lock: 5232: resolved: not found
./yarn.lock: 5233: integrity: not found
./yarn.lock: 5235: yocto-queue@^0.1.0:: not found
./yarn.lock: 5236: version: not found
./yarn.lock: 5237: resolved: not found
./yarn.lock: 5238: integrity: not found
./yarn.lock: 5240: zstddec@^0.0.2:: not found
./yarn.lock: 5241: version: not found
./yarn.lock: 5242: resolved: not found
./yarn.lock: 5243: integrity: not found
./yarn.lock: 5245: zustand@^3.5.1,: not found
./yarn.lock: 5246: version: not found
./yarn.lock: 5247: resolved: not found
./yarn.lock: 5248: integrity: not found
./yarn.lock: 5250: zustand@^3.7.1:: not found
./yarn.lock: 5251: version: not found
./yarn.lock: 5252: resolved: not found
./yarn.lock: 5253: integrity: not found
$
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.