mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 15:06:20 +00:00
simoleo89
4ab38d3f9a
Replace the outer AnimatePresence wrapper around the four toolbar rows
(desktop backplate, left-nav, right-nav, mobile-nav) with always-mounted
motion.div elements driven by an isVisible-derived variant string
('visible' or 'hidden'). This eliminates the spam-toggle bug: rapid
clicks on the show/hide chevron previously left motion children in
inconsistent intermediate states (stuck opacity 0, phantom scale 0.8)
because AnimatePresence + Fragment + multiple keyed children breaks
when enter/exit cycles overlap. With variants, framer-motion's spring
solver picks up from the current animated value on each retarget, so
spam-clicking just settles smoothly toward whichever target is current.
Refactor details:
- containerVariants drops its 'exit' state (now lives in 'hidden').
- itemVariants drops 'exit' as well — animation target is the same as
hidden, and exit doesn't apply without AnimatePresence.
- New shellVariants for the backplate.
- pointer-events is animated per-variant ('auto' visible / 'none'
hidden) instead of pinned via a Tailwind class, so the hidden rows
don't intercept clicks.
- Wrapper variants are computed inside the component because
leftNavVariants.hidden depends on isInRoom (the nav slides in from
the side in-room, from the bottom otherwise).
- Variant inheritance: outer wrapper drives 'visible'/'hidden';
inner container (containerVariants) and items (itemVariants) inherit
via framer's variant propagation, so stagger runs in both directions
without needing AnimatePresence.
- Inner AnimatePresence around the Me popover stays — it has a single
keyed child with a clean conditional and doesn't suffer from the
Fragment-wrapping issue.
Cleanups while here:
- Dropped hasDesktopUnifiedShell: always equal to isToolbarOpen inside
the isInRoom-gated block, so the ternary was always picking one
branch. Inlined.
- Dropped showDesktopShell: same redundancy inside the (now removed)
AnimatePresence. The 'else' branch of its ternary was dead code.
- Extracted spring transition constants (SHELL_TRANSITION,
NAV_TRANSITION, ME_POPOVER_TRANSITION) so they're declared once.
- Removed pointer-events-auto from wrapper className strings where
the variant now owns it (mobile-nav, left-nav, right-nav).
Behaviour: identical to before for a single click cycle (open → close
animates with the same spring). The previously broken spam-click path
now settles cleanly. Tests still 193/193, typecheck 0 errors, prod
build unchanged.
v2.2.0 -Nitro V3 !! Use at Own Risk as it is still in Beta !!
Prerequisites
- Git
- NodeJS >= 18
- If using NodeJS < 18 remove
--openssl-legacy-providerfrom the package.json scripts
- If using NodeJS < 18 remove
- Yarn
npm i yarn -g
Installation
- First you should open terminal and navigate to the folder where you want to clone Nitro and Nitro-Renderer
- Clone Nitro (Expl. C:\Github)
git clone https://github.com/duckietm/Nitro-V3.git<== For now switch to Dev-RendererV2git clone https://github.com/duckietm/Nitro_Render_V3.git- Install the dependencies for the renderer : cd C:\Github\Nitro_Render_V3
yarn install
- Now we will create a Link for the Nitro Renderer :
yarn linkThis will give you a link addressyarn link "@nitrots/nitro-renderer" - Install the dependencies for Cool UI : cd C:\Github\Nitro-V3
yarn installyarn link "@nitrots/nitro-renderer"<== This will link the renderer in the project
- Rename a few files
- Copy
public/configuration/renderer-config.exampletopublic/configuration/renderer-config.json - Copy
public/configuration/ui-config.exampletopublic/configuration/ui-config.json - Copy
public/configuration/client-mode.exampletopublic/configuration/client-mode.json - Set your links
- Open
public/configuration/renderer-config.json- Update
socket.url, asset.url, image.library.url, & hof.furni.url
- Update
- Open
public/configuration/ui-config.json- Update
camera.url, thumbnails.url, url.prefix, habbopages.url
- Update
yarn build<== the final step to build the DIST folder this is where your browser needs to point / or upload this to your /client if you do the compile on a other machine (preferd)- You can override any variable by passing it to
NitroConfigin the index.html
- Copy
Usage
- To use Nitro you need
.nitroassets generated, see nitro-converter for instructions - See Morningstar Websockets for instructions on configuring websockets on your server
Development
Run Nitro in development mode when you are editing the files, this way you can see the changes in your browser instantly
yarn start
Production
To build a production version of Nitro just run the following command
yarn build:prod
- A
distfolder will be generated, these are the files that must be uploaded to your webserver - Consult your CMS documentation for compatibility with Nitro and how to add the production files