From 66bed0e5939c88dd0bd2f421c6ca5840fcce0f1e Mon Sep 17 00:00:00 2001 From: yaqubroli Date: Thu, 11 May 2023 17:19:38 -0700 Subject: [PATCH] !! --- public/index.css | 44 ++++++++++++++++++++++++++++++++++++++++++-- src/App.js | 13 +++++++++++-- src/index_old.js | 448 -------------------------------------------------------------------------------- src/stringTable.js | 7 +++++++ public/mp3/jiafei.mp3 | 0 src/components/MainDiv.js | 34 +++++++++++----------------------- src/components/MainUI.js | 44 ++++++++++++++++++++++++++++++++++++++++++++ src/components/MouseFollower.js | 10 +++++++--- src/components/WhitelistUI.js | 34 ++++++++++++++++++++++++++++++++++ 9 files changed, 154 insertions(+), 480 deletions(-) diff --git a/public/index.css b/public/index.css index 5ed3145..3e46ac6 100644 --- a/public/index.css +++ a/public/index.css @@ -131,15 +131,26 @@ padding: 20px; } +.MainUI { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} + .MainDiv h1 { text-align: center; flex: none; - animation: sigmoid-motion 2s linear infinite; max-width: 8em; } .MainDiv-2 h1 { font-size: medium; +} + +.MainDiv-tendencies h1 { + animation: sigmoid-motion 2s linear infinite; } @keyframes sigmoid-motion { @@ -262,7 +273,7 @@ border-radius: 10px; color: white; border: 1px solid black; - padding: 10px; + padding: 2px; margin: 10px; /* center text */ text-align: center; @@ -272,7 +283,6 @@ /* no weird marings or paddings */ margin: 0; padding: 0; - padding-bottom: 10px; text-transform: uppercase; } @@ -281,19 +291,23 @@ list-style-type: none; /* center text */ text-align: center; + margin: none; + margin-bottom: 2px; + font-size: small; } .SettingsPane button { display: inline-block; height: 2em; - margin-bottom: 0.5em; /* light grey background, black thin border, rounded corners */ background-color: #333; + font-size: small; } .MouseFollower { position: absolute; z-index: 20; + pointer-events: none; } .Gatito { @@ -304,6 +318,7 @@ z-index: 10; min-width: 20%; max-width: 30%; + pointer-events: none; } .Gatito-tendencies { @@ -390,4 +405,25 @@ width: 20%; /* snap to height of div */ height: 3em; +} + +.WhitelistUI label { + display: block; + text-align: center; +} + +.WhitelistUI input { + margin-left: 5px; +} + +#with-sta-email { + padding: 5px; + margin: 10px; + border: 1px dotted gray; +} + +#without-sta-email { + padding: 5px; + margin: 10px; + border: 1px dotted gray; }diff --git a/src/App.js b/src/App.js index a0d5188..5820c9a 100644 --- a/src/App.js +++ a/src/App.js @@ -30,6 +30,7 @@ const [mode, setMode] = useState(0); const [characteristics, setCharacteristics] = useState(true); const [tendencies, setTendencies] = useState(true); + const [joinWhitelist, setJoinWhitelist] = useState(false); const mousePosition = useMousePosition(); const windowSize = useWindowSize(); @@ -50,6 +51,12 @@ }> : null} + {mode === 2 ? + : null} - + /> : null} - - -); - -// Universal function for getting classnames; hack but who cares - -const getClassName = (elementName, mode, characteristics, tendencies) => { - let className = elementName + " " + elementName + "-" + mode; - if (characteristics) { - className += " " + elementName + "-characteristics"; - } - if (tendencies) { - className += " " + elementName + "-tendencies"; - } - return className; -} - -// Custom hook for getting mouse position - -const useMousePosition = () => { - const [ - mousePosition, - setMousePosition - ] = React.useState({ x: null, y: null }); - - React.useEffect(() => { - const updateMousePosition = ev => { - setMousePosition({ x: ev.clientX, y: ev.clientY }); - }; - - window.addEventListener('mousemove', updateMousePosition); - - return () => { - window.removeEventListener('mousemove', updateMousePosition); - }; - }, []); - - return mousePosition; -}; - -const useWindowSize = () => { - const [ - windowSize, - setWindowSize - ] = React.useState({ width: window.innerWidth, height: window.innerHeight }); - - React.useEffect(() => { - const updateWindowSize = () => { - setWindowSize({ width: window.innerWidth, height: window.innerHeight }); - }; - - window.addEventListener('resize', updateWindowSize); - - return () => { - window.removeEventListener('resize', updateWindowSize); - }; - }, []); - - return windowSize; -}; - -const useAudio = url => { - const [audio] = useState(new Audio(url)); - const [playing, setPlaying] = useState(false); - - const setUrl = url => { - audio.src = url; - }; - - useEffect(() => { - playing ? audio.play() : audio.pause(); - }, - [playing] - ); - - useEffect(() => { - audio.addEventListener('ended', () => setPlaying(false)); - return () => { - audio.removeEventListener('ended', () => setPlaying(false)); - }; - }, []); - - return [playing, setPlaying, setUrl]; -}; - -function App() { - - // State variables glossary: - // mode: the current mode - // -- 0: swiss bingus mode - // -- 1: swag floppa mode - // -- 2: maoist sploingus mode - // characteristics: music enable/disable - // -- true: music enabled - // -- false: music disabled - // tendencies: tendencies enable/disable - // -- true: tendencies enabled - // -- false: tendencies disabled - - // shitty async function that waits 50ms before returning useState(0); - // this is to prevent the audio from playing before the user clicks - // the button to enable it - - const [mode, setMode] = useState(0); - const [characteristics, setCharacteristics] = useState(true); - const [tendencies, setTendencies] = useState(true); - - const mousePosition = useMousePosition(); - const windowSize = useWindowSize(); - - const vineboom = new Audio("/mp3/vineboom.mp3"); - - return ( -
- {mode === 0 ? - : null} - {mode === 1 ? - : null} - - - - - - -
- ); -} - -function ClipboardCopy({ copyText }) { - // stole this from some guy - const [isCopied, setIsCopied] = useState(false); - - // This is the function we wrote earlier - async function copyTextToClipboard(text) { - if ('clipboard' in navigator) { - return await navigator.clipboard.writeText(text); - } else { - return document.execCommand('copy', true, text); - } - } - - // onClick handler function for the copy button - const handleCopyClick = () => { - // Asynchronously call copyTextToClipboard - copyTextToClipboard(copyText) - .then(() => { - // If successful, update the isCopied state value - setIsCopied(true); - setTimeout(() => { - setIsCopied(false); - }, 1500); - }) - .catch((err) => { - console.log(err); - }); - } - - return ( -
- - -
- ); -} - -function BGElem({mode, characteristics, tendencies, mousePosition, windowSize}) { - // This is a background element that shifts with the mouse position - return ( -
- ); -} - - -function BGOverlay({mode, characteristics, tendencies, mousePosition, windowSize, bottomness}) { - return( -
- ); -} - -// create a react element that changes text on click once -function PrankButton({characteristics, audio}) { - const [clicked, setClicked] = useState(false); - useEffect(() => { - if (clicked && characteristics) { - audio.play(); - } - }, [clicked]); - - return ( - setClicked(true)} - style={{ - lineHeight: clicked ? "3em" : "1em", - }} - > - {clicked ? -
Get pranked
- :
Buy ranks!
Pay with Ethereum, Dogecoin, Gruncible, Quelchtube
} - - ); -} - -function SettingsPane({mode, characteristics, tendencies, setMode, setCharacteristics, setTendencies, audio}) { - - // handlers for the settings pane - // handeModeChange takes mode, increments by 1, and takes the mod 3 - const handleModeChange = (event) => { - setMode((mode + 1) % 3); - if (characteristics) { - audio.play(); - } - } - - const handleCharacteristicsChange = (event) => { - setCharacteristics(!characteristics); - if (characteristics) { - audio.play(); - } - } - const handleTendenciesChange = (event) => { - setTendencies(!tendencies); - if (characteristics) { - audio.play(); - } - } - return ( -
    -

    Settings

    -
  • - Mode: -
    • -
  • - Characteristics: -
    • -
  • - Tendencies: -
    • -
- ) -} - -function MouseFollower({mode, characteristics, tendencies, mousePosition, windowSize}) { - return ( - mode === 2 && tendencies ? - : - ); -} - -function TextMouseSpooler({frequentSaying, lessFrequentSaying, mousePosition}) { - // every time the mouse moves a certain amount, increment the counter - // if the counter is greater than a certain amount, change the text - // if the counter is greater than a certain amount, reset the counter - const [mousePositionSinceLastSignificantMove, setMousePositionSinceLastSignificantMove] = useState({x: 0, y: 0}); - - // create an empty array - const [textObjectArray, setTextObjectArray] = useState([]); - - // use pythagorean theorem to determine the distance between current mouse point and last significant mouse point. if the distance is greater than 20, increment the counter - - useEffect(() => { - const distance = Math.sqrt(Math.pow(mousePosition.x - mousePositionSinceLastSignificantMove.x, 2) + Math.pow(mousePosition.y - mousePositionSinceLastSignificantMove.y, 2)); - if (distance > 20) { - // push a new text object to the array, with the last significant mouse position and either the frequent or less frequent saying depending on random value - setTextObjectArray(textObjectArray.concat({ - position: mousePositionSinceLastSignificantMove, - saying: Math.random() > 0.5 ? frequentSaying : lessFrequentSaying, - timeAtCreation: Date.now(), - })); - setMousePositionSinceLastSignificantMove(mousePosition); - // remove all elements from the array older than 5 seconds. don't use filter for this, use a for loop - // only run this for loop if time is divisible by 1000 (once per second) - if (Date.now() % 1000 === 0) { - for (let i = 0; i < textObjectArray.length; i++) { - if (Date.now() - textObjectArray[i].timeAtCreation > 5000) { - textObjectArray.splice(i, 1); - } - } - } - } - }, [mousePosition]); - - // return a counter - return ( -
- {/*map the array to spans, give their x and y position as the one stored in the array*/} - {textObjectArray.map((textObject, index) => { - return ( - - {textObject.saying} - - ); - })} -
- ); -} - -function MainDiv({mode, characteristics, tendencies, setMode, setCharacteristics, setTendencies, mousePosition, windowSize, audio}) { - return ( -
-
-

{ - mode === 0 ? "Swiss Town" : - mode === 1 ? "Sigma Town" : - mode === 2 ? "爱国华为官小分红习近平思想讨论组" - : "Error"} -

-
-

Server IP:

- - version 1.19.4, port 25565 - Join the whitelist - - - made on the island of patmos 6,600 years ago -
- ); -} - -function Gatito({ mode, tendencies }) { - return ( - - ); -} - -export default App; - - - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals();diff --git a/src/stringTable.js b/src/stringTable.js new file mode 100644 index 0000000..42345a9 100644 --- /dev/null +++ a/src/stringTable.js @@ -1,0 +1,7 @@ +let stringTable = { + server_name: "mc.7800.io", + server_version: "1.19.4", + server_port: "25565" +}; + +export default stringTable;diff --git a/public/mp3/jiafei.mp3 b/public/mp3/jiafei.mp3 new file mode 100644 index 0000000000000000000000000000000000000000..16afcb6073b749c5ad46c5450312db2d9e4e8ab7 100644 Binary files /dev/null and a/public/mp3/jiafei.mp3 differ diff --git a/src/components/MainDiv.js b/src/components/MainDiv.js index 44af896..7fb7b79 100644 --- a/src/components/MainDiv.js +++ a/src/components/MainDiv.js @@ -1,10 +1,15 @@ import React from 'react'; import ClipboardCopy from './ClipboardCopy'; import PrankButton from './PrankButton'; import SettingsPane from './SettingsPane'; import getClassName from '../utils/getClassName'; +import MainUI from './MainUI'; +import WhitelistUI from './WhitelistUI'; -function MainDiv({ mode, characteristics, tendencies, setMode, setCharacteristics, setTendencies, mousePosition, windowSize, audio }) { +function MainDiv({ mode, characteristics, tendencies, joinWhitelist, setMode, setCharacteristics, setTendencies, setJoinWhitelist, mousePosition, windowSize, audio }) { + + const [whitelistUI, setWhitelistUI] = React.useState(false); + return (
-
-

{ - mode === 0 ? "Swiss Town" : - mode === 1 ? "Sigma Town" : - mode === 2 ? "爱国华为官小分红习近平思想讨论组" - : "Error"} -

-
-

Server IP:

- - version 1.19.4, port 25565 - Join the whitelist - - : + - made on the island of patmos 6,600 years ago + /> }
); } diff --git a/src/components/MainUI.js b/src/components/MainUI.js new file mode 100644 index 0000000..500e00d 100644 --- /dev/null +++ a/src/components/MainUI.js @@ -1,0 +1,44 @@ +import React from 'react'; +import ClipboardCopy from './ClipboardCopy'; +import PrankButton from './PrankButton'; +import SettingsPane from './SettingsPane'; +import getClassName from '../utils/getClassName'; + +function MainUI({ mode, characteristics, tendencies, setMode, setCharacteristics, setTendencies, setWhitelistUI, mousePosition, windowSize, audio }) { + + return ( +
+

{ + mode === 0 ? "Swiss Town" : + mode === 1 ? "Sigma Town" : + mode === 2 ? "爱国华为官小分红习近平思想讨论组" + : "Error"} +

+

Server IP:

+ + version 1.19.4, port 25565 + setWhitelistUI(true)}>Join the whitelist + View the dynmap + + +
+ ); +} + +export default MainUI;diff --git a/src/components/MouseFollower.js b/src/components/MouseFollower.js index 099a093..7faa873 100644 --- a/src/components/MouseFollower.js +++ a/src/components/MouseFollower.js @@ -1,21 +1,25 @@ import React from 'react'; import TextMouseSpooler from './TextMouseSpooler'; import getClassName from '../utils/getClassName'; function MouseFollower({ mode, characteristics, tendencies, mousePosition, windowSize }) { return ( - mode === 2 && tendencies ? + mode === 2 ? : : mode == 0 ? + /> : mode == 1 ? : null ); } diff --git a/src/components/WhitelistUI.js b/src/components/WhitelistUI.js new file mode 100644 index 0000000..1a91752 100644 --- /dev/null +++ a/src/components/WhitelistUI.js @@ -1,0 +1,34 @@ +import React from "react"; +import getClassName from "../utils/getClassName"; + +function WhitelistUI() { + return ( +
+

Join the whitelist

+
+

If you have a St. Andrews email

+
+ + + + + + +
+
+
+

If you don't

+
+ + + + + + +
+
+
+ ); +} + +export default WhitelistUI;-- rgit 0.1.5