Proof of concept for html5 hero system 6e campaign aid

https://svonberg.org/wp-content/uploads/2025/12/hero6eSupersV20.html

Hero Campaign Manager (v20) – User Manual

1. Getting Started

This application is a Single Page Application (SPA) contained entirely within one HTML file. It requires no internet connection, no server, and no installation.

How to Install
* Save the File: Save the code block from the previous message as Hero_Campaign_Manager.html.
* Open: Double-click the file on your computer, or open it on your smartphone/tablet.
* Mobile Tip: On iPhone/Android, you can use “Add to Home Screen” in your browser options to turn it into a dedicated app icon.

2. Navigation
The interface is divided into two main navigation bars:
* Top Roster Bar: This is your “Character Select.”
   * Scott, Minimax (Will), Trism: The Player Characters (PCs).
   * Agent, Alien, Cop, Titan, Thug: The Non-Player Characters (NPCs).
   * 🛠 GM: The Game Master’s control center.
   * Tip: The bar scrolls horizontally if you have many characters.
* Bottom Menu Bar: This changes based on who you have selected. It controls the specific “Tabs” for that character (e.g., Stats, Powers, Combat, Bio).

3. Character Sheet Features
Every character (PC and NPC) shares these interactive features:
A. Vital Statistics (Interactive)
At the top of every sheet are the STUN, BODY, and END trackers.
* Taking Damage: Tap the [-] button to lower the stat.
* Healing: Tap the [+] button to raise it.
* Note: These numbers reset if you refresh the page.
B. Status Toggles
Below the vitals are buttons for Stunned, Aborted, and Flashed.
* Tap to toggle them Red/Active.
* This is a visual reminder only; it does not mechanically stop you from rolling dice.
C. Click-to-Roll Skills
In the Stats or Rolls tab:
* Tap any button like [Stealth 14-] or [Perception 12-].
* The Result Banner: A banner will appear at the top of the screen showing:
   * The total rolled on 3d6.
   * Success or Failure.
   * The “Margin of Success” (e.g., “Made it by 3”).
D. Click-to-Roll Powers
In the Powers or Combat tab:
* Attacks (like “Gravity Gun” or “Bear Punch”) are clickable buttons.
* Tapping them rolls the damage automatically (Normal or Killing).
* The result (Body/Stun) appears in the banner at the top.
E. The “Recover” Button (❤)
Located in the bottom right of the PC navigation bar.
* Tap Once: Instantly adds your REC score to your current STUN and END.
* Visual Feedback: The Stun/End boxes will flash green to confirm the recovery.
F. Notes (Auto-Save)
The Notes tab contains a text area.
* Anything you type here is saved to your browser’s Local Storage.
* If you close the browser and come back later, your notes will still be there.

4. GM Tools (The 🛠 Tab)
The GM tab is designed to help run the game flow.
A. The Speed Chart (Tracker)
* Segment Counter: Tap the large number at the top to advance the turn (1 to 12).
* Visual Grid: As you advance the segment, the corresponding column in the Speed Chart highlights Purple.
* Who Acts? Anyone with an “X” in the highlighted column has a Phase.
B. Dice Rollers (Calculators)
* Hit Location: Rolls 3d6 and tells you the location (e.g., “13: Vitals”) and the damage multipliers.
* Reaction Roll: Randomly determines NPC attitude (Hostile to Helpful).
* Damage Rollers: Enter the number of dice (e.g., 10) and tap “Roll”. It calculates Total Body and Total Stun automatically.
* Knockback (KB): Enter the Body damage taken. Tap “Calc KB” to subtract 2d6 and see how many meters the target flies.
C. Reference Tables
Static charts for quick lookups during play:
* Modifiers: Range, Darkness, Cover penalties.
* Falling Damage: How much damage you take for falling X meters.
* Object Body/Def: How hard it is to break a wall or door.
* Maneuvers: OCV/DCV modifiers for Dodge, Block, Grab, etc.

