jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Moved printed character sheets to their own page

Browse Source 
This makes sure the entire printed sheet is rendered before the browser  attempts to print it, solving all manner of errors
This commit is contained in:
Thaum Rystra
2018-03-03 11:13:16 +02:00
parent f73f2f670f
commit 75c8720b04
6 changed files with 293 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
rpg-docs/Routes/Routes.js
View File

@@ -78,6 +78,35 @@ Router.map(function() {
fastRender: true, fastRender: true,
}); });
this.route("printedCharacterSheet", {
path: "/character/:_id/:urlName/print",
waitOn: function(){
return [
subsManager.subscribe("singleCharacter", this.params._id),
];
},
data: function() {
var data = Characters.findOne(
{_id: this.params._id},
{fields: {_id: 1, name: 1, color: 1, writers: 1, readers: 1}}
);
return data;
},
onAfterAction: function() {
var char = Characters.findOne({_id: this.params._id}, {fields: {name: 1}});
var name = char && char.name;
if (name){
document.title = name + " - Printing";
}
},
//analytics
trackPageView: false,
onRun: function() {
window.ga && window.ga("send", "pageview", "/print-character");
this.next();
},
});
this.route("library", { this.route("library", {
path: "/library", path: "/library",
waitOn: function(){ waitOn: function(){

13
rpg-docs/client/views/character/characterSheet.html
View File

@@ -1,7 +1,4 @@
<template name="characterSheet"> <template name="characterSheet">
{{#if printing}}
{{> printedCharacterSheet}}
{{/if}}
<div class="fit layout vertical character-sheet"> <div class="fit layout vertical character-sheet">
<app-header fixed effects="waterfall"> <app-header fixed effects="waterfall">
<app-toolbar class="medium-tall {{colorClass}}" style="z-index: 2;"> <app-toolbar class="medium-tall {{colorClass}}" style="z-index: 2;">
@@ -23,10 +20,12 @@
<iron-icon icon="social:share" item-icon></iron-icon> <iron-icon icon="social:share" item-icon></iron-icon>
Share Share
</paper-icon-item> </paper-icon-item>
<paper-icon-item id="printButton"> <a href={{printUrl}}>
<iron-icon icon="print" item-icon></iron-icon> <paper-icon-item id="printButton">
Print <iron-icon icon="print" item-icon></iron-icon>
</paper-icon-item> Print
</paper-icon-item>
</a>
<paper-icon-item id="characterSettings"> <paper-icon-item id="characterSettings">
<iron-icon icon="settings" item-icon></iron-icon> <iron-icon icon="settings" item-icon></iron-icon>
Settings Settings

10
rpg-docs/client/views/character/characterSheet.js
View File

@@ -168,6 +168,9 @@ Template.characterSheet.helpers({
printing: function(){ printing: function(){
return Session.get("isPrinting"); return Session.get("isPrinting");
}, },
printUrl: function(){
return `/character/${this._id}/${this.name || "-"}/print`
},
selectedTab: function(){ selectedTab: function(){
return getTab(this._id); return getTab(this._id);
}, },
@@ -184,8 +187,8 @@ Template.characterSheet.helpers({
const step = Session.get("newUserExperienceStep"); const step = Session.get("newUserExperienceStep");
if (selected == tab) return false; if (selected == tab) return false;
return (tab === 1 && step === 0) || return (tab === 1 && step === 0) ||
(tab === 5 && step === 1) || (tab === 5 && step === 1) ||
(tab === 0 && step === 2); (tab === 0 && step === 2);
}, },
}); });
@@ -238,7 +241,4 @@ Template.characterSheet.events({
element: event.currentTarget.parentElement.parentElement, element: event.currentTarget.parentElement.parentElement,
}); });
}, },
"click #printButton": function(event, instance){
print();
},
}); });

82
rpg-docs/client/views/character/printedCharacterSheet/printedCharacterSheet.css
View File

