nik/watch-party
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added snowfall effect to frontend

Browse Source
This commit is contained in:
Nik Afiq 2025-12-19 22:34:15 +09:00
parent 5e735c2989
commit 139ce88d7f
3 changed files with 28 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/package-lock.json generated
View File

@ -11,7 +11,8 @@
"firebase": "^12.6.0",
"react": "^19.1.1",
"react-dom": "^19.1.1",
"react-router-dom": "^7.9.5"
"react-router-dom": "^7.9.5",
"react-snowfall": "^2.4.0"
},
"devDependencies": {
"@eslint/js": "^9.36.0",
@ -4215,6 +4216,12 @@
"react": "^19.1.1"
}
},
"node_modules/react-fast-compare": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
"integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
"license": "MIT"
},
"node_modules/react-refresh": {
"version": "0.17.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@ -4263,6 +4270,19 @@
"react-dom": ">=18"
}
},
"node_modules/react-snowfall": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/react-snowfall/-/react-snowfall-2.4.0.tgz",
"integrity": "sha512-KAPMiGnxt11PEgC2pTVrTQsvk5jt1kLUtG+ZamiKLphTZ7GiYT1Aa5kX6jp4jKWq1kqJHchnGT9CDm4g86A5Gg==",
"license": "MIT",
"dependencies": {
"react-fast-compare": "^3.2.2"
},
"peerDependencies": {
"react": "^16.8 || 17.x || 18.x || 19.x",
"react-dom": "^16.8 || 17.x || 18.x || 19.x"
}
},
"node_modules/require-directory": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",

3
frontend/package.json
View File

@ -15,7 +15,8 @@
"firebase": "^12.6.0",
"react": "^19.1.1",
"react-dom": "^19.1.1",
"react-router-dom": "^7.9.5"
"react-router-dom": "^7.9.5",
"react-snowfall": "^2.4.0"
},
"devDependencies": {
"@eslint/js": "^9.36.0",

5
frontend/src/App.tsx
View File

@ -9,6 +9,7 @@ import DebugOverlay from "./components/DebugOverlay";
import AuthStatus from "./components/AuthStatus";
import { useAuth } from "./auth/AuthProvider";
import "./index.css";
import Snowfall from "react-snowfall";
const TIME_SYNC_OFF_THRESHOLD = 100;
@ -29,6 +30,10 @@ export default function App() {
return (
<div className={`site ${open ? "sidebar-open" : ""}`}>
<Snowfall
snowflakeCount={140}
style={{ position: "fixed", width: "100vw", height: "100vh", pointerEvents: "none", zIndex: 2 }}
/>
{/* Top-left header (outside the card) */}
<header className="site-header">