charactersheet.html

<h2>The Basics</h2>
<div class="basics">
  <label>
    <span>Character name: </span>
    <input spellcheck="false" type="text" name="attr_character_name"/>
  </label>
  <label>
    <span>Pronouns: </span>
    <input spellcheck="false" type="text" name="attr_pronouns"/>
  </label>
  <label>
    <span>Look: </span>
    <input type="text" name="attr_look" />
  </label>
</div>

<div class="position-and-role">
  <h2>Position:</h2>
  <div>
    <button type="action" name="act_jammer" >Jammer</button>
    <button type="action" name="act_blocker" >Blocker</button>
  </div>
  <input type='hidden' class='tabstoggle' name='attr_position'  value='jammer'  />

  <h2>Role</h2>
  <div>
    <select name="attr_role">
      <option>-- Jammer roles --</option>
      <option class="jammer-role" value="jammer-star">Star jammer</option>
      <option class="jammer-role" value="jammer-power">Power jammer</option>
      <option class="jammer-role" value="jammer-drama">Drama queen</option>
      <option class="jammer-role" value="jammer-sweet">Sweetheart</option>
      <option>-- Blocker roles --</option>
      <option class="blocker-role" value="blocker-pivot">Pivot</option>
      <option class="blocker-role" value="blocker-hitter">Heavy hitter</option>
      <option class="blocker-role" value="blocker-drama">Drama llama</option>
      <option class="blocker-role" value="blocker-baby">Baby</option>
    </select>
  </div>

  <script type="text/worker">
    const buttonlist = ["jammer", "blocker"];
    buttonlist.forEach(function(button) {
      on(`clicked:${button}`, function() {
        setAttrs({
            "position": button
        });
      });
    });
  </script>
</div>

<h2>Stress</h2>
<p class="stress">
  <button type="action" name="act_dec_stress" class="dec">
    <span class="peace">☮️</span>
  </button>
  <input type="hidden" class="toggle" name="attr_stress" />
  <span class="stressdisplay" name="attr_stressdisplay"></span>
  <button type="action" name="act_inc_stress" class="inc">
    <span class="stress">⚡</span>
  </button>
</p>

<script type="text/worker">
  on("clicked:inc_stress", function() {
    getAttrs(["stress"], function(values) {
      let stress = (parseInt(values.stress)||0) + 1;
      setAttrs({
        "stress": stress > "5" ? "5" : stress
      });
    });
  });
  on("clicked:dec_stress", function() {
    getAttrs(["stress"], function(values) {
      let stress = (parseInt(values.stress)||0) - 1;
      setAttrs({
        "stress": stress < "0" ? "0" : stress
      });
    });
  });
  on("change:stress", function(){ 
    getAttrs(["stress"], function(values) {
      let stress = parseInt(values.stress)||0;
      let stress_display = "";
      for(i=0; i < stress; i++) {
        stress_display = stress_display + "⚡"
      }
      stress_display = stress_display || " "
      setAttrs({
        "stressdisplay": stress_display
      });
    });
  });
</script>