@@ -1,14 +1,4 @@
.printed { .printed .page {
background: #fff;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
}
.printed > .page {
width: 100%; width: 100%;
padding: 6mm; padding: 6mm;
page-break-inside: avoid; page-break-inside: avoid;
@@ -30,6 +20,10 @@
padding: 11px 10px; padding: 11px 10px;
} }
.printed .double-border > * {
position: relative;
}
.printed .double-border:before { .printed .double-border:before {
content: ""; content: "";
position: absolute; position: absolute;
@@ -39,10 +33,9 @@
right: 0; right: 0;
border: 16px solid transparent; border: 16px solid transparent;
border-image-source: url(/png/doubleLineImageBorder.png); border-image-source: url(/png/doubleLineImageBorder.png);
border-image-slice: 110 126; border-image-slice: 110 126 fill;
border-image-repeat: stretch; border-image-repeat: stretch;
box-sizing: content-box; box-sizing: content-box;
z-index: -1;
} }
.printed .double-border.printedAbility { .printed .double-border.printedAbility {
@@ -63,6 +56,7 @@
background-position: center; background-position: center;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
print-color-adjust: exact;
-webkit-print-color-adjust: exact; -webkit-print-color-adjust: exact;
} }
@@ -88,10 +82,11 @@
height: 16px; height: 16px;
} }
.shield-background { .printed .shield-background {
background: url(/png/shieldBorder.png); background: url(/png/shieldBorder.png);
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
print-color-adjust: exact;
-webkit-print-color-adjust: exact; -webkit-print-color-adjust: exact;
padding: 4px 8px 8px; padding: 4px 8px 8px;
width: 80px; width: 80px;
@@ -100,37 +95,62 @@
top: -6px; top: -6px;
} }
.shield-background .paper-font-subhead { .printed .shield-background .paper-font-subhead {
width: 64px; width: 64px;
text-align: center; text-align: center;
line-height: 1.1; line-height: 1.1;
} }
.printed .paper-font-subhead {
font-size: 3mm !important;
line-height: 3.5mm !important;
font-weight: bold !important;
text-transform: uppercase !important;
}
.printed .paper-font-subhead.modifier {
font-size: 4mm !important;
line-height: 6mm !important;
}
.printed .paper-font-display1 {
font-size: 8mm !important;
line-height: 12mm !important;
}
@media screen { @media screen {
.printed .page {
width: 210mm;
height: 297mm;
background: white;
margin: 8px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12),
0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.printed .page-holder {
width: calc(210mm + 16px);
}
.printed { .printed {
display: none; overflow: auto;
padding-left:
} }
} }
@media print { @media print {
.character-sheet {
display: none;
}
app-drawer { app-drawer {
display: none; display: none;
} }
.paper-font-subhead { app-header {
font-size: 3mm !important; display: none;
line-height: 3.5mm !important;
font-weight: bold !important;
text-transform: uppercase !important;
} }
.paper-font-subhead.modifier { .printed {
font-size: 4mm !important; position: fixed;
line-height: 6mm !important; top: 0;
} bottom: 0;
.paper-font-display1 { left: 0;
font-size: 8mm !important; right: 0;
line-height: 12mm !important; z-index: 99;
background: #fff;
} }
} }

369
rpg-docs/client/views/character/printedCharacterSheet/printedCharacterSheet.html
View File

