Files
roll20-character-sheets-tester/To Change/to_change_sheet.html
T
2022-12-26 00:06:04 -08:00

640 lines
22 KiB
HTML

<div class="row"><!-- TITLE ROW -->
<div class="empty"></div>
<div class=""><br>
<h1 style="font-family: patrick hand; color: indigo; text-decoration: underline"><em>To Change</em></h1>
</div>
<div >
<p style="font-size:8px; float: right"><em>To Change</em> by Ulysses Duckler & Ewen Albright (https://usducktape.itch.io/to-change)</p>
<br>
<p style="font-size:8px; float: right">R20 Character Sheet V2.2</p>
</div>
</div>
<br>
<br>
<div class="row"><!-- NAME ROW -->
<div class="flex-end">
<h3>Character name:</h3>
</div>
<div class="flex-start">
<input type="text" name="attr_character_name">
</div>
<div class="flex-end">
<h3>Story:</h3>
</div>
<div class="flex-start">
<input type="text" name="attr_story_title">
</div>
</div>
<br>
<br>
<div class="row"><!-- CARD ROW -->
<div class="flex-column align-center" style="width: 33%"><!-- FACE CARD -->
<h4>Face card:</h4>
<select name="attr_facecard" class="cardpicker" title="select face card">
<option value="default" selected disabled>- Select your Face card -</option>
<option value="thefool">The Fool</option>
<option value="themagician">The Magician</option>
<option value="thehighpriestess">The High Priestess</option>
<option value="theempress">The Empress</option>
<option value="theemperor">The Emperor</option>
<option value="thehierophant">The Hierophant</option>
<option value="thelovers">The Lovers</option>
<option value="thechariot">The Chariot</option>
<option value="strength">Strength</option>
<option value="thehermit">The Hermit</option>
<option value="wheeloffortune">Wheel of Fortune</option>
<option value="justice">Justice</option>
<option value="thehangedman">The Hanged Man</option>
<option value="death">Death</option>
<option value="temperance">Temperance</option>
<option value="thedevil">The Devil</option>
<option value="thetower">The Tower</option>
<option value="thestar">The Star</option>
<option value="themoon">The Moon</option>
<option value="thesun">The Sun</option>
<option value="judgement">Judgement</option>
<option value="theworld">The World</option>
</select>
<div class="cardtext">
<input type="hidden" class="sheet-facecardtoggle" name="attr_facecard" value="default" />
<div class="sheet-default" class="facetext">
<span>Your Face card gives you a special ability associated with that card.</span>
</div>
<div class="sheet-thefool" class="facetext">
<span>Whenever you fail on a draw, if The Fool is in the discard pile, return it to the deck and reshuffle.</span>
</div>
<div class="sheet-themagician" class="facetext">
<span>The Magician gives you success on all attributes, and your success is fantastical, appearing as a miracle to the untrained eye.</span>
</div>
<div class="sheet-thehighpriestess" class="facetext">
<span>The High Priestess gives you success on all attributes, and your success comes from your past, sparking a lost memory.</span>
</div>
<div class="sheet-theempress" class="facetext">
<span>The Empress gives you success on all attributes, and your success is for the benefit of others, shared with everyone around you.</span>
</div>
<div class="sheet-theemperor" class="facetext">
<span>The Emperor gives you success on all attributes, and your success imposes your will over others, marking you as a leader.</span>
</div>
<div class="sheet-thehierophant" class="facetext">
<span>The Hierophant gives you success on all attributes, and your success is instructive, teaching an unforgettable lesson.</span>
</div>
<div class="sheet-thelovers" class="facetext">
<span>The Lovers gives you success on all attributes, and your success draws infatuation towards you, feeding the flame of love.</span>
</div>
<div class="sheet-thechariot" class="facetext">
<span>The Chariot gives you success on all attributes, and your success is undeniable; nobody can doubt it.</span>
</div>
<div class="sheet-strength" class="facetext">
<span>Strength gives you success on all attributes, and your success feels superhuman, pulsing with energy and raw power.</span>
</div>
<div class="sheet-thehermit" class="facetext">
<span>The Hermit gives you success on all attributes, and your success is yours alone, no one else can take credit for your actions.</span>
</div>
<div class="sheet-wheeloffortune" class="facetext">
<span>Wheel of Fortune gives you success on all attributes, and your success signals a change in the tides of fortune.</span>
</div>
<div class="sheet-justice" class="facetext">
<span>Whenever your change cross is horizontally or vertically symmetrical with changed attributes, you reveal one additional card on all your draws.</span>
</div>
<div class="sheet-thehangedman" class="facetext">
<span>The Hanged Man gives you success on all attributes, and your success works in ways that only you can understand.</span>
</div>
<div class="sheet-death" class="facetext">
<span>Whenever a card is used and discarded, you can make it become your face card, gaining its ability, and replacing your current face card.</span>
</div>
<div class="sheet-temperance" class="facetext">
<span>Whenever you take a change, you can choose to make it permanent.</span>
</div>
<div class="sheet-thedevil" class="facetext">
<span>When you use The Devil, you decide how many attribute points are changed and which ones, even ones that are out of order.</span>
</div>
<div class="sheet-thetower" class="facetext">
<span>After you use a card, you discard all the revealed cards (except Death and Temperance) instead of just discarding the one you used.</span>
</div>
<div class="sheet-thestar" class="facetext">
<span>The Star gives you success on all attributes, and your success is a stroke of sheer genius.</span>
</div>
<div class="sheet-themoon" class="facetext">
<span>Once per draw, you can treat any card (except Death or Temperance) as if it were The Moon.</span>
</div>
<div class="sheet-thesun" class="facetext">
<span>Whenever any player succeeds on a draw, after the deck is shuffled, you can ask the Storyteller to let you look at the top card of the deck.</span>
</div>
<div class="sheet-judgement" class="facetext">
<span>Whenever Judgement is used, you are the one who decides success or failure, instead of the Storyteller.</span>
</div>
<div class="sheet-theworld" class="facetext">
<span>When you use The World, take any number of cards from the discard pile (other than The World) and return them to the deck, instead of just one.</span>
</div>
</div>
</div>
<div class="flex-column align-center" style="width: 33%"><!-- RISING CARD -->
<h4>Rising card:</h4>
<select class="cardpicker" name="attr_risingcard">
<option value="default" selected disabled>- Select your Rising card -</option>
<option value="thefool">The Fool</option>
<option value="themagician">The Magician</option>
<option value="thehighpriestess">The High Priestess</option>
<option value="theempress">The Empress</option>
<option value="theemperor">The Emperor</option>
<option value="thehierophant">The Hierophant</option>
<option value="thelovers">The Lovers</option>
<option value="thechariot">The Chariot</option>
<option value="strength">Strength</option>
<option value="thehermit">The Hermit</option>
<option value="wheeloffortune">Wheel of Fortune</option>
<option value="justice">Justice</option>
<option value="thehangedman">The Hanged Man</option>
<option value="death" disabled>Death (cannot be a Rising card)</option>
<option value="temperance">Temperance</option>
<option value="thedevil">The Devil</option>
<option value="thetower">The Tower</option>
<option value="thestar">The Star</option>
<option value="themoon">The Moon</option>
<option value="thesun">The Sun</option>
<option value="judgement">Judgement</option>
<option value="theworld">The World</option>
</select>
<span class="cardtext">
When you reveal your Rising card, you move closer to reaching your goals and reveal another card into the current hand.
</span>
</div>
<div class="flex-column align-center" style="width: 33%"><!-- FALLING CARD -->
<h4>Falling card:</h4>
<select class="cardpicker" name="attr_fallingcard">
<option value="default" selected disabled>- Select your Falling card -</option>
<option value="thefool">The Fool</option>
<option value="themagician">The Magician</option>
<option value="thehighpriestess">The High Priestess</option>
<option value="theempress">The Empress</option>
<option value="theemperor">The Emperor</option>
<option value="thehierophant">The Hierophant</option>
<option value="thelovers">The Lovers</option>
<option value="thechariot">The Chariot</option>
<option value="strength">Strength</option>
<option value="thehermit">The Hermit</option>
<option value="wheeloffortune">Wheel of Fortune</option>
<option value="justice">Justice</option>
<option value="thehangedman">The Hanged Man</option>
<option value="death" disabled>Death (cannot be a Falling card)</option>
<option value="temperance">Temperance</option>
<option value="thedevil">The Devil</option>
<option value="thetower">The Tower</option>
<option value="thestar">The Star</option>
<option value="themoon">The Moon</option>
<option value="thesun">The Sun</option>
<option value="judgement">Judgement</option>
<option value="theworld">The World</option>
</select>
<span class="cardtext">
When you reveal your Falling card, you move closer to the source of your fears and must shuffle the first card revealed for the hand back into the deck.
</span>
</div>
</div><!-- END CARD ROW -->
<div class="row"><!-- ATTRIBUTE HEADER -->
<h2 style="float: left; font-family: contrail one;">Physical Aptitude</h2>
<div style="width:280px"></div>
<h2 style="float: right; font-family: contrail one;">Mental Aptitude</h2>
</div>
<div class="row"><!-- CHANGE ROW APTITUDE 1 -->
<div class="enclosure">
<div class="box phys apt">
<span name="attr_pacross1" class="changetext">
</span>
</div>
<div class="wrapper">
<div class="inner"><input type="checkbox" style= "margin:4px" name="attr_pa1changed"> <h3>Changed</h3></div>
<div class="inner"> <input type="checkbox" style= "margin:4px" name="attr_pa1damaged"> <h3>Damaged</h3></div>
</div>
</div>
<div class="spacer"></div>
<div class="enclosure">
<div class="wrapper">
<div class="inner"><h3>Changed</h3><input type="checkbox" style= "margin-left:4px" name="attr_ma1changed"></div>
<div class="inner"><h3>Damaged</h3><input type="checkbox" style= "margin-left:4px" name="attr_ma1damaged"></div>
</div>
<div class="box ment apt">
<span name="attr_macross1" class="changetext">
</span>
</div>
</div>
</div>
<br>
<div class="row second space-between"><!-- CHANGE ROW APTITUDE 2 -->
<div class="enclosure">
<div class="box phys apt">
<span name="attr_pacross2" class="changetext">
</span>
</div>
</div>
<div class="wrapper">
<div class="inner"><input type="checkbox" style= "margin:4px" name="attr_pa2changed"> <h3>Changed</h3></div>
<div class="inner"><input type="checkbox" style= "margin:4px" name="attr_pa2damaged"> <h3>Damaged</h3></div>
</div>
<div class="spacer"></div>
<div class="enclosure">
<div class="wrapper">
<div class="inner"><h3>Changed</h3><input type="checkbox" style= "margin-left:4px" name="attr_ma2changed"></div>
<div class="inner"><h3>Damaged</h3><input type="checkbox" style= "margin-left:4px" name="attr_ma2damaged"></div>
</div>
<div class="box ment apt">
<span name="attr_macross2" class="changetext">
</span>
</div>
</div>
</div>
<br>
<div class="row third space-between"><!-- CHANGE ROW APTITUDE 3 -->
<div class="enclosure">
<div class="box phys apt">
<span name="attr_pacross3" class="changetext">
</span>
</div>
</div>
<div class="wrapper">
<div class="inner"><input type="checkbox" style= "margin:4px" name="attr_pa3changed"> <h3>Changed</h3></div>
<div class="inner"> <input type="checkbox" style= "margin:4px" name="attr_pa3damaged"> <h3>Damaged</h3></div>
</div>
<div class="enclosure">
<div class="wrapper">
<div class="inner"><h3>Changed</h3><input type="checkbox" style= "margin-left:4px" name="attr_ma3changed"></div>
<div class="inner"><h3>Damaged</h3><input type="checkbox" style= "margin-left:4px" name="attr_ma3damaged"></div>
</div>
<div class="box ment apt">
<span name="attr_macross3" class="changetext">
</span>
</div>
</div>
</div>
<div class="row" style="font-family: contrail one"> <h2>Permanence</h2></div>
<div class="row space-between"><!-- CHANGE ROW PERMANENCE -->
<div class="empty" style="width: 10%"></div>
<div class="center">
<div class="box perm">
<span name="attr_permcross" class="changetext">
</span></div>
</div>
<div style="justify-content: flex-start">
<div class="wrapper">
<div class="inner"><input type="checkbox" style= "margin:4px" name="attr_permchanged"> <h3>Changed</h3></div>
<div class="inner"> <input type="checkbox" style= "margin:4px" name="attr_permdamaged"> <h3>Damaged</h3></div>
</div></div>
</div>
<br>
<div class="row third space-between"><!--CHANGE ROW FORTITUDE 3 -->
<div class="enclosure">
<div class="box ment fort">
<span name="attr_mfcross3" class="changetext">
</span>
</div>
</div>
<div class="wrapper">
<div class="inner"><input type="checkbox" style= "margin:4px" name="attr_mf3changed"> <h3>Changed</h3></div>
<div class="inner"> <input type="checkbox" style= "margin:4px" name="attr_mf3damaged"> <h3>Damaged</h3></div>
</div>
<div class="enclosure">
<div class="wrapper">
<div class="inner"><h3>Changed</h3><input type="checkbox" style= "margin-left:4px" name="attr_pf3changed"></div>
<div class="inner"><h3>Damaged</h3><input type="checkbox" style= "margin-left:4px" name="attr_pf3damaged"></div>
</div>
<div class="box phys fort">
<span name="attr_pfcross3" class="changetext">
</span>
</div>
</div>
</div>
<br>
<div class="row second space-between"><!-- CHANGE ROW FORTITUDE 2 -->
<div class="enclosure">
<div class="box ment fort">
<span name="attr_mfcross2" class="changetext">
</span>
</div>
</div>
<div class="wrapper">
<div class="inner"><input type="checkbox" style= "margin:4px" name="attr_mf2changed"> <h3>Changed</h3></div>
<div class="inner"> <input type="checkbox" style= "margin:4px" name="attr_mf2damaged"> <h3>Damaged</h3></div>
</div>
<div class="spacer"></div>
<div class="enclosure">
<div class="wrapper">
<div class="inner"><h3>Changed</h3><input type="checkbox" style= "margin-left:4px" name="attr_pf2changed"></div>
<div class="inner"><h3>Damaged</h3><input type="checkbox" style= "margin-left:4px" name="attr_pf2damaged"></div>
</div>
<div class="box phys fort">
<span name="attr_pfcross2" class="changetext">
</span>
</div>
</div>
</div>
<br>
<div class="row"><!-- CHANGE ROW FORTITUDE 1 -->
<div class="enclosure">
<div class="box ment fort">
<span name="attr_mfcross1" class="changetext">
</span>
</div>
</div>
<div class="wrapper">
<div class="inner"><input type="checkbox" style= "margin:4px" name="attr_mf1changed"> <h3>Changed</h3></div>
<div class="inner"> <input type="checkbox" style= "margin:4px" name="attr_mf1damaged"> <h3>Damaged</h3></div>
</div>
<div class="spacer"></div>
<div class="enclosure">
<div class="wrapper">
<div class="inner"><h3>Changed</h3><input type="checkbox" style= "margin-left:4px" name="attr_pf1changed"></div>
<div class="inner"><h3>Damaged</h3><input type="checkbox" style= "margin-left:4px" name="attr_pf1damaged"></div>
</div>
<div class="box phys fort">
<span name="attr_pfcross1" class="changetext">
</span>
</div>
</div>
</div>
<div class="row"><!-- ATTRIBUTE FOOTER -->
<h2 style="float: left; font-family: contrail one;">Mental Fortitude</h2>
<div style="width:280px"></div>
<h2 style="float: right; font-family: contrail one;">Physical Fortitude</h2>
</div>
<br>
<!-- END OF CHARACTER SHEET -->
<div class="row input-menu">
<div style=>
<input type="checkbox" class="sheet-toggle-show" />
<div class="sheet-body console">
<div class="text-input" style="display:flex flex-direction:column align-items:center">
<h3 style="display:block">Physical Aptitude</h3>
<textarea name='attr_physapttext'
placeholder='Enter Physical Aptitude attribute changes here, starting with the first change in each attribute and separating each change with "&#124;".'></textarea>
</div>
<div class="text-input" style="display:flex flex-direction:column align-items:center">
<h3 style="display:block">Mental Aptitude</h3>
<textarea name='attr_mentapttext'
placeholder='Enter Mental Aptitude attribute changes here, starting with the first change in each attribute and separating each change with "&#124;".'></textarea>
</div>
<div class="text-input" style="display:flex flex-direction:column align-items:center">
<h3 style="display:block">Physical Fortitude</h3>
<textarea name='attr_physforttext'
placeholder='Enter Physical Fortitude attribute changes here, starting with the first change in each attribute and separating each change with "&#124;".'></textarea>
</div>
<div class="text-input" style="display:flex flex-direction:column align-items:center">
<h3 style="display:block">Mental Fortitude</h3>
<textarea name='attr_mentforttext'
placeholder='Enter Mental Fortitude attribute changes here, starting with the first change in each attribute and separating each change with "&#124;".'></textarea>
</div>
<div class="text-input" style="display:flex flex-direction:column align-items:center">
<h3 style="display:block">Permanence</h3>
<textarea name='attr_permtext'
placeholder='Enter the Permanence attribute change here.'></textarea>
</div>
<br>
<div class="flex-column center">
<button type="action" class="submit" name="act_submit">SUBMIT</button><br>
<div style="max-width: 400px; text-align: center">
<h4>Enter attribute changes here, starting with the first change in each attribute and separating each change with "&#124;".</h4>
<br>
<h4>Click "SUBMIT" to add data to the Change Cross.</h4>
</div>
</div>
<input type="hidden" name="attr_pacross1"
value="Check the box at the bottom of the sheet to open text-entry console">
<input type="hidden" name="attr_macross1"
value="Check the box at the bottom of the sheet to open text-entry console">
<input type="hidden" name="attr_pacross2"
value="Check the box at the bottom of the sheet to open text-entry console">
<input type="hidden" name="attr_macross2"
value="Check the box at the bottom of the sheet to open text-entry console">
<input type="hidden" name="attr_pacross3"
value="Check the box at the bottom of the sheet to open text-entry console">
<input type="hidden" name="attr_macross3"
value="Check the box at the bottom of the sheet to open text-entry console">
<input type="hidden" name="attr_pfcross3"
value="Check the box at the bottom of the sheet to open text-entry console">
<input type="hidden" name="attr_mfcross3"
value="Check the box at the bottom of the sheet to open text-entry console">
<input type="hidden" name="attr_pfcross2"
value="Check the box at the bottom of the sheet to open text-entry console">
<input type="hidden" name="attr_mfcross2"
value="Check the box at the bottom of the sheet to open text-entry console">
<input type="hidden" name="attr_pfcross1"
value="Check the box at the bottom of the sheet to open text-entry console">
<input type="hidden" name="attr_mfcross1"
value="Check the box at the bottom of the sheet to open text-entry console">
<input type="hidden" name="attr_permcross"
value="Check the box at the bottom of the sheet to open text-entry console">
<script type="text/worker">
//for updating the change boxes (come back later to tidy this up into fewer functions)
on("clicked:submit sheet:opened", function() {
getAttrs(["physAptText"], function(values) {
let x = values.physAptText;
let y = x.indexOf("|");
let z = x.indexOf("|", y + 1);
let slice1 = x.slice(0,y);
let slice2 = x.slice(y + 1, z);
let slice3 = x.slice(z + 1, )
setAttrs ({paCross1: slice1, paCross2: slice2, paCross3: slice3
})
})
})
on("clicked:submit sheet:opened", function() {
getAttrs(["mentAptText"], function(values) {
let x = values.mentAptText;
let y = x.indexOf("|");
let z = x.indexOf("|", y + 1);
let slice1 = x.slice(0,y);
let slice2 = x.slice(y + 1, z);
let slice3 = x.slice(z + 1, )
setAttrs ({maCross1: slice1, maCross2: slice2, maCross3: slice3
})
})
})
on("clicked:submit sheet:opened", function() {
getAttrs(["physFortText"], function(values) {
let x = values.physFortText;
let y = x.indexOf("|");
let z = x.indexOf("|", y + 1);
let slice1 = x.slice(0,y);
let slice2 = x.slice(y + 1, z);
let slice3 = x.slice(z + 1, )
setAttrs ({pfCross1: slice1, pfCross2: slice2, pfCross3: slice3
})
})
})
on("clicked:submit sheet:opened", function() {
getAttrs(["mentFortText"], function(values) {
let x = values.mentFortText;
let y = x.indexOf("|");
let z = x.indexOf("|", y + 1);
let slice1 = x.slice(0,y);
let slice2 = x.slice(y + 1, z);
let slice3 = x.slice(z + 1, )
setAttrs ({mfCross1: slice1, mfCross2: slice2, mfCross3: slice3
})
})
})
on("clicked:submit sheet:opened", function() {
getAttrs(["permText"], function(values) {
let x = values.permText
setAttrs ({permCross: x
})
})
})
</script>