ydeng/sports-matcher
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Revert "The chat component"

Browse Source 
This reverts commit fa8c2e7cf9.
This commit is contained in:
Hansi Xu 2022-03-06 15:53:19 -05:00
parent fa8c2e7cf9
commit c332594b40
4 changed files with 0 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
sports-matcher/src/react-components/Chat.js vendored
View File

@ -1,18 +0,0 @@
/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
import React from 'react';
import './chats.css'
class Chat extends React.Component {
render() {
return (
<div class="chatbubble-container">
<div class= {this.props.side === "left" ? "chatbubble left": "chatbubble right"}>
{this.props.message}
</div>
</div>
)
}
}
export default Chat;

77
sports-matcher/src/react-components/ChatWindow.js vendored
View File

@ -1,77 +0,0 @@
/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
import React from 'react';
import './chats.css'
import Chat from './Chat'
import Contact from './Contact'
class ChatWindow extends React.Component {
render() {
return (
<div class="chatcomponent">
<UserList />
<MessageList />
</div>
)
}
test() {
alert("test")
}
}
class UserList extends React.Component {
render() {
return (
<div class="contactlist">
<Contact pfpsrc="./chief.jpg" name="Master Chief"/>
<Contact pfpsrc="./freeman.jpg" name="Gordon Freeman" />
<Contact pfpsrc="./shogun.jpg" name="Raiden Shogun" selected="true" />
</div>
)
}
}
class MessageList extends React.Component {
render() {
return (
<div class="messagelist">
<div class="chatbubble-container">
<div class="chatbubble right">
Got time for tennis this week, Raiden?
</div>
</div>
<div class="chatbubble-container">
<div class="chatbubble left">
Foolish question. If I do not even have free time, How am I to pursue eternity and fulfill my promise to the people of Inazuma?
</div>
</div>
<div class="chatbubble-container">
<div class="chatbubble right">
Aiight, see you at 4
</div>
</div>
<div class="chatbubble-container">
<div class="chatbubble left">
As you wish.
</div>
</div>
</div>
)
}
}
// class ChatWindow extends React.Component {
// render() {
// return (
// <div>
// <ChatUserList />
// {/* <MessageList /> */}
// </div>
// )
// }
// }
class ChatInput extends React.Component {
render() {
return (<p>Placeholder</p>)
}
}
export default ChatWindow;

30
sports-matcher/src/react-components/Contact.js vendored
View File

@ -1,30 +0,0 @@
/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
import React from 'react';
import './chats.css';
class Contact extends React.Component {
constructor(props) {
super(props)
this.state = {
selected : this.props.selected
}
}
onClick() {
this.setState({selected : "true"})
}
render() {
return (
<div class={this.state.selected === "true" ? "contact dark" : "contact"}>
<div class="profilepiccontainer">
<img src={this.props.pfpsrc} class="profilepic" onClick={() => this.onClick()} />
</div>
<div class="profilenamecontainer">
<div class="profilename" onClick={() => this.onClick()}>{this.props.name}</div>
</div>
</div>
)
}
}
export default Contact;

88
sports-matcher/src/react-components/chats.css
View File

@ -1,88 +0,0 @@
.chatcomponent > * {
display: inline-block;
}
.contact {
border-style: solid;
border-width: 1px;
border-bottom: 1px;
border-color:rgb(75, 75, 75);
background-color: rgb(80, 80, 80);
height: 70px;
user-select: none;
}
.contact.dark {
background-color: black;
}
.contactlist {
height: 500px;
width: 200px;
top: 0;
left: 0;
box-sizing: border-box;
border-radius: 2%;
background: rgb(48, 45, 45);
overflow-y: scroll;
overflow-x: hidden;
text-align: center;
}
.messagelist {
height: 500px;
width: 800px;
background-color: rgb(80, 80, 80);
overflow-x: hidden;
overflow-y: scroll;
}
.messagelist > * {
display: block;
}
.profilepiccontainer {
height: 60px;
width: 60px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
float: left;
}
.profilepic {
border-radius: 50%;
height: 50px;
width: 50px;
}
.profilenamecontainer {
text-align: center;
padding: 7%;
}
.profilename {
color: white;
}
.chatbubble {
margin-top: 20px;
margin-left: 20px;
display: inline-block;
position: relative;
width: auto;
height: auto;
padding: 10px;
border-radius: 10px;
}
.left {
background-color: rgba(0, 57, 163, 0.637);
margin-right: 35px;
color: white;
float: auto;
}
.right {
background-color: khaki;
color: black;
margin-right: 35px;
float: right;
}
.chatbubble-container {
width: 800px;
height: auto;
float: left;
}