{"id":27404437,"url":"https://github.com/itzzfirestuff/packetsniper","last_synced_at":"2026-04-08T18:01:30.472Z","repository":{"id":287708465,"uuid":"965555736","full_name":"ItzzFirestuff/PacketSniper","owner":"ItzzFirestuff","description":"The sickest cybersecurity arcade game you never knew you needed fr fr","archived":false,"fork":false,"pushed_at":"2025-04-13T14:33:12.000Z","size":6793,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-03T16:33:11.890Z","etag":null,"topics":["firestuff","game","gamedev","js-game","mini-game","netlify","react","shooter-game","simple-game","simple-project","threejs","tsx","typescript","vibe-coding","vite","webgl"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ItzzFirestuff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-13T12:28:32.000Z","updated_at":"2025-04-13T14:33:15.000Z","dependencies_parsed_at":"2025-06-01T23:05:23.599Z","dependency_job_id":"53af5b34-e555-429b-b0b7-e6c69320d6cc","html_url":"https://github.com/ItzzFirestuff/PacketSniper","commit_stats":null,"previous_names":["itzzfirestuff/packetshooter"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ItzzFirestuff/PacketSniper","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItzzFirestuff%2FPacketSniper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItzzFirestuff%2FPacketSniper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItzzFirestuff%2FPacketSniper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItzzFirestuff%2FPacketSniper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ItzzFirestuff","download_url":"https://codeload.github.com/ItzzFirestuff/PacketSniper/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItzzFirestuff%2FPacketSniper/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31567227,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["firestuff","game","gamedev","js-game","mini-game","netlify","react","shooter-game","simple-game","simple-project","threejs","tsx","typescript","vibe-coding","vite","webgl"],"created_at":"2025-04-14T05:29:17.435Z","updated_at":"2026-04-08T18:01:30.467Z","avatar_url":"https://github.com/ItzzFirestuff.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎯 PACKET SNIPER 🎯\n\n\u003e **The sickest cybersecurity arcade game you never knew you needed fr fr**\n\nHey there, cyber defenders! 👋 Ready to stop some sus network traffic and become the ultimate packet sniper? This game is straight-up FIRE - built with React + Vite + Firebase and all the cool tech that keeps the vibes immaculate. \n\nNo cap, this project slaps. It's giving cyberpunk aesthetics meets arcade-shooter energy meets network security simulation. 🔥\n\n![Game Preview](docs/screenshots/gameplay2.png)\n\n## 🎮 Gameplay - How It Works\n\nBro, the concept is simple but the execution is ELITE:\n\n- 🖱️ **Point and Click** - Use your mouse to aim and shoot down malicious packets\n- 🛡️ **Protect the Network** - Don't let bad packets through + don't shoot the good ones!\n- 📊 **Level Up System** - Grind that XP, watch your level go brrrr, unlock new abilities\n- 🏆 **Leaderboards** - Flex on your fellow hackers with your sick scores\n\nThe game gets progressively harder with each wave - more packets, faster movement, and trickier identification challenges. Different packet types have different visuals and behaviors. It's lowkey addicting.\n\n## 🧠 Game Logic Breakdown\n\nHere's how the game engine is cookin':\n\n### 🎯 Core Mechanics\n- **Packet Generation**: Random spawning of different packet types based on difficulty\n- **Physics Engine**: Packets move with velocity + acceleration calculations\n- **Collision Detection**: Pixel-perfect hit detection for your shots\n- **Scoring System**: Points based on accuracy, speed, and packet type\n- **Difficulty Scaling**: Wave-based progression with increasing challenge\n\n### 🚀 Progression System\n- **XP**: Gain experience points for successful hits\n- **Leveling**: Unlock new abilities, backgrounds, and challenges\n- **Special Effects**: Higher levels get wild visual effects (hyperspeed grid, etc.)\n\n### 🔄 Game Loop\n```\n1. Wave starts → Packets spawn at random intervals\n2. Player shoots → Hit detection calculated\n3. Score updates → XP accrues\n4. End-of-wave stats → Next wave begins with increased difficulty\n5. Repeat until game over → Final score saved to leaderboard\n```\n\n## 🏗️ Project Structure\n\nThe codebase is organized like this (it's actually clean af):\n\n```\n📂 client/\n  📂 public/\n    📂 sounds/            # Game audio files\n    📂 textures/          # Game textures\n    📂 geometries/        # 3D model data\n    📂 fonts/             # Custom fonts\n    📂 favicon.ico        # Site icon\n  📂 src/\n    📂 components/\n      📂 game/            # Game mechanics components\n      📂 ui/              # Shadcn UI components \u0026 custom UI\n      📂 AuthModal.tsx    # Login/register modal\n      📂 Leaderboard.tsx  # Leaderboard component\n    📂 lib/\n      📂 stores/          # Zustand state stores\n        📂 useAudio.tsx   # Audio state management\n        📂 usePacketSniper.tsx  # Main game state\n        📂 useGame.tsx    # Game control state\n      📂 firebase.ts      # Firebase integration\n      📂 sounds.ts        # Sound initialization\n      📂 packetData.ts    # Packet types definitions\n      📂 utils.ts         # Utility functions\n    📂 pages/\n      📂 Home.tsx         # Main menu \u0026 auth screen\n      📂 Game.tsx         # Gameplay screen\n      📂 Credits.tsx      # Credits screen with scroll effect\n    📂 assets/            # Static assets (icons, images)\n    📂 styles/            # Global styles and animations\n    📂 App.tsx            # Main app component\n    📂 index.css          # Global CSS\n    📂 main.tsx           # Entry point\n```\n\n## 🎮 Game Showcase\n\nStep into the neon-lit world of Packet Sniper with these game highlights!\n\n\u003e **Note:** The screenshots referenced below are placeholders. To add your own screenshots:\n\u003e 1. Create a `docs/screenshots` directory (already done for you)\n\u003e 2. Take screenshots of your game \n\u003e 3. Name them `home.png`, `gameplay.png`, `stats.png`, `tutorial.png`, and `credits.png`\n\u003e 4. Place them in the `docs/screenshots` folder\n\n### 🏠 Home Screen\n\n![Home Screen](docs/screenshots/menu.png)\n\nThe cyber-styled landing page features:\n- User authentication with agent tag system\n- Real-time leaderboard showing top players\n- Dynamic background with grid effects\n- Sound toggle and accessibility controls\n\n### ⚔️ Gameplay Experience\n\n![Gameplay](docs/screenshots/gameplay1.png)\n\nThe main arena where you'll defend the network:\n- Fast-paced packet shooting mechanics\n- Color-coded packet identification system\n- Real-time scoring and combo system\n- System health monitoring\n- Wave progression indicators\n\n### 📊 Career Stats\n\n![Stats](docs/screenshots/stats.png)\n\nTrack your progress with detailed stats:\n- Level progression system\n- Threat elimination metrics\n- Accuracy calculations\n- Comparison with previous sessions\n\n### 🎓 Tutorial System\n\n![Tutorial](docs/screenshots/how2play.png)\n\nLearn the ropes with an intuitive tutorial:\n- Step-by-step guidance\n- Interactive examples\n- Visual instruction\n- Video demonstrations\n\n### 🌟 Credits Screen\n\n![Credits](docs/screenshots/credits.png)\n\nA cinematic scrolling experience:\n- Star field background effects\n- Adjustable scroll speed\n- Tech stack showcase\n- Easter eggs for the curious\n\n## 🚀 Quick Start Guide\n\nGet Packet Sniper up and running in minutes:\n\n```bash\n# Clone the repository\ngit clone https://github.com/yourusername/PacketSniper.git\n\n# Navigate to the project directory\ncd PacketSniper\n\n# Install dependencies\nnpm install\n\n# Start the development server\nnpm run dev\n```\n\nThen open http://localhost:5173 in your browser and start sniping those packets!\n\n## 🔥 Tech Stack\n\nThis project leverages a powerful combination of modern technologies:\n\n- ⚛️ **React 18** - UI components with Hooks and modern patterns\n- 📘 **TypeScript** - Type-safe development experience\n- 🚀 **Vite** - Lightning-fast development server and build tooling\n- 🔥 **Firebase RTDB** - Real-time database for authentication and leaderboards\n- 🎮 **Zustand** - Lightweight state management that just works\n- 💅 **TailwindCSS** - Utility-first CSS framework\n- 🎵 **Web Audio API** - Dynamic sound system with background music and effects\n- 🧩 **Shadcn/UI** - Customizable component system\n\n## 🔌 Firebase Integration Setup\n\nThe game uses Firebase for authentication and storing leaderboard data. Here's how to set it up:\n\n1. Create a Firebase project at [firebase.google.com](https://firebase.google.com/)\n2. Create a Realtime Database (RTDB)\n3. Set up security rules for the database:\n\n```\n{\n  \"rules\": {\n    \"users\": {\n      \".read\": true,\n      \".write\": true\n    },\n    \"leaderboard\": {\n      \".read\": true,\n      \".write\": true\n    }\n  }\n}\n```\n\n4. Get your Firebase config values from the Firebase console (Project Settings \u003e General \u003e Your Apps \u003e Firebase SDK snippet \u003e Config)\n5. Create a `.env.local` file with your Firebase configuration values:\n\n```\nVITE_FIREBASE_API_KEY=your-api-key\nVITE_FIREBASE_AUTH_DOMAIN=your-project-id.firebaseapp.com\nVITE_FIREBASE_PROJECT_ID=your-project-id\nVITE_FIREBASE_STORAGE_BUCKET=your-project-id.appspot.com\nVITE_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id\nVITE_FIREBASE_APP_ID=your-app-id\nVITE_FIREBASE_DATABASE_URL=https://your-project-id-default-rtdb.firebaseio.com\n```\n\n## 💖 Contributing\n\nContributions are always welcome! Whether it's bug fixes, feature additions, or just improvements to the documentation.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## 📱 Contact \u0026 Community\n\n- 🐦 Twitter: [@ItzzFirestuff](https://twitter.com/ItzzFirestuff)\n- 📺 YouTube: [Itzzfirestuff](https://youtube.com/@Itzzfirestuff)\n- 🌟 GitHub: [ItzzFirestuff](https://github.com/ItzzFirestuff)\n\n## 🎨 Assets \u0026 Licensing\n\nAll assets, sounds, and images used in Packet Sniper are **free to use in your own projects**! Feel free to:\n- Remix the pixel art\n- Sample the sound effects\n- Reuse UI components and animations\n\n**Music:** All background music tracks are AI-generated, making them royalty-free and available for your own projects.\n\n## 🔐 Authentication Notes\n\nFor simplicity, this project uses Firebase Realtime Database (RTDB) for authentication with the following approach:\n\n- User credentials are stored in plain text to keep the authentication system simple\n- This approach is not secure for production applications but works for this small project\n- No sensitive user information is collected (just username, tag ID, and password)\n- The simplified auth system made it faster to implement user accounts and leaderboard features\n\nIf you're adapting this code for a real-world application, you should implement proper authentication using Firebase Authentication or another secure solution.\n\n## 💯 The Vibe Check\n\nThis project was built with chaotic good energy by [@ItzzFirestuff](https://twitter.com/ItzzFirestuff) - Check out more of my projects on my [YouTube channel](https://youtube.com/@Itzzfirestuff)!\n\nFeel free to fork, star ⭐, or contribute to make this game even more lit! Let's see those PRs fr fr.\n\n---\n\n*Remember - in cybersecurity, accuracy \u003e speed. But in this game... you need both to climb that leaderboard.* 😎\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitzzfirestuff%2Fpacketsniper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitzzfirestuff%2Fpacketsniper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitzzfirestuff%2Fpacketsniper/lists"}