🚨 prettier

haliphax · Aug 31, 2023 · fc991d3 · fc991d3
1 parent 9e6c687
commit fc991d3
Show file tree

Hide file tree

Showing 19 changed files with 257 additions and 249 deletions.
diff --git a/README.md b/README.md
@@ -16,8 +16,8 @@ viewed in full-screen._
 The following commands are available from the overlay's chat integration, with
 more to come:
 
-| Command | Description |
-|---|---|
+| Command           | Description                                  |
+| ----------------- | -------------------------------------------- |
 | `!avatar <value>` | Sets the user's avatar (if the value exists) |
 
 # 🏠 Running it yourself
@@ -52,7 +52,6 @@ You may craft an override file with a different hostname if you just want to
 use something other than `localhost`, of course; you don't have to be using WSL
 to take advantage of this.
 
-
 [hosts file]: https://www.freecodecamp.org/news/how-to-find-and-edit-a-windows-hosts-file/
 [nginx]: https://nginx.org
 [Traefik]: https://traefik.io
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -1,4 +1,4 @@
-version: '3'
+version: "3"
 
 services:
   nginx:

diff --git a/html/constants.js b/html/constants.js
@@ -2,33 +2,35 @@ const constants = {
 	CHANCE_TO_CHANGE: 0.5,
 	CHANCE_TO_CHANGE_IF_WALKING: 0.2,
 	CHANCE_TO_WALK: 0.5,
-	CLIENT_ID: 'v9n67wa15yeokwksrb6a12x8vybbgw',
-	FACE_LEFT: 'left',
-	FACE_RIGHT: 'right',
-	FONT_FAMILY: 'Syne Mono',
+	CLIENT_ID: "v9n67wa15yeokwksrb6a12x8vybbgw",
+	FACE_LEFT: "left",
+	FACE_RIGHT: "right",
+	FONT_FAMILY: "Syne Mono",
 	GRAVITY: 0,
 	LABEL_FALL_MARGIN: 12,
 	LABEL_FLOAT_VELOCITY: 100,
 	LABEL_RISE_MARGIN: 8,
 	LABEL_SIZE: 20,
-	OAUTH_REDIRECT_URI: '',
-	OAUTH_URL: '',
+	OAUTH_REDIRECT_URI: "",
+	OAUTH_URL: "",
 	SCREEN_HEIGHT: 1080,
 	SCREEN_WIDTH: 1920,
-	STROKE_COLOR: '#000',
+	STROKE_COLOR: "#000",
 	STROKE_THICKNESS: 6,
 	TIMEOUT_MAX: 5000,
 	WALK_MAX_VELOCITY: 60,
 	WALK_MIN_VELOCITY: 20,
 };
 
 constants.OAUTH_REDIRECT_URI = encodeURIComponent(
-	window.location.href.replace(/(?:overlay\/?)?(?:[^/]\.html|$)/i, 'oauth'));
+	window.location.href.replace(/(?:overlay\/?)?(?:[^/]\.html|$)/i, "oauth"),
+);
 
-constants.OAUTH_URL = `https://id.twitch.tv/oauth2/authorize`
-	+ `?client_id=${constants.CLIENT_ID}`
-	+ `&redirect_uri=${constants.OAUTH_REDIRECT_URI}`
-	+ `&response_type=token`
-	+ `&scope=chat:read%20chat:edit`;
+constants.OAUTH_URL =
+	`https://id.twitch.tv/oauth2/authorize` +
+	`?client_id=${constants.CLIENT_ID}` +
+	`&redirect_uri=${constants.OAUTH_REDIRECT_URI}` +
+	`&response_type=token` +
+	`&scope=chat:read%20chat:edit`;
 
 export default constants;
diff --git a/html/index.html b/html/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />

diff --git a/html/oauth/index.html b/html/oauth/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
@@ -11,13 +11,13 @@
 		<h1>Overlay URL builder</h1>
 		<p>
 			Use this form to construct your overlay URL. <code>Channel</code> should
