Eldritch Powers in the Carrington Sheet

This has to do three things: first, display an Eldritch rank, which can be from Terrible to Spectacular (maybe even Legendary). There’s a checkbox in the bio for Eldritch? If this is unchecked, Eldritch should be set to Terrible.

Then, there are a number of boxes based on your Eldritch score – these are like Stress, but should be unclickable.

You also have a section showing each individual power. This might be a set of 5 Powers, but only those based on your Eldritch score are shown (Fair – Spectacular). Or this could be a repeating section.

The Power section has a checkbox, and each time you check a power, one is added to the above Eldritch Power pool (and also, the hidden Powers_Used box is set to 1). Unchecking the power doesn’t reduce that score – if you use a Power in a session, you can re-use that power next session, but your total power pool is weakened for both uses.

Finally, you need a hidden input, showing that all eldritch power pool points have been used – in which case, the entire set of eldritch powers is made invisible. If no power pool is free, you can’t use any eldritch powers.

Here’s the Handlebars block to generate the HTML code.

<div class="eldritch grid-box">
   <input type="hidden" name="attr_eldritch_pool" value="0" >
   <input type="hidden" name="attr_eldritch_pool_max" value="0" >
   <input type="hidden" name="attr_maxed_out" value="0" >
   <h3><span class="display" name="attr_eldritch_name" value="Eldritch">Eldritch</span> Powers</h3>
   <div class="eldritch-top">
      <button type="action" name="act_eldritch"> 
         <span class="display" name="attr_eldritch_name" 
               value="Eldritch">Eldritch</span>
      </button>
      <select name="attr_eldritch" class="noclick noarrow">
         {{#each ladder}}
         <option {{#eq @index 1}}selected{{/eq}}>{{this}}</option>
         {{/each}}
      </select>
      <div class="eldritch-bubbles">
         {{#repeat count=6 start=2}}
         <input type="hidden" name="attr_eldritch_use{{@index}}_hide" 
                class="eldritch-hide" value="0" />
         <input type="checkbox" name="attr_eldritch_use{{@index}}" 
                class="noclick eldritch" value="1" />
         {{/repeat}}
      </div>
   </div>
   <div class="eldritch-powers">
      {{#repeat count=6 start=2}}
      <input type="hidden" name="attr_eldritch_use{{@index}}_hide"
             class="eldritch-hide" value="0" >
      <details class="eldritch">
         <summary>
            <input type="text" name="attr_eldritch_{{@index}}" value=""
                   placeholder="POWER">
            <span class="header center">&#8595;</span>
            <input type="hidden" name="attr_eldritch_{{@index}}_hide_check" 
                class="eldritch-hide-check" value="0" />
            <input type="checkbox" name="attr_eldritch_{{@index}}_check"
                value="1" class="check" >
         </summary>
         <textarea name="attr_eldritch_{{@index}}_details"
                   placeholder="POWER DESCRIPTION"></textarea>
      </details>
      {{/repeat}}
   </div>
</div>
Code language: Handlebars (handlebars)

This is extremely similar to HTML, but some sections should be called out.

First, an eldritch_name span is used to hold the word Eldritch. This is so that a later configuration setting can change this. You might have Super or other labels, to account for different kinds of games. The Eldritch? button back in the Bio section needs altering to fit.

<span class="display" name="attr_eldritch_name" value="Eldritch">Eldritch</span>Code language: Handlebars (handlebars)

Then we have a handlebars section, which loops the rank ladder and creates the option element for a dropdown select. This section is notable because of the eq helper.

         {{#each ladder}}
         <option {{#eq @index 1}}selected{{/eq}}>{{this}}</option>
         {{/each}}Code language: Handlebars (handlebars)

This checks to see if the loop through ranks currently is equal to 1. That’s the Poor rank, and that’s the one we want to be default. This sets that.

Later, we have another handlebars block, which creates 6 checkboxes starting with an index of 2, so that will be 2, 3, 4, 5, 6, and 7.

         {{#repeat count=6 start=2}}
         <input type="hidden" name="attr_eldritch_use{{@index}}_hide" 
                class="eldritch-hide" value="0" />
         <input type="checkbox" name="attr_eldritch_use{{@index}}" 
                class="noclick eldritch" value="1" />
         {{/repeat}}Code language: Handlebars (handlebars)

This corresponds to the ranks Fair to Superb. We know that no power boxes exist at rank 1 and 0 (Poor and Terrible).

This same method is used in powers to create a details block for each power.

CSS For Carrington Powers

.charsheet .eldritch-top {
    display: grid;
    grid-template-columns: 60px 100px 1fr;
    column-gap: 5px;
}
.charsheet .eldritch-top select {
    width: 100%;
    margin:0
}
.charsheet .eldritch-powers {
    margin-top: 4px;
}
.charsheet .eldritch-powers details summary {
    display: grid;
    grid-template-columns: 1fr 10px 30px;
    column-gap: 5px;
}
div.eldritch .eldritch-hide:not([value="1"]) + .eldritch {
    display: none;
}Code language: CSS (css)

Sheet Workers For Carrington Powers

To make all this work, we need a sheet worker to set a hidden _hide attribute for each possible power, and it resets all power checkboxes to a value of zero. (Whenever Eldritch increases, all powers are usable again. Among other things, which we’ll handle later.)

on('change:eldritch', () => {
   getAttrs(['eldritch'], v => {
      const rank = v.eldritch;
      const index = ranks.indexOf(rank) || 0;
      const output= {};
      output.eldritch_pool_max = Math.max(0, index - 1);
      output.eldritch_pool = 0;
      output.maxed_out = 0;
      seq(7, 2).forEach(i => {
         output[`eldritch_use${i}`] = 0;
         output[`eldritch_${i}_check`] = 0;
         output[`eldritch_use${i}_hide`] = i <= index ? 1 : 0;
      });
      setAttrs(output);
   });
});Code language: JavaScript (javascript)

We also need another worker, then responds to any power checkbox being clicked, and sets the eldritch pool appropriately. It also needs to set the powers_used input.

seq(7,2).forEach(i => {
   on(`change:eldritch_${i}_check`,  (event_info) => {
      getAttrs([`eldritch_${i}_check`, 'eldritch_pool'], v => {
         const output = {};
         const which = int(v[`eldritch_${i}_check`]);
         if(which) {
            output[`powers_used`] = 1;
            const pool = int(v.eldritch_pool) +1;
            output.eldritch_pool = pool;
            setAttrs(output);
         }
      });
   });
});Code language: JavaScript (javascript)

Finally, when the power pool is fully complete, no powers can be used. So, we need to hide them, or at least their checkboxes.

on('change:eldritch_pool', () => {
   getAttrs(['eldritch_pool'], v => {
      const pool = int(v.eldritch_pool);
      const output = {};
      seq(7,2).forEach(i => {
         output[`eldritch_use${i}`] = i <= (pool+1) ? 1 : 0;
      });
      const max = int(v.eldritch_pool_max);
      if(pool >= max) {
         output.maxed_out = 1;
      }
      setAttrs(output);
   });
});Code language: JavaScript (javascript)

And there we have it – there’s a lot of code here that won’t be fully usable (or will stop working quickly) until the Sidebar section is done. That’s coming soon! But first we need to finish the central trunk (Wounds), and look at the rolltemplate.

Series Navigation

<< A variety of systems in the Carrington SheetWounds in the Carrington Sheet >>