feat: add support for cheers (#1)

Author: The-Clockmaker

.idea/inspectionProfiles/Project_Default.xml

@@ -2,7 +2,7 @@ sudo: false
 language: node_js
 node_js:
 - v4
-- v5
+- v6
 notifications:
   slack:
     secure: ezTt+YKE1kxJPRFthZ7UTZuCyBI2Jw1CmiTeUKaKD3mDSc2jhUh70hjrG0kxykYKuomkYlS/fPxWEHSK5X28XtA18tEZqjOnDG+YNCizFIat6Uq8dwUPhTJ/WAnq7CaSpH29uq90xNNWk3MAbqJMpHdYkWfFMHGkIuGDblcSjcI=

.travis.yml

@@ -71,6 +71,25 @@ module.exports = function (nodecg) {
 }
 ```
 
+### Cheer (bits)
+```js
+{
+    "name": "langeh",
+    "timestamp": 1456809533513,
+    "id": "8f2ea9cb-2e8f-45dd-8645-0b724b2774f6",
+    "read": false,
+    "type": "tip",
+    "amount": 5,
+    "currency": "$",
+    "formattedAmount": "$5",
+    "comment": "Hi streamer!",
+    "email": "email@alexvan.camp",
+    
+    // Will be "daily" or "monthly" if this tip is the top tip of the day or month.
+    "top": null
+}
+```
+
 ### Tip
 ```js
 {

README.md

@@ -6,6 +6,7 @@
     "paper-input": "PolymerElements/paper-input#^1.1.11",
     "paper-tabs": "PolymerElements/paper-tabs#^1.6.2",
     "boe-list": "SupportClass/boe-list#^0.2.0",
-    "iron-icons": "PolymerElements/iron-icons#^1.1.3"
+    "iron-icons": "PolymerElements/iron-icons#^1.1.3",
+    "paper-dialog": "PolymerElements/paper-dialog#^1.1.0"
   }
 }

bower.json

@@ -12,14 +12,6 @@
 				@apply(--layout-center);
 			}
 
-			:host[type="tip"] #info {
-				background-color: #d9ead3;
-			}
-
-			:host[type="subscription"] #info {
-				background-color: #C9CDE0;
-			}
-
 			#info {
 				@apply(--layout-flex);
 				@apply(--shadow-elevation-2dp);
@@ -28,6 +20,11 @@
 				min-width: 0; /* this is required, otherwise #info overflows */
 			}
 
+			#bitsIcon {
+				width: 14px;
+				height: 14px;
+			}
+
 			#label {
 				@apply(--paper-font-menu);
 				padding-left: 5px;
@@ -87,7 +84,10 @@
 
 		<div id="info">
 			<header>
-				<span id="label">[[_computeLabel(type)]]</span>
+				<span id="label">
+					<iron-icon id="bitsIcon" src="../../img/bits.svg"></iron-icon>
+					[[_computeLabel(type)]]
+				</span>
 
 				<template is="dom-if" if="[[profileUrl]]">
 					<a id="name" href="[[profileUrl]]" target="_blank">[[name]]</a>

dashboard/elements/list-note/list-note.html