-			be your Twitch username, and <code>Bot username</code> should be
-			the username of the account your token is authorized for. (Most likely,
-			that's <em>your</em> username unless you have a separate bot account.)
+			be your Twitch username, and <code>Bot username</code> should be the
+			username of the account your token is authorized for. (Most likely, that's
+			<em>your</em> username unless you have a separate bot account.)
 		</p>
 		<p>
-			After submitting the form, you will be taken to the live overlay. Copy
-			the URL from your browser for use in your streaming software (e.g. OBS).
+			After submitting the form, you will be taken to the live overlay. Copy the
+			URL from your browser for use in your streaming software (e.g. OBS).
 		</p>
 		<form action="../overlay">
 			<fieldset>

diff --git a/html/oauth/index.js b/html/oauth/index.js
@@ -1,14 +1,17 @@
-import { hs } from '../util.js';
+import { hs } from "../util.js";
 
-const form = document.querySelector('form');
+const form = document.querySelector("form");
 
-const onChange = e => {
+const onChange = (e) => {
 	const rgx = RegExp(`&${e.target.id}=[^&]+`);
 
-	form.action = form.action.replace(rgx, '');
-	form.action =
-		`${form.action}&${e.target.id}=${encodeURIComponent(e.target.value)}`;
+	form.action = form.action.replace(rgx, "");
+	form.action = `${form.action}&${e.target.id}=${encodeURIComponent(
+		e.target.value,
+	)}`;
 };
 
-form.setAttribute('action', `${form.action}#oauth=${hs.access_token}`);
-form.querySelectorAll('input').forEach(v => v.addEventListener('change', onChange));
+form.setAttribute("action", `${form.action}#oauth=${hs.access_token}`);
+form
+	.querySelectorAll("input")
+	.forEach((v) => v.addEventListener("change", onChange));
diff --git a/html/overlay/avatars/avatar.js b/html/overlay/avatars/avatar.js
@@ -1,38 +1,34 @@
-import constants from '../../constants.js';
+import constants from "../../constants.js";
 
 /** on-screen avatar with state machine */
 class Avatar extends Phaser.Physics.Arcade.Sprite {
 	constructor(scene, avatarDefs, username, key, x) {
 		super(scene, x, 0, key);
-		this
-			.setOrigin(0.5, 1)
-			.setScale(avatarDefs[key].metadata.scale);
+		this.setOrigin(0.5, 1).setScale(avatarDefs[key].metadata.scale);
 
 		/** @type {string} The avatar owner's username */
 		this.username = username;
 		/** @type {string} The avatar's sprite name */
 		this.key = key;
 		/** @type {string} The direction the avatar's sprite is facing */
-		this.face = Math.random() < constants.CHANCE_TO_CHANGE
-			? constants.FACE_LEFT
-			: constants.FACE_RIGHT;
+		this.face =
+			Math.random() < constants.CHANCE_TO_CHANGE
+				? constants.FACE_LEFT
+				: constants.FACE_RIGHT;
 		/**
 		 * @type {number}
 		 * Half the width of the avatar's sprite; used in calculations */
 		this.halfWidth = this.displayWidth / 2;
 		/** @type {number} The original label Y position */
-		this.labelYPosition =
-			-this.displayHeight - (constants.LABEL_SIZE / 2);
+		this.labelYPosition = -this.displayHeight - constants.LABEL_SIZE / 2;
 		/** @type {Phase.GameObjects.Label} The username label for the avatar */
-		this.label =
-			this.scene.add.text(
-				0, this.labelYPosition, username,
-				{
-					fontFamily: `"${constants.FONT_FAMILY}"`,
-					fontSize: constants.LABEL_SIZE,
-					stroke: constants.STROKE_COLOR,
-					strokeThickness: constants.STROKE_THICKNESS,
-				})
+		this.label = this.scene.add
+			.text(0, this.labelYPosition, username, {
+				fontFamily: `"${constants.FONT_FAMILY}"`,
+				fontSize: constants.LABEL_SIZE,
+				stroke: constants.STROKE_COLOR,
+				strokeThickness: constants.STROKE_THICKNESS,
+			})
 			.setOrigin(0.5, 1);
 		/** The avatar's container, allowing us to manipulate a single object */
 		this.container = this.scene.add.container();
@@ -49,8 +45,7 @@ class Avatar extends Phaser.Physics.Arcade.Sprite {
 
 	/** destroy avatar; stop state machine */
 	destroy() {
-		if (this.stateMachine)
-			this.stateMachine.stateService.stop();
+		if (this.stateMachine) this.stateMachine.stateService.stop();
 
 		this.cleanup();
 	}
@@ -79,15 +74,14 @@ class Avatar extends Phaser.Physics.Arcade.Sprite {
 		if (!this.container.body || !this.label.body)
 			return setTimeout(this.ready.bind(this), 100);
 
-		this.container.body.setSize(
-			this.displayWidth, this.displayHeight, true);
-		this.container.setSize(
-			this.displayWidth, this.displayHeight, true);
+		this.container.body.setSize(this.displayWidth, this.displayHeight, true);
+		this.container.setSize(this.displayWidth, this.displayHeight, true);
 		this.container.add(this);
 		this.container.add(this.label);
 		this.container.setPosition(
 			Math.random() * (constants.SCREEN_WIDTH - this.displayWidth),
-			constants.SCREEN_HEIGHT);
+			constants.SCREEN_HEIGHT,
+		);
 	}
 
 	/** update the avatar per animation frame */
@@ -97,31 +91,36 @@ class Avatar extends Phaser.Physics.Arcade.Sprite {
 
 		// raise/lower labels to avoid overlap
 
-		const notThisLabel = this.scene.labelGroup.children.entries
-			.filter(l => l != this);
-
-		const shouldRise = notThisLabel.some(l =>
-			l.body.left <= this.label.body.right
-			&& l.body.right >= this.label.body.left
-			&& l.body.top < this.label.body.bottom + constants.LABEL_RISE_MARGIN
-			&& (l.body.bottom > this.label.body.bottom
-				|| (l.body.bottom == this.label.body.bottom
-					&& l.body.x < this.label.body.x)));
-
-		const shouldFall = !shouldRise
-			&& this.label.y < this.labelYPosition
-			&& !notThisLabel.some(l =>
-				l.body.left <= this.label.body.right
-				&& l.body.right >= this.label.body.left
-				&& l.body.top < this.label.body.bottom + constants.LABEL_FALL_MARGIN
-				&& l.body.bottom > this.label.body.bottom);
+		const notThisLabel = this.scene.labelGroup.children.entries.filter(
+			(l) => l != this,
+		);
+
+		const shouldRise = notThisLabel.some(
+			(l) =>
+				l.body.left <= this.label.body.right &&
+				l.body.right >= this.label.body.left &&
+				l.body.top < this.label.body.bottom + constants.LABEL_RISE_MARGIN &&
+				(l.body.bottom > this.label.body.bottom ||
+					(l.body.bottom == this.label.body.bottom &&
+						l.body.x < this.label.body.x)),
+		);
+
+		const shouldFall =
+			!shouldRise &&
+			this.label.y < this.labelYPosition &&
+			!notThisLabel.some(
+				(l) =>
+					l.body.left <= this.label.body.right &&
+					l.body.right >= this.label.body.left &&
+					l.body.top < this.label.body.bottom + constants.LABEL_FALL_MARGIN &&
+					l.body.bottom > this.label.body.bottom,
+			);
 
 		if (shouldRise)
 			this.label.body.setVelocityY(-constants.LABEL_FLOAT_VELOCITY);
 		else if (shouldFall)
 			this.label.body.setVelocityY(constants.LABEL_FLOAT_VELOCITY);
-		else
-			this.label.body.setVelocityY(0);
+		else this.label.body.setVelocityY(0);
 
 		if (this.label.y > this.labelYPosition)
 			this.label.setPosition(this.label.x, this.labelYPosition);
@@ -131,9 +130,10 @@ class Avatar extends Phaser.Physics.Arcade.Sprite {
 
 	/** flip the sprite's facing */
 	changeFace() {
-		this.face = this.face == constants.FACE_LEFT
-			? constants.FACE_RIGHT
-			: constants.FACE_LEFT;
+		this.face =
+			this.face == constants.FACE_LEFT
+				? constants.FACE_RIGHT
+				: constants.FACE_LEFT;
 		//console.debug(`facing ${this.face}`);
 	}
 }

diff --git a/html/overlay/avatars/mario/avatar.js b/html/overlay/avatars/mario/avatar.js
@@ -1,4 +1,4 @@
-import Avatar from '../avatar.js';
+import Avatar from "../avatar.js";
 
 const metadata = {
 	animations: {

diff --git a/html/overlay/avatars/skeleton/avatar.js b/html/overlay/avatars/skeleton/avatar.js
@@ -1,4 +1,4 @@
-import Avatar from '../avatar.js';
+import Avatar from "../avatar.js";
 
 const metadata = {
 	animations: {

diff --git a/html/overlay/config.json b/html/overlay/config.json
@@ -1,6 +1,3 @@
 {
-	"avatars": [
-		"mario",
-		"skeleton"
-	]
+	"avatars": ["mario", "skeleton"]
 }
diff --git a/html/overlay/index.html b/html/overlay/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />