Develop preview

package.json

@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "formik": "^2.1.4",
     "lib-jitsi-meet": "^1.0.6",
     "react": "^16.10.2",
+    "react-collapsible": "^2.7.0",
     "react-device-detect": "^1.11.14",
     "react-dom": "^16.10.2",
     "react-draggable": "^4.2.0",

public/index.html

@@ -40,5 +40,11 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
     <script src='https://meet.jit.si/external_api.js'></script>
+    <script>
+      ((window.gitter = {}).chat = {}).options = {
+        room: 'interspace-chat/community'
+      };
+    </script>
+    <script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>
   </body>
 </html>

src/App.js

@@ -1,19 +1,28 @@
 import React from 'react';
+import { BrowserView, MobileView } from 'react-device-detect';
 import './App.css';
 import Space from './components/Space';
 import FloatingRoomWindow from './components/FloatingRoomWindow';
 import RootContextProvider from './contexts/RootContext';
+import HouseContext from './contexts/HouseContext';
 import SpaceContext from './contexts/SpaceContext';
+
+import Header from './components/Header';
 import Footer from './components/Footer';
 
 function App() {
 	return (
 		<div className='App'>
 			<RootContextProvider>
-				<SpaceContext>
-					<Space />
-					<Footer />
-				</SpaceContext>
+				<HouseContext>
+					<SpaceContext>
+						<BrowserView>
+							<Header />
+						</BrowserView>
+						<Space />
+						<Footer />
+					</SpaceContext>
+				</HouseContext>
 				<FloatingRoomWindow />
 			</RootContextProvider>
 		</div>

src/components/About.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import styled from 'styled-components';
+import Collapsible from 'react-collapsible';
+
+const AboutStyled = styled.nav`
+	text-align: left;
+	.Collapsible__trigger {
+		color: black;
+		background-color: #fde221;
+		cursor: pointer;
+		padding: 0.2rem;
+	}
+	.Collapsible__contentOuter {
+		max-width: 300px;
+
+		:hover {
+			.Collapsible__contentInner {
+				background-color: #fde221;
+				padding: 0.5rem;
+			}
+		}
+	}
+	.Collapsible__contentInner {
+		padding: 0.5rem;
+	}
+`;
+
+const StyledListItem = styled.li`
+	list-style-type: none;
+	color: #000000;
+	padding: 1rem;
+`;
+
+const About = () => {
+	return (
+		<AboutStyled>
+			<Collapsible trigger='Über/About'>
+				<p>Art used:</p>
+				<ul>
+					<StyledListItem>
+						"Beer Icon" made by{' '}
+						<a href='https://www.flaticon.com/free-icon/beer_410993?term=beer&page=1&position=47'>
+							Freepik -
+						</a>{' '}
+						file from <a href='https://www.flaticon.com'>www.flaticon.com</a>"
+					</StyledListItem>
+					<StyledListItem>
+						"Painting" made by Jan Steen - Title: "Revelry at an Inn" - file
+						from{' '}
+						<a href='https://commons.wikimedia.org/wiki/File:Jan_Steen_-_Revelry_at_an_Inn_-_WGA21761.jpg'>
+							Wiki Commons
+						</a>
+					</StyledListItem>
+				</ul>
+				<p>Tech used:</p>
+				<ul>
+					<StyledListItem>
+						Powered by{' '}
+						<a href='https://meet.jit.si'>
+							JitSi Open Source Video Conferencing
+						</a>
+					</StyledListItem>
+					<StyledListItem>
+						Made with 💝 by{' '}
+						<a href='https://github.com/geleeroyale'>geleeroyale</a>
+					</StyledListItem>
+				</ul>
+				<p>Privacy:</p>
+				<ul>
+					<StyledListItem>Private Server</StyledListItem>
+					<StyledListItem>Fully end to end encrypted</StyledListItem>
+					<StyledListItem>
+						Please don't write sensitive data into the chat.
+					</StyledListItem>
+					<StyledListItem>
+						Please adhere to a general code of conduct or risk banning.
+					</StyledListItem>
+				</ul>
+			</Collapsible>
+		</AboutStyled>
+	);
+};
+
+export default About;

src/components/FloatingRoomWindow.js

@@ -11,6 +11,8 @@ import Draggable from 'react-draggable';
 
 import { FloatingSpaceContext } from '../contexts/FloatingSpaceContext';
 import LoftRadioInstance from './integrations/LoftRadioInstance';
+import ChatInstance from './integrations/ChatInstance';
+import YoutubeInstance from './integrations/YoutubeInstance';
 import RTreesInstance from './integrations/RTreesInstance';
 import RoomInstance from './RoomInstance';
 import { RoomNames } from '../utils/constants';
@@ -105,6 +107,13 @@ function FloatingRoomWindow() {
 								height={height}></LoftRadioInstance>
 						)
 					});
