[Criancas Enxeridas] New sheet (#7255)

* uploading

* organizing

* v0.1

* up images

* v0.5

* up image

* upload

* up

* v0.6

* v0.7

* switched images to css draw and made roll buttons affected by conditions

* roll template done

* v1.0 complete

* ready for production

* Update sheet.json

* removing test files as requested from Roll20
This commit is contained in:
danielsousat
2020-08-24 14:20:21 -05:00
committed by GitHub
parent 3e30bb131f
commit 44af854a67
6 changed files with 816 additions and 0 deletions
+1
View File
@@ -0,0 +1 @@
This is a character sheet for the Crianças Enxeridas RPG game by Raphael Lima.
+376
View File
@@ -0,0 +1,376 @@
/*----------------- MAIN CONTAINER DEFINITIONS ------------------*/
@import url('https://fonts.googleapis.com/css?family=Chewy|Raleway&display=swap');
.sheet-main-container {
min-width: 800px;
max-width: 1000px;
border: 1.5px solid black;
padding: 30px 30px 0px 30px;
}
.sheet-main-container * {
box-sizing: border-box !important;
}
/*----------------- GENERAL CSS ------------------*/
.sheet-main-font {
font-family: Raleway;
}
.sheet-flex-row {
display: flex;
flex-direction: row;
}
.sheet-flex-column {
display: flex;
flex-direction: column;
}
.sheet-grow {
flex-grow: 1;
}
.sheet-main-container input:focus, .sheet-main-container {
background: white;
}
.sheet-main-container ::placeholder {
color:#604241;
font-style: italic;
}
.sheet-main-container input[type=number] {
width: 3em;
border: none;
background-color: transparent;
height: 20px;
}
.sheet-main-container fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
.sheet-main-container textarea {
margin: 2px;
height: 100%;
width: 100%;
flex-grow: 1;
color: black;
}
.sheet-box-border {
border: 1.5px solid black;
border-radius: 5px;
}
.sheet-black-title {
background-color: black;
color: white;
padding: 10px;
margin: 0px 0px 10px 0px;
text-transform: uppercase;
text-align: center;
}
.sheet-light-title {
text-transform: uppercase;
text-align: center;
margin: 0px 0px 10px 0px;
}
.sheet-repeatable-item input[type=text] {
border: none;
border-bottom: 1px solid black;
border-radius: 0px;
margin-bottom: 5px;
flex-grow: 1;
width: auto !important;
}
.sheet-circle {
border: 2px solid black;
border-radius: 50%;
width: 100%;
height: 100%;
}
/*------------- SHEET SECTIONS -------------*/
.sheet-header {
align-items: center;
margin-bottom: 20px;
}
.sheet-header-box {
margin: 5px;
padding: 0px 10px 0px 10px;
align-items: center;
}
.sheet-header input {
margin: 2px;
flex-grow: 1;
border: none;
width: 100%;
background-color: transparent;
color: black;
}
.sheet-header h1 {
margin: 0px 20px 0px 0px;
text-transform: uppercase;
font-family: Chewy;
font-size: 3em;
}
.sheet-middle-row {
display: flex;
flex-direction: row;
justify-content: stretch;
align-items: stretch;
}
.sheet-attributes {
display: flex;
flex-direction: column;
}
.sheet-attributes-container {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 10px;
}
.sheet-attribute-box {
display: flex;
flex-direction: row;
align-items: center;
}
.sheet-attribute-circle-size {
width: 50px;
height: 50px;
}
.sheet-attribute-white-bg {
background-color: white;
z-index: 1;
}
.sheet-survival-used-box {
position: absolute;
margin: 60px 0px 0px 30px;
width: 40px;
height: 40px;
z-index: 0;
}
.sheet-attribute-black-bg {
background-color: black;
width: 50px;
height: 50px;
color: white;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
font-weight: 900;
font-family: Chewy;
}
.sheet-attribute-value {
margin: 15px 0px 0px 11px;
text-align: center;
}
.sheet-survival-used-value {
margin: 10px 0px 0px 6px !important;
}
.sheet-attribute-label {
text-transform: uppercase;
margin: 5px;
}
.sheet-attribute-separator {
font-size: 40px;
font-weight: 900;
text-align: center;
position: relative;
left: 15px;
font-family: Raleway;
}
.sheet-conditions-row{
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.sheet-condition-label {
text-transform: uppercase;
}
.sheet-condition-box {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px;
}
.sheet-condition-circle-size {
width: 25px;
height: 25px;
}
.sheet-condition-checkbox {
opacity: 0;
z-index: 1;
position: absolute;
margin: 0px !important;
width: 25px !important;
height: 25px !important;
}
.sheet-black-circle {
display: none;
background-color: black;
}
.sheet-condition-checkbox:checked ~ div.sheet-black-circle {
display: inline-block;
}
.sheet-condition-checkbox:checked ~ div.sheet-blank-circle {
display: none;
}
.sheet-section-box {
display: flex;
flex-direction: column;
padding: 10px;
flex-grow: 1;
}
.sheet-footer {
text-align: right;
font-style: italic;
font-size: small;
margin-top: 20px;
}
/*------------- REPEATABLE SECTIONS BUTTONS -------------*/
.repcontrol>.btn {
background-color: white;
font-size: 2px;
border: 1px solid black;
background-image: none;
text-shadow: none;
box-shadow: none;
display: inline-block;
border-radius: 0 !important;
margin-left: 10px !important;
margin-right: 10px !important;
font-weight: normal;
min-height: 22px;
min-width: 22px !important;
margin-bottom: 10px !important;
position: relative
}
.repcontrol>.btn.repcontrol_add::before {
position: absolute;
content: "&";
font-weight: 0;
color: black;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-family: 'Pictos' !important;
line-height: 13px;
height: 13px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
.repcontrol>.btn.repcontrol_edit::before {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
content: "l";
font-weight: 0;
color: black;
font-size: 13px;
font-family: 'Pictos' !important;
line-height: 13px;
height: 13px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
/*------------- SHEET ROLL TEMPLATE -------------*/
.sheet-rolltemplate-main .sheet-template-container {
display: flex;
flex-direction: column;
border: 2px solid black;
font-family: Raleway;
text-align: center;
}
.sheet-rolltemplate-main p {
font-family: Raleway;
text-align: left;
}
.sheet-rolltemplate-main .sheet-template-row {
display: flex;
flex-direction: column;
border-bottom: 1px solid black;
padding: 5px;
justify-content: center;
align-items: center;
}
.sheet-rolltemplate-main .sheet-template-header {
flex-direction: row !important;
background-color: black;
color: white;
}
.sheet-rolltemplate-main .sheet-template-label {
font-weight: bold;
text-transform: uppercase;
margin-bottom: 5px;
}
.sheet-rolltemplate-main .sheet-template-success {
color: green;
}
.sheet-rolltemplate-main .sheet-template-fail {
color: red;
}
/*------------- ROLL BUTTONS VISIBILITY CONTROL -------------*/
.sheet-rollbuttoncontrol[value=normal] ~ .sheet-normal-button,
.sheet-rollbuttoncontrol[value=disadvantage] ~ .sheet-disadvantage-button {
display: block;
}
.sheet-rollbuttoncontrol[value=normal] ~ .sheet-disadvantage-button,
.sheet-rollbuttoncontrol[value=disadvantage] ~ .sheet-normal-button {
display: none;
}
+394
View File
@@ -0,0 +1,394 @@
<div class="main-container flex-column">
<!-- Header -->
<div class="header flex-row">
<h1 data-i18n="game-title">Crianças<br>Enxeridas</h1>
<div class="flex-column grow">
<div class="flex-row header-box box-border">
<span class="main-font" data-i18n="name">Nome:</span>
<input name="attr_character_name" type="text" title="{@character_name}" />
</div>
<div class="flex-row header-box box-border">
<span class="main-font" data-i18n="archetype">Arquétipo:</span>
<input name="attr_archetype" type="text" title="{@archetype}" />
</div>
</div>
</div>
<div class="middle-row">
<div class="flex-column">
<!-- Attributes -->
<div class="attributes box-border">
<span class="main-font black-title" data-i18n="attributes">Atributos</span>
<div class="attributes-container">
<div class="attribute-box">
<div class="attribute-circle-size circle">
<input class="attribute-value" type="number" name="attr_charbody" title="{@charbody}" max="13" />
</div>
<span class="main-font attribute-label" data-i18n="body">Corpo</span>
<input type="hidden" class="rollbuttoncontrol" name="attr_woundedcontrol" value="normal" />
<button type="roll" class="normal-button" name="roll_body_check" title="{@body_check}"
value="&{template:main} {{charname=@{character_name}}} {{check=@{body}}} {{target=[[15]]}} {{result=[[ ?{ @{advantagedisadvantage} | @{no}, 1d20 | @{advantage}, 2d20kh1 | @{disadvantage}, 2d20kl1 } + @{charbody} ]]}}"></button>
<button type="roll" class="disadvantage-button" name="roll_body_disadvantage" title="{@body_disadvantage}"
value="&{template:main} {{charname=@{character_name}}} {{check=@{body}}} {{target=[[15]]}} {{result=[[ 2d20kl1 + @{charbody} ]]}}"></button>
</div>
<div class="attribute-separator">
+
</div>
<div class="attribute-box">
<div class="attribute-circle-size circle">
<input class="attribute-value" type="number" name="attr_charmind" title="{@charmind}" max="13" />
</div>
<span class="main-font attribute-label" data-i18n="mind">Mente</span>
<input type="hidden" class="rollbuttoncontrol" name="attr_shakencontrol" value="normal" />
<button type="roll" class="normal-button" name="roll_mind_check" title="{@mind_check}"
value="&{template:main} {{charname=@{character_name}}} {{check=@{mind}}} {{target=[[15]]}} {{result=[[ ?{ @{advantagedisadvantage} | @{no}, 1d20 | @{advantage}, 2d20kh1 | @{disadvantage}, 2d20kl1 } + @{charmind} ]]}}"></button>
<button type="roll" class="disadvantage-button" name="roll_mind_disadvantage" title="{@mind_disadvantage}"
value="&{template:main} {{charname=@{character_name}}} {{check=@{mind}}} {{target=[[15]]}} {{result=[[ 2d20kl1 + @{charmind} ]]}}"></button>
</div>
<div class="attribute-separator">
+
</div>
<div class="attribute-box">
<div class="attribute-circle-size circle">
<input class="attribute-value" type="number" name="attr_charcharisma" title="{@charcharisma}"
max="13" />
</div>
<span class="main-font attribute-label" data-i18n="charisma">Carisma</span>
<input type="hidden" class="rollbuttoncontrol" name="attr_ashamedcontrol" value="normal" />
<button type="roll" class="normal-button" name="roll_charisma_check" title="{@charisma_check}"
value="&{template:main} {{charname=@{character_name}}} {{check=@{charisma}}} {{target=[[15]]}} {{result= [[ ?{ @{advantagedisadvantage} | @{no}, 1d20 | @{advantage}, 2d20kh1 | @{disadvantage}, 2d20kl1 } + @{charcharisma} ]]}}"></button>
<button type="roll" class="disadvantage-button" name="roll_charisma_disadvantage" title="{@charisma_disadvantage}"
value="&{template:main} {{charname=@{character_name}}} {{check=@{charisma}}} {{target=[[15]]}} {{result= [[ 2d20kl1 + @{charcharisma} ]]}}"></button>
</div>
<div class="attribute-separator">
+
</div>
<div class="attribute-box">
<div class="attribute-white-bg attribute-circle-size circle">
<input class="attribute-value" type="number" name="attr_charsurvival" title="{@charsurvival}"
max="13" />
</div>
<div class="survival-used-box circle">
<input class="attribute-value survival-used-value" type="number"
name="attr_charsurvivalused" title="{@charsurvivalused}" />
</div>
<span class="main-font attribute-label" data-i18n="survival">Sobrevivência</span>
<button type="roll" name="roll_survial_check" title="{@survival_check}"
value="&{template:main} {{charname=@{character_name}}} {{action=@{survivalaction}}} {{text=@{survivalexplanation}}}"></button>
</div>
<div class="attribute-separator">
+
</div>
<div class="attribute-box">
<div class="attribute-circle-size circle">
<input class="attribute-value" type="number" name="attr_charcuriosity" title="{@charcuriosity}"
max="13" />
</div>
<span class="main-font attribute-label" data-i18n="curiosity">Curiosidade</span>
<button type="roll" name="roll_curiosity_check" title="{@curiosity_check}"
value="&{template:main} {{charname=@{character_name}}} {{check=@{curiosity}}} {{rollunder=[[@{charcuriosity}]]}} {{result=[[ ?{ @{advantagedisadvantage} | @{no}, 1d20cs1cf20 | @{advantage}, 2d20kl1cs1cf20 | @{disadvantage}, 2d20kh1cs1cf20 } ]]}}"></button>
</div>
<div class="attribute-separator">
=
</div>
<div class="attribute-box">
<div class="attribute-black-bg circle">
25
</div>
<span class="main-font attribute-label" data-i18n="total">Total</span>
</div>
</div>
</div>
</div>
<div class="flex-column grow">
<!-- Equipments -->
<div class="section-box">
<span class="main-font light-title" data-i18n="equipments">Equipamentos</span>
<fieldset class="repeating_equipments">
<div class="flex-row repeatable-item">
<input name="attr_equipment" type="text" data-i18n-placeholder="equipment" placeholder="Equipamento" />
</div>
</fieldset>
</div>
</div>
<div class="flex-column grow">
<!-- Consequences -->
<div class="section-box">
<span class="main-font light-title" data-i18n="consequences">Consequências</span>
<fieldset class="repeating_consequences">
<div class="flex-row repeatable-item">
<input name="attr_consequence" type="text" data-i18n-placeholder="consequence"
placeholder="Consequência" />
</div>
</fieldset>
</div>
</div>
<div class="flex-column grow">
<!-- Notes -->
<div class="section-box">
<span class="main-font light-title" data-i18n="notes">Anotações</span>
<textarea name="attr_notes" title="{@notes}"></textarea>
</div>
</div>
</div>
<!-- Conditions -->
<div class="flex-column box-border">
<span class="main-font black-title" data-i18n="conditions">Condições</span>
<div class="conditions-row">
<div class="condition-box">
<div class="condition-circle-size">
<input class="condition-checkbox" type="checkbox" name="attr_wounded" title="{@wounded}" />
<div class="blank-circle condition-circle-size circle"></div>
<div class="black-circle condition-circle-size circle"></div>
</div>
<span class="main-font condition-label" data-i18n="wounded">Ferido</span>
</div>
<div class="condition-box">
<div class="condition-circle-size">
<input class="condition-checkbox" type="checkbox" name="attr_shaken" title="{@shaken}" />
<div class="blank-circle condition-circle-size circle"></div>
<div class="black-circle condition-circle-size circle"></div>
</div>
<span class="main-font condition-label" data-i18n="shaken">Abalado</span>
</div>
<div class="condition-box">
<div class="condition-circle-size">
<input class="condition-checkbox" type="checkbox" name="attr_ashamed" title="{@ashamed}" />
<div class="blank-circle condition-circle-size circle"></div>
<div class="black-circle condition-circle-size circle"></div>
</div>
<span class="main-font condition-label" data-i18n="ashamed">Envergonhado</span>
</div>
<div class="condition-box">
<div class="condition-circle-size">
<input class="condition-checkbox" type="checkbox" name="attr_defeated" title="{@defeated}" />
<div class="blank-circle condition-circle-size circle"></div>
<div class="black-circle condition-circle-size circle"></div>
</div>
<span class="main-font condition-label" data-i18n="defeated">Derrotado</span>
</div>
</div>
</div>
<div class="main-font footer">
<span data-i18n="copyright">Crianças Enxeridas é um jogo escrito por Raphael Lima com o selo Mundos Colidem.</span>
</div>
</div>
<!-- end of sheet -->
<!-- Roll Templates -->
<rolltemplate class="sheet-rolltemplate-main">
<div class="template-container">
<div class="template-row template-header template-label">
{{charname}}
</div>
{{#action}}
<div class="template-row">
<span class="template-label">{{action}}</span>
{{#text}}
<p>{{text}}</p>
{{/text}}
</div>
{{/action}}
{{#check}}
<div class="template-row">
<span class="template-label" data-i18n="check">Teste</span>
{{check}}
</div>
{{/check}}
{{#result}}
<div class="template-row">
<span class="template-label" data-i18n="result">Resultado</span>
{{result}}
</div>
{{#rollGreater() result rollunder}}
<div class="template-row">
<span class="template-label template-fail" data-i18n="fail">Você Errou!</span>
</div>
{{/rollGreater() result rollunder}}
{{#^rollGreater() result rollunder}}
<div class="template-row">
<span class="template-label template-success" data-i18n="success">Você Acertou!</span>
</div>
{{/^rollGreater() result rollunder}}
{{#^rollLess() result target}}
<div class="template-row">
<span class="template-label template-success" data-i18n="success">Você Acertou!</span>
</div>
{{/^rollLess() result target}}
{{#rollLess() result target}}
<div class="template-row">
<span class="template-label template-fail" data-i18n="fail">Você Errou!</span>
</div>
{{/rollLess() result target}}
{{#rollWasCrit() result}}
<div class="template-row">
<span class="template-label template-success" data-i18n="critic">Acerto Crítico!</span>
<span data-i18n="criticexplanation">O grupo pode adicionar um elemento narrativo na cena.</span>
</div>
{{/rollWasCrit() result}}
{{#rollWasFumble() result}}
<div class="template-row">
<span class="template-label template-fail" data-i18n="fumble">Erro Crítico!</span>
<span data-i18n="fumbleexplanation">O narrador pode adicionar uma consequência negativa.</span>
</div>
{{/rollWasFumble() result}}
{{/result}}
</div>
</rolltemplate>
<!-- Strings translations for Roll Queries-->
<div style="display: none;">
<span data-i18n="advantagedisadvantage">Possui vantagem ou desvantagem?</span>
<span data-i18n="no">Não</span>
<span data-i18n="advantage">Vantagem</span>
<span data-i18n="disadvantage">Desvantagem</span>
<span data-i18n="result">Resultado</span>
<span data-i18n="check">Teste</span>
<span data-i18n="survivalaction">Gasto um ponto de sobrevivência</span>
<span data-i18n="survivalexplanation">
Você pode escolher uma das coisas:
- Manter uma ação;
- Encontrar uma pista;
- Rolar os dados outra vez;
- Inserir um elemento narrativo;
- Dizer que tem um "equipamento".</span>
</div>
<!--Sheet Workers -->
<script type="text/worker">
/*config Roll Queries translations */
on("sheet:opened", function(eventInfo){
setAttrs({
advantagedisadvantage: getTranslationByKey("advantagedisadvantage"),
no: getTranslationByKey("no"),
advantage: getTranslationByKey("advantage"),
disadvantage: getTranslationByKey("disadvantage"),
result: getTranslationByKey("result"),
check: getTranslationByKey("check"),
body: getTranslationByKey("body"),
mind: getTranslationByKey("mind"),
charisma: getTranslationByKey("charisma"),
survival: getTranslationByKey("survival"),
curiosity: getTranslationByKey("curiosity"),
survivalaction: getTranslationByKey("survivalaction"),
survivalexplanation: getTranslationByKey("survivalexplanation")
});
});
/*keep attributes values at 13 max*/
on("change:charbody change:charmind change:charcharisma change:charcuriosity change:charsurvival", function(eventInfo) {
const maxValue = 13;
let oldValue = parseInt(eventInfo.previousValue)||0;
let newValue = parseInt(eventInfo.newValue)||0;
let attribute = eventInfo.sourceAttribute;
let changedAttributes = new Object();
changedAttributes[attribute] = maxValue;
if (newValue > maxValue) {
changedAttributes[attribute] = maxValue;
setAttrs(changedAttributes);
}
});
/*controls roll buttons when char has a condition checked*/
on("change:wounded change:shaken change:ashamed", function(eventInfo) {
const disadvantage = "disadvantage";
const normal = "normal";
const sourceAttribute = eventInfo.sourceAttribute;
const newValue = eventInfo.newValue;
let changedAttributes = new Object();
let controlToUpdate = sourceAttribute + "control";
changedAttributes[controlToUpdate] = normal;
switch(newValue) {
case "on":
changedAttributes[controlToUpdate] = disadvantage;
break;
default:
changedAttributes[controlToUpdate] = normal;
}
setAttrs(changedAttributes);
});
</script>
Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

+8
View File
@@ -0,0 +1,8 @@
{
"html": "criancasenxeridas.html",
"css": "criancasenxeridas.css",
"authors": "Daniel Tschiedel",
"roll20userid": "1408312",
"preview": "criancasenxeridas.png",
"instructions": "This is a character sheet for the Criancas Enxeridas RPG game by Raphael Lima under the Mundos Colidem's seal."
}
+37
View File
@@ -0,0 +1,37 @@
{
"game-title": "Crianças<br>Enxeridas",
"name": "Nome:",
"archetype": "Arquétipo:",
"attributes": "Atributos",
"body": "Corpo",
"mind": "Mente",
"charisma": "Carisma",
"survival": "Sobrevivência",
"curiosity": "Curiosidade",
"total": "Total",
"equipments": "Equipamentos",
"equipment": "Equipamento",
"consequences": "Consequências",
"consequence": "Consequência",
"notes": "Anotações",
"conditions": "Condições",
"wounded": "Ferido",
"shaken": "Abalado",
"ashamed": "Envergonhado",
"defeated": "Derrotado",
"copyright": "Crianças Enxeridas é um jogo escrito por Raphael Lima com o selo Mundos Colidem.",
"advantagedisadvantage": "Possui vantagem ou desvantagem?",
"no": "Não",
"advantage": "Vantagem",
"disadvantage": "Desvantagem",
"result": "Resultado",
"check": "Teste",
"survivalaction": "Gasto um ponto de sobrevivência",
"survivalexplanation": "\nVocê pode escolher uma das coisas:\n- Manter uma ação;\n- Encontrar uma pista;\n- Rolar os dados outra vez;\n- Inserir um elemento narrativo;\n- Dizer que tem um \"equipamento\".",
"success": "Você Acertou!",
"fail": "Você Errou!",
"fumble": "Erro Crítico!",
"fumbleexplanation": "O narrador pode adicionar uma consequência negativa.",
"critic": "Acerto Crítico!",
"criticexplanation": "O grupo pode adicionar um elemento narrativo na cena."
}