5. Editing & Customizing
Since this is a single HTML file, you can edit it with any text editor (Notepad, VS Code).
* To Change Stats: Search for id=”scott-stun-val” and change the number inside the tag (e.g., <h3>45</h3>).
* To Add Skills: Copy an existing <div class=”roll-btn” …> line and change the name and the target number in the onclick function (e.g., rollSkillCheck(14, ‘scott’)).
* To Add Characters: Copy an entire char-wrapper div and rename the ID (e.g., id=”char-newguy”). You must also add a button to the top roster-bar.

6. Troubleshooting
* “My notes disappeared!”: Notes are saved to the specific browser you are using. If you open the file in Chrome, write notes, and then open it in Safari, the notes won’t transfer. Clearing your browser cache/cookies will delete the notes.
* “The layout looks weird”: Ensure you are viewing it on a screen with a width of at least 320px (standard smartphone). It works best in portrait mode on mobile or a narrow window on desktop.

Re:small (used for minimax original bio)

https://scottobear.livejournal.com/131805.html

This LiveJournal post, titled “Small,” was written by user scottobear and published on October 6, 2000. It is a piece of flash fiction or a short story that deals with themes of childhood illness, mortality, and the psychological mechanisms used to cope with trauma.

Here is an analysis of the post:

1. Narrative and Plot Summary
The story follows a ten-year-old boy who appears much younger (“small as five”) due to a debilitating illness, implied to be cancer (references to hair loss, “special food,” doctors, needles, and a “bad thing” seeking him). The boy develops a fixation on the concept of being “small.” To him, smallness equates to safety, invisibility, and the ability to slip away unnoticed.
The narrative concludes with the boy returning to the beach alone. While his parents cannot find him and likely mourn his death (“They seemed sad”), the boy’s perspective frames his disappearance as a triumph. He has successfully become so small—like a pebble—that “the bad thing” can no longer find him.

2. Themes and Symbolism
* The “Bad Thing”: The story personifies the boy’s illness or impending death as a predator (“the bad thing”) that is hunting him. By reframing death as a game of hide-and-seek, the boy retains a sense of agency in a situation where he has none.
* Smallness as Safety: The central metaphor is the safety of being small. In a world of scary “big” things (doctors, needles, the disease), the boy retreats into the idea that being microscopic renders him invulnerable. “You cannot be a small boy and be far away” and “You are smaller if you don’t scream” suggest a retreat into himself to survive the pain.
* The Pebble: The pebble represents the ultimate goal of the boy’s transformation. It is hard, enduring, and indistinguishable from thousands of others. By wishing to become a pebble, he wishes to become part of the eternal landscape of the sea, effectively immortal and beyond pain.

3. Tone and Perspective
The story is written in a third-person limited perspective, staying close to the boy’s internal logic. This creates a heartbreaking contrast between the innocent, magical thinking of the child and the harsh reality the reader understands.
* Euphemism: The boy never uses words like “cancer” or “dying.” Instead, he focuses on “special food,” “doctors’ place,” and “the bad thing.” This emphasizes his youth and his attempt to cognitively distance himself from the trauma.
* Bittersweet Ending: The ending is ambiguous and spiritual. While physically the boy has likely passed away (drowned or succumbed to illness on the beach), the narrative voice insists on his survival in a metaphysical sense. He hasn’t been “caught”; he has escaped.

4. Context and Author’s Intent
In the comments section of the post, the author (scottobear) provides crucial context for the piece:
> “Thanks. an old piece, posted due to certain folks passing due to cancer, and a lj’er mentioning her desire to shrink.”
>
This confirms that the story was a response to real-world grief and a specific conversation within the LiveJournal community about the desire to disappear or “shrink” away from life’s hardships.

5. Community Reception
The comments on the post reflect the emotional weight of the story. Readers described it as “amazing,” noted that it made them feel “lonely,” and praised the “Lilliputian” perspective. It highlights the tight-knit, supportive nature of the blogging community in the early 2000s, where creative writing was often used to process collective grief.