diff --git a/src/App.css b/src/App.css
index d9632eb..693480d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -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;
}
\ No newline at end of file
diff --git a/src/Components/ChatApp/index.js b/src/Components/ChatApp/index.js
index 2eb7d7e..bdae018 100644
--- a/src/Components/ChatApp/index.js
+++ b/src/Components/ChatApp/index.js
@@ -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',
@@ -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 (
-
+
);
-
-
-}
-
-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 (
-
- {currentChatID ? (
-
-
- {' '}
- {/* "6040c127f3763d405f8cb620"*/}
-
- ) : (
-
-
-
- )}
-
- );
}
-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;
\ No newline at end of file
diff --git a/src/Components/FishGame/index.css b/src/Components/FishGame/index.css
index fb3e810..6c3e0eb 100644
--- a/src/Components/FishGame/index.css
+++ b/src/Components/FishGame/index.css
@@ -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;
diff --git a/src/Components/FishGame/index.js b/src/Components/FishGame/index.js
index ad89752..1857c8a 100644
--- a/src/Components/FishGame/index.js
+++ b/src/Components/FishGame/index.js
@@ -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 (
-
+