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

Updated hitpoint / temporary hitpoint box to Polymer 1

Browse Source
This commit is contained in:
Stefan Zermatten
2017-01-18 11:19:03 +02:00
parent 420de9b005
commit 817020bea8
10 changed files with 818 additions and 616 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.jscsrc
View File

@@ -53,4 +53,4 @@
"disallowMultipleLineBreaks": true,
"disallowNewlineBeforeBlockStatements": true
}
}

32
rpg-docs/client/views/character/stats/addTHPDialog/addTHPDialog.html
View File

@@ -1,14 +1,28 @@
<!-- data just needs charId -->
<template name="addTHPDialog">
<div style="width: 200px; height: 150px;">
<paper-input id="nameInput" label="Label"></paper-input>
<paper-input-decorator label="Quantity" floatinglabel>
<input autoFocus id="quantityInput" type="number" value="10">
</paper-input-decorator>
<div layout horizontal justify-center>
Delete when zero <paper-checkbox id="deleteWhenZeroCheckbox" checked style="margin-left: 8px;"></paper-checkbox>
<div class="fit layout vertical">
<app-header-layout has-scrolling-region class="new-character-dialog flex">
<app-header fixed effects="waterfall">
<app-toolbar>
<div main-title>Add Hitpoint Slider</div>
</app-toolbar>
</app-header>
<div class="form">
<paper-input id="quantityInput" label="Hitpoint maximum" autoFocus type="number" value="" min="0" allowed-pattern="[0-9]">
</paper-input>
<paper-input id="nameInput" label="Label"></paper-input>
<paper-checkbox id="deleteWhenZeroCheckbox">
Delete when zero
</paper-checkbox>
</div>
</app-header-layout>
<div class="buttons layout horizontal end-justified">
<paper-button class="cancelButton">
Cancel
</paper-button>
<paper-button class="addButton" disabled={{invalid}}>
Add
</paper-button>
</div>
</div>
<paper-button id="cancelButton" affirmative> Cancel </paper-button>
<paper-button id="addButton" affirmative> Add </paper-button>
</template>

12
rpg-docs/client/views/character/stats/addTHPDialog/addTHPDialog.js
View File

@@ -1,5 +1,10 @@
Template.addTHPDialog.onRendered(function(){
this.find("#quantityInput").focus();
});
Template.addTHPDialog.events({
"tap #addButton": function(event, instance){
"tap .addButton": function(event, instance){
popDialogStack();
var max = +instance.find("#quantityInput").value;
if (!max || max < 0) max = 0;
TemporaryHitPoints.insert({
@@ -8,5 +13,8 @@ Template.addTHPDialog.events({
maximum: max,
deleteOnZero: !!instance.find("#deleteWhenZeroCheckbox").checked,
});
}
},
"tap .cancelButton": function(event, instance){
popDialogStack();
},
});

24
rpg-docs/client/views/character/stats/healthCard/healthCard.css
View File

@@ -3,24 +3,20 @@
margin-right: 8px;
}
/*Slider knob color*/
#hitPointSlider::shadow #sliderKnobInner {
background-color: #0f9d58;
.healthCard #stableButton {
color: #b71c1c;
transition: color 0.4s ease;
width: 100%
}
/*Slider pin*/
#hitPointSlider::shadow #sliderKnobInner::before {
background-color: #0f9d58;
height: 32px;
width: 32px;
.healthCard #stableButton:before {
content: "Unstable";
}
/*Slider pin text*/
#hitPointSlider::shadow #sliderKnob > #sliderKnobInner::after {
font-size: 16px;
.healthCard #stableButton.stable {
color: #1b5e20;
}
/*Slider bar*/
#hitPointSlider::shadow #sliderBar::shadow #activeProgress {
background-color: #0f9d58;
.healthCard #stableButton.stable:before{
content: "Stable";
}

27
rpg-docs/client/views/character/stats/healthCard/healthCard.html
View File

