Project-SS is a responsive, interactive web portal designed for a Role-Playing community. It serves as a centralized hub for lore, game mechanics, and character progression data, featuring a "Teal Neon" futuristic aesthetic.
- Data-Driven UI: Dynamically fetches and renders complex character class and NPC data from JSON files using Vanilla JavaScript.
- Responsive Design: A seamless user experience across all devices, built with a custom CSS "Cyberpunk" theme and Bootstrap 5.
- State Navigation: Implemented previous/next page logic for smooth browsing of character classes and quest details.
- Interactive Elements: Quest acceptance alerts and dynamic content injection based on user selection.
The Challenge: The community has a vast amount of intricate data (Stats, Rules, Lore) with varying structures for each character class. Statically coding every page would be inefficient and hard to maintain.
The Solution: I designed a specialized JSON Schema to standardize the data. I then developed a Dynamic Content Loader in JavaScript that parses these JSON files and injects the information into the DOM based on the current context. This approach mimics a "Single Page Application" feel within a static multi-page structure.
While current version serves as a comprehensive static guide, I plan to evolve Project-SS into a fully dynamic platform:
- Integrated Character Management: Replace Google Forms with a built-in User Registration & Authentication system.
- Account-Bound Progression: Link character data to user accounts, allowing players to track their own stats and equipment.
- Interactive Quest Engine: Implement a backend to track quest status (e.g., "Accepted," "In Progress," "Completed") directly tied to the user's profile.
- Digital Inventory (Stockpile): Create a personal item management page where users can view and manage their character's assets in real-time.
- Admin Dashboard: Develop a secure interface for community managers to update lore, quests, and NPC data without modifying the source code.
- HTML: Semantic structure for rules, status info, quest boards, and agent profiles.
- CSS (
style.css): Custom styling integrated with Bootstrap to achieve a neon-futuristic UI. - JavaScript (
script.js): Core logic for data fetching, DOM manipulation, and UI interactions. - JSON Data: Centralized data storage for character classes and NPC agents.
Click to view screenshots
- Clone the repository:
git clone https://github.com/savant777/Project-SS.git
- Open
index.htmlin your web browser or use VS Code Live Server.
MIT License