stuff and things

Author: Metalloriff

.firebase/hosting.ZmlyZWJhc2UtaG9zdGluZw.cache

@@ -1,8 +1,8 @@
-index.html,1675915329931,a076fe07b12b12c2fb2b79eacef09fb9e43ab21f23117b59488df468a7ae5afb
-assets/media/icon50x50.png,1675915329932,aff83c1b5e8c8b28ef34ff190ffff75676bab05bd66382928e489bbf8e512f9e
-manifest.json,1675915329931,a32ca6aea20b60f73fb15ee793737d9fd689148057fa1cccfe0f825939e11a96
-assets/media/TwemojiHeart.svg,1675915329932,91a74f778528cb2ab30fdb256916c14ce9527c92765f6acd6c862e66499fdb62
-assets/scripts/main.js.LICENSE.txt,1675915329932,d3453a63902997ad204993d0b90fea97bffb4a8cd4934a1696a109a2947e6e0f
-assets/styles/main.css,1675915329932,bef67429c264fc55c55eb6ed377b287a20d56724cb57f672bb815c0effb9627d
-assets/scripts/main.js,1675915330085,95162d63940302eb328b74e4f2a342cdf8073eb43d4c2e8024f2360f884f556c
-assets/media/background.jpg,1675915330157,5a2da1ebe47a86f393c2e0214c2f59bd50d30c72c4ce433a5870ddcfb5773741
+index.html,1675922649236,99caa826e394119e0c7748d1834d0652054d4b2b95343ef09b2634be0a1a1476
+manifest.json,1675922649236,746e3278ad6f7cfdbfc44002550985585b054824ba08be5ccaa45a53d10e1cf3
+assets/media/background.jpg,1675922649430,5a2da1ebe47a86f393c2e0214c2f59bd50d30c72c4ce433a5870ddcfb5773741
+assets/media/icon50x50.png,1675922649237,aff83c1b5e8c8b28ef34ff190ffff75676bab05bd66382928e489bbf8e512f9e
+assets/media/TwemojiHeart.svg,1675922649238,91a74f778528cb2ab30fdb256916c14ce9527c92765f6acd6c862e66499fdb62
+assets/scripts/main.js.LICENSE.txt,1676010633517,e894edd8728ca24421593822ba736ea4225d88f445c8d936ecfd190cc27fc15d
+assets/styles/main.css,1676010633517,1f2b38cf9d5be5d4864b74a2ae6b3fc7ce243921fb5bb7ed2df73a17128cafe0
+assets/scripts/main.js,1676076407286,9e4967428289b84518ac60d1aedcdb33fe009a7a4fbb2bcc830ce019b9da60bb

README.md

@@ -7,6 +7,5 @@ Please note that mobile support is not yet available. I am not responsible for a
 
 # TODO
 #### Add a low chance to request a question from a random player
-#### Add bots - The bots will allow less than 3 players to play together by auto-filling random gifs as response to each question. Voting for a bot would throw the vote away, making it possible to play with less than 3 players.
 #### Add tag guidelines - This will force whatever tag guidelines the host decides to be inserted into every gif search the user does.
 #### Add timers

package.json

@@ -12,22 +12,24 @@
 	"dependencies": {
 		"firebase": "^9.17.1",
 		"lodash": "^4.17.21",
-		"random-username-generator": "^1.0.4",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
 		"react-feather": "^2.0.9",
-		"regenerator-runtime": "^0.13.9"
+		"regenerator-runtime": "^0.13.9",
+		"unique-username-generator": "^1.1.3"
 	},
 	"devDependencies": {
 		"@svgr/webpack": "^5.5.0",
 		"@swc/cli": "^0.1.51",
 		"@swc/core": "^1.2.93",
+		"crypto-browserify": "^3.12.0",
 		"css-loader": "^6.3.0",
 		"file-loader": "^6.2.0",
 		"html-webpack-plugin": "^5.3.2",
 		"mini-css-extract-plugin": "^2.4.2",
 		"sass": "^1.42.1",
 		"sass-loader": "^12.1.0",
+		"stream-browserify": "^3.0.0",
 		"style-loader": "^3.3.0",
 		"swc-loader": "^0.1.15",
 		"webpack": "^5.58.0",
@@ -37,6 +39,7 @@
 	},
 	"scripts": {
 		"start": "npx webpack serve --open",
-		"build": "npx webpack --mode production --env=mode=production"
+		"build": "npx webpack --mode production --env=mode=production",
+		"publish": "yarn run build && firebase deploy --only hosting"
 	}
 }

