jeirmeister/Cockatrice
1
0
Fork 0
mirror of https://github.com/Cockatrice/Cockatrice.git synced 2026-06-12 00:54:53 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Webatrice P.O.C. (#3854)

Browse source 
* port webclient POC into react shell

* Abstract websocket messaging behind redux store

* refactor architecture

* add rooms store

* introduce application service layer and login form

* display room messages

* implement roomSay

* improve Room view styling

* display room games

* improve gameList update logic

* hide protected games

* improve game update logic

* move mapping to earlier lifecycle hook

* add autoscroll to bottom

* tabs to spaces, refresh guard

* implement server joins/leaves

* show users in room

* add material-ui to build

* refactor, add room joins/leaves to store and render

* begin using Material UI components

* fix spectatorsCount

* remove unused package

* improve Server and Room styling

* fix scroll context

* route on room join

* refactor room path

* add auth guard

* refactor authGuard export

* add missing files

* clear store on disconnect, add logout button to Account view

* fix disconnect handling

* Safari fixes

* organize current todos

* improve login page and server status tracking

* improve login page

* introduce sorting arch, refine reducers, begin viewLogHistory

* audit fix for handlebars

* implement moderator log view

* comply with code style rules

* remove original POC from codebase

* add missing semi

* minor improvements, begin registration functionality

* retry as ws when wss fails

additionally, dont mutate the default options when connecting

* retain user/pass in WebClient.options for login

* take protocol off of options, make it a connect param that defaults to wss

* cleanup server page styling

* match wss logic with desktop client

* add virtual scroll component, add context menu to UserDisplay

* revert VirtualTable on messages

* improve styling for Room view

* add routing to Player view

* increase tooltip delay

* begin implementing Account view

* disable app level contextMenu

* implement buddy/ignore list management

* fix gitignore

Co-authored-by: Jay Letto <jeremy.letto@merrillcorp.com>
Co-authored-by: skwerlman <skwerlman@users.noreply.github.com>
Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>
This commit is contained in:
Jeremy Letto 2020-12-31 16:08:15 -06:00 • committed by GitHub
parent d5b36e8b8a
commit 0457e65751
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
152 changed files with 19573 additions and 1071 deletions
Download patch file Download diff file Expand all files Collapse all files

122
webclient/src/AppShell/Account/Account.tsx Normal file
View file

@ -0,0 +1,122 @@
// eslint-disable-next-line
import React, { Component } from "react";
import { connect } from "react-redux";
import Button from "@material-ui/core/Button";
import ListItem from "@material-ui/core/ListItem";
import Paper from "@material-ui/core/Paper";
import UserDisplay from "AppShell/common/components/UserDisplay/UserDisplay";
import VirtualList from "AppShell/common/components/VirtualList/VirtualList";
import { AuthenticationService, SessionService } from "AppShell/common/services";
import AuthGuard from "AppShell/common/guards/AuthGuard";
import { Selectors } from "store/server";
import { User } from 'types';
import AddToBuddies from './AddToBuddies/AddToBuddies';
import AddToIgnore from './AddToIgnore/AddToIgnore';
import "./Account.css";
class Account extends Component<AccountProps> {
handleAddToBuddies({ userName }) {
SessionService.addToBuddyList(userName);
}
handleAddToIgnore({ userName }) {
SessionService.addToIgnoreList(userName);
}
render() {
console.log(this.props);
const { buddyList, ignoreList, serverName, serverVersion, user } = this.props;
const { country, realName, name, userLevel, accountageSecs, avatarBmp } = user;
var url = URL.createObjectURL(new Blob([avatarBmp], {'type': 'image/png'}));
return (
<div className="account">
<AuthGuard />
<div className="account-column">
<Paper className="account-list">
<div className="">
Buddies Online: ?/{buddyList.length}
</div>
<VirtualList
itemKey={(index, data) => buddyList[index].name }
items={ buddyList.map(user => (
<ListItem button dense>
<UserDisplay user={user} />
</ListItem>
) ) }
/>
<div className="" style={{borderTop: "1px solid"}}>
<AddToBuddies onSubmit={this.handleAddToBuddies} />
</div>
</Paper>
</div>
<div className="account-column">
<Paper className="account-list overflow-scroll">
<div className="">
Ignored Users Online: ?/{ignoreList.length}
</div>
<VirtualList
itemKey={(index, data) => ignoreList[index].name }
items={ ignoreList.map(user => (
<ListItem button dense>
<UserDisplay user={user} />
</ListItem>
) ) }
/>
<div className="" style={{borderTop: "1px solid"}}>
<AddToIgnore onSubmit={this.handleAddToIgnore} />
</div>
</Paper>
</div>
<div className="account-column overflow-scroll">
<Paper className="account-details" style={{margin: "0 0 5px 0"}}>
<img src={url} alt={name} />
<p><strong>{name}</strong></p>
<p>Location: ({country.toUpperCase()})</p>
<p>User Level: {userLevel}</p>
<p>Account Age: {accountageSecs}</p>
<p>Real Name: {realName}</p>
<div className="account-details__actions">
<Button size="small" color="primary" variant="contained">Edit</Button>
<Button size="small" color="primary" variant="contained">Change<br />Password</Button>
<Button size="small" color="primary" variant="contained">Change<br />Avatar</Button>
</div>
</Paper>
<Paper className="account-details">
<p>Server Name: {serverName}</p>
<p>Server Version: {serverVersion}</p>
<Button color="primary" variant="contained" onClick={() => AuthenticationService.disconnect()}>Disconnect</Button>
</Paper>
</div>
</div>
)
}
}
interface AccountProps {
buddyList: User[];
ignoreList: User[];
serverName: string;
serverVersion: string;
user: User;
}
const mapStateToProps = state => ({
buddyList: Selectors.getBuddyList(state),
ignoreList: Selectors.getIgnoreList(state),
serverName: Selectors.getName(state),
serverVersion: Selectors.getVersion(state),
user: Selectors.getUser(state),
});
export default connect(mapStateToProps)(Account);