+				} else if (currentSpace === 'chat') {
+					newFloatingRooms.push({
+						key: currentSpace,
+						element: (
+							<ChatInstance width={innerWidth} height={height}></ChatInstance>
+						)
+					});
 				} else if (RoomNames.indexOf(currentSpace) > -1) {
 					newFloatingRooms.push({
 						key: currentSpace,

src/components/Header.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+import ShareButton from './ShareButton';
+
+import About from './About';
+
+const HeaderContainer = styled.div`
+	position: fixed;
+	top: 50px;
+	left: 80px;
+	display: grid;
+	grid-gap: 1rem;
+	grid-template-rows: auto auto;
+	padding: 1rem;
+	justify-content: start;
+	z-index: 1;
+	opacity: 0.3;
+	:hover {
+		opacity: 1;
+	}
+`;
+
+const Logo = styled.img`
+	width: 25px;
+`;
+
+const Logotext = styled.span``;
+
+const Logolink = styled.a`
+	display: block;
+	width: 100px;
+	text-decoration-line: none;
+`;
+
+const Header = () => {
+	return (
+		<HeaderContainer>
+			<Logolink href='/'>
+				<Logo src='favicon.ico' alt='Logo' /> <Logotext>aufaBier.at</Logotext>
+			</Logolink>
+			<About />
+		</HeaderContainer>
+	);
+};
+
+export default Header;

src/components/Help.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Help = () => {
+	return <div>Hilfe!</div>;
+};
+
+export default Help;
+<div>Hilfe!</div>;

src/components/HouseCreator.js

@@ -0,0 +1,5 @@
+const HouseCreator = () => {
+    return (  );
+}
+
+export default HouseCreator;

src/components/Space.js

@@ -1,13 +1,9 @@
 import React, { Fragment, useContext, useState } from 'react';
 import styled from 'styled-components';
-import {
-	BrowserView,
-	MobileView,
-	isBrowser,
-	isMobile
-} from 'react-device-detect';
+import { BrowserView, MobileView } from 'react-device-detect';
 
 import { FloatingSpaceContext } from '../contexts/FloatingSpaceContext';
+import { HouseContext } from '../contexts/HouseContext';
 import { SpaceContext } from '../contexts/SpaceContext';
 
 import Room from './Room';
@@ -289,6 +285,12 @@ const Space = () => {
 						<span className='roomName'>loft.radio</span>
 						<div className='click-zone-highlight f'></div>
 					</div>
+					<div
+						className='click-zone g'
+						onClick={() => launchFloatingSpace('chat')}>
+						<span className='roomName'>chat</span>
+						<div className='click-zone-highlight g'></div>
+					</div>
 					{/*
 				<div
 					className='click-zone g'

src/components/integrations/ChatInstance.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+function ChatInstance({ width, height, backgroundColor }) {
+	return (
+		<iframe
+			id='ytplayer'
+			type='text/html'
+			width='800'
+			height='800'
+			src='https://chat.geleeroyale.work/channel/general?layout=embedded'
+			frameborder='0'></iframe>
+	);
+}
+
+export default ChatInstance;

src/contexts/HouseContext.js

@@ -0,0 +1,14 @@
+import React, { createContext, useState } from 'react';
+
+export const HouseContext = createContext([{}, () => {}]);
+
+const HouseContextProvider = props => {
+	const [currentHouse, setHouse] = useState('');
+	return (
+		<HouseContext.Provider value={{ currentHouse, setHouse }}>
+			{props.children}
+		</HouseContext.Provider>
+	);
+};
+
+export default HouseContextProvider;

src/contexts/RootContext.js

@@ -2,13 +2,16 @@ import React from 'react';
 
 import UserContextProvider from './UserContext';
 import FloatingSpaceContextProvider from './FloatingSpaceContext';
+import HouseContextProvider from './HouseContext';
 
 const RootContextProvider = props => {
 	return (
 		<UserContextProvider>
-			<FloatingSpaceContextProvider>
-				{props.children}
-			</FloatingSpaceContextProvider>
+			<HouseContextProvider>
+				<FloatingSpaceContextProvider>
+					{props.children}
+				</FloatingSpaceContextProvider>
+			</HouseContextProvider>
 		</UserContextProvider>
 	);
 };