@@ -22,21 +22,21 @@
{{#each tempHitPoints}}
<div>
{{name}}
<div class="layout horizontal">
<paper-diff-slider class="tempHitPointSlider"
</div>
<div class="layout horizontal center">
<div style="height: 40px; width: 40px;">
{{#unless left}}
<paper-icon-button class="deleteTHP" icon="delete"></paper-icon-button>
{{/unless}}
</div>
<paper-diff-slider class="tempHitPointSlider flex"
value={{left}}
max={{maximum}}
editable pin
role="slider"
flex
></paper-diff-slider>
{{#unless left}}
<paper-icon-button class="deleteTHP" icon="delete"></paper-icon-button>
{{/unless}}
</div>
</div>
{{/each}}
<div class="caption">
<div class="paper-font-caption">
{{#if multipliers.immunities.length}}
<div>
Immune: {{#each multipliers.immunities}} {{name}} {{/each}}
@@ -68,15 +68,12 @@
<paper-icon-button class="slotBubble failBubble" icon={{failIcon 3}} disabled={{failDisabled 3}}></paper-icon-button>
</div>
</div>
<div class="layout horizontal center center-justified" style="min-width: 94px">
<div class="layout horizontal center center-justified" style="width: 94px">
{{#if dead}}
DEAD
{{else}}
{{#if stable}}
<paper-button id="stableButton">Stable</paper-button>
{{else}}
<paper-button id="unstableButton">Unstable</paper-button>
{{/if}}
<paper-button id="stableButton" class="{{#if stable}}stable{{/if}}">
</paper-button>
{{/if}}
</div>
<div layout vertical center>

43
rpg-docs/client/views/character/stats/healthCard/healthCard.js
View File

@@ -10,12 +10,12 @@ Template.healthCard.helpers({
return char && char.deathSave;
},
failIcon: function(num){
if (num <= this.fail) return "radio-button-on";
else return "radio-button-off";
if (num <= this.fail) return "radio-button-checked";
else return "radio-button-unchecked";
},
passIcon: function(num){
if (num <= this.pass) return "radio-button-on";
else return "radio-button-off";
if (num <= this.pass) return "radio-button-checked";
else return "radio-button-unchecked";
},
failDisabled: function(num){
return !(num === this.fail || num - 1 === this.fail);
@@ -27,6 +27,7 @@ Template.healthCard.helpers({
return this.fail >= 3;
},
multipliers: function(){
// jscs:disable maximumLineLength
var multipliers = [
{name: "Acid", value: Characters.calculate.attributeValue(this._id, "acidMultiplier")},
{name: "Bludgeoning", value: Characters.calculate.attributeValue(this._id, "bludgeoningMultiplier")},
@@ -42,6 +43,7 @@ Template.healthCard.helpers({
{name: "Slashing", value: Characters.calculate.attributeValue(this._id, "slashingMultiplier")},
{name: "Thunder", value: Characters.calculate.attributeValue(this._id, "thunderMultiplier")},
];
// jscs:enable maximumLineLength
multipliers = _.groupBy(multipliers, "value");
return {
"immunities": multipliers["0"] || [],
@@ -54,7 +56,7 @@ Template.healthCard.helpers({
Template.healthCard.events({
"change #hitPointSlider": function(event){
var value = event.currentTarget.value;
var base = Characters.calculate.attributeBase(this._id, "hitPoints")
var base = Characters.calculate.attributeBase(this._id, "hitPoints");
var adjustment = value - base;
Characters.update(this._id, {$set: {"hitPoints.adjustment": adjustment}});
//reset the death saves if we are gaining HP
@@ -73,39 +75,42 @@ Template.healthCard.events({
var used = this.maximum - value;
TemporaryHitPoints.update(this._id, {$set: {"used": used}});
},
"tap .deleteTHP": function(event){
"click .deleteTHP": function(event){
TemporaryHitPoints.remove(this._id);
},
"tap #addTempHP": function(event){
GlobalUI.showDialog({
"click #addTempHP": function(event){
pushDialogStack({
template: "addTHPDialog",
data: {charId: this._id},
element: event.currentTarget.parentElement,
});
},
"tap .failBubble": function(event){
"click .failBubble": function(event){
if (event.currentTarget.disabled) return;
var char = Template.parentData();
if (event.currentTarget.icon === "radio-button-off"){
if (event.currentTarget.icon === "radio-button-unchecked"){
Characters.update(char._id, {$set: {"deathSave.fail": this.fail + 1}});
} else {
Characters.update(char._id, {$set: {"deathSave.fail": this.fail - 1}});
}
},
"tap .passBubble": function(event){
"click .passBubble": function(event){
if (event.currentTarget.disabled) return;
var char = Template.parentData();
if (event.currentTarget.icon === "radio-button-off"){
if (event.currentTarget.icon === "radio-button-unchecked"){
Characters.update(char._id, {$set: {"deathSave.pass": this.pass + 1}});
} else {
Characters.update(char._id, {$set: {"deathSave.pass": this.pass - 1}});
}
},
"tap #stableButton": function(event){
var char = Template.parentData();
Characters.update(char._id, {$set: {"deathSave.stable": false}});
},
"tap #unstableButton": function(event){
var char = Template.parentData();
Characters.update(char._id, {$set: {"deathSave.stable": true}});
"click #stableButton": function(event){
var char = Characters.findOne(Template.parentData()._id, {
fields: {deathSave: 1}
});
Characters.update(char._id, {
$set: {
"deathSave.stable": !char.deathSave.stable
}
});
},
});

2
rpg-docs/client/views/layout/polymerImports.html
View File

@@ -28,6 +28,7 @@
<link rel="import" href="/components/neon-animation/neon-animations.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="/components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="/components/paper-dialog/paper-dialog.html">
<link rel="import" href="/components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="/components/paper-fab/paper-fab.html">
@@ -43,5 +44,6 @@
<link rel="import" href="/components/paper-tabs/paper-tabs.html">
<link rel="import" href="/components/paper-toast/paper-toast.html">
<link rel="import" href="/custom_components/paper-diff-slider/paper-diff-slider.html">
<link rel="import" href="/custom_components/app-theme.html">
</head>

2
rpg-docs/client/views/paperTemplates/dialogStack/dialogStack.css
View File

@@ -29,6 +29,8 @@
position: relative;
height: 80%;
width: 80%;
max-width: 800px;
max-height: 600px;
}
.dialog-stack .dialog {

239
rpg-docs/public/custom_components/paper-diff-slider/paper-diff-slider.css
View File

@@ -1,239 +0,0 @@
/*
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/
:host {
display: inline-block;
width: 200px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
:host(:focus) {
outline: none;
}
#sliderContainer {
position: relative;
width: calc(100% - 32px);
height: 32px;
}
#sliderContainer.editable {
float: left;
width: calc(100% - 72px);
margin: 12px 0;
}
.bar-container {
position: absolute;
top: 0;
left: 16px;
height: 100%;
width: 100%;
overflow: hidden;
}
.ring > .bar-container {
left: 20px;
width: calc(100% - 4px);
transition: left 0.18s ease, width 0.18s ease;
}
.ring.expand:not(.pin) > .bar-container {
left: 30px;
width: calc(100% - 14px);
}
.ring.expand.dragging > .bar-container {
transition: none;
}
#sliderBar {
position: absolute;
top: 15px;
left: 0;
height: 2px;
width: 100%;
padding: 8px 0;
margin: -8px 0;
}
.ring #sliderBar {
left: -4px;
width: calc(100% + 4px);
}
.ring.expand:not(.pin) #sliderBar {
left: -14px;
width: calc(100% + 14px);
}
.slider-markers {
position: absolute;
top: 15px;
left: 15px;
height: 2px;
width: calc(100% + 2px);
box-sizing: border-box;
pointer-events: none;
}
.slider-markers::after, .slider-marker::after {
content: "";
display: block;
width: 2px;
height: 2px;
border-radius: 50%;
background-color: black;
}
#sliderBar::shadow #activeProgress {
background-color: #3f51b5;
}
.transiting #sliderBar::shadow #activeProgress {
transition: -webkit-transform 0.08s ease;
transition: transform 0.08s ease;
}
#sliderKnob {
position: absolute;
left: 0;
top: 0;
width: 32px;
height: 32px;
}
.transiting > #sliderKnob {
transition: left 0.08s ease;
}
#sliderKnob:focus {
outline: none;
}
#sliderKnob.dragging {
transition: none;
}
.snaps > #sliderKnob.dragging {
transition: -webkit-transform 0.08s ease;
transition: transform 0.08s ease;
}
#sliderKnobInner {
width: 12px;
height: 12px;
box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 50%;
background-color: #3f51b5;
/* FIXME(ffu): can't use the following. https://github.com/Polymer/platform/issues/53 */
/* transition-property: height, width, background-color, border;
transition-duration: 0.1s;
transition-timing-function: ease; */
transition: height 0.18s ease, width 0.18s ease;
}
.expand:not(.pin) > #sliderKnob > #sliderKnobInner {
width: 100%;
height: 100%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.ring > #sliderKnob > #sliderKnobInner {
background-color: transparent;
border: 2px solid #c8c8c8;
}
#sliderKnobInner::before {
background-color: #3f51b5;
}
.pin > #sliderKnob > #sliderKnobInner::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 26px;
height: 26px;
margin-left: 3px;
border-radius: 50% 50% 50% 0;
-webkit-transform: rotate(-45deg) scale(0) translate(0);
transform: rotate(-45deg) scale(0) translate(0);
}
#sliderKnobInner::before, #sliderKnobInner::after {
transition: -webkit-transform .2s ease, background-color .18s ease;
transition: transform .2s ease, background-color .18s ease;
}
.pin.ring > #sliderKnob > #sliderKnobInner::before {
background-color: #c8c8c8;
}
.pin.expand > #sliderKnob > #sliderKnobInner::before {
-webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px);
transform: rotate(-45deg) scale(1) translate(17px, -17px);
}
.pin > #sliderKnob > #sliderKnobInner::after {
content: attr(value);
position: absolute;
top: 0;
left: 0;
width: 32px;
height: 26px;
text-align: center;
color: #fff;
font-size: 10px;
-webkit-transform: scale(0) translate(0);
transform: scale(0) translate(0);
}
.pin.expand > #sliderKnob > #sliderKnobInner::after {
-webkit-transform: scale(1) translate(0, -17px);
transform: scale(1) translate(0, -17px);
}
/* editable: paper-input */
.slider-input {
width: 40px;
float: right;
overflow: hidden;
}
.slider-input::shadow input {
/* FIXME(ffu): should one be able set text-align directly on paper-input? */
text-align: center;
}
/* disabled state */
#sliderContainer.disabled {
pointer-events: none;
}
.disabled > #sliderKnob > #sliderKnobInner {
width: 8px;
height: 8px;
background-color: #c8c8c8;
}
.disabled.ring > #sliderKnob > #sliderKnobInner {
background-color: transparent;
}
#sliderContainer.disabled #sliderBar::shadow #activeProgress {
background-color: #c8c8c8;
}

1051
rpg-docs/public/custom_components/paper-diff-slider/paper-diff-slider.html
View File

File diff suppressed because it is too large Load Diff