\n
\n \n )\n}\n\n","import RoomModel2 from './RoomModel2';\nimport TypistModel from './TypistModel';\nimport LoadingSplash from './components/LoadingSplash';\n\nimport * as THREE from 'three'\nimport React, { Suspense } from 'react';\nimport { Canvas, useFrame } from '@react-three/fiber';\nimport { Stats } from '@react-three/drei';\n\nfunction CameraMovement(props) {\n\n useFrame((state) => {\n\n const step = 0.1;\n const cameraDetails = {};\n\n let positionNumber = props.position;\n if (props.level === 1) positionNumber = 0;\n if (props.level === 2) positionNumber = 1;\n if (props.level === 3) positionNumber = 2;\n\n //Let the camera change from default if flow effect playing.\n if (props.position === 3) positionNumber = 3;\n\n switch (positionNumber) {\n case 0: //Default, looks a bit weird with the door.\n cameraDetails[\"position\"] = new THREE.Vector3(3, 2, -1);\n cameraDetails[\"fov\"] = 30;\n break;\n case 1: //Close up for starwall flow effect. No door visible.\n cameraDetails[\"position\"] = new THREE.Vector3(2, 2, -0.5);\n cameraDetails[\"fov\"] = 25;\n break;\n case 2: //Looking down, surveillance style\n cameraDetails[\"position\"] = new THREE.Vector3(3.0, 2.7, 1);\n cameraDetails[\"fov\"] = 17;\n break;\n case 3: //Close up for starwall flow effect. No door visible.\n cameraDetails[\"position\"] = new THREE.Vector3(2, 2, -0.5);\n cameraDetails[\"fov\"] = 25;\n break;\n default:\n cameraDetails[\"position\"] = new THREE.Vector3(1.4, 1.9, -0.1);\n cameraDetails[\"fov\"] = 30;\n break;\n }\n\n state.camera.fov = THREE.MathUtils.lerp(state.camera.fov, cameraDetails.fov, step);\n state.camera.position.lerp(cameraDetails.position, step);\n state.camera.lookAt(-1.7, 1.6, -3.1);\n state.camera.updateProjectionMatrix();\n\n });\n\n return null;\n}\n\nexport default function Scene(props) {\n\n const lightmodeLighting = <>\n \n
\n LOADING...
\n{roundedProgress}% loaded
\n\n
\n );\n }\n\n}\n\nexport default Introduction;\n\n","import React from 'react';\nimport Draggable from 'react-draggable';\nimport { VscChromeClose, VscArrowRight, VscChromeMaximize, VscChromeMinimize } from 'react-icons/vsc';\nimport { GrAlert } from 'react-icons/gr';\n\nclass Window extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n minimised: false,\n }\n\n this.toggleMinimise = this.toggleMinimise.bind(this);\n }\n\n toggleMinimise(){\n this.setState( state => ({\n minimised: !state.minimised,\n }));\n }\n\n render() {\n\n let windowClasses = \"window \";\n\n if ( this.props.alert ) {\n switch (this.props.level) {\n case 1:\n windowClasses += \"alert alert--light\";\n break;\n case 2:\n windowClasses += \"alert alert--dark\";\n break;\n case 3:\n windowClasses += \"alert alert--glitch\";\n break;\n default:\n }\n } else {\n \n switch (this.props.level) {\n case 1:\n windowClasses += \"window--light \";\n break;\n case 2:\n windowClasses += \"window--dark \";\n break;\n case 3:\n windowClasses += \"window--glitch \";\n break;\n default:\n }\n \n }\n\n windowClasses += this.props.windowClass;\n\n return (\n \n
\n YOU-ARE.ONLINE
\nDesktop Edition
\n\n Please set your volume to a low level.\n
\n \n\n
\n \n\n { this.props.alert ?\n
\n \n\n { (this.state.minimised && !this.props.notMinimisable) ? null :\n \n {this.props.windowTitle}\n
\n :\n \n {this.props.windowTitle}\n
\n }\n\n { this.props.notMinimisable ? null :\n \n { this.state.minimised ? \n : }\n
\n }\n\n { this.props.noExitButton ? null :\n \n \n
\n }\n \n {this.props.children}\n
\n }\n {levelTitle}
\n {levelSubtitle}
\n \n
\n \n
\n {this.props.experience} Experience
\n {experienceRequired} to Progress
\n\n { showLevelUpButton ? \n \n \n
\n : null}\n \n {listItems}\n
\n {this.state.encouragementMessage}
\n\n { this.state.startedPlaying ? null :\n
\n \n
}\n\n CLICK HERE!
\n\n\n { (this.state.playlistIndex !== 0 && this.state.playlistIndex !== 5) ? \n
\n \n
: null}\n { (this.state.playlistIndex !== 0 && this.state.playlistIndex !== 5) ? \n \n
: null}\n\n \n {playlistShowMessage}\n
\n \n {playlistItems}\n
\n : null }\n\n {number}
\n );\n\n return (\n \n {lotteryDivs}\n
\n );\n }\n\n toggleGeneralNotifications(event) {\n\n if (this.state.notifications.general > 0){\n const boundingRectangle = event.currentTarget.getBoundingClientRect();\n const xOffset = -20 + Math.random() * 40;\n const effectSpawnPosition = {x: boundingRectangle.x + xOffset, y: boundingRectangle.y - 20}\n this.props.addExperience(this.state.notifications.general, effectSpawnPosition);\n }\n\n if (this.state.notificationTab !== \"general\"){\n this.setState(state => ({\n socialCapital: {\n influence: state.socialCapital.influence + state.notifications.general,\n demands: state.socialCapital.demands,\n adoration: state.socialCapital.adoration,\n watchers: state.socialCapital.watchers\n },\n notifications: {\n general: 0,\n messages: state.notifications.messages,\n followers: state.notifications.followers,\n hearts: state.notifications.hearts,\n },\n notificationTab: \"general\"\n }))\n } else {\n this.setState({\n notificationTab: \"null\"\n })\n }\n\n }\n\n toggleMessageNotifications(event) {\n\n if (this.state.notifications.messages > 0){\n const boundingRectangle = event.currentTarget.getBoundingClientRect();\n const xOffset = -20 + Math.random() * 40;\n const effectSpawnPosition = {x: boundingRectangle.x + xOffset, y: boundingRectangle.y - 20}\n this.props.addExperience(this.state.notifications.messages * 2, effectSpawnPosition);\n }\n\n if (this.state.notificationTab !== \"messages\"){\n this.setState(state => ({\n socialCapital: {\n influence: state.socialCapital.influence,\n demands: state.socialCapital.demands + state.notifications.messages,\n adoration: state.socialCapital.adoration,\n watchers: state.socialCapital.watchers\n },\n notifications: {\n general: state.notifications.general,\n messages: 0,\n followers: state.notifications.followers,\n hearts: state.notifications.hearts,\n },\n notificationTab: \"messages\"\n }))\n } else {\n this.setState({\n notificationTab: \"null\"\n })\n }\n\n }\n\n toggleHeartNotifications(event) {\n\n if (this.state.notifications.hearts > 0){\n const boundingRectangle = event.currentTarget.getBoundingClientRect();\n const xOffset = -20 + Math.random() * 40;\n const effectSpawnPosition = {x: boundingRectangle.x + xOffset, y: boundingRectangle.y - 20}\n this.props.addExperience(this.state.notifications.hearts, effectSpawnPosition);\n }\n\n if (this.state.notificationTab !== \"hearts\"){\n this.setState(state => ({\n socialCapital: {\n influence: state.socialCapital.influence,\n demands: state.socialCapital.demands,\n adoration: state.socialCapital.adoration + state.notifications.hearts,\n watchers: state.socialCapital.watchers\n },\n notifications: {\n general: state.notifications.general,\n messages: state.notifications.messages,\n followers: state.notifications.followers,\n hearts: 0,\n },\n notificationTab: \"hearts\"\n }))\n } else {\n this.setState({\n notificationTab: \"null\"\n })\n }\n\n }\n\n toggleFollowerNotifications(event) {\n\n if (this.state.notifications.followers > 0){\n const boundingRectangle = event.currentTarget.getBoundingClientRect();\n const xOffset = -20 + Math.random() * 40;\n const effectSpawnPosition = {x: boundingRectangle.x + xOffset, y: boundingRectangle.y - 20}\n this.props.addExperience(this.state.notifications.followers, effectSpawnPosition);\n }\n\n\n if (this.state.notificationTab !== \"followers\"){\n this.setState(state => ({\n socialCapital: {\n influence: state.socialCapital.influence,\n demands: state.socialCapital.demands,\n adoration: state.socialCapital.adoration,\n watchers: state.socialCapital.watchers + state.notifications.followers\n },\n notifications: {\n general: state.notifications.general,\n messages: state.notifications.messages,\n followers: 0,\n hearts: state.notifications.hearts,\n },\n notificationTab: \"followers\"\n }))\n } else {\n this.setState({\n notificationTab: \"null\"\n })\n }\n\n }\n\n render() {\n\n const textboxDefaultMessage = this.state.showHint ? Type here...
: <>;\n\n const MessageNotification = this.state.notifications.messages > 0 ?\n\n {this.state.notifications.messages}\n {this.getLotteryNumbers(this.state.notifications.messages)}\n
: <>\n\n const GeneralNotification = this.state.notifications.general > 0 ?\n \n {this.state.notifications.general}\n {this.getLotteryNumbers(this.state.notifications.general)}\n
: <>\n\n const HeartNotification = this.state.notifications.hearts > 0 ?\n \n {this.state.notifications.hearts}\n {this.getLotteryNumbers(this.state.notifications.hearts)}\n
: <>\n\n const FollowerNotification = this.state.notifications.followers > 0 ?\n \n {this.state.notifications.followers}\n {this.getLotteryNumbers(this.state.notifications.followers)}\n
: <>\n\n let notificationTab;\n\n switch (this.state.notificationTab) {\n case \"general\":\n notificationTab = \n
\n break;\n case \"messages\":\n notificationTab = You have {this.state.socialCapital.influence} influence.
\n\n
\n break;\n case \"hearts\":\n notificationTab = {this.state.socialCapital.demands} accounts want your personal, private attention.
\n\n
\n break;\n case \"followers\":\n notificationTab = You are worth {this.state.socialCapital.adoration} hearts.
\n\n
\n break;\n default:\n notificationTab = <>;\n }\n\n let classes = \"social \";\n\n switch (this.props.level) {\n case 1:\n classes += \"social--light \";\n break;\n case 2:\n classes += \"social--dark \";\n break;\n case 3:\n classes += \"social--glitch \";\n break;\n default:\n }\n\n let windowTitle = \"Social Media\";\n if (this.props.level === 2) windowTitle = \"Content Creator\";\n if (this.props.level === 3) windowTitle = \"Net-Spammer.exe\";\n\n return (\n {this.state.socialCapital.watchers} observers are watching you.
\n\n Submit content!\n Press enter to submit faster!\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n { this.state.refreshReady ? <>Refresh Notifications : <>Refresh Notifications}\n
\n {notificationTab}\n \n
\n )\n}\n\nclass Livestream extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n streamerImage: 0,\n chatMessages: [],\n viewers: 12,\n hearts: 1,\n }\n\n this.endOfMessages = React.createRef();\n\n this.attemptToClose = this.attemptToClose.bind(this);\n this.postHeartMessage = this.postHeartMessage.bind(this);\n }\n\n generateMessage(){\n const length = Math.ceil(Math.random() * 5);\n let message = \"\";\n\n for (let i = 0; i < length; i++){\n if (this.props.level === 2) {\n message += messages[Math.floor(Math.random()*messages.length)];\n } else {\n message += suggestions[Math.floor(Math.random()*suggestions.length)];\n }\n }\n\n return message;\n }\n\n componentDidMount(){\n\n this.streamerImageInterval = setInterval(() => {\n this.setState( state => ({\n streamerImage: ( state.streamerImage + 1 ) % 5,\n }))\n }, 5000);\n\n this.viewerInterval = setInterval(() => {\n this.setState( state => ({\n viewers: ( state.viewers + Math.round(Math.random() * 5 - 2) ),\n }))\n }, 2000);\n\n this.chatInterval = setInterval(() => {\n if (Math.random() > 0.8) {\n let newMessage = { \n username: usernames[Math.floor(Math.random()*usernames.length)],\n message: this.generateMessage()\n }\n\n this.setState(state => ({\n chatMessages: [...state.chatMessages, newMessage],\n hearts: state.hearts + newMessage.message.length / 2,\n }))\n\n if (this.state.chatMessages.length > 20){\n const reducedMessages = [...this.state.chatMessages];\n reducedMessages.splice(-10);\n this.setState({\n chatMessages: reducedMessages\n })\n }\n\n }\n }, 500);\n\n }\n\n componentWillUnmount(){\n clearInterval(this.streamerImageInterval);\n clearInterval(this.viewerInterval);\n clearInterval(this.chatInterval);\n }\n\n postHeartMessage(event) {\n\n let messageLength = Math.ceil(Math.random() * 4);\n let message = \"\";\n\n for (let i = 0; i < messageLength; i++){\n message += event.target.innerText;\n }\n\n let newMessage = { \n username: \"You\",\n message: message,\n }\n this.setState(state => ({\n chatMessages: [...state.chatMessages, newMessage]\n }))\n\n this.setState( state => ({\n hearts: ( state.hearts + messageLength ),\n }))\n\n const boundingRectangle = event.currentTarget.getBoundingClientRect();\n const effectSpawnPosition = {x: boundingRectangle.x + 5, y: boundingRectangle.y - 15}\n this.props.addExperience(messageLength * this.props.level, effectSpawnPosition);\n\n const timeOutTime = 2000 + Math.floor(Math.random() * 5000);\n event.target.classList.add(\"livestream__chat-button--deactivated\");\n setTimeout(()=>{\n event.target.classList.remove(\"livestream__chat-button--deactivated\");\n }, timeOutTime)\n }\n\n attemptToClose(){\n\n this.props.callAlert({\n title: \"Don't leave me...\",\n message: \"Stay with the crowd, we're all watching.\",\n dismissal: \"âĪïļ\",\n });\n\n }\n\n scrollToBottom = () => {\n if (this.endOfMessages != null)\n this.endOfMessages.scrollIntoView(); //{ behavior: \"smooth\" }\n }\n \n componentDidUpdate() {\n this.scrollToBottom();\n }\n\n render() {\n\n let classes = \"livestream \";\n\n switch (this.props.level) {\n case 1:\n classes += \"livestream--light \";\n break;\n case 2:\n classes += \"livestream--dark \";\n break;\n case 3:\n classes += \"livestream--glitch \";\n break;\n default:\n }\n\n const chatMessages = this.state.chatMessages.map((message, index) => \n {props.author}
\n :
\n {props.message}
\n {option}
)\n if (this.props.level === 3){\n windowTitle =\"Lovestreamer.exe\";\n chatOptions = suggestions.map((option, index) => {option}
)\n }\n\n return (\n \n 
\n
\n {this.state.viewers + \" watchers\"}
\n LIVE
\n {this.state.hearts}
\n \n {chatMessages}\n
\n { this.endOfMessages = div; }}>
\n \n {chatOptions}\n
\n \n \n \n
\n );\n } else {\n return null;\n }\n }\n\n}\n\nexport default Alert;","import React from 'react';\n\nclass TextParticleSystem extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n particles: [],\n }\n\n }\n\n spawnExperience(amount, effectSpawnPosition) {\n\n const element = document.createElement(\"div\");\n element.classList.add(\"text-particle-system__particle\");\n let message = \"\";\n\n switch (this.props.level) {\n case 1:\n element.setAttribute(\"light\", \"\");\n break;\n case 2:\n element.setAttribute(\"dark\", \"\");\n break;\n case 3:\n element.setAttribute(\"glitch\", \"\");\n break;\n default:\n }\n\n if (amount > 0){\n element.classList.add(\"text-particle-system__particle--positive\");\n message += \"+\" + amount + \" EXP\";\n }\n if (amount === 0) {\n element.classList.add(\"text-particle-system__particle--neutral\");\n message += amount + \" EXP\";\n }\n if (amount < 0) {\n element.classList.add(\"text-particle-system__particle--negative\");\n message += amount + \" EXP\";\n }\n\n element.style.top = effectSpawnPosition.y + \"px\";\n element.style.left = effectSpawnPosition.x + \"px\";\n\n const content = document.createTextNode(message);\n \n element.appendChild(content);\n const container = document.getElementById(\"TextParticleSystem\");\n container.appendChild(element)\n\n setTimeout(() => {\n element.remove();\n }, 2000)\n }\n\n render() {\n return (\n \n );\n }\n\n\n}\n\nexport default TextParticleSystem;","import React from 'react';\n\nclass MobileIntroduction extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.dismissAlert = this.dismissAlert.bind(this);\n }\n\n dismissAlert(){\n this.props.dismissAlert();\n }\n\n render() {\n return (\n {this.props.alert.message}
\n \n\n
\n );\n }\n\n}\n\nexport default MobileIntroduction;\n\n","import React from 'react';\nimport Scene from './Scene';\n\nimport Introduction from './components/Introduction';\nimport Progress from './components/Progress';\nimport TodoList from './components/TodoList';\nimport JukeBox from './components/JukeBox';\nimport Social from './components/Social';\nimport Livestream from './components/Livestream';\nimport Alert from './components/Alert';\nimport TextParticleSystem from './components/TextParticleSystem';\nimport MobileIntroduction from './components/MobileIntroduction';\n\nimport './styles/main.scss';\n\nconst EXPERIENCE_REQUIREMENTS = [ 0, 120, 240, 360 ];\n\nclass App extends React.Component {\n constructor(props){\n super(props);\n\n this.state = {\n //visual effect state variables\n cameraPosition: 0,\n starWall: false,\n starSpeed: 0.5,\n voidLevel: 1,\n dehumanLevel: 0,\n\n showIntroduction: true,\n experience: 0,\n level: 1,\n alert: { \n title: \"Alert!\",\n message: \"Alert message!\",\n dismissal: \"Dismiss\",\n display: false,\n }\n }\n\n this.textParticleSystem = React.createRef();\n\n this.dismissAlert = this.dismissAlert.bind(this);\n this.displayNewAlert = this.displayNewAlert.bind(this);\n this.addExperience = this.addExperience.bind(this);\n this.toggleEffect = this.toggleEffect.bind(this);\n this.hideIntroduction = this.hideIntroduction.bind(this);\n this.setVisualEffect = this.setVisualEffect.bind(this);\n this.levelUp = this.levelUp.bind(this);\n }\n\n toggleEffect(){\n this.setState(state => ({\n experience: state.experience + 20\n }));\n }\n\n setVisualEffect(key, value){\n this.setState({ [key]: value });\n }\n\n hideIntroduction(){\n this.setState({\n showIntroduction: false,\n })\n }\n\n dismissAlert(){\n this.setState({\n alert: {\n display: false\n }\n })\n }\n\n levelUp(){\n if (this.state.experience >= EXPERIENCE_REQUIREMENTS[this.state.level]) {\n this.setState(state => ({ \n experience: 0, \n level: state.level + 1, \n voidLevel: state.voidLevel + 1 \n }));\n } \n }\n\n displayNewAlert(alertObject){\n this.setState({\n alert: {\n title: alertObject.title,\n message: alertObject.message,\n dismissal: alertObject.dismissal,\n display: true\n }\n })\n }\n\n addExperience(amount, effectSpawnPosition){\n if (effectSpawnPosition === undefined) return;\n\n this.setState(state => ({ experience: state.experience + amount }));\n \n this.textParticleSystem.current.spawnExperience(amount, effectSpawnPosition);\n }\n\n render(){\n\n const visualEffects = {\n starWall: this.state.starWall,\n cameraPosition: this.state.cameraPosition,\n starSpeed: this.state.starSpeed,\n voidLevel: this.state.voidLevel,\n dehumanLevel: this.state.dehumanLevel,\n }\n\n if (window.innerWidth < 800){\n return (<>\n \n
\n YOU ARE ONLINE
\nMobile Edition
\n\n This website sadly doesn't support mobile devices. \n Please visit it on a desktop computer, or...\n
\n Read more about the piece.\n