Webatrice: show loading screen until protobuf initializes (#4559)

* show loading screen until protobuf initializes

* cleanup

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/src/containers/Initialize/Initialize.css

@@ -0,0 +1,88 @@
+.Initialize {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.Initialize img {
+  width: 60px;
+}
+
+h6.subtitle {
+  margin: 20px 0 10px;
+}
+
+.Initialize-graphics {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.Initialize-graphics__square {
+  position: absolute;
+  border: 2px solid;
+  opacity: .05;
+}
+
+.Initialize-graphics__bar {
+  position: absolute;
+  opacity: .05;
+  border-radius: 8px;
+}
+
+.Initialize-graphics__square.topLeft {
+  transform: rotate(27deg);
+  top: 38px;
+  left: 64px;
+  height: 134px;
+  width: 100px;
+  border-radius: 8px;
+}
+
+.Initialize-graphics__square.topRight {
+  transform: rotate(10deg);
+  top: 74px;
+  right: 62px;
+  height: 50px;
+  width: 66px;
+  border-radius: 20px;
+}
+
+.Initialize-graphics__square.bottomLeft {
+  transform: rotate(120deg);
+  bottom: 61px;
+  left: 66px;
+  height: 50px;
+  width: 66px;
+  border-radius: 20px;
+}
+
+.Initialize-graphics__square.bottomRight {
+  transform: rotate(-24deg);
+  bottom: 54px;
+  right: 0;
+  height: 88px;
+  width: 66px;
+  border-radius: 8px;
+}
+
+.Initialize-graphics__bar.bottomBar {
+  transform: rotate(30deg);
+  bottom: -4px;
+  left: -29px;
+  height: 50px;
+  width: 222px;
+}
+
+.Initialize-graphics__bar.topBar {
+  transform: rotate(-330deg);
+  top: 10px;
+  right: -49px;
+  height: 50px;
+  width: 222px;
+}

webclient/src/containers/Initialize/Initialize.tsx

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import { connect } from 'react-redux';
+import { Redirect, withRouter } from 'react-router-dom';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+
+import { Images } from 'images';
+import { ServerSelectors } from 'store';
+import { RouteEnum } from 'types';
+
+import './Initialize.css';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    '& .Initialize-graphics': {
+      color: theme.palette.primary.contrastText,
+    },
+
+    '& .Initialize-graphics__bar': {
+      backgroundColor: theme.palette.primary.contrastText,
+    },
+  },
+}));
+
+const Initialize = ({ initialized }: InitializeProps) => {
+  const classes = useStyles();
+
+  return initialized
+    ? <Redirect from="*" to={RouteEnum.LOGIN} />
+    : (
+      <div className={'Initialize ' + classes.root}>
+        <div className='Initialize-content'>
+          <img src={Images.Logo} alt="logo" />
+          <Typography variant="subtitle1" className='subtitle'>DID YOU KNOW</Typography>
+          <Typography variant="subtitle2">Cockatrice is run by volunteers</Typography>
+          <Typography variant="subtitle2">that love card games!</Typography>
+        </div>
+
+        <div className="Initialize-graphics">
+          <div className="topLeft Initialize-graphics__square" />
+          <div className="topRight Initialize-graphics__square" />
+          <div className="bottomRight Initialize-graphics__square" />
+          <div className="bottomLeft Initialize-graphics__square" />
+          <div className="topBar Initialize-graphics__bar" />
+          <div className="bottomBar Initialize-graphics__bar" />
+        </div>
+      </div>
+    );
+}
+
+interface InitializeProps {
+  initialized: boolean;
+}
+
+const mapStateToProps = state => ({
+  initialized: ServerSelectors.getInitialized(state),
+});
+
+export default withRouter(connect(mapStateToProps)(Initialize));