<h2>Stats</h2>
<div class="stats">
  <label>
    <span class="stat-name">Agility</span>
    <input type="number" name="attr_agility" />
    <span class="stat-roll">
      <button type="roll" 
              value="/r (@{agility}+?{Bonus dice?|0}-?{Disadvantage dice?|0})d6>4" 
              name="roll_agility_high"><span>Offense</span></button>
      <button type="roll" 
              value="/r (@{agility}+?{Bonus dice?|0}-?{Disadvantage dice?|0})d6<3" 
              name="roll_agility_low"><span>Defense</span></button>
    </span>
  </label>
  <label>
    <span class="stat-name">Power</span>
    <input type="number" name="attr_power" />
    <span class="stat-roll">
      <button type="roll" 
              value="/r (@{power}+?{Bonus dice?|0}-?{Disadvantage dice?|0})d6>4" 
              name="roll_agility_high"><span>Offense</span></button>
      <button type="roll" 
              value="/r (@{power}+?{Bonus dice?|0}-?{Disadvantage dice?|0})d6<3" 
              name="roll_agility_low"><span>Defense</span></button>
    </span>
  </label>
  <label>
    <span class="stat-name">Drama</span>
    <input type="number" name="attr_drama" />
    <span class="stat-roll">
      <button type="roll" 
              value="/r (@{drama}+?{Bonus dice?|0}-?{Disadvantage dice?|0})d6>4" 
              name="roll_agility_high"><span>Stir up drama</span></button>
      <button type="roll" 
              value="/r (@{drama}+?{Bonus dice?|0}-?{Disadvantage dice?|0})d6<3" 
              name="roll_agility_low"><span>Shut 'em down</span></button>
    </span>
  </label>
  <label>
    <span class="stat-name">Heart</span>
    <input type="number" name="attr_heart"  />
    <span class="stat-roll">
      <button type="roll" 
              value="/r (@{heart}+?{Bonus dice?|0}-?{Disadvantage dice?|0})d6>4" 
              name="roll_agility_high"><span>Boost Morale</span></button>
      <button type="roll" 
              value="/r (@{heart}+?{Bonus dice?|0}-?{Disadvantage dice?|0})d6<3" 
              name="roll_agility_low"><span>Set 'em up</span></button>
    </span>
  </label>
</div>

<h2>Playbook</h2>