@@ -1,6 +1,15 @@
 (function () {
 	'use strict';
 
+	const CHEER_COLORS = [
+		'#d3d3d3', // 1 Bit
+		'#f1b7ff', // 100 Bits
+		'#75f7e0', // 1,000 Bits
+		'#b4d1ff', // 5,000 Bits
+		'#fab4b4', // 10,000 Bits
+		'#fed75f'  // 100,000 Bits
+	];
+
 	Polymer({
 		is: 'list-note',
 
@@ -22,7 +31,7 @@
 			this.flagged = typeof note.flagged === 'undefined' ? false : note.flagged;
 			this.timestamp = note.timestamp;
 
-			if (note.type === 'tip') {
+			if (note.type === 'tip' || note.type === 'cheer') {
 				this.amount = note.amount;
 				this.formattedAmount = note.formattedAmount;
 				this.comment = note.comment;
@@ -35,12 +44,27 @@
 				this.comment = note.flagReason;
 			}
 
+			this.$.bitsIcon.hidden = note.type !== 'cheer';
+
+			this._updateBackgroundColor(note);
+
 			// Set this last so the computed bindings have everything they need.
 			this.type = note.type;
 		},
 
+		_updateBackgroundColor(note) {
+			if (note.type === 'subscription') {
+				this.$.info.style.backgroundColor = '#C9CDE0';
+			} else if (note.type === 'tip') {
+				this.$.info.style.backgroundColor = '#d9ead3';
+			} else if (note.type === 'cheer') {
+				const cheerTier = calcCheerTier(note.amount);
+				this.$.info.style.backgroundColor = CHEER_COLORS[cheerTier];
+			}
+		},
+
 		_computeLabel(type) {
-			if (type === 'tip') {
+			if (type === 'tip' || type === 'cheer') {
 				return this.formattedAmount;
 			}
 
@@ -63,4 +87,28 @@
 			nodecg.sendMessage('markRead', this.id);
 		}
 	});
+
+	function calcCheerTier(numBits) {
+		if (numBits >= 100000) {
+			return 5;
+		}
+
+		if (numBits >= 10000) {
+			return 4;
+		}
+
+		if (numBits >= 5000) {
+			return 3;
+		}
+
+		if (numBits >= 1000) {
+			return 2;
+		}
+
+		if (numBits >= 100) {
+			return 1;
+		}
+
+		return 0;
+	}
 })();

dashboard/elements/list-note/list-note.js

@@ -1,7 +1,8 @@
 <link rel="import" href="../../components/boe-list/boe-list.html">
-<link rel="import" href="../../components/iron-icons/iron-icons.html">
 <link rel="import" href="../../components/iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../../components/iron-icons/iron-icons.html">
 <link rel="import" href="../../components/paper-button/paper-button.html">
+<link rel="import" href="../../components/paper-dialog/paper-dialog.html">
 <link rel="import" href="../../components/paper-input/paper-input.html">
 <link rel="import" href="../../components/paper-tabs/paper-tab.html">
 <link rel="import" href="../../components/paper-tabs/paper-tabs.html">
@@ -35,6 +36,8 @@
 
 			#clear {
 				@apply(--layout-flex);
+				@apply(--layout-horizontal);
+				@apply(--layout-center-center);
 				margin-left: 8px;
 			}
 
@@ -70,30 +73,30 @@
 
 		<div id="leftColumn">
 			<h5>MANUAL ENTRY</h5>
-			<paper-tabs id="tabs" selected="{{selected}}">
-				<paper-tab>SUBSCRIPTION</paper-tab>
-				<paper-tab>TIP</paper-tab>
+			<paper-tabs id="tabs" selected="{{selectedType}}" attr-for-selected="name">
+				<paper-tab name="subscription">SUBSCRIPTION</paper-tab>
+				<paper-tab name="tip">TIP</paper-tab>
+				<paper-tab name="cheer">CHEER</paper-tab>
 			</paper-tabs>
 
 			<div style="display: flex;">
 				<paper-input id="name" label="Name" type="text" style="margin-right: 8px;"></paper-input>
-				<paper-input id="months" label="Months" type="number" hidden="[[selected]]" style="flex-shrink: 4;"
+				<paper-input id="months" label="Months" type="number" hidden="[[!isSubscription(selectedType)]]" style="flex-shrink: 4;"
 							 min="0"></paper-input>
-				<paper-input id="amount" label="Amount" type="number" hidden="[[!selected]]" style="flex-shrink: 4;"
+				<paper-input id="amount" label="Amount" type="number" hidden="[[isSubscription(selectedType)]]" style="flex-shrink: 4;"
 							 min="0"></paper-input>
 			</div>
 
 			<paper-button id="send" class="nodecg-info" raised on-tap="send">
-				<span hidden="[[selected]]">Send Subscription</span>
-				<span hidden="[[!selected]]">Send Tip</span>
+				<span>[[_calcSendButtonText(selectedType)]]</span>
 			</paper-button>
 
 			<div id="buttons">
-				<paper-button id="settings" class="nodecg-configure" nodecg-dialog="settings" raised>
+				<paper-button id="settings" class="nodecg-configure" on-tap="openSettingsDialog" raised>
 					&nbsp;Settings&nbsp;
 				</paper-button>
 
-				<paper-button id="clear" class="nodecg-configure" nodecg-dialog="clear-history" raised>
+				<paper-button id="clear" class="nodecg-configure" on-tap="openClearHistoryDialog" raised>
 					Clear History
 				</paper-button>
 			</div>
@@ -114,6 +117,37 @@ <h5>RECENT NOTES</h5>
 				</template>
 			</boe-list>
 		</div>
