SchreckNet Lite

Unofficial Vampire: The Masquerade V20/V5 interactive character sheet.
Fan-made project using Tailwind CSS and vanilla JavaScript.

👉 Not yet... 🫓

📌 About the project

The goal is to recreate a simple, interactive character sheet for Vampire: The Masquerade, starting with V20 and later adding V5 support.
It is inspired by the SchreckNet character sheet site and by existing fan projects, especially VTMsite by DrSharky. ❤️

For now, the scope is just the sheet UI — dots, dropdowns, form inputs, and basic V20 freebie point calculations.
No saving, exporting, or login features yet.

This is a pure front-end project for now, using Tailwind CSS and vanilla JavaScript. Future plans include moving to React, adding backend functionality, and expanding the toolset.

❗ This is a personal fan project! All game rules, terminology, and setting elements are owned by their respective copyright holders (White Wolf Publishing / Paradox Interactive). This project is for educational, recreational, and non-commercial purposes only.

🍮 Features (current and planned)

• Minimalist, responsive design
• Three-page structure:
  • Home/welcome page
  • V20 character sheet
  • V5 character sheet (placeholder for now)
• Interactive dots for attributes/skills
• Dropdowns for disciplines, backgrounds, etc.
• Basic freebie point allocation for V20
• Tailwind CSS for styling
• Vanilla JavaScript for interactivity

🔧 Tech stack

• HTML5
• Tailwind CSS (v3.x)
• Vanilla JavaScript

📷 Inspirations and sources

• SchreckNet
• VTMsite by DrSharky
• Official V20 and V5 rulebooks (for structure and reference)
• Tailwind CSS documentation

⏳ Status

Currently in early development: figuring stuff out and building the UI layout.

📝 To-Do List

Home Page

• Set up the base HTML structure for the home page.
• Configure Tailwind with custom fonts, colors, and spacing.
• Style the home page layout using Tailwind CSS.
• Add navigation links to the V20 and V5 sheets.

V20 Character Sheet

Structure & Layout

• Build the main HTML structure for the V20 sheet.
• Implement mobile and desktop responsiveness for the entire V20 sheet layout.

Basic Sections

• Create the header section with fields for character name, concept, chronicle, etc.
• Build the attributes section (Physical, Social, Mental) with interactive dots.
• Lay out the abilities section (Talents, Skills, Knowledges) with interactive dots.
• Design the advantages section, including:
  • Disciplines
  • Backgrounds
  • Virtues
• Create sections for merits & flaws and humanity/paths.
• Set up the health and willpower tracks.

Styling (Tailwind)

• Style the overall V20 sheet layout.
• Style the interactive dots to reflect different states (e.g., filled, empty).
• Apply styling to all form inputs and dropdowns.

Interactivity (JavaScript)

• Implement click handling for the attribute dots.
• Implement click handling for the ability dots.
• Enable dropdown selections for disciplines and backgrounds.
• Create basic V20 freebie point calculation logic.
  • Attributes
  • Abilities
  • Advantages

V5 Character Sheet

• Create a placeholder page for the V5 sheet.
• Build the main HTML structure for the V5 sheet.
• Style the V5 sheet layout.

General & Deployment

• Perform a final code cleanup and add comments for clarity.
• Deploy the site to GitHub Pages.
• Update the README with the live site link.

📝 Disclaimer

This is a fan-made, non-commercial project created for educational and recreational purposes only.
All game mechanics, setting terms, and thematic elements belong to their respective copyright holders.
This project is not affiliated with, endorsed, sponsored, or specifically approved by White Wolf Publishing, Paradox Interactive, or any related entity.
All original code in this repository is licensed under the MIT License.