<ol>
  <li>
    <h3>Play 1</h3>
    <div class="moves">
      <div class="move">
        <div class="label">Move:</div> 
        <div class="cell">
          <input type="text" name="attr_play1move1move" />
        </div>
        <div class="label">Effect:</div> 
        <div class="cell">
          <input type="text" class="moveeffect" name="attr_play1move1effect" />
        </div>
        <div class="label">Stat:</div>
        <div class="cell">
          <input type="text" class="movestat" name="attr_play1move1stat" />
        </div>
        <div class="label">Description:</div> 
        <div class="cell">
          <textarea type="text" name="attr_play1move1desc"></textarea>
        </div>
      </div>
      <div class="or">or</div>
      <div class="move">          
        <div class="label">Move:</div> 
        <div class="cell">
          <input type="text" name="attr_play1move2move" />
        </div>
        <div class="label">Effect:</div> 
        <div class="cell">
          <input type="text" class="moveeffect" name="attr_play1move2effect" />
        </div>
        <div class="label">Stat:</div>
        <div class="cell">
          <input type="text" class="movestat" name="attr_play1move2stat" />
        </div>
        <div class="label">Description:</div> 
        <div class="cell">
          <textarea type="text" name="attr_play1move2desc"></textarea>
        </div>
      </div>
    </div>
  </li>
  
  <li>
    <h3>Play 2</h3>
    <div class="moves">
      <div class="move">
        <div class="label">Move:</div> 
        <div class="cell">
          <input type="text" name="attr_play2move1move" />
        </div>
        <div class="label">Effect:</div> 
        <div class="cell">
          <input type="text" class="moveeffect" name="attr_play2move1effect" />
        </div>
        <div class="label">Stat:</div>
        <div class="cell">
          <input type="text" class="movestat" name="attr_play2move1stat" />
        </div>
        <div class="label">Description:</div> 
        <div class="cell">
          <textarea type="text" name="attr_play2move1desc"></textarea>
        </div>
      </div>
      <div class="or">or</div>
      <div class="move">
        <div class="label">Move:</div> 
        <div class="cell">
          <input type="text" name="attr_play2move2move" />
        </div>
        <div class="label">Effect:</div> 
        <div class="cell">
          <input type="text" class="moveeffect" name="attr_play2move2effect" />
        </div>
        <div class="label">Stat:</div>
        <div class="cell">
          <input type="text" class="movestat" name="attr_play2move2stat" />
        </div>
        <div class="label">Description:</div> 
        <div class="cell">
          <textarea type="text" name="attr_play2move2desc"></textarea>
        </div>
      </div>
    </div>
  </li>
  
  <li>
    <h3>Play 3</h3>
    <div class="moves">
      <div class="move">
        <div class="label">Move:</div> 
        <div class="cell">
          <input type="text" name="attr_play3move1move" />
        </div>
        <div class="label">Effect:</div> 
        <div class="cell">
          <input type="text" class="moveeffect" name="attr_play3move1effect" />
        </div>
        <div class="label">Stat:</div>
        <div class="cell">
          <input type="text" class="movestat" name="attr_play3move1stat" />
        </div>
        <div class="label">Description:</div> 
        <div class="cell">
          <textarea type="text" name="attr_play3move1desc"></textarea>
        </div>
      </div>
      <div class="or">or</div>
      <div class="move">
        <div class="label">Move:</div> 
        <div class="cell">
          <input type="text" name="attr_play3move2move" />
        </div>
        <div class="label">Effect:</div> 
        <div class="cell">
          <input type="text" class="moveeffect" name="attr_play3move2effect" />
        </div>
        <div class="label">Stat:</div>
        <div class="cell">
          <input type="text" class="movestat" name="attr_play3move2stat" />
        </div>
        <div class="label">Description:</div> 
        <div class="cell">
          <textarea type="text" name="attr_play3move2desc"></textarea>
        </div>
      </div>
    </div>
  </li>
  
  <li>
    <h3>Nimble</h3>
    <div class="moves">
      <div class="move">
        <div class="label">Move:</div> 
        <div class="cell">
          <input type="text" name="attr_nimblemove" />
        </div>
        <div class="label">Effect:</div> 
        <div class="cell">
          <input type="text" class="moveeffect" name="attr_nimbleeffect" />
        </div>
        <div class="label">Stat:</div>
        <div class="cell">
          <input type="text" class="movestat" name="attr_nimblestat" />
        </div>
        <div class="label">Description:</div> 
        <div class="cell">
          <textarea type="text" name="attr_nimbledesc"></textarea>
        </div>
      </div>
    </div>
  </li>

  <li>
    <h3>Physical</h3>
    <div class="moves">
      <div class="move">
        <div class="label">Move:</div> 
        <div class="cell">
          <input type="text" name="attr_physicalmove" />
        </div>
        <div class="label">Effect:</div> 
        <div class="cell">
          <input type="text" class="moveeffect" name="attr_physicaleffect" />
        </div>
        <div class="label">Stat:</div>
        <div class="cell">
          <input type="text" class="movestat" name="attr_physicalstat" />
        </div>
        <div class="label">Description:</div> 
        <div class="cell">
          <textarea type="text" name="attr_physicaldesc"></textarea>
        </div>
      </div>
    </div>
  </li>
  
  <li>
    <h3>Safe</h3>
    <div class="moves">
      <div class="move">
        <div class="label">Description:</div> 
        <div class="cell">
          <textarea type="text" name="attr_safemove2desc">Relieve two stress</textarea>
        </div>
      </div>
    </div></li>
</ol>

