Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Social lounge #40

Open
wants to merge 5 commits into
base: dev
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,25 @@
right: 0;
}

.navPositionChild2 {
position:absolute;
bottom: 0;
left: 0;
}

.chatDisplay {
display: none;
}

.sizing {
position:'absolute'; z-index: 200; margin-left: -25%; background-color:white; display:block; text-align:center; width: 50%; height: 50%;transform: translateY(-50%)
}

.header {
width: 96%;
margin-left: 2%;
height: 15%;
border-radius: 10px;
background-color: blue;
color: white;
}
128 changes: 13 additions & 115 deletions src/Components/ChatApp/index.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,13 @@
/*
import React, {useState, useEffect, useContext} from 'react';
import React, {useState, useEffect} from 'react';
import MessageList from './MessageList';
import SendMessageForm from './SendMessageForm';
import Title from './Title';
import connect from 'socket.io-client'
// import io from 'socket.io'
import './index.css'
//import { isCompositeComponentWithType } from 'react-dom/test-utils';
import {UsernameContext} from '../../UsernameContext'
import useSocket from 'use-socket.io-client';

function ChatApp(props){
// const [socket, setSocket] = useState();
// const [name, setName] = useState();
// console.log(namename)
const [socket] = useSocket('http://localhost:3333');

const [socket, setSocket] = useState();
const [name, setName] = useState();
const [messages, setMessages] = useState([
// {
// senderId: 'Rick',
Expand All @@ -34,125 +26,31 @@ function ChatApp(props){
// }
]);


const {user} = useContext(UsernameContext)

useEffect(() => {
// setName(user)
//setName('name' + Math.floor(Math.random()*1000))
// const s = connect('ws://localhost:3333')
// setSocket(s)
// console.log(s)
socket.on('received', (p)=>{setMessages(m => [...m, p])})
// return () => socket&&socket.disconnect();
setName('name' + Math.floor(Math.random()*1000))
setSocket(connect('http://localhost:3333'))
return () => socket&&socket.disconnect();
}, [])

// useEffect(() => {
// console.log('called use effect')
// // console.log(socket&&socket.id)

// socket&&socket.on("connect", () => {
// console.log(socket.id); // x8WIv7-mJelg7on_ALbx
// });
// socket&&socket.on('received', (p)=>{console.log(p);setMessages(m => [...m, p])})
// }, [socket])
useEffect(() => {
socket&&socket.on('received', (p)=>{console.log(p);setMessages(m => [...m, p])})
}, [socket])

const addMessage = message => {
//socket.emit('chat message', {text: message.text, name: user})
//setMessages([...messages, {...message, name: user}]);
socket.emit('chat message', {text: message.text, name: sessionStorage.getItem("username")})
setMessages([...messages, {...message, name: sessionStorage.getItem("username")}]);
socket.emit('chat message', {text: message.text, name: name})
setMessages([...messages, {...message, name}]);
}



return (
<div className="containerchat">
<div>
<Title />
<MessageList messages={messages}/>
<SendMessageForm onSubmit={addMessage}/>

</div>
);


}

export default ChatApp;
*/

import React, { useEffect, useState, useContext } from 'react';
import ChatRoom from './ChatRoom';
import RoomsList from './RoomsList';
import './index.css';
import axios from 'axios';
import { UsernameContext } from '../../UsernameContext';

function ChatApp() {
/*
const [displaySelectedChat, setDisplaySelectedChat] = useState(true)

const setDisplayFalse = () => {
setDisplaySelectedChat(false)
}

const setDisplayTrue = (displayBoolTrue) => {
setDisplaySelectedChat(true)
}
*/

const [currentChatID, setCurrentChatID] = useState(null);

const { user } = useContext(UsernameContext);

const backToRoomsList = () => {
setCurrentChatID('');
console.log(currentChatID);
};

const setCurrentChatIDto = (clickedChatID) => {
setCurrentChatID(clickedChatID);
console.log('setting' + currentChatID);
};

const [allChatRooms, setAllChatRooms] = useState([]);

return (
<div>
{currentChatID ? (
<div>
<button onClick={backToRoomsList}>Back</button>
<ChatRoom
id={currentChatID.roomID}
identifier={currentChatID.roomName}
/>{' '}
{/* "6040c127f3763d405f8cb620"*/}
</div>
) : (
<div>
<RoomsList currentChat={setCurrentChatIDto} />
</div>
)}
</div>
);
}

export default ChatApp;

/*
1. lisat of chatrooms
2. list messages per chat room
3. limit calls
{
chat_rooms: [id's],
chat_obj:{
id: {
name, messages
}
},
selected_chat: null/id
}
selected_chat ? < BigChat id = selected_chat> : chat_rooms.map(ChatComponentSmall id = id)
(ChatComponentSmall id = id
setState( prev => {...prev, selected_chat : id})
*/
export default ChatApp;
2 changes: 1 addition & 1 deletion src/Components/FishGame/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ html {
}

