From 598cc32007acb521f58bd5fe7e770165a48cfec2 Mon Sep 17 00:00:00 2001 From: Maaz Syed Adeeb Date: Mon, 15 Mar 2021 12:56:39 -0700 Subject: [PATCH 1/2] feat: Generalize directions for the submarine --- src/components/submarine.js | 85 +++++++++++++++++-------------------- 1 file changed, 39 insertions(+), 46 deletions(-) diff --git a/src/components/submarine.js b/src/components/submarine.js index 030562e..15a7e74 100644 --- a/src/components/submarine.js +++ b/src/components/submarine.js @@ -1,76 +1,69 @@ /** @jsx h */ -import { h } from 'preact'; -import { useEffect, useRef, useState } from 'preact/hooks'; -import { useTwitchChat } from '@socket-studio/preact'; +import { h } from "preact"; +import { useEffect, useRef, useState } from "preact/hooks"; +import { useTwitchChat } from "@socket-studio/preact"; + +// (x, y) directions for various commands +const directions = { + up: [0, -1], + down: [0, 1], + left: [-1, 0], + right: [1, 0], +}; export function Submarine() { - const [image, setImage] = useState('submarine'); + const [image, setImage] = useState("submarine"); const { currentCommand: command } = useTwitchChat( - process.env.TOAST_TWITCH_CHANNEL, + process.env.TOAST_TWITCH_CHANNEL ); const ref = useRef(); useEffect(() => { - if (command && command.command === 'pet') { + if (command && command.command === "pet") { console.log({ command }); - const pets = ['submarine', 'dumpster-fire']; + const pets = ["submarine", "dumpster-fire"]; const newPet = pets.includes(command.args[0]) ? command.args[0] - : 'submarine'; + : "submarine"; setImage(newPet); return; } - if ( - !command || - !['up', 'down', 'left', 'right'].includes(command.command) - ) { + if (!command || !Object.keys(directions).includes(command.command)) { return; } + const currentCommand = command.command; const wrapper = ref.current; - const submarine = wrapper.querySelector('.submarine'); + const submarine = wrapper.querySelector(".submarine"); const styles = window.getComputedStyle(submarine); const MOVEMENT_DISTANCE = 30; - switch (command.command) { - case 'left': - const currentLeft = parseInt(styles.getPropertyValue('left')); // => '0px' -> 0 - const newLeft = - currentLeft > MOVEMENT_DISTANCE ? currentLeft - MOVEMENT_DISTANCE : 0; - submarine.style.left = `${newLeft}px`; - submarine.style.transform = 'scaleX(1)'; - return; - - case 'right': - const current = parseInt(styles.getPropertyValue('left')); - const maxLeft = wrapper.getBoundingClientRect().width - 100; - const newLeft2 = - current < maxLeft - MOVEMENT_DISTANCE - ? current + MOVEMENT_DISTANCE - : maxLeft; - - submarine.style.left = `${newLeft2}px`; - submarine.style.transform = 'scaleX(-1)'; - return; + const wrapperRect = wrapper.getBoundingClientRect(); + const maxLeft = wrapperRect.width - 100; + const maxTop = wrapperRect.height - 30; - case 'up': - case 'down': - const direction = command.command === 'up' ? -1 : 1; - const distance = MOVEMENT_DISTANCE * direction; + const currentLeft = parseInt(styles.getPropertyValue("left"), 10); + const currentTop = parseInt(styles.getPropertyValue("top"), 10); - const currentTop = parseInt(styles.getPropertyValue('top')); - const maxTop = wrapper.getBoundingClientRect().height - 30; + const nextLeft = + currentLeft + directions[currentCommand][0] * MOVEMENT_DISTANCE; + const nextTop = + currentTop + directions[currentCommand][1] * MOVEMENT_DISTANCE; - let newTop = currentTop; - if (currentTop + distance < maxTop && currentTop + distance > 0) { - newTop = currentTop + distance; - } - - submarine.style.top = `${newTop}px`; - return; + if (nextLeft !== currentLeft && nextLeft > 0 && nextLeft < maxLeft) { + submarine.style.left = `${nextLeft}px`; + submarine.style.transform = `scaleX(${ + -1 * directions[currentCommand][0] + })`; + } + if (nextTop !== currentTop && nextTop > 0 && nextTop < maxTop) { + submarine.style.top = `${nextTop}px`; + submarine.style.transform = `rotate(${ + -90 * directions[currentCommand][1] + }deg)`; } }, [command]); From 3ef89a21439cfe21ef3b70bd2ea3197bdc1ea55d Mon Sep 17 00:00:00 2001 From: Maaz Syed Adeeb Date: Mon, 15 Mar 2021 13:00:09 -0700 Subject: [PATCH 2/2] chore: Try same prettier config --- src/components/submarine.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/submarine.js b/src/components/submarine.js index 15a7e74..54812f2 100644 --- a/src/components/submarine.js +++ b/src/components/submarine.js @@ -1,7 +1,7 @@ /** @jsx h */ -import { h } from "preact"; -import { useEffect, useRef, useState } from "preact/hooks"; -import { useTwitchChat } from "@socket-studio/preact"; +import { h } from 'preact'; +import { useEffect, useRef, useState } from 'preact/hooks'; +import { useTwitchChat } from '@socket-studio/preact'; // (x, y) directions for various commands const directions = { @@ -12,19 +12,19 @@ const directions = { }; export function Submarine() { - const [image, setImage] = useState("submarine"); + const [image, setImage] = useState('submarine'); const { currentCommand: command } = useTwitchChat( - process.env.TOAST_TWITCH_CHANNEL + process.env.TOAST_TWITCH_CHANNEL, ); const ref = useRef(); useEffect(() => { - if (command && command.command === "pet") { + if (command && command.command === 'pet') { console.log({ command }); - const pets = ["submarine", "dumpster-fire"]; + const pets = ['submarine', 'dumpster-fire']; const newPet = pets.includes(command.args[0]) ? command.args[0] - : "submarine"; + : 'submarine'; setImage(newPet); return; @@ -36,7 +36,7 @@ export function Submarine() { const currentCommand = command.command; const wrapper = ref.current; - const submarine = wrapper.querySelector(".submarine"); + const submarine = wrapper.querySelector('.submarine'); const styles = window.getComputedStyle(submarine); const MOVEMENT_DISTANCE = 30; @@ -45,8 +45,8 @@ export function Submarine() { const maxLeft = wrapperRect.width - 100; const maxTop = wrapperRect.height - 30; - const currentLeft = parseInt(styles.getPropertyValue("left"), 10); - const currentTop = parseInt(styles.getPropertyValue("top"), 10); + const currentLeft = parseInt(styles.getPropertyValue('left'), 10); + const currentTop = parseInt(styles.getPropertyValue('top'), 10); const nextLeft = currentLeft + directions[currentCommand][0] * MOVEMENT_DISTANCE;