<script type="text/worker">

  const moves = {
    "Give a whip": {
      "move": "Give a whip",
      "effect": "Offense (roll high)",
      "stat": "POWER",
      "desc": "Grab your jammer's arm and swing her as hard as you can around the track.\n\n1+: Replace up to two of your Team Dice with your successes."
    },
    "Clear the way": {
      "move": "Give a whip",
      "effect": "Offense (roll high)",
      "stat": "POWER",
      "desc": "You knock an opponent out of your jammer's way.\n\n1+: Replace up to two of your Team Dice with your successes."
    },
    "Booty block": {
      "move": "Booty block",
      "effect": "Defense (roll low)",
      "stat": "POWER",
      "desc": "You sit your butt right in front of that jammer and refuse to budge.\n\n1+ Replace up to two of your opponent's Team Dice with your successes."
    },
    "Can-opener": {
      "move": "Can-opener",
      "effect": "Defense (roll low)",
      "stat": "POWER",
      "desc": "Plant your shoulder firmly into your target's chest to lay them flat on the floor.\n\n1+:  Replace up to two of your opponent's Team Dice with your successes."
    },
    "Grab a goat": {
      "move": "Grab a goat",
      "effect": "Offense (roll high)",
      "stat": "AGILITY",
      "desc": "Trap an opposing blocker to slow down the pack and make it easier to score.\n\n1+: Replace up to two of your Team Dice with your successes."
    },
    "Wall it up": {
      "move": "Wall it up",
      "effect": "Defense (roll low)",
      "stat": "POWER",
      "desc": "Create an impenetrable wall with your teammates through which the jammer cannot pass.\n\n1+:  Replace up to two of your opponent's Team Dice with your successes."
    },
    "Recycle": {
      "move": "Recycle",
      "effect": "Defense (roll low)",
      "stat": "AGILITY",
      "desc": "Knock an opponent out of bounds, then deftly spin around and race backwards to force a track cut.\n\n1+: Replace up to two of your Team Dice with your successes."
    },
    "Inspire": {
      "move": "Inspiration",
      "effect": "Set 'em up (roll high)",
      "stat": "HEART",
      "desc": "You show off a little to help your teammates relax.\n\n1+ You inspire everyone to do their best. Give advantage.\n2+: Remove stress from any teammate."
    },
    "Intimidate": {
      "move": "Intimidation",
      "effect": "Shut 'em down (roll low)",
      "stat": "DRAMA",
      "desc": "You get in another player’s face and release a mighty roar.\n\n1+: Give your opponent disadvantage.\n2+: Your display is disturbing. Give an opponent stress."
    },
    "Communicate": {
      "move": "Communication",
      "effect": "Set 'em up (roll high)",
      "stat": "HEART",
      "desc": "Help you team know where to go and what to do.\n\n1+ You inspire everyone to do their best. Give advantage.\n2+: Remove stress from any teammate."
    },
    "Misdirect": {
      "move": "Misdirection",
      "effect": "Shut 'em down (roll low)",
      "stat": "DRAMA",
      "desc": "You leave the inside open for the jammer - then swoop in for the kill.\n\n1+: Give your opponent disadvantage.\n2+: You confuse the opposing team. Give an opponent stress."
    },
    "Jump the apex": {
      "move": "Jump the Apex",
      "effect": "Offense (roll high)",
      "stat": "AGILITY",
      "desc": "Try to lap members of the opposing team.\n\n1+: Replace up to two of your Team Dice with your successes."
    },
    "Juke around": {
      "move": "Juke around",
      "effect": "Offense (roll high)",
      "stat": "AGILITY",
      "desc": "Hop nimbly around the opposing jammers and pirouette past walls. \n\n1+: Replace up to two of your Team Dice with your successes."
    },
    "Eat the baby": {
      "move": "Eat the baby",
      "effect": "Defense (roll low)",
      "stat": "POWER",
      "desc": "You force the opposing jammer back so your teammates can get in front of them.\n\n1+:  Replace up to two of your opponent's Team Dice with your successes."
    },
    "Take a whip": {
      "move": "Wrecking ball",
      "effect": "Offense (roll high)",
      "stat": "POWER",
      "desc": "You grab onto a teammate and steal all their momentum to drive yourself forward. \n\n1+: Replace up to two of your Team Dice with your successes."
    },
    "Dogfight": {
      "move": "Dogfight",
      "effect": "Defense (roll low)",
      "stat": "AGILITY",
      "desc": "You take on the opposing jammer one-on-one and leave them in the dust.\n\n1+:  Replace up to two of your opponent's Team Dice with your successes."
    },
    "Fake out": {
      "move": "Fake out",
      "effect": "Shut 'em down (roll low)",
      "stat": "DRAMA",
      "desc": "You fake left and go right, or pretend to be winded then bolt for the inside line.\n\n2+: Give an opponent disadvantage.\n1+: You confuse the opposing team. Give an opponent stress."
    }
  }

  function setMove(play, moveName, setObj) {
    let move = moves[moveName];
    if (move) {
      setObj[`${play}move`] = moveName
      setObj[`${play}stat`] = move["stat"];
      setObj[`${play}effect`] = move["effect"];
      setObj[`${play}desc`] = move["desc"];
    } else {
      console.log("unable to find move with the name", moveName);
    }
  }

  function setMoves(moveNames) {
    let setObj = {}
    setMove("play1move1", moveNames[0], setObj);
    setMove("play1move2", moveNames[1], setObj);
    setMove("play2move1", moveNames[2], setObj);
    setMove("play2move2", moveNames[3], setObj);
    setMove("play3move1", moveNames[4], setObj);
    setMove("play3move2", moveNames[5], setObj);
    setMove("nimble",     moveNames[6], setObj);
    setMove("physical",   moveNames[7], setObj);
    setAttrs(setObj);
  }

  let statLines = {
    "drama": {
      "agility": 1,
      "power": 1,
      "drama": 3,
      "heart": 1
    },
    "heart": {
      "agility": 1,
      "power": 1,
      "drama": 1,
      "heart": 3
    },
    "agility": {
      "agility": 3,
      "power": 1,
      "drama": 1,
      "heart": 1
    },
    "power": {
      "agility": 1,
      "power": 3,
      "drama": 1,
      "heart": 1
    }
  }

  function setStats(highest) {
    let statLine = statLines[highest];
    if (statLine) (
      setAttrs(statLine)
    ) else {
      console.log("unable to find stat line for stat", highest)
    }
  }

  on("change:role", function(eventInfo) {
    console.log("role changed)
    getAttrs(["role"], function (values) {
      console.log("role", values)
      let role = values.role || "";
      switch (role) {
        case "jammer-star":
          setMoves(["Inspire", "Jump the apex", "Dogfight", "Fake out", "Take a whip", "Eat the baby", "Juke around", "Wall it up"])
          setStats("agility");
          break;
        case "jammer-power":
          setMoves(["Inspire", "Jump the apex", "Dogfight", "Fake out", "Take a whip", "Eat the baby", "Juke around", "Wall it up"])
          setStats("power");
          break;
        case "jammer-drama":
          setMoves(["Inspire", "Jump the apex", "Dogfight", "Fake out", "Take a whip", "Eat the baby", "Juke around", "Wall it up"])
          setStats("drama");
          break;
        case "jammer-sweet":
          setMoves(["Inspire", "Jump the apex", "Dogfight", "Fake out", "Take a whip", "Eat the baby", "Juke around", "Wall it up"])
          setStats("heart");
          break;
        case "blocker-pivot":
          setMoves(["Communicate", "Clear the way", "Can-opener", "Intimidate", "Recycle", "Give a whip", "Grab a goat", "Booty block"])
          setStats("agility");
          break;
        case "blocker-hitter":
          setMoves(["Communicate", "Clear the way", "Can-opener", "Intimidate", "Wall it up", "Give a whip", "Grab a goat", "Booty block"])
          setStats("power");
          break;
        case "blocker-drama":
          setMoves(["Inspire", "Clear the way", "Can-opener", "Intimidate", "Recycle", "Give a whip", "Grab a goat", "Booty block"])     
          setStats("drama");
          break;
        case "blocker-baby":
          setMoves(["Communicate", "Clear the way", "Can-opener", "Misdirect", "Recycle", "Give a whip", "Grab a goat", "Booty block"])
          setStats("heart");
          break;
      }
    });
  })

</script>

<h3>Bonds</h3>

<fieldset class="repeating_bonds">
  <p><textarea name="attr_bond" type="text" spellcheck="false"></textarea></p>
</ul>


<rolltemplate class="sheet-rolltemplate-stat">
  <div class="sheet-template-container">
    <div class="sheet-template-header">
      {{name}}
    </div>

    {{#effect}}
    <div class="sheet-template-row">
      Effect: <strong>{{effect}}</strong>
    </div>
    {{/effect}}
    
    {{#roll}}
    <div class="sheet-template-row">
      <span>Successes:</span> {{roll}} 
    </div>
    {{/roll}}
  </div>
</rolltemplate>