.map {
background-image: url('/src/Sprites/underwater.gif');
/* background-image: url('/src/Sprites/underwater.gif'); */
height: 100vh;
background-position: center;
background-repeat: no-repeat;
Expand Down
3 changes: 2 additions & 1 deletion src/Components/FishGame/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,12 @@ import Rod from './Rod'
import Loading from '../../Sprites/loading2.gif'
import './index.css'
import {useHistory} from 'react-router-dom'
import Underwater from '../../Sprites/underwater.gif';

function FishGame() {
const history = useHistory();
return (
<div className="map">
<div className="map" style={{backgroundImage:`url(${Underwater})`}}>
<Canvas camera={{ position: [0, 0, 20] }}>
<directionalLight position={[10, 10, 5]} intensity={0.5} />
<directionalLight position={[-10, -10, -5]} intensity={0.5} />
Expand Down
15 changes: 15 additions & 0 deletions src/Components/GenericGame/Launcher.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.sizing {
background-color: greenyellow;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* width: 500vh;
height: 100vh; */
/* left: 500%; */
/* position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); */
}
10 changes: 10 additions & 0 deletions src/Components/GenericGame/Launcher.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import {React} from 'react'
import './Launcher.css'

export default function Launcher() {
return (
<div>
{/* <div class="sizing"><p>FUCK</p></div> */}
</div>
)
}
14 changes: 13 additions & 1 deletion src/Components/GenericGame/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,21 @@ import './index.css';
import Chat from './Chat';
import Webcam from './Webcam';
import Lobby from '../Lobby/Lobby';
import Launcher from './Launcher';
import * as Colyseus from '../../../node_modules/colyseus.js/dist/colyseus.dev.js';
import { useHistory } from 'react-router-dom';
import { useLocation } from 'react-router-dom';
import JitsiMeet from '../SocialLounge/JitsiMeet'

export default function GenericGame(props) {
const [meetingID, setmeetingID] = useState("");
const [jitsi, setJitsi] = useState(false)

let history = useHistory();
let location = useLocation();

console.log(props.game);

const { user } = useContext(UsernameContext);
const [client, setClient] = useState();
const [room, setRoom] = useState(null);
Expand All @@ -22,6 +29,10 @@ export default function GenericGame(props) {
history.push('/fishgame/' + chosenRoom.id);
}

function joinASocialRoom() {
history.push({pathname:'/sociallounge/something'});
}

// we want the lobby to reload if the user goes back
window.addEventListener('popstate', (event) => {
window.location.reload();
Expand Down Expand Up @@ -58,7 +69,8 @@ export default function GenericGame(props) {

return (
<div>
{!isJoinedRoom ? <Lobby joinRoom={joinARoom} /> : null}
{!isJoinedRoom && props.game==='fish' ? <Lobby joinRoom={joinARoom}/> : null}
{!isJoinedRoom && props.game==='lounge' ? <Lobby joinRoom={joinASocialRoom} /> : null}
{/* {props.chat && isJoinedRoom ? <Chat /> : null} */}
{props.webcam && isJoinedRoom ? <Webcam /> : null}
{isJoinedRoom
Expand Down
9 changes: 7 additions & 2 deletions src/Components/Map/InvertedFountain.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,18 @@ import React, { useContext } from 'react';
import Scene from './Scene';
import { UsernameContext } from '../../UsernameContext';
import Draggable from 'react-draggable';
import Chat from '../ChatApp';
import Chat from '../ChatApp/Index';
import { useHistory } from 'react-router-dom';
import NavComponent from '../NavComponent';

export default function InvertedFountain() {
const { user } = useContext(UsernameContext);
const history = useHistory();

function move() {
console.log("WE ARE HERE!!!")
}

return (
<div
className='map'
Expand Down Expand Up @@ -73,7 +78,7 @@ export default function InvertedFountain() {
height: 100,
}}
onClick={() => {
history.push('/fishgame/lobby');
history.push({pathname:'/fishgame/lobby', state: {move:move()}});
}}
>
Play the fish game
Expand Down
23 changes: 15 additions & 8 deletions src/Components/Map/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import Draggable from 'react-draggable';
import Chat from '../ChatApp/Index';
import { useHistory } from 'react-router-dom';
import NavComponent from '../NavComponent';
import Launcher from '../GenericGame/Launcher';

export default function Map(props) {
const history = useHistory();
Expand Down Expand Up @@ -38,16 +39,17 @@ export default function Map(props) {
</div>
</Draggable>
<div
style={{
position: 'absolute',
zIndex: 50,
right: 50,
bottom: 0,
width: 250,
height: 0,
}}
// style={{
// position: 'absolute',
// zIndex: 50,
// right: 50,
// bottom: 0,
// width: 250,
// height: 0,
// }}
>
<NavComponent />
{/* <Launcher /> */}
</div>
{/* <button style={{
position: 'absolute',
Expand Down Expand Up @@ -77,6 +79,11 @@ export default function Map(props) {
>
Visit the Inverted Fountain!
</button>


{/* <div class="sizing">
<div>SHADOW OF DEATH</div>
</div> */}
</div>
);
}
Loading