+
+		<paper-dialog id="settingsDialog" with-backdrop>
+			<h2>Settings</h2>
+
+			<paper-input
+				id="minimumTipThreshold"
+				label="Minimum Tip Threshold"
+				type="number">
+			</paper-input>
+
+			<paper-input
+				id="minimumCheerThreshold"
+				label="Minimum Cheer Threshold"
+				type="number">
+			</paper-input>
+
+			<div class="buttons">
+				<paper-button dialog-dismiss>Cancel</paper-button>
+				<paper-button dialog-confirm autofocus on-tap="_settingsDialogAccepted">Accept</paper-button>
+			</div>
+		</paper-dialog>
+
+		<paper-dialog id="clearHistoryDialog" with-backdrop>
+			<h2>Clear History</h2>
+			<p>Are you sure you wish to clear the <b>subscriber</b>, <b>tip</b>, and <b>cheer</b> history?</p>
+			<p>This cannot be undone!</p>
+			<div class="buttons">
+				<paper-button dialog-dismiss>No, cancel</paper-button>
+				<paper-button dialog-confirm autofocus on-tap="_clearHistoryDialogAccepted">Yes, clear</paper-button>
+			</div>
+		</paper-dialog>
 	</template>
 
 	<script src="panel-body.js"></script>

dashboard/elements/panel-body/panel-body.html

@@ -3,14 +3,16 @@
 
 	const history = nodecg.Replicant('history');
 	const flaggedNotes = nodecg.Replicant('flaggedNotes');
+	const tipThreshold = nodecg.Replicant('tipThreshold');
+	const cheerThreshold = nodecg.Replicant('cheerThreshold');
 
 	Polymer({
 		is: 'panel-body',
 
 		properties: {
-			selected: {
-				type: Number,
-				value: 0
+			selectedType: {
+				type: String,
+				value: 'subscription'
 			}
 		},
 
@@ -26,7 +28,6 @@
 			});
 
 			history.on('change', newVal => {
-				console.log(newVal);
 				this._pruneList(this.$.recentList, history, true);
 
 				newVal.slice(0).reverse().forEach(note => {
@@ -37,6 +38,14 @@
 					}
 				});
 			});
+
+			tipThreshold.on('change', newVal => {
+				this.$.minimumTipThreshold.value = newVal;
+			});
+
+			cheerThreshold.on('change', newVal => {
+				this.$.minimumCheerThreshold.value = newVal;
+			});
 		},
 
 		_addToListIfNotPresent(list, node) {
@@ -67,10 +76,10 @@
 		},
 
 		send() {
-			const name = document.getElementById('name').value;
-			const type = document.getElementById('tabs').selected === 0 ? 'subscription' : 'tip';
-			const months = document.getElementById('months').value;
-			const amount = document.getElementById('amount').value;
+			const name = this.$.name.value;
+			const type = this.selectedType;
+			const months = this.$.months.value;
+			const amount = this.$.amount.value;
 
 			const noteOpts = {
 				name,
@@ -85,7 +94,7 @@
 				} else {
 					noteOpts.resub = false;
 				}
-			} else if (type === 'tip') {
+			} else if (type === 'tip' || type === 'cheer') {
 				noteOpts.amount = parseFloat(amount);
 			} else {
 				console.error('[lfg-nucleus] Invalid manual note type:', type);
@@ -101,6 +110,40 @@
 
 		newestFirst(a, b) {
 			return b.timestamp - a.timestamp;
+		},
+
+		_calcSendButtonText(selectedType) {
+			switch (selectedType) {
+				case 'subscription':
+					return 'Send Subscription';
+				case 'tip':
+					return 'Send Tip';
+				case 'cheer':
+					return 'Send Cheer';
+				default:
+					return;
+			}
+		},
+
+		isSubscription(selectedType) {
+			return selectedType === 'subscription';
+		},
+
+		openSettingsDialog() {
+			this.$.settingsDialog.open();
+		},
+
+		openClearHistoryDialog() {
+			this.$.clearHistoryDialog.open();
+		},
+
+		_settingsDialogAccepted() {
+			tipThreshold.value = this.$.minimumTipThreshold.value;
+			cheerThreshold.value = this.$.minimumCheerThreshold.value;
+		},
+
+		_clearHistoryDialogAccepted() {
+			nodecg.sendMessage('clearHistory');
 		}
 	});
 })();