@@ -1,207 +1,223 @@
<template name="printedCharacterSheet"> <template name="printedCharacterSheet">
<div class="printed"> <div class="fit printed-character-sheet layout vertical">
<div class="page"> <app-header fixed effects="waterfall">
<div class="layout vertical"> <app-toolbar class="medium {{colorClass}} layout horizontal center" style="z-index: 2;">
<div class="layout horizontal" style="margin-bottom: 6mm"> <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div class="characterName paper-font-title" style="margin-right: 4mm"> <paper-icon-button icon="arrow-back" class="backButton"></paper-icon-button>
{{name}} <div class="flex character-name">
</div> {{name}}
<div> </div>
<div> <div>
{{#each classes}} <paper-icon-button icon="print" class="printButton"></paper-icon-button>
<span style="margin-right: 16px;"> {{#simpleTooltip}} Print {{/simpleTooltip}}
{{name}}&nbsp;{{level}} </div>
</span> </app-toolbar>
{{/each}} </app-header>
<div class="printed flex">
<div class="page-holder">
<div class="page">
<div class="layout vertical">
<div class="layout horizontal" style="margin-bottom: 6mm">
<div class="characterName paper-font-title" style="margin-right: 4mm">
{{name}}
</div> </div>
<div> <div>
{{character.alignment}} {{character.gender}} {{character.race}} <div>
</div> {{#each classes}}
</div> <span style="margin-right: 16px;">
</div> {{name}}&nbsp;{{level}}
<div class="layout horizontal"> </span>
<div class="col1 flex layout vertical"> {{/each}}
<div class="initiative" style="margin-bottom: 2mm;">
{{> printedLongStat stat="" name="Inspiration" prefix=""}}
</div>
<div class="proficiencyBonus" style="margin-bottom: 4mm;">
{{> printedLongStat stat="proficiencyBonus" name="Proficiency Bonus" prefix="+"}}
</div>
<div class="layout horizontal">
<div class="abilities layout vertical justified" style="margin-right: 4mm;">
{{> printedAbility ability="strength" title="Strength"}}
{{> printedAbility ability="dexterity" title="Dexterity"}}
{{> printedAbility ability="constitution" title="Constitution"}}
{{> printedAbility ability="intelligence" title="Intelligence"}}
{{> printedAbility ability="wisdom" title="Wisdom"}}
{{> printedAbility ability="charisma" title="Charisma"}}
</div>
<div class="flex layout vertical">
<div class="saves double-border" style="margin-bottom: 2mm">
<div>
{{> printedSkillRow name="Strength" skill="strengthSave"}}
{{> printedSkillRow name="Dexterity" skill="dexteritySave"}}
{{> printedSkillRow name="Constitution" skill="constitutionSave"}}
{{> printedSkillRow name="Intelligence" skill="intelligenceSave"}}
{{> printedSkillRow name="Wisdom" skill="wisdomSave"}}
{{> printedSkillRow name="Charisma" skill="charismaSave"}}
</div>
<div class="paper-font-subhead layout vertical center">
Saving Throws
</div>
</div>
<div class="skills double-border">
<div>
{{> printedSkillRow name="Acrobatics" skill="acrobatics"}}
{{> printedSkillRow name="Animal Handling" skill="animalHandling"}}
{{> printedSkillRow name="Arcana" skill="arcana"}}
{{> printedSkillRow name="Athletics" skill="athletics"}}
{{> printedSkillRow name="Deception" skill="deception"}}
{{> printedSkillRow name="History" skill="history"}}
{{> printedSkillRow name="Insight" skill="insight"}}
{{> printedSkillRow name="Intimidation" skill="intimidation"}}
{{> printedSkillRow name="Investigation" skill="investigation"}}
{{> printedSkillRow name="Medicine" skill="medicine"}}
{{> printedSkillRow name="Nature" skill="nature"}}
{{> printedSkillRow name="Perception" skill="perception" showPassive="true"}}
{{> printedSkillRow name="Performance" skill="performance"}}
{{> printedSkillRow name="Persuasion" skill="persuasion"}}
{{> printedSkillRow name="Religion" skill="religion"}}
{{> printedSkillRow name="Sleight of Hand" skill="sleightOfHand"}}
{{> printedSkillRow name="Stealth" skill="stealth"}}
{{> printedSkillRow name="Survival" skill="survival"}}
</div>
<div class="paper-font-subhead layout vertical center">
Skills
</div>
</div>
</div>
</div>
<div class="proficiencies double-border" style="margin-top: 4mm">
<div class="paper-font-subhead layout vertical center">
Proficiencies
</div> </div>
<div> <div>
{{#if weaponProfs.length}} {{character.alignment}} {{character.gender}} {{character.race}}
<div class="paper-font-subhead">Weapons</div>
{{/if}}
{{#each weaponProfs}}
{{> printedProficiency}}
{{/each}}
{{#if armorProfs.length}}
<div class="paper-font-subhead">Armor</div>
{{/if}}
{{#each armorProfs}}
{{> printedProficiency}}
{{/each}}
{{#if toolProfs.length}}
<div class="paper-font-subhead">Tools</div>
{{/if}}
{{#each toolProfs}}
{{> printedProficiency}}
{{/each}}
</div> </div>
</div> </div>
</div> </div>
<div class="col2 flex" style="margin-left: 4mm; margin-right: 4mm;"> <div class="layout horizontal">
<div class="layout vertical"> <div class="col1 flex layout vertical">
<div class="layout horizontal justified" style="margin-bottom: 2mm"> <div class="initiative" style="margin-bottom: 2mm;">
<div class="armor"> {{> printedLongStat stat="" name="Inspiration" prefix=""}}
{{> printedSquareStat stat="armor" name="Armor Class" class="shield-background"}}
</div>
<div class="inititive">
{{> printedSquareStat stat="initiative" name="Initiative" isSkill="true" class="double-border"}}
</div>
<div class="speed">
{{> printedSquareStat stat="speed" name="Speed" class="double-border"}}
</div>
</div> </div>
<div class="hitpoints layout vertical double-border" style="margin-bottom: 2mm;"> <div class="proficiencyBonus" style="margin-bottom: 4mm;">
<div> {{> printedLongStat stat="proficiencyBonus" name="Proficiency Bonus" prefix="+"}}
Hit point maximum:
<span class="paper-font-subhead">
{{characterCalculate "attributeBase" _id "hitPoints"}}
</span>
</div>
<div class="flex" style="width: 3cm; height: 2cm;">
<!-- Space for writing -->
</div>
<div class="layout vertical center paper-font-subhead">
Hit Points
</div>
</div>
<div class="tempHitpoints layout vertical double-border" style="margin-bottom: 2mm;">
<div style="width: 3cm; height: 2cm;">
<!-- Space for writing -->
</div>
<div class="layout vertical center paper-font-subhead">
Temporary Hit Points
</div>
</div> </div>
<div class="layout horizontal"> <div class="layout horizontal">
<div class="hitDice double-border layout vertical" style="margin-right: 2mm;"> <div class="abilities layout vertical justified" style="margin-right: 4mm;">
{{> printedAbility ability="strength" title="Strength"}}
{{> printedAbility ability="dexterity" title="Dexterity"}}
{{> printedAbility ability="constitution" title="Constitution"}}
{{> printedAbility ability="intelligence" title="Intelligence"}}
{{> printedAbility ability="wisdom" title="Wisdom"}}
{{> printedAbility ability="charisma" title="Charisma"}}
</div>
<div class="flex layout vertical">
<div class="saves double-border" style="margin-bottom: 2mm">
<div>
{{> printedSkillRow name="Strength" skill="strengthSave"}}
{{> printedSkillRow name="Dexterity" skill="dexteritySave"}}
{{> printedSkillRow name="Constitution" skill="constitutionSave"}}
{{> printedSkillRow name="Intelligence" skill="intelligenceSave"}}
{{> printedSkillRow name="Wisdom" skill="wisdomSave"}}
{{> printedSkillRow name="Charisma" skill="charismaSave"}}
</div>
<div class="paper-font-subhead layout vertical center">
Saving Throws
</div>
</div>
<div class="skills double-border">
<div>
{{> printedSkillRow name="Acrobatics" skill="acrobatics"}}
{{> printedSkillRow name="Animal Handling" skill="animalHandling"}}
{{> printedSkillRow name="Arcana" skill="arcana"}}
{{> printedSkillRow name="Athletics" skill="athletics"}}
{{> printedSkillRow name="Deception" skill="deception"}}
{{> printedSkillRow name="History" skill="history"}}
{{> printedSkillRow name="Insight" skill="insight"}}
{{> printedSkillRow name="Intimidation" skill="intimidation"}}
{{> printedSkillRow name="Investigation" skill="investigation"}}
{{> printedSkillRow name="Medicine" skill="medicine"}}
{{> printedSkillRow name="Nature" skill="nature"}}
{{> printedSkillRow name="Perception" skill="perception" showPassive="true"}}
{{> printedSkillRow name="Performance" skill="performance"}}
{{> printedSkillRow name="Persuasion" skill="persuasion"}}
{{> printedSkillRow name="Religion" skill="religion"}}
{{> printedSkillRow name="Sleight of Hand" skill="sleightOfHand"}}
{{> printedSkillRow name="Stealth" skill="stealth"}}
{{> printedSkillRow name="Survival" skill="survival"}}
</div>
<div class="paper-font-subhead layout vertical center">
Skills
</div>
</div>
</div>
</div>
<div class="proficiencies double-border" style="margin-top: 4mm">
<div class="paper-font-subhead layout vertical center">
Proficiencies
</div>
<div>
{{#if weaponProfs.length}}
<div class="paper-font-subhead">Weapons</div>
{{/if}}
{{#each weaponProfs}}
{{> printedProficiency}}
{{/each}}
{{#if armorProfs.length}}
<div class="paper-font-subhead">Armor</div>
{{/if}}
{{#each armorProfs}}
{{> printedProficiency}}
{{/each}}
{{#if toolProfs.length}}
<div class="paper-font-subhead">Tools</div>
{{/if}}
{{#each toolProfs}}
{{> printedProficiency}}
{{/each}}
</div>
</div>
</div>
<div class="col2 flex" style="margin-left: 4mm; margin-right: 4mm;">
<div class="layout vertical">
<div class="layout horizontal justified" style="margin-bottom: 2mm">
<div class="armor">
{{> printedSquareStat stat="armor" name="Armor Class" class="shield-background"}}
</div>
<div class="inititive">
{{> printedSquareStat stat="initiative" name="Initiative" isSkill="true" class="double-border"}}
</div>
<div class="speed">
{{> printedSquareStat stat="speed" name="Speed" class="double-border"}}
</div>
</div>
<div class="hitpoints layout vertical double-border" style="margin-bottom: 2mm;">
<div> <div>
Total: Hit point maximum:
<span class="paper-font-subhead"> <span class="paper-font-subhead">
Total goes here {{characterCalculate "attributeBase" _id "hitPoints"}}
</span> </span>
</div> </div>
<div class="flex"> <div class="flex" style="width: 3cm; height: 2cm;">
<!-- Space for writing --> <!-- Space for writing -->
</div> </div>
<div class="paper-font-subhead layout vertical center"> <div class="layout vertical center paper-font-subhead">
Hit Dice Hit Points
</div> </div>
</div> </div>
<div class="deathSaves layout vertical double-border"> <div class="tempHitpoints layout vertical double-border" style="margin-bottom: 2mm;">
<div class="layout horizontal center"> <div style="width: 3cm; height: 2cm;">
<div class="flex layout vertical end" style="margin-right: 1mm;"> <!-- Space for writing -->
Successes
</div>
<iron-icon icon="radio-button-unchecked"></iron-icon>
<iron-icon icon="radio-button-unchecked"></iron-icon>
<iron-icon icon="radio-button-unchecked"></iron-icon>
</div> </div>
<div class="layout horizontal center"> <div class="layout vertical center paper-font-subhead">
<div class="flex layout vertical end" style="margin-right: 1mm;"> Temporary Hit Points
Failures
</div>
<iron-icon icon="radio-button-unchecked"></iron-icon>
<iron-icon icon="radio-button-unchecked"></iron-icon>
<iron-icon icon="radio-button-unchecked"></iron-icon>
</div> </div>
<div class="paper-font-subhead layout vertical center" style="margin-top: 4mm;"> </div>
Death Saves <div class="layout horizontal">
<div class="hitDice double-border layout vertical" style="margin-right: 2mm;">
<div>
Total:
<span class="paper-font-subhead">
Total goes here
</span>
</div>
<div class="flex">
<!-- Space for writing -->
</div>
<div class="paper-font-subhead layout vertical center">
Hit Dice
</div>
</div>
<div class="deathSaves layout vertical double-border">
<div class="layout horizontal center">
<div class="flex layout vertical end" style="margin-right: 1mm;">
Successes
</div>
<iron-icon icon="radio-button-unchecked"></iron-icon>
<iron-icon icon="radio-button-unchecked"></iron-icon>
<iron-icon icon="radio-button-unchecked"></iron-icon>
</div>
<div class="layout horizontal center">
<div class="flex layout vertical end" style="margin-right: 1mm;">
Failures
</div>
<iron-icon icon="radio-button-unchecked"></iron-icon>
<iron-icon icon="radio-button-unchecked"></iron-icon>
<iron-icon icon="radio-button-unchecked"></iron-icon>
</div>
<div class="paper-font-subhead layout vertical center" style="margin-top: 4mm;">
Death Saves
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="attacks"></div>
<div class="attacks"></div>
</div>
<div class="col3 flex">
<div class="traits double-border">
{{#markdown}}{{evaluateShortString character._id character.personality}}{{/markdown}}
<div class="paper-font-subhead layout vertical center">
Personality traits
</div>
</div> </div>
<div class="ideals double-border" style="margin-top: 2mm"> <div class="col3 flex">
{{#markdown}}{{evaluateShortString character._id character.ideals}}{{/markdown}} <div class="traits double-border">
<div class="paper-font-subhead layout vertical center"> {{#markdown}}{{evaluateShortString character._id character.personality}}{{/markdown}}
Ideals <div class="paper-font-subhead layout vertical center">
Personality traits
</div>
</div> </div>
</div> <div class="ideals double-border" style="margin-top: 2mm">
<div class="bonds double-border" style="margin-top: 2mm"> {{#markdown}}{{evaluateShortString character._id character.ideals}}{{/markdown}}
{{#markdown}}{{evaluateShortString character._id character.bonds}}{{/markdown}} <div class="paper-font-subhead layout vertical center">
<div class="paper-font-subhead layout vertical center"> Ideals
Bonds </div>
</div> </div>
</div> <div class="bonds double-border" style="margin-top: 2mm">
<div class="flaws double-border" style="margin-top: 2mm"> {{#markdown}}{{evaluateShortString character._id character.bonds}}{{/markdown}}
{{#markdown}}{{evaluateShortString character._id character.flaws}}{{/markdown}} <div class="paper-font-subhead layout vertical center">
<div class="paper-font-subhead layout vertical center"> Bonds
Flaws </div>
</div>
<div class="flaws double-border" style="margin-top: 2mm">
{{#markdown}}{{evaluateShortString character._id character.flaws}}{{/markdown}}
<div class="paper-font-subhead layout vertical center">
Flaws
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -209,4 +225,5 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>

9
rpg-docs/client/views/character/printedCharacterSheet/printedCharacterSheet.js
View File

@@ -27,3 +27,12 @@ Template.printedCharacterSheet.helpers({
return removeDuplicateProficiencies(profs); return removeDuplicateProficiencies(profs);
}, },
}); });
Template.printedCharacterSheet.events({
"click .printButton": function(event, instance){
print();
},
"click .backButton": function(event, instance){
history && history.back();
},
});