src/App.jsx

@@ -1,5 +1,5 @@
-import randomUsernameGenerator from "random-username-generator";
 import { useState } from "react";
+import * as uug from "unique-username-generator";
 import "./App.scss";
 import background from "./Assets/background.jpg";
 import "./city-fog-theme.css";
@@ -51,7 +51,11 @@ if (!localUser) {
 	TenorClient.random("galaxy space aesthetic wallpaper").then(({ results: [pfp] }) => {
 		localUser = {
 			id: getRandomKey(),
-			username: randomUsernameGenerator.generate(),
+			username: uug.uniqueUsernameGenerator({
+				dictionaries: [uug.adjectives, uug.nouns, uug.adjectives, uug.nouns, uug.adjectives, uug.nouns],
+				separator: "",
+				style: "capital"
+			}),
 			avatar: pfp.media[0].tinygif.url
 		};
 

src/Classes/Packs.js

@@ -13,17 +13,18 @@ export const RoomStage = {
 	FINAL: 3
 };
 
+const usedQuestions = [];
 export class Room {
 	id;
 	hostId;
 	users = {};
-	guidelineTag = ""; // TODO add this
+	gifFilters = "";
 
 	packs = Object.keys(questionPacks);
-	usedQuestions = [];
+	botCount = 0;
 
 	getRandomPlayer() {
-		const players = Object.values(this.users);
+		const players = Object.values(this.users).filter(user => !user.bot);
 
 		return players[Math.floor(Math.random() * players.length)];
 	}
@@ -33,11 +34,11 @@ export class Room {
 		const validQuestions = Object.entries(questionPacks).filter(([key, value]) => this.packs.includes(key)).map(([key, value]) => value).flat();
 		let question;
 
-		while (!question || ~this.usedQuestions.indexOf(question)) {
+		while (!question || ~usedQuestions.indexOf(question)) {
 			question = validQuestions[Math.floor(Math.random() * validQuestions.length)];
 		}
 
-		this.usedQuestions.push(question);
+		usedQuestions.push(question);
 		return question.replace("XNAME", this.getRandomPlayer().username);
 	}
 
@@ -47,7 +48,7 @@ export class Room {
 
 	getLastAwaitedPlayer() {
 		for (const user of Object.values(this.users)) {
-			if (!this.gifs[user.id]) {
+			if (!this.gifs[user.id] && !user.bot) {
 				return user;
 			}
 		}
@@ -70,7 +71,7 @@ export class Room {
 	}
 
 	getWinner() {
-		if (Object.keys(this.votes).length !== Object.keys(this.users).length)
+		if (Object.keys(this.votes).length !== Object.keys(this.users).length - this.botCount)
 			return null;
 
 		const votes = this.getVoteCounts();

src/Classes/Stores/RoomStore.js

@@ -1,11 +1,11 @@
-import { getRandomKey } from "./Constants";
+import { localUser } from "../App";
 
 const endpoint = "https://g.tenor.com/v1";
 const key = "LXAB5RW7WVWA";
 const defaultProps = {
 	"media_filter": "minimal",
 	"limit": 50,
-	get "anon_id"() { return getRandomKey(); }
+	get "anon_id"() { return localUser?.id; }
 };
 
 let lastFetch = 0;

src/Classes/TenorClient.js

@@ -1,7 +1,8 @@
 import _ from "lodash";
 import { useCallback, useEffect, useState } from "react";
-import { ChevronsUp, Grid } from "react-feather";
+import { ChevronUp, Grid } from "react-feather";
 import { getRandomKey, joinClassNames } from "../../Classes/Constants";
+import RoomStore from "../../Classes/Stores/RoomStore";
 import TenorClient from "../../Classes/TenorClient";
 import Tooltip from "../Tooltip";
 import "./GifPicker.scss";
@@ -15,29 +16,39 @@ export default function GifPicker() {
 	const [open, setOpen] = useState(false);
 	const [pickingCallback, setPickingCallback] = useState(null);
 
-	useEffect(() => {
-		TenorClient.getTrending().then(({ results }) => (setTrending(results), setItems(results)));
+	const currentRoom = RoomStore.useState(() => RoomStore.getCurrentRoom());
+	const filters = RoomStore.useState(() => (RoomStore.getCurrentRoom()?.gifFilters ?? "") + " ");
 
+	useEffect(() => {
 		openGifPicker = async function () {
 			setOpen(true);
 
-
 			return new Promise(async (resolve, reject) => {
 				setPickingCallback({ resolve, reject });
 			});
 		}
 	}, []);
 
+	useEffect(() => {
+		if (currentRoom && filters.length > 1) {
+			TenorClient.search(currentRoom.gifFilters).then(({ results }) => (setTrending(results), setItems(results)));
+		}
+		else {
+			TenorClient.getTrending().then(({ results }) => (setTrending(results), setItems(results)));
+			search("");
+		}
+	}, [filters]);
+
 	const makeRequest = useCallback(
 		_.debounce((query, prepend = []) => {
-			TenorClient.search(query).then(response => {
+			TenorClient.search((filters + query).trim()).then(response => {
 				setItems([
 					...prepend,
 					...response.results
 				]);
 			});
 		}, 200),
-		[]
+		[currentRoom]
 	);
 
 	useEffect(() => {
@@ -66,11 +77,11 @@ export default function GifPicker() {
 	return (
 		<div className={joinClassNames("GifPicker", [open, "Open"])}>
 			<div className="SlideButton FlexCenter" onClick={() => setOpen(!open)}>
-				<ChevronsUp />
+				<ChevronUp />
 			</div>
 
 			<div className="SearchBarContainer FlexCenter">
-				<div className="RandomButton FlexCenter" onClick={() => TenorClient.search(getRandomKey()).then(({ results }) => setItems(results))}>
+				<div className="RandomButton FlexCenter" onClick={() => TenorClient.search((filters + getRandomKey()).trim()).then(({ results }) => setItems(results))}>
 					<Grid />
 
 					<Tooltip>Random</Tooltip>

src/Components/PageElements/GifPicker.jsx

@@ -17,24 +17,33 @@
 
 	&:not(.Open) {
 		transform: translateY(50vh);
+
+		.SlideButton > svg {
+			transform: none;
+		}
 	}
 
 	.SlideButton {
 		position: absolute;
 		left: 15px;
-		top: -30px;
+		top: -40px;
+		padding-bottom: 10px;
 
 		width: 40px;
 		height: 30px;
-		background: $primaryBG;
+		background: rgba(white, 0.1);
 		border-radius: 7px 7px 0 0;
 		backdrop-filter: blur(20px);
 
 		cursor: pointer;
 
 		> svg {
+			margin-top: 12px;
 			width: 35px;
 			height: 35px;
+
+			transform: rotateZ(-180deg);
+			transition: transform $t;
 		}
 	}
 

src/Components/PageElements/GifPicker.scss

@@ -1,54 +1,54 @@
 import React from "react";
-import "./Toasts.scss";
 import { getRandomKey, joinClassNames } from "../Classes/Constants";
 import Timer from "../Classes/TimerClass";
+import "./Toasts.scss";
 
 export function Toast({ children, type, life, remove, callback, color, fixedTime = false }) {
 	const handleRemove = () => {
 		setClosing(true);
 
 		setTimeout(remove, 500);
 	};
-	
+
 	const [closing, setClosing] = React.useState(false);
 	const timer = React.useMemo(() => new Timer(handleRemove, life * 1000, false), []);
 	const progressBar = React.useRef();
-	
+
 	const handleMouseEnter = () => {
 		timer.pause();
 		progressBar.current.style.animationPlayState = "paused";
 	};
-	
+
 	const handleMouseLeave = () => {
 		timer.resume();
 		progressBar.current.style.animationPlayState = "running";
 	};
-	
+
 	React.useEffect(() => {
 		const handleFocus = () => !fixedTime && handleMouseLeave();
 		const handleBlur = () => !fixedTime && handleMouseEnter();
-		
+
 		window.addEventListener("focus", handleFocus);
 		window.addEventListener("blur", handleBlur);
-		
+
 		(fixedTime || document.hasFocus()) && handleMouseLeave();
-		
+
 		return () => {
 			window.removeEventListener("focus", handleFocus);
 			window.removeEventListener("blur", handleBlur);
 		};
 	});
-	
+
 	return (
 		<div className={joinClassNames("Toast", [closing, "Closing"], type)}
-			 onMouseEnter={fixedTime ? null : handleMouseEnter}
-			 onMouseLeave={fixedTime ? null : handleMouseLeave}
-			 onClick={callback ? e => { callback(e); timer.end(); } : () => { timer.end(); }}
-			 style={{ cursor: callback ? "pointer" : null, backgroundColor: color }}>
-			{ children }
+			onMouseEnter={fixedTime ? null : handleMouseEnter}
+			onMouseLeave={fixedTime ? null : handleMouseLeave}
+			onClick={callback ? e => { callback(e); timer.end(); } : () => { timer.end(); }}
+			style={{ cursor: callback ? "pointer" : null, backgroundColor: color }}>
+			{children}
 
 			<div className="ProgressBarContainer">
-				<div ref={progressBar} className="ProgressBar" style={{ animationDuration: life + "s" }}/>
+				<div ref={progressBar} className="ProgressBar" style={{ animationDuration: life + "s" }} />
 			</div>
 		</div>
 	);
@@ -57,16 +57,16 @@ export function Toast({ children, type, life, remove, callback, color, fixedTime
 export default class Toasts extends React.Component {
 	static instance;
 	static ref = React.createRef();
-	
+
 	state = { toasts: [] };
 
 	componentDidMount() {
 		Toasts.instance = this;
 	}
-	
+
 	static showToast(children, type = "", life = 5, additionalOptions = {}) {
 		const { callback = null, color = null, fixedTime = false } = additionalOptions;
-		
+
 		const toast = React.createElement(Toast, {
 			key: getRandomKey(),
 			children, type, life, color, fixedTime,
@@ -76,13 +76,13 @@ export default class Toasts extends React.Component {
 			callback
 		});
 
-		this.instance.setState({ toasts: [ ...this.instance.state.toasts, toast ] });
+		this.instance.setState({ toasts: [...this.instance.state.toasts, toast] });
 		return toast;
 	}
-	
+
 	get horizontalStyle() {
-		return "Center";
-		
+		return "Left";
+
 		// switch (Settings.props.notifications.toasts.positionX) {
 		// 	case 0:
 		// 		return "Left";
@@ -92,10 +92,10 @@ export default class Toasts extends React.Component {
 		// 		return "Right";
 		// }
 	}
-	
+
 	get verticalStyle() {
 		return "Bottom";
-		
+
 		// switch (Settings.props.notifications.toasts.positionY) {
 		// 	case 0:
 		// 		return "Top";
@@ -110,8 +110,8 @@ export default class Toasts extends React.Component {
 				<div className={joinClassNames("ClearButton", [!!this.state.toasts?.length, "Visible"])} onClick={() => this.setState({ toasts: [] })}>
 					<u>Close all</u>
 				</div>
-				
-				{ this.state.toasts }
+
+				{this.state.toasts}
 			</div>
 		);
 	}