v0.1.3

added reward colors
v0.1.2
2025-10-30 21:27:13 +01:00 · 2022-10-31 17:38:52 +01:00 · 2022-10-31 17:38:39 +01:00 · 2022-10-31 16:06:14 +01:00 · 2022-10-31 16:06:03 +01:00
14 changed files with 2091 additions and 10 deletions
--- a/config.js
+++ b/config.js
@@ -1,4 +1,32 @@
 const CONFIG = {
 	apiKey: "",
-	twitchOAuth: "",
+	twitch: {
+		username: "",
+		oAuth: "",
+		clientId: "",
+		rewardIds: {
+			turnRed: "",
+			turnGreen: "",
+			turnPurple: "",
+			turnBlue: "",
+		},
+	},
+	themes: {
+		red: {
+			0: "rgb(79, 6, 6)",
+			1: "rgb(247, 52, 52)",
+		},
+		green: {
+			0: "rgb(11, 69, 22)",
+			1: "rgb(88, 252, 170)",
+		},
+		purple: {
+			0: "rgb(62, 7, 66)",
+			1: "rgb(188, 79, 240)",
+		},
+		blue: {
+			0: "rgb(17, 11, 125)",
+			1: "rgb(61, 223, 255)",
+		},
+	},
 };
--- a/css/style.css
+++ b/css/style.css
@@ -56,7 +56,7 @@ html {
 	animation-name: backgroundAnimation;
 }

-#teafire-banner {
+#tealfire-banner {
 	height: 50px;
 	width: 180px;
 	padding: 20px;
@@ -66,16 +66,23 @@ html {
 	float: right;
 }

-#teafire-banner p {
+#tealfire-banner p {
 	color: teal;
 	float: left;
 	font-size: 23pt;
 	font-weight: bolder;
 	padding-top: 8px;
 	padding-left: 5px;
+	z-index: 5;
 }
-#teafire-banner img {
+#tealfire-banner img {
 	color: teal;
 	height: 50px;
 	float: left;
 }
+
+#tealfire-banner .particles-js-canvas-el {
+	margin-top: -60px;
+	padding-bottom: 10px;
+	z-index: 0;
+}
--- a/frame.html
+++ b/frame.html
@@ -11,13 +11,17 @@
 	</head>
 	<body>
 		<div id="frame"></div>
-		<div id="teafire-banner">
+		<div id="tealfire-banner">
 			<img src="img/logo128x128.png" alt="" />
 			<p>TealFire</p>
 		</div>
 		<div id="subCount">0</div>
+		<div id="particles-frame"></div>
+
 		<script src="config.js"></script>
-		<script src="js/socket.io.min.js"></script>
+		<script src="js/modules/socket.io.min.js"></script>
+		<script src="js/modules/particles/particles.js"></script>
+		<script src="js/pubsub.js"></script>
 		<script src="js/app.js"></script>
 		<script src="js/socket.js"></script>
 	</body>
--- a/js/app.js
+++ b/js/app.js
@@ -1,6 +1,6 @@
 const subCount = document.getElementById("subCount");
 const frame = document.getElementById("frame");
-const tfBanner = document.getElementById("teafire-banner");
+const tfBanner = document.getElementById("tealfire-banner");

 let subCountNumber = 0;

@@ -16,6 +16,8 @@ function updateSubCount() {
 }

 function sub(subName) {
+	particlesJS.load("particles-frame", "js/particles-sub.json");
+
 	frame.style.animationName = "subAnimation";
 	frame.style.animationDuration = "2s";

@@ -32,6 +34,7 @@ function sub(subName) {
 		subCount.style.animationDuration = "20s";
 		subCount.innerText = subCountNumber;
 		updateSubCount();
+		particlesJS.load("particles-frame", "js/particles-none.json");
 	}, 11000);
 }

@@ -62,6 +65,8 @@ setInterval(() => {
 	showTealFireBanner();
 	setTimeout(() => {
 		closeTealFireBanner();
-	}, 20000);
-}, 300000);
+	}, 20000); //20000
+}, 300000); // 300000
 updateSubCount();
+
+particlesJS.load("tealfire-banner", "js/particles-banner.json");
--- a/js/modules/particles/bower.json
+++ b/js/modules/particles/bower.json
@@ -0,0 +1,22 @@
+{
+  "name": "particles.js",
+  "main": "particles.js",
+  "version": "2.0.0",
+  "homepage": "https://github.com/VincentGarreau/particles.js",
+  "authors": [
+    "Vincent Garreau <vin.garreau@gmail.com>"
+  ],
+  "description": "A lightweight JavaScript library for creating particles.",
+  "keywords": [
+    "particle",
+    "particles"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}
--- a/js/modules/particles/package.json
+++ b/js/modules/particles/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "particles.js",
+  "version": "2.0.0",
+  "description": "A lightweight JavaScript library for creating particles",
+  "homepage": "http://vincentgarreau.com/particles.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/VincentGarreau/particles.js.git"
+  },
+  "keywords": [
+    "particles",
+    "particle",
+    "canvas"
+  ],
+  "author": "Vincent Garreau",
+  "license": "MIT",
+  "files": [
+    "particles.js",
+    "particles.min.js"
+  ],
+  "bugs": {
+    "url": "https://github.com/VincentGarreau/particles.js/issues"
+  },
+  "homepage": "https://github.com/VincentGarreau/particles.js"
+}
--- a/js/modules/particles/particles.js
+++ b/js/modules/particles/particles.js
--- a/js/modules/particles/particles.min.js
+++ b/js/modules/particles/particles.min.js
--- a/js/modules/socket.io.min.js
+++ b/js/modules/socket.io.min.js
--- a/js/particles-banner.json
+++ b/js/particles-banner.json
@@ -0,0 +1,110 @@
+{
+	"particles": {
+		"number": {
+			"value": 400,
+			"density": {
+				"enable": true,
+				"value_area": 100
+			}
+		},
+		"color": {
+			"value": "#00d680"
+		},
+		"shape": {
+			"type": "circle",
+			"stroke": {
+				"width": 0,
+				"color": "#000000"
+			},
+			"polygon": {
+				"nb_sides": 5
+			},
+			"image": {
+				"src": "img/github.svg",
+				"width": 100,
+				"height": 100
+			}
+		},
+		"opacity": {
+			"value": 0.7,
+			"random": true,
+			"anim": {
+				"enable": true,
+				"speed": 1,
+				"opacity_min": 0,
+				"sync": false
+			}
+		},
+		"size": {
+			"value": 2,
+			"random": true,
+			"anim": {
+				"enable": false,
+				"speed": 1,
+				"size_min": 0.3,
+				"sync": false
+			}
+		},
+		"line_linked": {
+			"enable": false,
+			"distance": 150,
+			"color": "#d60e00",
+			"opacity": 0.4,
+			"width": 1
+		},
+		"move": {
+			"enable": true,
+			"speed": 0.3,
+			"direction": "none",
+			"random": true,
+			"straight": false,
+			"out_mode": "out",
+			"bounce": false,
+			"attract": {
+				"enable": false,
+				"rotateX": 600,
+				"rotateY": 600
+			}
+		}
+	},
+	"interactivity": {
+		"detect_on": "canvas",
+		"events": {
+			"onhover": {
+				"enable": true,
+				"mode": "bubble"
+			},
+			"onclick": {
+				"enable": true,
+				"mode": "repulse"
+			},
+			"resize": true
+		},
+		"modes": {
+			"grab": {
+				"distance": 200,
+				"line_linked": {
+					"opacity": 1
+				}
+			},
+			"bubble": {
+				"distance": 10,
+				"size": 0,
+				"duration": 2,
+				"opacity": 0,
+				"speed": 1
+			},
+			"repulse": {
+				"distance": 400,
+				"duration": 0.4
+			},
+			"push": {
+				"particles_nb": 2
+			},
+			"remove": {
+				"particles_nb": 2
+			}
+		}
+	},
+	"retina_detect": true
+}
--- a/js/particles-none.json
+++ b/js/particles-none.json
@@ -0,0 +1,110 @@
+{
+	"particles": {
+		"number": {
+			"value": 0,
+			"density": {
+				"enable": true,
+				"value_area": 800
+			}
+		},
+		"color": {
+			"value": "#fff"
+		},
+		"shape": {
+			"type": "circle",
+			"stroke": {
+				"width": 0,
+				"color": "#fff"
+			},
+			"polygon": {
+				"nb_sides": 5
+			},
+			"image": {
+				"src": "img/github.svg",
+				"width": 100,
+				"height": 100
+			}
+		},
+		"opacity": {
+			"value": 0,
+			"random": true,
+			"anim": {
+				"enable": true,
+				"speed": 1,
+				"opacity_min": 0,
+				"sync": false
+			}
+		},
+		"size": {
+			"value": 0,
+			"random": true,
+			"anim": {
+				"enable": false,
+				"speed": 4,
+				"size_min": 0.3,
+				"sync": false
+			}
+		},
+		"line_linked": {
+			"enable": false,
+			"distance": 150,
+			"color": "#d60e00",
+			"opacity": 0.4,
+			"width": 1
+		},
+		"move": {
+			"enable": true,
+			"speed": 1,
+			"direction": "none",
+			"random": true,
+			"straight": false,
+			"out_mode": "out",
+			"bounce": false,
+			"attract": {
+				"enable": false,
+				"rotateX": 600,
+				"rotateY": 600
+			}
+		}
+	},
+	"interactivity": {
+		"detect_on": "canvas",
+		"events": {
+			"onhover": {
+				"enable": true,
+				"mode": "bubble"
+			},
+			"onclick": {
+				"enable": true,
+				"mode": "repulse"
+			},
+			"resize": true
+		},
+		"modes": {
+			"grab": {
+				"distance": 400,
+				"line_linked": {
+					"opacity": 1
+				}
+			},
+			"bubble": {
+				"distance": 250,
+				"size": 0,
+				"duration": 2,
+				"opacity": 0,
+				"speed": 3
+			},
+			"repulse": {
+				"distance": 400,
+				"duration": 0.4
+			},
+			"push": {
+				"particles_nb": 4
+			},
+			"remove": {
+				"particles_nb": 2
+			}
+		}
+	},
+	"retina_detect": true
+}
--- a/js/particles-sub.json
+++ b/js/particles-sub.json
@@ -0,0 +1,110 @@
+{
+	"particles": {
+		"number": {
+			"value": 200,
+			"density": {
+				"enable": true,
+				"value_area": 800
+			}
+		},
+		"color": {
+			"value": "#d67d00"
+		},
+		"shape": {
+			"type": "circle",
+			"stroke": {
+				"width": 0,
+				"color": "#000000"
+			},
+			"polygon": {
+				"nb_sides": 5
+			},
+			"image": {
+				"src": "img/github.svg",
+				"width": 100,
+				"height": 100
+			}
+		},
+		"opacity": {
+			"value": 1,
+			"random": true,
+			"anim": {
+				"enable": true,
+				"speed": 2,
+				"opacity_min": 0,
+				"sync": false
+			}
+		},
+		"size": {
+			"value": 3,
+			"random": true,
+			"anim": {
+				"enable": false,
+				"speed": 2,
+				"size_min": 0.3,
+				"sync": false
+			}
+		},
+		"line_linked": {
+			"enable": false,
+			"distance": 150,
+			"color": "#d60e00",
+			"opacity": 0.4,
+			"width": 1
+		},
+		"move": {
+			"enable": true,
+			"speed": 2,
+			"direction": "none",
+			"random": true,
+			"straight": false,
+			"out_mode": "out",
+			"bounce": false,
+			"attract": {
+				"enable": false,
+				"rotateX": 600,
+				"rotateY": 600
+			}
+		}
+	},
+	"interactivity": {
+		"detect_on": "canvas",
+		"events": {
+			"onhover": {
+				"enable": true,
+				"mode": "bubble"
+			},
+			"onclick": {
+				"enable": true,
+				"mode": "repulse"
+			},
+			"resize": true
+		},
+		"modes": {
+			"grab": {
+				"distance": 400,
+				"line_linked": {
+					"opacity": 1
+				}
+			},
+			"bubble": {
+				"distance": 250,
+				"size": 0,
+				"duration": 2,
+				"opacity": 0,
+				"speed": 3
+			},
+			"repulse": {
+				"distance": 400,
+				"duration": 0.4
+			},
+			"push": {
+				"particles_nb": 4
+			},
+			"remove": {
+				"particles_nb": 2
+			}
+		}
+	},
+	"retina_detect": true
+}
--- a/js/pubsub.js
+++ b/js/pubsub.js
@@ -0,0 +1,107 @@
+const rootElem = document.querySelector(":root");
+let ws;
+let channelId;
+
+function changeColorTheme(theme) {
+	rootElem.style.setProperty("--border-color-1", theme[0]);
+	rootElem.style.setProperty("--border-color-2", theme[1]);
+}
+
+function pubSubNonce(length) {
+	var text = "";
+	var possible =
+		"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+	for (var i = 0; i < length; i++) {
+		text += possible.charAt(Math.floor(Math.random() * possible.length));
+	}
+	return text;
+}
+
+function pubSubHeartbeat() {
+	message = {
+		type: "PING",
+	};
+	ws.send(JSON.stringify(message));
+}
+
+function pubSubListen(topic) {
+	message = {
+		type: "LISTEN",
+		nonce: pubSubNonce(15),
+		data: {
+			topics: [topic],
+			auth_token: CONFIG.twitch.oAuth,
+		},
+	};
+	ws.send(JSON.stringify(message));
+}
+
+function pubSubConnect() {
+	var heartbeatInterval = 1000 * 60; //ms between PING's
+	var reconnectInterval = 1000 * 3; //ms to wait before reconnect
+	var heartbeatHandle;
+
+	ws = new WebSocket("wss://pubsub-edge.twitch.tv");
+
+	ws.onopen = function (event) {
+		console.log("PubSub Opened");
+		pubSubHeartbeat();
+		heartbeatHandle = setInterval(pubSubHeartbeat, heartbeatInterval);
+
+		pubSubListen("channel-points-channel-v1." + channelId);
+	};
+
+	ws.onerror = function (error) {
+		console.log("ERR:  " + JSON.stringify(error) + "\n");
+	};
+
+	ws.onmessage = function (event) {
+		data = JSON.parse(event.data);
+		if (data.type == "MESSAGE") {
+			message = JSON.parse(data.data.message);
+			reward = message.data.redemption.reward;
+			console.log(`Received reward: ${reward.id} - ${reward.title}`);
+			switch (reward.id) {
+				case CONFIG.twitch.rewardIds.turnGreen:
+					changeColorTheme(CONFIG.themes.green);
+					break;
+				case CONFIG.twitch.rewardIds.turnPurple:
+					changeColorTheme(CONFIG.themes.purple);
+					break;
+				case CONFIG.twitch.rewardIds.turnRed:
+					changeColorTheme(CONFIG.themes.red);
+					break;
+				case CONFIG.twitch.rewardIds.turnBlue:
+					changeColorTheme(CONFIG.themes.blue);
+					break;
+			}
+		}
+
+		if (message.type == "RECONNECT") {
+			setTimeout(pubSubConnect, reconnectInterval);
+		}
+	};
+
+	ws.onclose = function () {
+		clearInterval(heartbeatHandle);
+		setTimeout(pubSubConnect, reconnectInterval);
+	};
+}
+
+function pubSubMain() {
+	fetch("https://api.twitch.tv/helix/users?login=" + CONFIG.twitch.username, {
+		headers: {
+			Authorization: "Bearer " + CONFIG.twitch.oAuth,
+			"Client-Id": CONFIG.twitch.clientId,
+			"Content-Type": "application/json",
+		},
+	})
+		.then((response) => response.json())
+		.then((resData) => {
+			channelId = resData.data[0].id;
+			pubSubConnect();
+		});
+}
+
+pubSubMain();
+// changeColorTheme(CONFIG.themes.purple);
--- a/meta.json
+++ b/meta.json
@@ -1,3 +1,3 @@
 {
-	"version": "v0.1.1"
+	"version": "v0.1.3"
 }
Author	SHA1	Message	Date
Janis	2ff402a320	v0.1.3	2022-10-31 17:38:52 +01:00
Janis	afacb9b93b	added reward colors	2022-10-31 17:38:39 +01:00
Janis	271a7bc936	v0.1.2	2022-10-31 16:06:14 +01:00
Janis	63f113ec0b	added particles	2022-10-31 16:06:03 +01:00