463 lines
21 KiB
HTML
463 lines
21 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>CRCulator</title>
|
|
<meta name="description" content="A smol CR Calculator">
|
|
<meta name="author" content="James">
|
|
<meta property="og:title" content="CRCulator">
|
|
<meta property="og:type" content="CRCulator">
|
|
<meta property="og:url" content="https://cr.james-things.com">
|
|
<meta property="og:description" content="A smol CR Calculator">
|
|
<meta property="og:image" content="https://e7.pngegg.com/pngimages/710/403/png-clipart-the-embodiment-of-scarlet-devil-team-shanghai-alice-video-game-banjo-tooie-mario-luigi-partners-in-time-marisa-logo-computer-wallpaper.png">
|
|
<link rel="icon" href="/favicon.ico">
|
|
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
|
<!--MATERIALIZE-->
|
|
<!--Import jQuery-->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
<!--Import Google Icon Font-->
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
<!--Import materialize.css-->
|
|
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
|
|
<!--My Custom Stylesheet-->
|
|
<link rel="stylesheet" href="css/styles.css"> </head>
|
|
|
|
<body>
|
|
<div class "container">
|
|
<div class="row">
|
|
<div class="col s12 m10 l8 offset-m1 offset-l2">
|
|
<div class="blurry">
|
|
<div class="card white">
|
|
<div class="card-content white-text"> <span class="card-title black-text">James' CR Calculator... or Crculator... whatever</span>
|
|
<form action="#">
|
|
<div class="row">
|
|
<div class="col s12">
|
|
<div class="card green">
|
|
<div class="card-content white-text"> <span class="card-title">Party Setup</span>
|
|
<div class="row">
|
|
<div class="col s12 m6">
|
|
<div class="card green darken-4">
|
|
<div class="card-content white-text"> <span class="card-title">About the Players...</span>
|
|
<div class="card black">
|
|
<div class="card-content white-text"> <span>
|
|
<span>
|
|
How many Meelee Fighters are in the Party?
|
|
</span>
|
|
<div class="input-field s3">
|
|
<input placeholder="Insert Smash Bros. refference..." id="party_meelee" min="1" type="number" class="white-text validate">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="input-field s3">
|
|
<div class="card black">
|
|
<div class="card-content white-text"> <span>
|
|
<span>
|
|
How many Ranged fighters are in the Party?
|
|
</span>
|
|
<input placeholder="The ones, that DON'T track ammo..." id="party_long_range" min="1" type="number" class="white-text validate">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="input-field s3">
|
|
<div class="card black">
|
|
<div class="card-content white-text"> <span>
|
|
<span>
|
|
How many Spell Fighters are in the Party?
|
|
</span>
|
|
<input placeholder="The ones, who are forced to track ammo..." id="party_magic" min="1" type="number" class="white-text validate">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="input-field s3">
|
|
<div class="card black">
|
|
<div class="card-content white-text"> <span>
|
|
<span>
|
|
How many squishy Supports?
|
|
</span>
|
|
<input placeholder="The dicestackers." id="party_support" min="1" type="number" class="white-text validate">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="input-field s3">
|
|
<div class="card black">
|
|
<div class="card-content white-text"> <span>
|
|
<span>
|
|
What average level is your party?
|
|
</span>
|
|
<input placeholder="Insert Smash Bros. refference..." id="party_level" min="1" type="number" class="white-text validate">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col s12 m6">
|
|
<div class="card green darken-4">
|
|
<div class="card-content white-text"> <span class="card-title">Skill calculator</span>
|
|
|
|
<div class="card black">
|
|
<div class="card-content white-text">
|
|
<span>
|
|
Have your players played DND before?
|
|
</span>
|
|
<br>
|
|
<label>
|
|
<input name="group1" type="radio" checked /> <span>Yes</span> </label><br>
|
|
<label>
|
|
<input name="group1" type="radio" /> <span>No</span> </label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card black">
|
|
<div class="card-content white-text"> <span>
|
|
Do your players use the enviroment for attacks?
|
|
</span>
|
|
<br>
|
|
<label>
|
|
<input name="group5" type="radio" checked /> <span>Yes, but there is nothing around</span> </label><br>
|
|
<label>
|
|
<input name="group5" type="radio" /> <span>Yes, I plan on adding additional weaponry.</span> </label><br>
|
|
<label>
|
|
<input name="group5" type="radio" /> <span>No, my players are mindless robots.</span> </label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card black">
|
|
<div class="card-content white-text"> <span>
|
|
Do your players play any strategy games? (Chess counts)
|
|
</span>
|
|
<br>
|
|
<label>
|
|
<input name="group3" type="radio" checked /> <span>Yes</span> </label><br>
|
|
<label>
|
|
<input name="group3" type="radio" /> <span>No</span> </label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card black">
|
|
<div class="card-content white-text"> <span>
|
|
Do you use rules, which assist in adding damage/advantage? (Flanking, Limb rule , Lingering Injuries)
|
|
</span>
|
|
<br>
|
|
<label>
|
|
<input name="group4" type="radio" checked /> <span>Yes</span><br>
|
|
</label>
|
|
<label>
|
|
<input name="group4" type="radio" /> <span>Multiple</span><br>
|
|
</label>
|
|
<label>
|
|
<input name="group4" type="radio" /> <span>No</span>
|
|
</label>
|
|
<ul class="collapsible">
|
|
<li>
|
|
<div class="collapsible-header indigo"><i class="material-icons">info_outline</i>Explanation Flanking</div>
|
|
<div class="collapsible-body indigo darken-4"><span>Flanking is an optional rule in DnD 5E, intended to add more tactical depth to combat. The rule itself is straightforward: When a creature and at least one ally are within 5ft of the same enemy on opposite sides, that enemy is flanked. Each of the creatures flanking has advantage on melee attacks against it.</span></div>
|
|
</li>
|
|
<li>
|
|
<div class="collapsible-header indigo"><i class="material-icons">info_outline</i>Explanation Limb Rule</div>
|
|
<div class="collapsible-body indigo darken-4"><span>Basically like flanking, but instead of standing opposed to the enemy, it's about outnumbering the usable limbs. Basically if there is a normal human, using two swords/shields, they can block 2 People. If there is a third person, they gain advantage, since they cannot block the third attack.</span></div>
|
|
</li>
|
|
<li>
|
|
<div class="collapsible-header indigo"><i class="material-icons">info_outline</i>Explanation Lingering Injuries</div>
|
|
<div class="collapsible-body indigo darken-4"><span>When a creature takes damage from a single source equal to or greater than half its hit point maximum, it must succeed on a Constitution saving throw with DC 15 or half the damage receive (whichever is higher) or suffer a random effect determined by a roll on the System Shock table.<br> (Table not included)</span></div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col s12">
|
|
<div class="card indigo">
|
|
<div class="card-content white-text"> <span class="card-title">Mob Setup</span>
|
|
<div class="row">
|
|
<div class="col s6">
|
|
<div class="card indigo darken-4">
|
|
<div class="card-content white-text"> <span class="card-title">Hit Points</span>
|
|
<div class="input-field s3">
|
|
<input placeholder="X" id="hp_dice_ammount" type="number" class="white-text validate">
|
|
<label for="hp_dice_ammount">Average?</label>
|
|
</div>
|
|
<div class="input-field s3">
|
|
<input placeholder="X" id="hp_dice_ammount" type="number" class="white-text validate">
|
|
<label for="hp_dice_ammount">How many Dice?</label>
|
|
</div>
|
|
<div class="input-field s3">
|
|
<input placeholder="Y" id="hp_dice_sides" type="number" class="white-text validate">
|
|
<label for="hp_dice_sides">How many Sides?</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col s6">
|
|
<div class="card indigo darken-4">
|
|
<div class="card-content white-text"> <span class="card-title">Abilities</span>
|
|
<div class="input-field s3">
|
|
<input placeholder="X" id="hp_dice_ammount" type="number" class="white-text validate">
|
|
<label for="hp_dice_ammount">DEX?</label>
|
|
</div>
|
|
<div class="input-field s3">
|
|
<input placeholder="Y" id="hp_dice_sides" type="number" class="white-text validate">
|
|
<label for="hp_dice_sides">How many Sides?</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col s12 m6 l6">
|
|
<div class="card indigo darken-4">
|
|
<div class="card-content white-text"> <span class="card-title">
|
|
Resistances
|
|
</span>
|
|
<div class="row">
|
|
<div class="col s6">
|
|
<label>
|
|
<input id="resistance_acid" type="checkbox" /> <span class="white-text">Acid</span> </label>
|
|
</div>
|
|
<div class="col s6">
|
|
<label>
|
|
<input id="resistance_bludgeoning" type="checkbox" /> <span class="white-text">Bludgeoning</span> </label>
|
|
</div>
|
|
<div class="col s6">
|
|
<label>
|
|
<input id="resistance_cold" type="checkbox" /> <span class="white-text">Cold</span> </label>
|
|
</div>
|
|
<div class="col s6">
|
|
<label>
|
|
<input id="resistance_fire" type="checkbox" /> <span class="white-text">Fire</span> </label>
|
|
</div>
|
|
<div class="col s6">
|
|
<label>
|
|
<input id="resistance_force" type="checkbox" /> <span class="white-text">Force</span> </label>
|
|
</div>
|
|
<div class="col s6">
|
|
<label>
|
|
<input id="resistance_lightning" type="checkbox" /> <span class="white-text">Lightning</span> </label>
|
|
</div>
|
|
<div class="col s6">
|
|
<label>
|
|
<input id="resistance_necrotic" type="checkbox" /> <span class="white-text">Necrotic</span> </label>
|
|
</div>
|
|
<div class="col s6">
|
|
<label>
|
|
<input id="resistance_piercing" type="checkbox" /> <span class="white-text">Piercing</span> </label>
|
|
</div>
|
|
<div class="col s6">
|
|
<label>
|
|
<input id="resistance_poison" type="checkbox" /> <span class="white-text">Poison</span> </label>
|
|
</div>
|
|
<div class="col s6">
|
|
<label>
|
|
<input id="resistance_psychic" type="checkbox" /> <span class="white-text">Psychic</span> </label>
|
|
</div>
|
|
<div class="col s6">
|
|
<label>
|
|
<input id="resistance_radiant" type="checkbox" /> <span class="white-text">Radiant</span> </label>
|
|
</div>
|
|
<div class="col s6">
|
|
<label>
|
|
<input id="resistance_slashing" type="checkbox" /> <span class="white-text">Slashing</span> </label>
|
|
</div>
|
|
<div class="col s6">
|
|
<label>
|
|
<input id="resistance_thunder" type="checkbox" /> <span class="white-text">Thunder</span> </label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col s12 m6 l6">
|
|
<div class="card indigo darken-4">
|
|
<div class="card-content white-text"> <span class="card-title">
|
|
Vounerabilities
|
|
</span>
|
|
<div class="row">
|
|
<div class="col s6">
|
|
<label>
|
|
<input id="vounerability_acid" type="checkbox" /> <span class="white-text">Acid</span> </label>
|
|
</div>
|
|
<div class="col s6">
|
|
<label>
|
|
<input id="vounerability_bludgeoning" type="checkbox" /> <span class="white-text">Bludgeoning</span> </label>
|
|
</div>
|
|
<div class="col s6">
|
|
<label>
|
|
<input id="vounerability_cold" type="checkbox" /> <span class="white-text">Cold</span> </label>
|
|
</div>
|
|
<div class="col s6">
|
|
<label>
|
|
<input id="vounerability_fire" type="checkbox" /> <span class="white-text">Fire</span> </label>
|
|
</div>
|
|
<div class="col s6">
|
|
<label>
|
|
<input id="vounerability_force" type="checkbox" /> <span class="white-text">Force</span> </label>
|
|
</div>
|
|
<div class="col s6">
|
|
<label>
|
|
<input id="vounerability_lightning" type="checkbox" /> <span class="white-text">Lightning</span> </label>
|
|
</div>
|
|
<div class="col s6">
|
|
<label>
|
|
<input id="vounerability_necrotic" type="checkbox" /> <span class="white-text">Necrotic</span> </label>
|
|
</div>
|
|
<div class="col s6">
|
|
<label>
|
|
<input id="vounerability_piercing" type="checkbox" /> <span class="white-text">Piercing</span> </label>
|
|
</div>
|
|
<div class="col s6">
|
|
<label>
|
|
<input id="vounerability_poison" type="checkbox" /> <span class="white-text">Poison</span> </label>
|
|
</div>
|
|
<div class="col s6">
|
|
<label>
|
|
<input id="vounerability_psychic" type="checkbox" /> <span class="white-text">Psychic</span> </label>
|
|
</div>
|
|
<div class="col s6">
|
|
<label>
|
|
<input id="vounerability_radiant" type="checkbox" /> <span class="white-text">Radiant</span> </label>
|
|
</div>
|
|
<div class="col s6">
|
|
<label>
|
|
<input id="vounerability_slashing" type="checkbox" /> <span class="white-text">Slashing</span> </label>
|
|
</div>
|
|
<div class="col s6">
|
|
<label>
|
|
<input id="vounerability_thunder" type="checkbox" /> <span class="white-text">Thunder</span> </label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col s12">
|
|
<div class="card black">
|
|
<div class="card-content white-text"> <span class="card-title">Results</span>
|
|
<div class="row">
|
|
<div class="col s12">
|
|
<div class="card horizontal grey darken-4">
|
|
<div class="card-image">
|
|
<a href="https://www.deviantart.com/velger96/art/Marisa-level-chart-208761786"> <img id="diff_image" src="img/error.png" height="206"> </a>
|
|
</div>
|
|
<div class="card-stacked">
|
|
<div class="card-content">
|
|
<p id="diff_description">I was unable to calculate the difficulty.</p>
|
|
</div>
|
|
<div class="card-action">
|
|
<p id="diff_summary">Too drunk to calculate</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col s12">
|
|
<div class="card black">
|
|
<div class="card-content white-text"> <span class="card-title">[DEBUG] Set the current status! [DEBUG]</span>
|
|
<br>
|
|
<label>
|
|
<input name="debug_diff" type="radio" checked onchange="calcDiff()"/> <span>Calculation</span>
|
|
</label>
|
|
<label>
|
|
<input name="debug_diff" type="radio" onchange="setDiff('easy')"/> <span>Easy</span>
|
|
</label>
|
|
<label>
|
|
<input name="debug_diff" type="radio" onchange="setDiff('medium')"/> <span>Medium</span>
|
|
</label>
|
|
<label>
|
|
<input name="debug_diff" type="radio" onchange="setDiff('hard')"/> <span>Hard</span>
|
|
</label>
|
|
<label>
|
|
<input name="debug_diff" type="radio" onchange="setDiff('lunatic')"/> <span>Deadly</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col s12">
|
|
<div class="card black">
|
|
<div class="card-content white-text"> <span class="card-title"> Do you intend to wipe the party?</span>
|
|
|
|
<label>
|
|
<input name="danger" type="radio" checked /> <span>Yes</span>
|
|
</label><br>
|
|
<label>
|
|
<input name="danger" type="radio" /> <span class="red-text"><b>Yes, but in red</b></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--JavaScript at end of body for optimized loading-->
|
|
<script type="text/javascript" src="js/materialize.min.js"></script>
|
|
<script type="text/javascript">
|
|
|
|
$(document).ready(function(){
|
|
$('.collapsible').collapsible();
|
|
});
|
|
|
|
</script>
|
|
<script type="text/javascript">
|
|
|
|
function calcDiff() {
|
|
$("#diff_description").html("The calculation is currently not programmed.");
|
|
$("#diff_summary").html("Good one, bro.");
|
|
}
|
|
|
|
function setDiff(difficulty) {
|
|
$("#diff_image").attr("src", "img/diff_"+difficulty.substring(3,0)+".jpg")
|
|
|
|
switch (difficulty) {
|
|
case "easy":
|
|
$("#diff_description").html("This fight should be an easy pick for your players. Maybe a scratch wound or two are the most, they take out of this.");
|
|
$("#diff_summary").html("A simple fight");
|
|
break;
|
|
case "medium":
|
|
$("#diff_description").html("Noone <i>should</i> die, but if your party willingly positions themselves in front of the raging barbarian, that's on them.");
|
|
$("#diff_summary").html("A slightly challenging fight.");
|
|
|
|
break;
|
|
case "hard":
|
|
$("#diff_description").html("Quite a fight. Could lead to a death. If you want, that your party uses items, go ahead and throw this fight at them.");
|
|
$("#diff_summary").html("Item usage to prevent death is advised.");
|
|
|
|
break;
|
|
case "lunatic":
|
|
$("#diff_description").html("This is the real deal. You will suffer losses. Maybe your party will die... or enslaved.. or enslaved and then killed... However, there is hope! <br>Okay no, I lied. your Party is dead.");
|
|
$("#diff_summary").html("");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|