diff --git a/client/.babelrc b/client/.babelrc
new file mode 100644
index 0000000..6e867f9
--- /dev/null
+++ b/client/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": [ "@babel/env", "@babel/preset-react" ],
+  "plugins": [ "@babel/plugin-proposal-class-properties" ]
+}
diff --git a/client/src/App.js b/client/src/App.js
index 4de268a..b1425f5 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,13 +1,10 @@
 import './App.css';
+import { PlayerList } from './PlayerList';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-      </header>
+      <PlayerList/>
     </div>
   );
 }
diff --git a/client/src/MediaControl.css b/client/src/MediaControl.css
new file mode 100644
index 0000000..8ee364a
--- /dev/null
+++ b/client/src/MediaControl.css
@@ -0,0 +1,92 @@
+.MediaControlSpacer {
+  display: flex;
+  width: 5rem;
+  min-width: 5rem;
+  height: 3.75rem;
+  min-height: 3.75rem;
+  background-color: #444;
+  border-radius: 0.25rem;
+}
+
+.MediaControlSpacer.Medium {
+  width: 11.5em;
+  height: 8.625em;
+  min-width: 11.5em;
+  min-height: 8.625em;
+}
+
+
+.MediaControl {
+  display: flex;
+  position: fixed;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  width: 5rem;
+  height: 3.75rem;
+  min-width: 5rem;
+  min-height: 3.75rem;
+  z-index: 50000;
+}
+
+.MediaControl .Video {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: #444;
+  border-radius: 0.25rem;
+  border: 1px solid black;
+}
+
+.MediaControl.Medium {
+  width: 11.5em;
+  height: 8.625em;
+  min-width: 11.5em;
+  min-height: 8.625em;
+}
+
+.MediaControl > div {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 0.25rem;
+}
+
+.MediaControl .Controls {
+  display: flex;
+  position: absolute;
+  left: 0.5em;
+  bottom: 0.5em;
+  justify-content: flex-end;
+  z-index: 1;
+}
+
+.MediaControl.Small .Controls {
+  left: 0;
+  bottom: unset;
+  justify-content: center;
+}
+
+.MediaControl .Controls > div {
+  display: flex;
+  border-radius: 0.25em;
+  cursor: pointer;
+  padding: 0.25em;
+}
+
+.MediaControl .Controls > div:hover {
+  background-color: #d0d0d0;
+}
+
+.moveable-control-box {
+  border: none;
+  --moveable-color: unset !important;
+}
+
+.moveable-control-box .moveable-direction {
+  border: none !important;
+}
\ No newline at end of file
diff --git a/client/src/MediaControl.js b/client/src/MediaControl.js
new file mode 100644
index 0000000..b2fd10a
--- /dev/null
+++ b/client/src/MediaControl.js
@@ -0,0 +1,711 @@
+import React, { useState, useEffect, useRef, useCallback, 
+  useContext } from "react";
+import Moveable from "react-moveable";
+
+import "./MediaControl.css";
+
+import VolumeOff from '@mui/icons-material/VolumeOff';
+import VolumeUp from '@mui/icons-material/VolumeUp';
+import MicOff from '@mui/icons-material/MicOff';
+import Mic from '@mui/icons-material/Mic';
+import VideocamOff from '@mui/icons-material/VideocamOff';
+import Videocam from '@mui/icons-material/Videocam';
+
+import { GlobalContext } from "./GlobalContext.js";
+const debug = true;
+
+/* Proxy object so we can pass in srcObject to <audio> */
+const Video = ({ srcObject, local, ...props }) => {
+  const refVideo = useRef(null);
+  useEffect(() => {
+    if (!refVideo.current) {
+      return;
+    }
+    const ref = refVideo.current;
+    if (debug) console.log('media-control - video <video> bind');
+    ref.srcObject = srcObject;
+    if (local) {
+      ref.muted = true;
+    }
+    return () => {
+      if (debug) console.log('media-control - <video> unbind');
+      if (ref) {
+        ref.srcObject = undefined;
+      }
+    }; 
+  }, [srcObject, local]);
+  return <video ref={refVideo} {...props} />;
+}
+
+const MediaAgent = ({setPeers}) => {
+  const { name, ws } = useContext(GlobalContext);
+  const [ peers ] = useState({});
+  const [stream, setStream] = useState(undefined);
+
+  const onTrack = useCallback((event) => {
+    const connection = event.target;
+    console.log("media-agent - ontrack", event);
+    for (let peer in peers) {
+      if (peers[peer].connection === connection) {
+        console.log(`media-agent - ontrack - remote ${peer} stream assigned.`);
+        Object.assign(peers[peer].attributes, {
+          srcObject: event.streams[0]
+        });
+        /* Trigger update of MediaControl now that a stream is available */
+        setPeers(Object.assign({}, peers));
+      }
+    }
+  }, [peers, setPeers]);
+  const refOnTrack = useRef(onTrack);
+
+  const sendMessage = useCallback((data) => {
+    ws.send(JSON.stringify(data));
+  }, [ws]);
+
+  const onWsMessage = useCallback((event) => {
+     const addPeer = (config) => {
+      console.log('media-agent - Signaling server said to add peer:', config);
+  
+      if (!stream) {
+        console.log(`media-agent - No local media stream`);
+        return;
+      }
+  
+      const peer_id = config.peer_id;
+      if (peer_id in peers) {
+        if (!peers[peer_id].dead) {
+          /* This is normal when peers are added by other connecting 
+           * peers through the signaling server */
+          console.log(`media-agent - addPeer - ${peer_id} already in peers`);
+          return;
+        }
+      }
+       /* Even if reviving, allocate a new Object so <MediaControl> will
+      * have its peer state change and trigger an update from 
+      * <PlayerList> */
+      const peer = {
+        name: peer_id,
+        hasAudio: config.hasAudio,
+        hasVideo: config.hasVideo,
+        attributes: {},
+      };
+    
+      if (peer_id in peers) {
+        peer.muted = peers[peer_id].muted;
+        peer.videoOn = peers[peer_id].videoOn;
+        console.log(`media-agent - addPeer - reviving dead peer ${peer_id}`, peer);
+      } else {
+        peer.muted = false;
+        peer.videoOn = true;
+      }
+      peers[peer_id] = peer;
+   
+      console.log(`media-agent - addPeer - remote`, peers);
+      setPeers(Object.assign({}, peers));
+      
+      const connection = new RTCPeerConnection({
+        configuration: {
+          offerToReceiveAudio: true,
+          offerToReceiveVideo: true
+        },
+        iceServers: [{
+          urls: "turns:ketrenos.com:5349",
+          username: "ketra",
+          credential: "ketran"
+        },
+          /*
+          {
+            urls: "turn:numb.viagenie.ca",
+            username: "james_viagenie@ketrenos.com",
+            credential: "1!viagenie"
+          } 
+          */
+        ]
+      });
+      peer.connection = connection;
+
+      connection.addEventListener('connectionstatechange', (event) => {
+        console.log(`media-agent - connectionstatechange - `,
+          connection.connectionState, event);
+      });
+
+      connection.addEventListener('negotiationneeded', (event) => {
+        console.log(`media-agent - negotiationneeded - `,
+          connection.connectionState, event);
+      });
+      
+      connection.addEventListener('icecandidateerror', (event) => {
+        if (event.errorCode === 701) {
+          if (connection.iceGatheringState === 'gathering') {
+            console.log(`media-agent - Unable to reach host: ${event.url}`);
+          } else {
+            console.error(`media-agent - icecandidateerror - `, event.errorCode, event.hostcandidate, event.url, event.errorText);
+          }
+        }
+      });
+
+      connection.onicecandidate = (event) => {
+        if (!event.candidate) {
+          console.log(`media-agent - icecanditate - gathering is complete: ${connection.connectionState}`);
+          return;
+        }
+        /* If a srflx candidate was found, notify that the STUN server works! */
+        if (event.candidate.type === "srflx"){
+          console.log("media-agent - The STUN server is reachable!");
+          console.log(`media-agent -    Your Public IP Address is: ${event.candidate.address}`);
+        }
+
+        /* If a relay candidate was found, notify that the TURN server works! */
+        if (event.candidate.type === "relay"){
+          console.log("media-agent - The TURN server is reachable !");
+        }
+
+        console.log(`media-agent - onicecandidate - `, event.candidate);
+
+        sendMessage({
+          type: 'relayICECandidate',
+          config: {
+            peer_id,
+            candidate: event.candidate
+          }
+        });
+      };
+
+      connection.ontrack = e => refOnTrack.current(e);
+
+      /* Add our local stream */
+      connection.addStream(stream.media);
+  
+      /* Only one side of the peer connection should create the
+       * offer, the signaling server picks one to be the offerer. 
+       * The other user will get a 'sessionDescription' event and will
+       * create an offer, then send back an answer 'sessionDescription'
+       * to us
+       */
+      if (config.should_create_offer) {
+        if (debug) console.log(`media-agent - Creating RTC offer to ` +
+          `${peer_id}`);
+        return connection.createOffer()
+        .then((local_description) => { 
+          if (debug) console.log(`media-agent - Local offer ` +
+            `description is: `, local_description);
+          return connection.setLocalDescription(local_description)
+          .then(() => { 
+            sendMessage({
+              type: 'relaySessionDescription', 
+              config: { 
+                peer_id,
+                'session_description': local_description
+              }
+            });
+            if (debug) console.log(`media-agent - Offer ` +
+              `setLocalDescription succeeded`);
+          })
+          .catch((error) => {
+            console.error(`media-agent - Offer setLocalDescription failed!`); 
+          });
+        })
+        .catch((error) => {
+          console.log(`media-agente - Error sending offer: `, error);
+        });
+      }
+    }
+    
+    const sessionDescription = ({ peer_id, session_description }) => {
+      const peer = peers[peer_id];
+      if (!peer) {
+        console.error(`media-agent - sessionDescription - ` +
+          `No peer for ${peer_id}`);
+        return;
+      }
+      const { connection } = peer;
+      const desc = new RTCSessionDescription(session_description);
+      return connection.setRemoteDescription(desc, () => {
+        if (debug) console.log(`media-agent - sessionDescription - ` +
+          `setRemoteDescription succeeded`);
+        if (session_description.type === "offer") {
+          if (debug) console.log(`media-agent - sessionDescription - ` +
+            `Creating answer`);
+          connection.createAnswer((local_description) => {
+            if (debug) console.log(`media-agent - sessionDescription - ` +
+              `Answer description is: `, local_description);
+            connection.setLocalDescription(local_description, () => { 
+              sendMessage({
+                type: 'relaySessionDescription',
+                config: {
+                  peer_id, 
+                  session_description: local_description
+                }
+              });
+              if (debug) console.log(`media-agent - sessionDescription ` +
+                `- Answer setLocalDescription succeeded`);
+            }, () => {
+              console.error(`media-agent - sessionDescription - ` +
+                `Answer setLocalDescription failed!`);
+            });
+          }, (error) => {
+            console.error(error);
+          });
+        }
+      }, (error) => {
+        console.log(`media-agent - sessionDescription - ` +
+        `setRemoteDescription error: `, error);
+      });
+    };
+  
+    const removePeer = ({peer_id}) => {
+      console.log(`media-agent - removePeer - Signaling server said to ` +
+        `remove peer ${peer_id}`);
+      if (peer_id in peers) {
+        if (peers[peer_id].connection) {
+          peers[peer_id].connection.close();
+          peers[peer_id].connection = undefined;
+        }
+      }
+    
+      /* To maintain mute/videoOn states, we don't remove the peer but 
+       * instead mark it as dead */
+      peers[peer_id].dead = true;
+      if (debug) console.log(`media-agent - removePeer`, peers);
+      setPeers(Object.assign({}, peers));
+    };
+  
+    const iceCandidate = ({ peer_id, candidate }) => {
+      /**
+      * The offerer will send a number of ICE Candidate blobs to the
+      * answerer so they can begin trying to find the best path to one
+      * another on the net.
+      */
+      const peer = peers[peer_id];
+      if (!peer) {
+        console.error(`media-agent - iceCandidate - No peer for ` +
+          `${peer_id}`, peers);
+        return;
+      }
+      peer.connection.addIceCandidate(new RTCIceCandidate(candidate))
+      .then(() => {
+        if (debug) console.log(`media-agent - iceCandidate - ` +
+          `Successfully added Ice Candidate for ${peer_id}`);
+      })
+      .catch((error) => {
+        console.error(error, peer, candidate);
+      });
+    };
+ 
+    const data = JSON.parse(event.data);
+    if (data.type in [ 'addPeer', 'removePeer', 
+      'iceCandidate', 'sessionDescription' ]) {
+      console.log(`media-agent - message - ${data.type}`, peers);
+    }
+    switch (data.type) {
+    case 'addPeer': addPeer(data.data); break;
+    case 'removePeer': removePeer(data.data); break;
+    case 'iceCandidate': iceCandidate(data.data); break;
+    case 'sessionDescription': sessionDescription(data.data); break;
+    default: break;
+    }
+  }, [ peers, setPeers, stream, refOnTrack, sendMessage ]);
+  const refWsMessage = useRef(onWsMessage);
+
+  const onWsClose = (event) => {
+    console.log(`media-agent - ${name} Disconnected from signaling server`);
+    /* Tear down all of our peer connections and remove all the
+      * media divs when we disconnect */
+    for (let peer_id in peers) {
+      if (peers[peer_id].local) {
+        continue;
+      }
+      peers[peer_id].connection.close();
+      peers[peer_id].connection = undefined;
+    }
+
+    for (let id in peers) {
+      peers[id].dead = true;
+      peers[id].connection = undefined;
+    }
+
+    if (debug) console.log(`media-agent - close`, peers);
+    setPeers(Object.assign({}, peers));
+  }
+  const refWsClose = useRef(onWsClose);
+
+  useEffect(() => { 
+    refWsMessage.current = onWsMessage; 
+    refWsClose.current = onWsClose;
+    refOnTrack.current = onTrack;
+  });
+
+  useEffect(() => {
+    if (!ws) {
+      return;
+    }
+    console.log(`media-control - Binding to WebSocket`);
+    const cbMessage = e => refWsMessage.current(e);
+    ws.addEventListener('message', cbMessage);
+    const cbClose = e => refWsClose.current(e);
+    ws.addEventListener('close', cbClose);
+    return () => {
+      ws.removeEventListener('message', cbMessage);
+      ws.removeEventListener('close', cbClose);
+    }
+  }, [ws, refWsMessage, refWsClose ]);
+
+  useEffect(() => {
+    console.log(`media-control - WebSocket or Stream changed`);
+
+    const join = () => {
+      sendMessage({ 
+        type: 'join',
+        config: {
+          hasAudio: stream.audio,
+          hasVideo: stream.video
+        }
+      });
+    }
+    
+    if (ws && stream) {
+      console.log(`media-conterol - issuing join request`);
+      for (let peer in peers) {
+        if (peers[peer].local && peers[peer].dead) {
+          /* Allocate a new Object so <MediaControl> will trigger */
+          peers[peer] = Object.assign({}, peers[peer]);
+          delete peers[peer].dead;
+          setPeers(Object.assign({}, peers));
+        }
+      }
+      join();
+    }
+  }, [ws, stream, peers, setPeers, sendMessage]);
+ 
+  useEffect(() => {
+    if (!name) {
+      return;
+    }
+    let update = false;
+    if (stream) {
+      if (!(name in peers)) {
+        update = true;
+        peers[name] = {
+          name: name,
+          local: true,
+          muted: true,
+          videoOn: false,
+          hasVideo: stream.video,
+          hasAudio: stream.audio,
+          attributes: {
+            local: true,
+            srcObject: stream.media
+          }
+        };
+      }
+    }
+
+    /* Renaming the local connection requires the peer to be deleted
+     * and re-established with the signaling server */
+    for (let key in peers) {
+      if (peers[key].local && key !== name) {
+        delete peers[key];
+        update = true;
+      }
+    }
+
+    if (update) {
+      if (debug) console.log(`media-agent - Setting global peers`, peers);
+      setPeers(Object.assign({}, peers));
+    }
+  }, [peers, name, setPeers, stream]);
+  
+  useEffect(() => {
+    if (!ws || !name) {
+      return;
+    }
+
+    const setup_local_media = () => { 
+      /* Ask user for permission to use the computers microphone and/or camera, 
+        * attach it to an <audio> or <video> tag if they give us access. */
+      console.log(`media-agent - Requesting access to local ` +
+        `audio / video inputs`);
+  
+      /* See Dummy Tracks for more ideas...
+       * https://blog.mozilla.org/webrtc/warm-up-with-replacetrack/
+       */
+      navigator.getUserMedia = (navigator.getUserMedia ||
+        navigator.webkitGetUserMedia ||
+        navigator.mozGetUserMedia ||
+        navigator.msGetUserMedia);
+  
+      return navigator.mediaDevices
+      .getUserMedia({audio: true, video: true})
+      .then((media) => {
+        return {
+          media: media,
+          audio: true,
+          video: true
+        };
+      })
+      .catch((error) => {
+        console.log(`media-agent - Access to audio and video ` +
+          `failed. Trying just audio.`);
+        return navigator.mediaDevices
+        .getUserMedia({ audio: true, video: false })
+        .then((media) => {
+          return {
+            media: media,
+            audio: true,
+            video: false
+          };
+        })
+        .catch((error) => {
+          console.log(`media-agent - Access to audio ` +
+            `failed.`);
+          return {
+            media: undefined,
+            audio: false,
+            video: false
+          };
+        });
+      })
+      .then((context) => { /* user accepted access to a/v */
+        sendMessage({type: 'media-status',
+          video: context.video,
+          audio: context.audio
+        });
+        
+        if (context.video) {
+          console.log("media-agent - Access granted to audio/video");
+          context.media.getVideoTracks().forEach((track) => {
+            track.applyConstraints({
+              "video": {
+                "width": {
+                  "min": 160,
+                  "max": 320
+                },
+                "height": {
+                  "min": 120,
+                  "max": 240
+                } 
+              }
+            });
+          });
+          return context;
+        }
+
+        const black = ({ width = 640, height = 480 } = {}) => {
+          const canvas = Object.assign(document.createElement("canvas"), {
+            width, height
+          });
+          canvas.getContext('2d').fillRect(0, 0, width, height);
+          const stream = canvas.captureStream();
+          return Object.assign(stream.getVideoTracks()[0], {
+            enabled: true
+          });
+        }
+
+        const silence = () => {
+          const ctx = new AudioContext(), oscillator = ctx.createOscillator();
+          const dst = oscillator.connect(ctx.createMediaStreamDestination());
+          oscillator.start();
+          return Object.assign(dst.stream.getAudioTracks()[0], {
+            enabled: true
+          });
+        }
+
+        if (context.audio) {
+          console.log("media-agent - Access granted to audio");
+
+          let black = ({ width = 640, height = 480 } = {}) => {
+            let canvas = Object.assign(document.createElement("canvas"), {
+              width, height
+            });
+            canvas.getContext('2d').fillRect(0, 0, width, height);
+            let stream = canvas.captureStream();
+            return Object.assign(stream.getVideoTracks()[0], {
+              enabled: true
+            });
+          }
+          context.media = new MediaStream([context.media, black()]);
+          return context;
+        }
+
+        context.media = new MediaStream([black(), silence()]);
+        return context;
+      });
+    };
+  
+    let abort = false;
+    if (!stream) {
+      if (debug) console.log(`media-agent - WebSocket open request. ` +
+        `Attempting to create local media.`);
+      setup_local_media().then((context) => {
+        /* once the user has given us access to their
+         * microphone/camcorder, join the channel and start peering up */
+        if (abort) {
+          console.log(`media-agent - aborting setting local media`);
+        } else {
+          setStream(context);
+        }
+      }).catch((error) => { /* user denied access to a/v */
+        console.error(error);
+        console.log("media-agent - Access denied for audio/video");
+      });
+    }
+
+    return () => {
+      abort = true;
+      if (!stream) {
+        console.log(`media-agent - abort media setup!`);
+      }
+    };
+  }, [ws, setStream, stream, name, sendMessage]);
+ 
+  return <></>;
+}
+
+const MediaControl = ({isSelf, peer, className}) => {
+  const [media, setMedia] = useState(undefined);
+  const [muted, setMuted] = useState(undefined);
+  const [videoOn, setVideoOn] = useState(undefined);
+  const [target, setTarget] = useState();
+  const [frame, setFrame] = useState({
+    translate: [0, 0],
+  });
+
+  useEffect(() => {
+    if (peer && peer.name) {
+      setTarget(document.querySelector(
+        `.MediaControl[data-peer="${peer.name}"]`));
+    }
+  }, [setTarget, peer]);
+
+  /* local state is used to trigger re-renders, and the global
+   * state is kept up to date in the peers object so re-assignment
+   * of sessions doesn't kill the peer or change the mute/video states */
+  useEffect(() => {
+    if (!peer) {
+      setMedia(undefined);
+      return;
+    }
+    setMuted(peer.muted);
+    setVideoOn(peer.videoOn);
+    setMedia(peer);
+  }, [peer, setMedia, setMuted, setVideoOn]);
+
+  console.log(`media-control - render`);
+
+  const toggleMute = (event) => {
+    if (debug) console.log(`media-control - toggleMute - ${peer.name}`, 
+      !muted);
+    peer.muted = !muted;
+    setMuted(peer.muted);
+    event.stopPropagation();
+  }
+  
+  const toggleVideo = (event) => {
+    if (debug) console.log(`media-control - toggleVideo - ${peer.name}`, 
+      !videoOn);
+    peer.videoOn = !videoOn;
+    if (peer.videoOn) {
+      const video = document.querySelector(`video[data-id="${media.name}"`);
+      if (video) {
+        video.play();
+      }
+    }
+    setVideoOn(peer.videoOn);
+    event.stopPropagation();
+  }
+
+  useEffect(() => {
+    if (!media || media.dead || !peer) {
+      return;
+    }
+    if (media.attributes.srcObject) {
+      console.log(`media-control - audio enable - ${peer.name}:${!muted}`);
+      media.attributes.srcObject.getAudioTracks().forEach((track) => {
+        track.enabled = media.hasAudio && !muted;
+      });
+    }
+  }); /* run after every render to hit when ontrack has received and set
+       * the stream //,  [media, muted]); */
+
+  useEffect(() => {
+    if (!media || media.dead || !peer) {
+      return;
+    }
+    if (media.attributes.srcObject) {
+      console.log(`media-control - video enable - ${peer.name}:${videoOn}`);
+      media.attributes.srcObject.getVideoTracks().forEach((track) => {
+        track.enabled = media.hasVideo && videoOn;
+      });
+    }
+  }); /* run after every render  to hit when ontrack has received and set
+       * the stream //, [media, videoOn]); */
+
+  const isValid = media && !media.dead,
+    colorAudio = (isValid && media.hasAudio) ? 'primary' : 'disabled',
+    colorVideo = (isValid && media.hasVideo) ? 'primary' : 'disabled';
+
+  if (!peer) {
+    return <></>;
+  }
+
+  return <>
+    <div className={`MediaControlSpacer ${className}`}/>
+    <div className={`MediaControl ${className}`} data-peer={peer.name}>
+      <div className="Controls" >
+      { isSelf && <div onTouchStart={toggleMute} onClick={toggleMute}>
+          { muted && <MicOff color={colorAudio}/> }
+          {!muted && <Mic color={colorAudio}/> }
+        </div> }
+        { !isSelf && <div onTouchStart={toggleMute} onClick={toggleMute}>
+          {muted && <VolumeOff color={colorAudio}/> }
+          {!muted && <VolumeUp color={colorAudio}/> }
+        </div> }
+        <div onTouchStart={toggleVideo} onClick={toggleVideo}>
+          { !videoOn && <VideocamOff color={colorVideo}/> }
+          {videoOn && <Videocam color={colorVideo}/> }
+        </div>
+      </div>
+      { isValid && <>
+        <Moveable
+          pinchable={true}
+          draggable={true}
+          target={target}
+          resizable={true}
+          keepRatio={true}
+          throttleResize={0}
+          hideDefaultLines={false}
+          edge={true}
+          zoom={1}
+          origin={false}
+          onDragStart={e => {
+            e.set(frame.translate);
+          }}
+          onDrag={e => {
+            frame.translate = e.beforeTranslate;
+          }}
+          onResizeStart={e => {
+            e.setOrigin(["%", "%"]);
+            e.dragStart && e.dragStart.set(frame.translate);
+          }}
+          onResize={e => {
+            const { translate, rotate, transformOrigin } = frame;
+            e.target.style.width = `${e.width}px`;
+            e.target.style.height = `${e.height}px`;
+            e.target.style.transform = `translate(${translate[0]}px, ${translate[1]}px)`;
+          }}
+          onRender={e => {
+            const { translate, rotate, transformOrigin } = frame;
+            //e.target.style.transformOrigin = transformOrigin;
+            e.target.style.transform = `translate(${translate[0]}px, ${translate[1]}px)`; 
+          }}
+        /><Video className="Video"
+          data-id={media.name}
+          autoPlay='autoplay'
+          {...media.attributes}/>
+      </> }
+      { !isValid && <video className="Video"></video> }
+    </div>
+  </>;
+};
+
+export { MediaControl, MediaAgent };
diff --git a/client/src/PlayerColor.css b/client/src/PlayerColor.css
new file mode 100644
index 0000000..a1950cc
--- /dev/null
+++ b/client/src/PlayerColor.css
@@ -0,0 +1,20 @@
+
+.PlayerColor {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 1em;
+  height: 1em;
+  padding: 0.125em;
+  margin: 0 0.25em;
+  border-radius: 0.625em;
+  border-width: 1px;
+  border-style: solid;
+  text-align: center;
+}
+
+.PlayerColor > div {
+  font-weight: bold;
+  overflow: hidden;
+  font-size: 0.75rem;
+}
diff --git a/client/src/PlayerColor.js b/client/src/PlayerColor.js
new file mode 100644
index 0000000..5830bf0
--- /dev/null
+++ b/client/src/PlayerColor.js
@@ -0,0 +1,17 @@
+
+import React from "react";
+import Avatar from '@material-ui/core/Avatar';
+
+import { useStyles } from './Styles.js';
+
+import "./PlayerColor.css";
+
+const PlayerColor = ({ color }) => {
+  const classes = useStyles();
+
+  return (
+    <Avatar className={['PlayerColor', classes[color]].join(' ')}/>
+  );
+};
+
+export { PlayerColor };
\ No newline at end of file
diff --git a/client/src/PlayerList.css b/client/src/PlayerList.css
new file mode 100644
index 0000000..adee83f
--- /dev/null
+++ b/client/src/PlayerList.css
@@ -0,0 +1,137 @@
+.PlayerList {
+  display: flex;
+  position: relative;
+  padding: 0.5em;
+  user-select: none;
+  flex-direction: column;
+  margin: 0.25rem 0.25rem 0.25rem 0;
+}
+
+.PlayerList .Name {
+  flex-grow: 1;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.PlayerList .NoNetwork {
+  display: flex;
+  justify-self: flex-end;
+  width: 1em;
+  height: 1em;
+  background-image: url("./assets/no-network.png");
+  background-size: contain;
+  background-position: center; 
+  background-repeat: no-repeat;
+}
+
+.PlayerList .Unselected {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
+/* Player name in the Unselected list... */
+.PlayerList .Unselected > div:nth-child(2) > div > div:first-child {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 100%;
+}
+
+.PlayerList .Unselected > div:nth-child(2) {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.PlayerList .Unselected > div:nth-child(2) > div {
+  justify-content: flex-end;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0.25rem;
+  padding: 0.25rem;
+  max-width: 8rem;
+  background-color: #eee;
+  border-radius: 0.25rem;
+}
+
+.PlayerList .Unselected .Self {
+  border: 1px solid black;
+}
+
+.PlayerList .PlayerSelector .PlayerColor {
+  width: 1em;
+  height: 1em;
+}
+
+.PlayerList .PlayerSelector {
+  display: inline-flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
+.PlayerList .PlayerSelector.MuiList-padding {
+  padding: 0;
+}
+
+.PlayerList .PlayerSelector .MuiTypography-body1 {
+  font-size: 0.8rem;
+/*  white-space: nowrap;*/
+}
+
+.PlayerList .PlayerSelector .MuiTypography-body2 {
+  font-size: 0.7rem;
+  white-space: nowrap;
+}
+
+.PlayerList .PlayerSelector .PlayerEntry {
+  display: flex;
+  flex-direction: column;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  flex: 1 1 0px;
+  align-items: flex-start;
+  border: 1px solid rgba(0,0,0,0);
+  border-radius: 0.25em;
+  min-width: 11em;
+  padding: 0 1px;
+  justify-content: flex-end;
+}
+
+.PlayerList .PlayerSelector .PlayerEntry > div:first-child {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
+  margin-bottom: 0.25em;
+}
+
+.PlayerList .PlayerEntry[data-selectable=true]:hover {
+  border-color: rgba(0,0,0,0.5);
+  cursor: pointer;
+}
+
+.PlayerList .Players .PlayerToggle {
+  min-width: 5em;
+  display: inline-flex;
+  align-items: flex-end;
+  flex-direction: column;
+}
+
+.PlayerList .PlayerName {
+  padding: 0.5em;
+}
+
+.PlayerList .Players > * {
+  width: 100%;
+}
+
+.PlayerList .Players .nameInput {
+  flex-grow: 1;
+}
+
diff --git a/client/src/PlayerList.js b/client/src/PlayerList.js
new file mode 100644
index 0000000..d7c99d2
--- /dev/null
+++ b/client/src/PlayerList.js
@@ -0,0 +1,177 @@
+import React, { useState, useEffect, useContext, useRef } from "react";
+import Paper from '@material-ui/core/Paper';
+import List from '@material-ui/core/List';
+
+import "./PlayerList.css";
+import { PlayerColor } from './PlayerColor.js';
+import { MediaAgent, MediaControl } from "./MediaControl.js";
+
+import { GlobalContext } from "./GlobalContext.js";
+
+const PlayerList = () => {
+  const { ws, name } = useContext(GlobalContext);
+  const [players, setPlayers] = useState({});
+  const [unselected, setUneslected] = useState([]);
+  const [state, setState] = useState('lobby');
+  const [color, setColor] = useState(undefined);
+  const [peers, setPeers] = useState({});
+
+  const onWsMessage = (event) => {
+    const data = JSON.parse(event.data);
+    switch (data.type) {
+    case 'game-update':
+      console.log(`player-list - game update`, data.update);
+     
+      if ('unselected' in data.update) {
+        setUneslected(data.update.unselected);
+      }
+
+      if ('players' in data.update) {
+        let found = false;
+        for (let key in data.update.players) {
+          if (data.update.players[key].name === name) {
+            found = true;
+            setColor(key);
+            break;
+          }
+        }
+        if (!found) {
+          setColor(undefined);
+        }
+        setPlayers(data.update.players);
+      }
+      
+      if ('state' in data.update && data.update.state !== state) {
+        setState(data.update.state);
+      }
+      break;
+    default:
+      break;
+    }
+  };
+  const refWsMessage = useRef(onWsMessage);
+
+  useEffect(() => { refWsMessage.current = onWsMessage; });
+
+  useEffect(() => {
+    if (!ws) {
+      return;
+    }
+    const cbMessage = e => refWsMessage.current(e);
+    ws.addEventListener('message', cbMessage);
+    return () => {
+      ws.removeEventListener('message', cbMessage);
+    }
+  }, [ws, refWsMessage]);
+
+  useEffect(() => {
+    if (!ws) {
+      return;
+    }
+    ws.send(JSON.stringify({ 
+      type: 'get', 
+      fields: [ 'state', 'players', 'unselected' ]
+    }));
+  }, [ws]);
+
+  const toggleSelected = (key) => {
+    ws.send(JSON.stringify({ 
+      type: 'set', 
+      field: 'color',
+      value: color === key ? "" : key
+    }));
+  }
+
+  const playerElements = [];
+
+  const inLobby = state === 'lobby';
+  const sortedPlayers = [];
+
+  for (let key in players) {
+    sortedPlayers.push(players[key]);
+  }
+
+  const sortPlayers = (A, B) => {
+    /* active player first */
+    if (A.name === name) {
+      return -1;
+    }
+    if (B.name === name) {
+      return +1;
+    }
+    
+    /* Sort active players first */
+    if (A.name && !B.name) {
+      return -1;
+    }
+    if (B.name && !A.name) {
+      return +1;
+    }
+
+    /* Ohterwise, sort by color */
+    return A.color.localeCompare(B.color);
+  };
+
+  sortedPlayers.sort(sortPlayers);
+
+  /* Array of just names... */
+  unselected.sort((A, B) => {
+    /* active player first */
+    if (A === name) {
+      return -1;
+    }
+    if (B === name) {
+      return +1;
+    }
+    /* Then sort alphabetically */
+    return A.localeCompare(B);
+  });
+
+  const videoClass = sortedPlayers.length <= 2 ? 'Medium' : 'Small';
+  
+  sortedPlayers.forEach(player => {
+    const name = player.name;
+    const selectable = inLobby && (player.status === 'Not active' || color === player.color);
+    playerElements.push(
+      <div
+        data-selectable={selectable}
+        data-selected={player.color === color}
+        className="PlayerEntry"
+        onClick={() => { inLobby && selectable && toggleSelected(player.color) }} 
+        key={`player-${player.color}`}>
+        <div>
+          <PlayerColor color={player.color}/>
+          <div className="Name">{name ? name : 'Available' }</div>
+        { name && !player.live && <div className="NoNetwork"></div> }
+        </div>
+        { name && player.live && <MediaControl className={videoClass} peer={peers[name]} 
+          isSelf={player.color === color}/> }
+        { !name && <div></div> }
+      </div>
+    );
+  });
+
+  const waiting = unselected.map((player) => {
+    return <div className={player === name ? 'Self' : ''} key={player}>
+      <div>{ player }</div>
+      <MediaControl className={'Small'} peer={peers[player]} isSelf={name === player}/>
+    </div>
+  });
+
+  return (
+    <Paper className={`PlayerList ${videoClass}`}>
+      <MediaAgent setPeers={setPeers}/>
+      <List className="PlayerSelector">
+        { playerElements }
+      </List>
+      { unselected && unselected.length !== 0 && <div className="Unselected">
+        <div>In lobby</div>
+        <div>
+          { waiting }
+        </div>
+      </div> }
+    </Paper>
+  );
+}
+
+export { PlayerList };
\ No newline at end of file
diff --git a/client/src/PlayerName.css b/client/src/PlayerName.css
new file mode 100644
index 0000000..28b2b1d
--- /dev/null
+++ b/client/src/PlayerName.css
@@ -0,0 +1,17 @@
+.PlayerName {
+  padding: 0.5em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+}
+
+.PlayerName > .nameInput {
+  margin-right: 1em;
+  flex: 1;
+  max-width: 30em;
+}
+
+.PlayerName > Button {
+  background: lightblue;
+}
diff --git a/client/src/PlayerName.js b/client/src/PlayerName.js
new file mode 100644
index 0000000..e129196
--- /dev/null
+++ b/client/src/PlayerName.js
@@ -0,0 +1,37 @@
+import React, { useState } from "react";
+import "./PlayerName.css";
+import TextField from '@material-ui/core/TextField';
+import Button from '@material-ui/core/Button';
+
+const PlayerName = ({ name, setName }) => {
+  const [edit, setEdit] = useState(name);
+
+  const sendName = () => {
+    setName(edit);
+  }
+  
+  const nameChange = (event) => {
+    setEdit(event.target.value);
+  }
+  
+  const nameKeyPress = (event) => {
+    if (event.key === "Enter") {
+      setName(edit ? edit : name);
+    }
+  }
+
+  return (
+    <div className="PlayerName">
+      <TextField className="nameInput"
+        onChange={nameChange}
+        onKeyPress={nameKeyPress}
+        label="Enter your name"
+        variant="outlined"
+        value={edit}
+        />
+        <Button onClick={sendName}>Set</Button>
+    </div>
+  );
+};
+
+export { PlayerName };
\ No newline at end of file
diff --git a/client/src/PlayersStatus.css b/client/src/PlayersStatus.css
new file mode 100644
index 0000000..34ab63b
--- /dev/null
+++ b/client/src/PlayersStatus.css
@@ -0,0 +1,204 @@
+.PlayersStatus {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  color: #d0d0d0;
+  pointer-events: none;
+  align-items: flex-end;
+  right: 0;
+  width: 16rem;
+  padding: 0.25rem;
+}
+
+.PlayerStatus * {
+  display: inline-flex;
+}
+
+.PlayersStatus.ActivePlayer {
+  align-items: flex-start;
+  pointer-events: all;
+  right: auto;
+  bottom: 8rem; /* 1rem over top of Resource cards in hand */
+}
+
+.PlayersStatus .Player:not(:last-child) {
+  margin-bottom: 0.5rem;
+  border-bottom: 1px solid black;
+}
+
+.PlayersStatus.ActivePlayer .Player {
+  border-bottom: none;
+}
+
+.PlayersStatus .Player .Who {
+  color: white;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-left: 0;
+  width: 100%;
+}
+
+.PlayersStatus.ActivePlayer .Who {
+  justify-content: flex-start;
+  padding-right: 0;
+}
+
+.PlayerStatus.ActivePlayer .Resource {
+  margin: 0.5rem 0 0 0.5rem;
+}
+
+.PlayersStatus .What {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.PlayersStatus .What > div {
+  margin-top: 0.25rem;
+}
+
+.PlayersStatus.ActivePlayer .What {
+  align-items: flex-start;
+}
+
+.PlayersStatus .PlayerColor {
+  width: 1rem;
+  height: 1rem;
+}
+
+.PlayersStatus .Shrunken {
+  position: relative;
+  height: 4.75rem;
+  display: flex;
+  margin-left: 0.5rem;
+  margin-top: 0.25rem;
+}
+
+.PlayersStatus .Normal {
+  position: relative;
+  height: 7rem;
+  display: flex;
+  margin-right: 0.5rem;
+}
+
+
+.PlayersStatus .BoardPieces {
+  align-items: flex-end;
+  bottom: 0;
+  right: 0;
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+.PlayersStatus.ActivePlayer .BoardPieces {
+  align-items: flex-start;
+  left: 0;
+}
+
+.PlayersStatus .Shrunken .BoardPieces {
+  align-items: flex-end;
+  right: 0;
+  transform-origin: 100% 100%;
+  transform: scale(0.75);
+}
+
+.PlayersStatus .Resource {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-around;
+  height: 3rem;
+  width: 2.1rem;
+  background-size: contain;
+  pointer-events: none;
+  margin: 0.75rem 0.5rem 0 0;
+  border-radius: 2px;
+  filter: brightness(150%);
+}
+
+.PlayersStatus .Has {
+  display: flex;
+  align-items: flex-end;
+}
+
+.PlayersStatus .Placard {
+  /*
+  width: 9.4em;
+  height: 11.44em;
+  */
+  width: 3rem;
+  height: 3.64rem;
+  background-position: center;
+  background-size: 108%;
+  box-sizing: border-box;
+  border-radius: 2px;
+  border: 1px solid #fff;
+  margin: 0 0 0 0.75rem;
+}
+
+.PlayersStatus.ActivePlayer .Placard {
+  margin-right: 0.75rem;
+}
+
+.PlayersStatus .Placard > div.Right {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  top: -0.5rem;
+  right: -1.25rem;
+  border-radius: 50%;
+  border: 1px solid white;
+  background-color: rgb(36, 148, 46);
+  font-size: 0.75rem;
+  width: 1.25rem;
+  height: 1.25rem;
+  text-align: center;
+  line-height: 1rem;
+  filter: brightness(150%);
+}
+
+.PlayersStatus .Points {
+  display: flex;
+  margin-top: 0.25rem;
+}
+
+.PlayersStatus .Points .Resource {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-around;
+  height: 1rem;
+  width: 1rem;
+  pointer-events: none;
+  border-radius: 50%;
+  border: 2px solid #444;
+  background-size: 130%;
+  margin: 0 0 0 -0.625rem;
+}
+
+.PlayersStatus .Points .Resource:first-child {
+  margin-left: 0;
+}
+
+.PlayersStatus .Stack:not(:first-child) {
+  margin-left: 0;
+}
+
+.PlayersStatus .Resource > div {
+  position: absolute;
+  top: -0.5rem;
+  right: -0.5rem;
+  border-radius: 50%;
+  border: 1px solid white;
+  background-color: rgb(36, 148, 46);
+  font-size: 0.75rem;
+  width: 1rem;
+  height: 1rem;
+  text-align: center;
+  line-height: 1rem;
+}
+
+.PlayersStatus .Points b {
+  margin-right: 0.25rem;
+  margin-left: 0.25rem;
+}
\ No newline at end of file
diff --git a/client/src/PlayersStatus.js b/client/src/PlayersStatus.js
new file mode 100644
index 0000000..7a42416
--- /dev/null
+++ b/client/src/PlayersStatus.js
@@ -0,0 +1,211 @@
+import React, { useContext, useState, useMemo, useRef, useEffect } from "react";
+import equal from "fast-deep-equal";
+
+import "./PlayersStatus.css";
+import { BoardPieces } from './BoardPieces.js';
+import { Resource } from './Resource.js';
+import { PlayerColor } from './PlayerColor.js';
+import { Placard } from './Placard.js';
+import { GlobalContext } from './GlobalContext.js';
+
+const Player = ({ player, onClick, reverse, color,
+  largestArmy, isSelf, longestRoad, mostPorts, mostDeveloped }) => {
+  if (!player) {
+    return <>You are an observer.</>;
+  }
+  
+  const developmentCards = player.unplayed
+    ? <Resource label={true} type={'progress-back'} 
+        count={player.unplayed} disabled/>
+    : undefined;
+  const resourceCards = player.resources
+    ? <Resource label={true} type={'resource-back'}
+    count={player.resources} disabled/>
+    : undefined;
+  const armyCards = player.army 
+    ? <Resource label={true} type={'army-1'} count={player.army} disabled/>
+    : undefined;
+  let points = <></>;
+  if (player.points && reverse) {
+    points = <><b>{player.points}</b><Resource type={'progress-back'} 
+      count={player.points} disabled/></>;
+  } else if (player.points) {
+    points = <><Resource type={'progress-back'} count={player.points} 
+      disabled/><b>{player.points}</b></>;
+  }
+
+  const mostPortsPlacard = mostPorts && mostPorts === color ?
+    <Placard
+      disabled
+      active={false}
+      type='port-of-call'
+      count={player.ports}
+    /> : undefined;
+
+  const mostDevelopedPlacard = mostDeveloped && mostDeveloped === color ?
+    <Placard
+      disabled
+      active={false}
+      type='most-developed'
+      count={player.developmentCards}
+    /> : undefined;
+
+  const longestRoadPlacard = longestRoad && longestRoad === color ?
+      <Placard
+        disabled
+        active={false}
+        type='longest-road'
+        count={player.longestRoad}
+      /> : undefined;
+
+  const largestArmyPlacard = largestArmy && largestArmy === color ?
+    <Placard
+      disabled
+      active={false}
+      type='largest-army'
+      count={player.army}
+    /> : undefined;
+
+  return <div className="Player">
+    <div className="Who">
+      <PlayerColor color={color}/>{player.name}
+    </div>
+    <div className="What">
+      { isSelf &&
+        <div className="LongestRoad">
+          Longest road: {player.longestRoad ? player.longestRoad : 0}
+        </div>
+      }
+      <div className="Points">{points}</div>
+      { (largestArmy || longestRoad || armyCards || resourceCards || developmentCards || mostPorts || mostDeveloped) && <>
+        <div className="Has">
+          { !reverse && <>
+            { mostDevelopedPlacard }
+            { mostPortsPlacard }
+            { largestArmyPlacard }
+            { longestRoadPlacard }
+            { !largestArmyPlacard && armyCards }
+            { developmentCards }
+            { resourceCards }
+          </> }
+          { reverse && <>
+            { resourceCards }
+            { developmentCards }
+            { !largestArmyPlacard && armyCards }
+            { longestRoadPlacard }
+            { largestArmyPlacard }
+            { mostPortsPlacard }
+            { mostDevelopedPlacard }
+          </> }
+        </div>
+      </> }
+    </div>
+    <div className={`${onClick ? 'Normal' : 'Shrunken'}`}>
+      <BoardPieces onClick={onClick} player={player}/>
+    </div>
+  </div>
+};
+
+const PlayersStatus = ({ active }) => {
+  const { ws } = useContext(GlobalContext);
+  const [players, setPlayers] = useState(undefined);
+  const [color, setColor] = useState(undefined);
+  const [largestArmy, setLargestArmy] = useState(undefined);
+  const [longestRoad, setLongestRoad] = useState(undefined);
+  const [mostPorts, setMostPorts] = useState(undefined);
+  const [mostDeveloped, setMostDeveloped] = useState(undefined);
+  const fields = useMemo(() => [
+    'players', 'color', 'longestRoad', 'largestArmy', 'mostPorts', 'mostDeveloped'
+  ], []);
+  const onWsMessage = (event) => {
+    const data = JSON.parse(event.data);
+    switch (data.type) {
+    case 'game-update':
+      console.log(`players-status - game-update: `, data.update);
+      if ('players' in data.update && !equal(players, data.update.players)) {
+        setPlayers(data.update.players);
+      }   
+      if ('color' in data.update && data.update.color !== color) {
+        setColor(data.update.color);
+      }
+      if ('longestRoad' in data.update 
+        && data.update.longestRoad !== longestRoad) {
+        setLongestRoad(data.update.longestRoad);
+      }
+      if ('largestArmy' in data.update 
+        && data.update.largestArmy !== largestArmy) {
+        setLargestArmy(data.update.largestArmy);
+      }
+      if ('mostDeveloped' in data.update 
+        && data.update.mostDeveloped !== mostDeveloped) {
+        setMostDeveloped(data.update.mostDeveloped);
+      }
+      if ('mostPorts' in data.update 
+        && data.update.mostPorts !== mostPorts) {
+        setMostPorts(data.update.mostPorts);
+      }
+      break;
+    default:
+      break;
+    }
+  };
+  const refWsMessage = useRef(onWsMessage);
+  useEffect(() => { refWsMessage.current = onWsMessage; });
+  useEffect(() => {
+    if (!ws) { return; }
+    const cbMessage = e => refWsMessage.current(e);
+    ws.addEventListener('message', cbMessage);
+    return () => { ws.removeEventListener('message', cbMessage); }
+  }, [ws, refWsMessage]);
+  useEffect(() => {
+    if (!ws) { return; }
+    ws.send(JSON.stringify({ 
+      type: 'get', 
+      fields
+    }));
+  }, [ws, fields]);
+
+  if (!players) {
+    return <></>;
+  }
+
+  const buildItem = () => {
+    console.log(`player-status - build-item`);
+  }
+  
+  let elements;
+  if (active) {
+    elements = <Player
+      player={players[color]}
+      onClick={buildItem}
+      reverse
+      largestArmy={largestArmy}
+      longestRoad={longestRoad}
+      mostPorts={mostPorts}
+      mostDeveloped={mostDeveloped}
+      isSelf={active}
+      key={`PlayerStatus-${color}`}
+      color={color}/>;
+  } else {
+    elements = Object.getOwnPropertyNames(players)
+    .filter(key => color !== key)
+    .map(key => {
+      return <Player
+        player={players[key]}
+        largestArmy={largestArmy}
+        longestRoad={longestRoad}
+        mostPorts={mostPorts}
+        mostDeveloped={mostDeveloped}
+        key={`PlayerStatus-${key}}`}
+        color={key}/>;
+    });
+  }
+
+  return (
+    <div className={`PlayersStatus ${active ? 'ActivePlayer' : ''}`}>
+      { elements }
+    </div>
+  );
+}
+
+export { PlayersStatus };
\ No newline at end of file
diff --git a/client/src/setupProxy.js b/client/src/setupProxy.js
new file mode 100644
index 0000000..ce51e33
--- /dev/null
+++ b/client/src/setupProxy.js
@@ -0,0 +1,12 @@
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+module.exports = function(app) {
+  const base = process.env.PUBLIC_URL;
+  console.log(`http-proxy-middleware ${base}`);
+  app.use(createProxyMiddleware(
+    `${base}/api/v1/games/ws`, {
+      ws: true,
+      target: 'http://localhost:8930',
+      changeOrigin: true,
+  }));
+};
diff --git a/server/.gitignore b/server/.gitignore
new file mode 100644
index 0000000..aa68746
--- /dev/null
+++ b/server/.gitignore
@@ -0,0 +1,2 @@
+games/*
+!games/.keep
diff --git a/server/app.js b/server/app.js
old mode 100644
new mode 100755
index e69de29..46a74d0
--- a/server/app.js
+++ b/server/app.js
@@ -0,0 +1,120 @@
+"use strict";
+
+process.env.TZ = "Etc/GMT";
+
+console.log("Loading ketr.ketran");
+
+const express = require("express"),
+  bodyParser = require("body-parser"),
+  config = require("config"),
+  session = require('express-session'),
+  basePath = require("./lib/basepath"),
+  cookieParser = require("cookie-parser"),
+  app = express(),
+  fs = require('fs');
+
+const server = require("http").createServer(app);
+
+app.use(cookieParser());
+
+const ws = require('express-ws')(app, server);
+
+require("./lib/console-line.js"); /* Monkey-patch console.log with line numbers */
+
+const frontendPath = config.get("frontendPath").replace(/\/$/, "") + "/",
+  serverConfig = config.get("server");
+
+console.log("Hosting server from: " + basePath);
+
+let userDB, chatDB;
+
+app.use(bodyParser.json());
+
+/* App is behind an nginx proxy which we trust, so use the remote address
+ * set in the headers */
+app.set("trust proxy", true);
+
+app.set("basePath", basePath);
+app.use(basePath, require("./routes/basepath.js"));
+
+/* Handle static files first so excessive logging doesn't occur */
+app.use(basePath, express.static(frontendPath, { index: false }));
+
+const index = require("./routes/index");
+
+if (config.has("admin")) {
+  const admin = config.get("admin");
+  app.set("admin", admin);
+}
+
+/* Allow loading of the app w/out being logged in */
+app.use(basePath, index);
+
+/* /chat loads the default index */
+app.use(basePath + "chat", index);
+
+/* Allow access to the 'users' API w/out being logged in */
+/*
+const users = require("./routes/users");
+app.use(basePath + "api/v1/users", users.router);
+*/
+
+app.use(function(err, req, res, next) {
+  console.error(err.message);
+  res.status(err.status || 500).json({
+    message: err.message,
+    error: {}
+  });
+});
+
+app.use(`${basePath}api/v1/chat`, require("./routes/chat"));
+
+/* Declare the "catch all" index route last; the final route is a 404 dynamic router */
+app.use(basePath, index);
+
+/**
+ * Create HTTP server and listen for new connections
+ */
+app.set("port", serverConfig.port);
+
+process.on('SIGINT', () => {
+  console.log("Gracefully shutting down from SIGINT (Ctrl-C) in 2 seconds");
+  setTimeout(() => process.exit(-1), 2000);
+  server.close(() => process.exit(1));
+});
+
+require("./db/chat").then(function(db) {
+  chatDB = db;
+}).then(function() {
+  return require("./db/users").then(function(db) {
+    userDB = db;
+  });
+}).then(function() {
+  console.log("DB connected. Opening server.");
+  server.listen(serverConfig.port, () => {
+    console.log(`http/ws server listening on ${serverConfig.port}`);
+  });
+}).catch(function(error) {
+  console.error(error);
+  process.exit(-1);
+});
+
+server.on("error", function(error) {
+  if (error.syscall !== "listen") {
+    throw error;
+  }
+
+  // handle specific listen errors with friendly messages
+  switch (error.code) {
+    case "EACCES":
+      console.error(serverConfig.port + " requires elevated privileges");
+      process.exit(1);
+      break;
+    case "EADDRINUSE":
+      console.error(serverConfig.port + " is already in use");
+      process.exit(1);
+      break;
+    default:
+      throw error;
+  }
+});
diff --git a/server/config/.gitignore b/server/config/.gitignore
new file mode 100644
index 0000000..5826a3a
--- /dev/null
+++ b/server/config/.gitignore
@@ -0,0 +1 @@
+local.json
diff --git a/server/config/default.json b/server/config/default.json
new file mode 100755
index 0000000..856178e
--- /dev/null
+++ b/server/config/default.json
@@ -0,0 +1,19 @@
+{
+  "db": {
+    "users": {
+      "dialect": "sqlite",
+      "storage": "../db/users.db",
+      "logging" : false,
+      "timezone": "+00:00"
+    }
+  },
+  "server": {
+    "port": 8930
+  },
+  "frontendPath": "./",
+  "basePath": "/",
+  "sessions": {
+    "db": "../db/sessions.db",
+    "store-secret": "m@g1kc00ki3z!"
+  }
+}
diff --git a/server/config/production.json b/server/config/production.json
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/server/config/production.json
@@ -0,0 +1 @@
+{}
diff --git a/server/db/chat.js b/server/db/chat.js
new file mode 100755
index 0000000..d252133
--- /dev/null
+++ b/server/db/chat.js
@@ -0,0 +1,44 @@
+"use strict";
+
+const fs = require('fs'),
+  path = require('path'),
+  Sequelize = require('sequelize'),
+  config = require('config');
+
+function init() {
+  const db = {
+    sequelize: new Sequelize(config.get("db.chats")),
+    Sequelize: Sequelize
+  };
+
+  return db.sequelize.authenticate().then(function () {
+    const Chat = db.sequelize.define('chat', {
+      id: {
+        type: Sequelize.INTEGER,
+        primaryKey: true,
+        autoIncrement: true
+      },
+      path: Sequelize.STRING,
+      name: Sequelize.STRING,
+    }, {
+      timestamps: false,
+      classMethods: {
+        associate: function() {
+        }
+      }
+    });
+
+    return db.sequelize.sync({
+      force: false
+    }).then(function () {
+      return db;
+    });
+  }).catch(function (error) {
+    console.log("ERROR: Failed to authenticate with CHATS DB");
+    console.log("ERROR: " + JSON.stringify(config.get("db"), null, 2));
+    console.log(error);
+    throw error;
+  });
+}
+
+module.exports = init();
diff --git a/server/db/users.js b/server/db/users.js
new file mode 100755
index 0000000..00e5dae
--- /dev/null
+++ b/server/db/users.js
@@ -0,0 +1,70 @@
+"use strict";
+
+const Sequelize = require('sequelize'),
+  config = require('config');
+
+function init() {
+  const db = {
+    sequelize: new Sequelize(config.get("db.users")),
+    Sequelize: Sequelize
+  };
+
+  return db.sequelize.authenticate().then(function () {
+    const User = db.sequelize.define('users', {
+      id: {
+        type: Sequelize.INTEGER,
+        primaryKey: true,
+        autoIncrement: true
+      },
+      displayName: Sequelize.STRING,
+      notes: Sequelize.STRING,
+      uid: Sequelize.STRING,
+      authToken: Sequelize.STRING,
+      authDate: Sequelize.DATE,
+      authenticated: Sequelize.BOOLEAN,
+      mailVerified: Sequelize.BOOLEAN,
+      mail: Sequelize.STRING,
+      memberSince: Sequelize.DATE,
+      password: Sequelize.STRING, /* SHA hash of user supplied password */
+      passwordExpires: Sequelize.DATE
+    }, {
+      timestamps: false
+    });
+
+    const Authentication = db.sequelize.define('authentication', {
+      key: {
+        type: Sequelize.STRING,
+        primaryKey: true,
+        allowNull: false
+      },
+      issued: Sequelize.DATE,
+      type: {
+        type: Sequelize.ENUM,
+        values: [ 'account-setup', 'password-reset' ]
+      },
+      userId: {
+        type: Sequelize.INTEGER,
+        allowNull: false,
+        references: {
+          model: User,
+          key: 'id',
+        }
+      }
+    }, {
+      timestamps: false
+    });
+
+    return db.sequelize.sync({
+      force: false
+    }).then(function () {
+      return db;
+    });
+  }).catch(function (error) {
+    console.log("ERROR: Failed to authenticate with USER DB");
+    console.log("ERROR: " + JSON.stringify(config.get("db"), null, 2));
+    console.log(error);
+    throw error;
+  });
+}
+
+module.exports = init();
diff --git a/server/lib/basepath.js b/server/lib/basepath.js
new file mode 100755
index 0000000..e1f6d50
--- /dev/null
+++ b/server/lib/basepath.js
@@ -0,0 +1,9 @@
+let basePath = process.env.REACT_APP_basePath;
+basePath = "/" + basePath.replace(/^\/+/, "").replace(/\/+$/, "") + "/";
+if (basePath == "//") {
+  basePath = "/";
+}
+
+console.log(`Using basepath ${basePath}`);
+
+module.exports = basePath;
diff --git a/server/lib/console-line.js b/server/lib/console-line.js
new file mode 100755
index 0000000..a6f33b9
--- /dev/null
+++ b/server/lib/console-line.js
@@ -0,0 +1,30 @@
+/* monkey-patch console.log to prefix with file/line-number */
+if (process.env.LOG_LINE) {
+  let cwd = process.cwd(),
+    cwdRe = new RegExp("^[^/]*" + cwd.replace("/", "\\/") + "\/([^:]*:[0-9]*).*$");
+  [ "log", "warn", "error" ].forEach(function(method) {
+    console[method] = (function () {
+      let orig = console[method];
+      return function () {
+        function getErrorObject() {
+          try {
+            throw Error('');
+          } catch (err) {
+            return err;
+          }
+        }
+
+        let err = getErrorObject(),
+          caller_line = err.stack.split("\n")[3],
+          args = [caller_line.replace(cwdRe, "$1 -")];
+
+        /* arguments.unshift() doesn't exist... */
+        for (var i = 0; i < arguments.length; i++) {
+          args.push(arguments[i]);
+        }
+
+        orig.apply(this, args);
+      };
+    })();
+  });
+}
diff --git a/server/package.json b/server/package.json
index 201a264..2569e1b 100644
--- a/server/package.json
+++ b/server/package.json
@@ -6,7 +6,7 @@
     "start": "export $(cat ../.env | xargs) && node app.js"
   },
   "author": "James Ketrenos <james_ketr_chat@ketrenos.com>",
-  "license": "LICENSE FILE LICENSE",
+  "license": "MIT",
   "private": true,
   "dependencies": {
     "bluebird": "^3.5.5",
@@ -17,13 +17,22 @@
     "core-js": "^3.21.1",
     "express": "^4.17.3",
     "express-session": "^1.17.1",
+    "express-ws": "^5.0.2",
     "fast-deep-equal": "^3.1.3",
-    "https-proxy-agent": "^5.0.1",
+    "handlebars": "^4.7.6",
     "moment": "^2.24.0",
     "morgan": "^1.9.1",
     "node-fetch": "^2.6.0",
     "node-gzip": "^1.1.2",
     "nodemailer": "^6.3.0",
-    "typeface-roboto": "0.0.75"
+    "random-words": "^1.1.2",
+    "sequelize": "^5.21.6",
+    "sqlite3": "^4.1.1",
+    "typeface-roboto": "0.0.75",
+    "ws": "^8.5.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@git.ketrenos.com:jketreno/ketr.chat"
   }
 }
diff --git a/server/routes/basepath.js b/server/routes/basepath.js
new file mode 100644
index 0000000..eba896d
--- /dev/null
+++ b/server/routes/basepath.js
@@ -0,0 +1,33 @@
+"use strict";
+
+const express = require("express"),
+  fs = require("fs"),
+  url = require("url");
+
+const router = express.Router();
+
+/* This router only handles HTML files and is used
+ * to replace BASEPATH */
+router.get("/*", (req, res, next) => {
+  const parts = url.parse(req.url),
+    basePath = req.app.get("basePath");
+
+  if (!/^\/[^/]+\.html$/.exec(parts.pathname)) {
+    return next();
+  }
+
+  console.log("Attempting to parse 'frontend" + parts.pathname + "'");
+
+  /* Replace <script>'<base href="/BASEPATH/">';</script> in index.html with
+   * the basePath */
+  fs.readFile("frontend" + parts.pathname, "utf8", function(error, content) {
+    if (error) {
+      return next();
+    }
+    res.send(content.replace(
+      /<script>'<base href="BASEPATH">';<\/script>/,
+      "<base href='" + basePath + "'>"));
+  });
+});
+
+module.exports = router;
diff --git a/server/routes/chat.js b/server/routes/chat.js
new file mode 100755
index 0000000..2aadb2a
--- /dev/null
+++ b/server/routes/chat.js
@@ -0,0 +1,1659 @@
+"use strict";
+
+const express = require("express"),
+  router = express.Router(),
+  crypto = require("crypto"),
+  { readFile, writeFile } = require("fs").promises,
+  fs = require("fs"),
+  accessSync = fs.accessSync,
+  randomWords = require("random-words"),
+  equal = require("fast-deep-equal");
+
+const debug = {
+  audio: false,
+  get: true,
+  set: true,
+  update: false
+};
+
+let chatDB;
+
+require("../db/chats").then(function(db) {
+  chatDB = db;
+});
+
+const sessionFromColor = (chat, color) => {
+  for (let key in chat.sessions) {
+    if (chat.sessions[key].color === color) {
+      return chat.sessions[key];
+    }
+  }
+}
+
+const newPerson = (color) => {
+  return {
+    status: "Not active", 
+    lastActive: 0,
+    color: color,
+    name: "",
+  };
+}
+
+const getSession = (chat, id) => {
+  if (!chat.sessions) {
+    chat.sessions = {};
+  }
+
+  /* If this session is not yet in the chat, add it and set the person's name */
+  if (!(id in chat.sessions)) {
+    chat.sessions[id] = {
+      id: `[${id.substring(0, 8)}]`,
+      name: '',
+      color: '',
+      person: undefined,
+      lastActive: Date.now(),
+      live: true
+    };
+  }
+
+  const session = chat.sessions[id];
+  session.lastActive = Date.now();
+  session.live = true;
+  if (session.person) {
+    session.person.live = true;
+    session.person.lastActive = session.lastActive;
+  }
+
+  /* Expire old unused sessions */
+  for (let _id in chat.sessions) {
+    const _session = chat.sessions[_id];
+    if (_session.color || _session.name || _session.person) {
+      continue;
+    }
+    if (_id === id) {
+      continue;
+    }
+    /* 60 minutes */
+    const age = Date.now() - _session.lastActive;
+    if (age > 60 * 60 * 1000) {
+      console.log(`${_session.id}: Expiring old session ${_id}: ${age/(60 * 1000)} minutes`);
+      delete chat.sessions[_id];
+      if (_id in chat.sessions) {
+        console.log('delete DID NOT WORK!');
+      }
+    }
+  }
+
+  return chat.sessions[id];
+};
+
+const loadChat = async (id) => {
+  if (/^\.|\//.exec(id)) {
+    return undefined;
+  }
+
+  if (id in chats) {
+    return chats[id];
+  }
+
+  let chat = await readFile(`chats/${id}`)
+  .catch(() => {
+    return;
+  });
+
+  if (chat) {
+    try {
+      chat = JSON.parse(chat);
+      console.log(`${info}: Creating backup of chats/${id}`);
+      await writeFile(`chats/${id}.bk`, JSON.stringify(chat));
+    } catch (error) {
+      console.log(`Load or parse error from chats/${id}:`, error);
+      console.log(`Attempting to load backup from chats/${id}.bk`);
+      chat = await readFile(`chats/${id}.bk`)
+      .catch(() => {
+        console.error(error, chat);
+      });
+      if (chat) {
+        try {
+          chat = JSON.parse(chat);
+          console.log(`Saving backup to chats/${id}`);
+          await writeFile(`chats/${id}`, JSON.stringify(chat, null, 2));
+        } catch (error) {
+          console.error(error);
+          chat = null;
+        }
+      }
+    }
+  }
+  
+  if (!chat) {
+    chat = createChat(id);
+  }
+
+  /* Clear out cached names from person colors and rebuild them
+   * from the information in the saved chat sessions */
+  for (let color in chat.persons) {
+    delete chat.persons[color].name;
+    chat.persons[color].status = 'Not active';
+  }
+
+  /* Reconnect session person colors to the person objects */
+  chat.unselected = [];
+  for (let id in chat.sessions) {
+    const session = chat.sessions[id];
+    if (session.name && session.color && session.color in chat.persons) {
+      session.person = chat.persons[session.color];
+      session.person.name = session.name;
+      session.person.status = 'Active';
+      session.person.live = false;
+    } else {
+      session.color = '';
+      session.person = undefined;
+    }
+   
+    session.live = false;
+   
+    /* Populate the 'unselected' list from the session table */
+    if (!chat.sessions[id].color && chat.sessions[id].name) {
+      chat.unselected.push(chat.sessions[id]);
+    }
+  }
+
+  chats[id] = chat;
+  return chat;
+};
+
+const clearPerson = (person) => {
+  const color = person.color;
+  for (let key in person) {
+    delete person[key];
+  }
+  Object.assign(person, newPerson(color));
+}
+
+const setPersonName = (chat, session, name) => {
+  if (session.name === name) {
+    return; /* no-op */
+  }
+  if (session.color) {
+    return `You cannot change your name while you have a color selected.`;
+  }
+  
+  if (!name) {
+    return `You can not set your name to nothing!`;
+  }
+
+  /* Check to ensure name is not already in use */
+  let rejoin = false;
+  for (let id in chat.sessions) {
+    const tmp = chat.sessions[id];
+    if (tmp === session || !tmp.name) {
+      continue;
+    }
+    if (tmp.name.toLowerCase() === name.toLowerCase()) {
+      if (!tmp.person || (Date.now() - tmp.person.lastActive) > 60000) {
+        rejoin = true;
+        /* Update the session object from tmp, but retain websocket
+         * from active session */
+        Object.assign(session, tmp, { ws: session.ws, id: session.id });
+        console.log(`${info}: ${name} has been reallocated to a new session.`);
+        delete chat.sessions[id];
+      } else {
+        return `${name} is already taken and has been active in the last minute.`;
+      }
+    }
+  }
+  
+  let message;
+
+  if (!session.name) {
+    message = `A new person has entered the lobby as ${name}.`;
+  } else {
+    if (rejoin) {
+      if (session.color) {
+        message = `${name} has reconnected to the chat.`;
+      } else {
+        message = `${name} has rejoined the lobby.`;
+      }
+      session.name = name;
+      if (session.ws && (chat.id in audio) 
+      && session.name in audio[chat.id]) {
+        part(audio[chat.id], session);
+      }
+    } else {
+      message = `${session.name} has changed their name to ${name}.`;
+      if (session.ws && chat.id in audio) {
+        part(audio[chat.id], session);
+      }
+    }
+  }
+
+  session.name = name;
+  session.live = true;
+  if (session.person) {
+    session.color = session.person.color;
+    session.person.name = session.name;
+    session.person.status = `Active`;
+    session.person.lastActive = Date.now();
+    session.person.name = name;
+    session.person.live = true;
+  }
+  
+  if (session.ws && session.hasAudio) {
+    join(audio[chat.id], session, {
+      hasVideo: session.video ? true : false,
+      hasAudio: session.audio ? true : false
+    });
+  }
+  console.log(`${info}: ${message}`);
+  addChatMessage(chat, null, message);
+
+   /* Rebuild the unselected list */
+  if (!session.color) {
+    console.log(`${info}: Adding ${session.name} to the unselected`);
+  }
+  chat.unselected = [];
+  for (let id in chat.sessions) {
+    if (!chat.sessions[id].color && chat.sessions[id].name) {
+      chat.unselected.push(chat.sessions[id]);
+    }
+  }
+
+  sendUpdateToPerson(chat, session, {
+    name: session.name,
+    color: session.color,
+    live: session.live,
+    private: session.person
+  });
+  sendUpdateToPersons(chat, {
+    persons: getFilteredPersons(chat),
+    unselected: getFilteredUnselected(chat),
+    chat: chat.chat
+  });
+  /* Now that a name is set, send the full chat to the person */
+  sendChatToPerson(chat, session);
+}
+
+const colorToWord = (color) => {
+  switch (color) {
+    case 'O': return 'orange';
+    case 'W': return 'white';
+    case 'B': return 'blue';
+    case 'R': return 'red';
+    default:
+      return '';
+  }
+}
+
+const getActiveCount = (chat) => {
+  let active = 0;
+  for (let color in chat.persons) {
+    if (!chat.persons[color].name) {
+      continue;
+    }
+    active++;
+  }
+  return active;
+}
+
+const setPersonColor = (chat, session, color) => {
+  /* Selecting the same color is a NO-OP */
+  if (session.color === color) {
+    return;
+  }
+
+  /* Verify the person has a name set */
+  if (!session.name) {
+    return `You may only select a person when you have set your name.`;
+  }
+
+  if (chat.state !== 'lobby') {
+    return `You may only select a person when the chat is in the lobby.`;
+  }
+
+  /* Verify selection is valid */
+  if (color && !(color in chat.persons)) {
+    return `An invalid person selection was attempted.`;
+  }
+
+  /* Verify selection is not already taken */
+  if (color && chat.persons[color].status !== 'Not active') {
+    return `${chat.persons[color].name} already has ${colorToWord(color)}`;
+  }
+
+  let active = getActiveCount(chat);
+  
+  if (session.person) {
+    /* Deselect currently active person for this session */
+    clearPerson(session.person);
+    session.person = undefined;
+    session.color = '';
+    active--;
+   
+    /* If the person is not selecting a color, then return */
+    if (!color) {
+      addChatMessage(chat, null, 
+        `${session.name} is no longer ${colorToWord(session.color)}.`);
+      chat.unselected.push(session);
+      chat.active = active;
+      if (active === 1) {
+        addChatMessage(chat, null,
+          `There are no longer enough persons to start a chat.`);
+      }
+      sendUpdateToPerson(chat, session, {
+        name: session.name,
+        color: '',
+        live: session.live,
+        private: session.person
+      });
+      sendUpdateToPersons(chat, {
+        active: chat.active,
+        unselected: getFilteredUnselected(chat),
+        persons: getFilteredPersons(chat),
+        chat: chat.chat
+      });
+      return;
+    }
+  }
+
+  /* All good -- set this person to requested selection */
+  active++;
+  session.color = color;
+  session.live = true;
+  session.person = chat.persons[color];
+  session.person.name = session.name;
+  session.person.status = `Active`;
+  session.person.lastActive = Date.now();
+  session.person.live = true;
+  addChatMessage(chat, session, `${session.name} has chosen to play as ${colorToWord(color)}.`);
+
+  const update = {
+    persons: getFilteredPersons(chat),
+    chat: chat.chat
+  };
+
+  /* Rebuild the unselected list */
+  const unselected = [];
+  for (let id in chat.sessions) {
+    if (!chat.sessions[id].color && chat.sessions[id].name) {
+      unselected.push(chat.sessions[id]);
+    }
+  }
+  if (unselected.length !== chat.unselected.length) {
+    chat.unselected = unselected;
+    update.unselected = getFilteredUnselected(chat);
+  }
+
+  if (chat.active !== active) {
+    if (chat.active < 2 && active >= 2) {
+      addChatMessage(chat, null,
+         `There are now enough persons to start the chat.`);
+    }
+    chat.active = active;
+    update.active = chat.active;
+  }
+
+  sendUpdateToPerson(chat, session, {
+    name: session.name,
+    color: session.color,
+    live: session.live,
+    private: session.person,
+  });
+  sendUpdateToPersons(chat, update);
+};
+
+const addActivity = (chat, session, message) => {
+  let date = Date.now();
+  if (chat.activities.length && chat.activities[chat.activities.length - 1].date === date) {
+    date++;
+  }
+  chat.activities.push({ color: session ? session.color : '', message, date });
+  if (chat.activities.length > 30) {
+    chat.activities.splice(0, chat.activities.length - 30);
+  }
+}
+
+const addChatMessage = (chat, session, message, isNormalChat) => {
+  let now = Date.now();
+  let lastTime = 0;
+  if (chat.chat.length) {
+    lastTime = chat.chat[chat.chat.length - 1].date;
+  }
+  if (now <= lastTime) {
+    now = lastTime + 1;
+  }
+
+  const entry = {
+    date: now,
+    message: message
+  };
+  if (isNormalChat) {
+    entry.normalChat = true;
+  }
+  if (session && session.name) {
+    entry.from = session.name;
+  }
+  if (session && session.color) {
+    entry.color = session.color;
+  }
+  chat.chat.push(entry);
+  if (chat.chat.length > 50) {
+    chat.chat.splice(0, chat.chat.length - 50);
+  }
+};
+
+const getColorFromName = (chat, name) => {
+  for (let id in chat.sessions) {
+    if (chat.sessions[id].name === name) {
+      return chat.sessions[id].color;
+    }
+  }
+  return '';
+};
+      
+const getLastPersonName = (chat) => {
+  let index = chat.personOrder.length - 1;
+  for (let id in chat.sessions) {
+    if (chat.sessions[id].color === chat.personOrder[index]) {
+      return chat.sessions[id].name;
+    }
+  }
+  return '';
+}
+
+const getFirstPersonName = (chat) => {
+  let index = 0;
+  for (let id in chat.sessions) {
+    if (chat.sessions[id].color === chat.personOrder[index]) {
+      return chat.sessions[id].name;
+    }
+  }
+  return '';
+}
+
+router.put("/:id/:action/:value?", async (req, res) => {
+  const { action, id } = req.params,
+    value = req.params.value ? req.params.value : "";
+  console.log(`PUT chats/${id}/${action}/${value}`);
+
+  const chat = await loadChat(id);
+  if (!chat) {
+    const error = `Chat not found and cannot be created: ${id}`;
+    return res.status(404).send(error);
+  }
+
+  let error = 'Invalid request';
+
+  if ('private-token' in req.headers) {
+    if (req.headers['private-token'] !== req.app.get('admin')) {
+      error = `Invalid admin credentials.`;
+    } else {
+      error = adminCommands(chat, action, value, req.query);
+    }
+    if (!error) {
+      sendChatToPersons(chat);
+    } else {
+      console.log(`admin-action error: ${error}`);
+    }
+  }
+
+  return res.status(400).send(error);
+});
+
+const clearTimeNotice= (chat, session) => {
+  if (!session.person.turnNotice) {
+    /* benign state; don't alert the user */
+    //return `You have not been idle.`;
+  }
+  session.person.turnNotice = "";
+  sendUpdateToPerson(chat, session, {
+    private: session.person
+  });
+};
+
+const startTurnTimer = (chat, session) => {
+  const timeout = 90;
+  if (!session.ws) {
+    console.log(`${session.id}: Aborting turn timer as ${session.name} is disconnected.`);
+  } else {
+    console.log(`${session.id}: (Re)setting turn timer for ${session.name} to ${timeout} seconds.`);
+  }
+  if (chat.turnTimer) {
+    clearTimeout(chat.turnTimer);
+  }
+  if (!session.connected) {
+    chat.turnTimer = 0;
+    return;
+  }
+  chat.turnTimer = setTimeout(() => {
+    console.log(`${session.id}: Turn timer expired for ${session.name}`);
+    session.person.turnNotice = 'It is still your turn.';
+    sendUpdateToPerson(chat, session, {
+      private: session.person
+    });
+    resetTurnTimer(chat, session);
+  }, timeout * 1000);
+}
+
+const resetTurnTimer = (chat, session) => {
+  startTurnTimer(chat, session);
+}
+
+const stopTurnTimer = (chat) => {
+  if (chat.turnTimer) {
+    console.log(`${info}: Stopping turn timer.`);
+    clearTimeout(chat.turnTimer);
+    chat.turnTimer = 0;
+  }
+}
+
+const ping = (session) => {
+  if (!session.ws) {
+    console.log(`[no socket] Not sending ping to ${session.name} -- connection does not exist.`);
+    return;
+  }
+
+  session.ping = Date.now();
+  // console.log(`Sending ping to ${session.name}`);
+  session.ws.send(JSON.stringify({ type: 'ping', ping: session.ping }));
+  if (session.keepAlive) {
+    clearTimeout(session.keepAlive);
+  }
+  session.keepAlive = setTimeout(() => { ping(session); }, 2500);
+}
+
+const wsInactive = (chat, req) => {
+  const session = getSession(chat, req.cookies.person);
+
+  if (session && session.ws) {
+    console.log(`Closing WebSocket to ${session.name} due to inactivity.`);
+    session.ws.close();
+    session.ws = undefined;
+  }
+
+  /* Prevent future pings */
+  if (req.keepAlive) {
+    clearTimeout(req.keepAlive);
+  }
+}
+
+const setChatState = (chat, session, state) => {
+  if (!state) {
+    return `Invalid state.`;
+  }
+
+  if (!session.color) {
+    return `You must have an active person to start the chat.`;
+  }
+
+  if (state === chat.state) {
+    return;
+  }
+
+  switch (state) {
+  case "chat-order":
+    if (chat.state !== 'lobby') {
+      return `You can only start the chat from the lobby.`;
+    }
+    const active = getActiveCount(chat);
+    if (active < 2) {
+      return `You need at least two persons to start the chat.`;
+    }
+    /* Delete any non-played colors from the person map; reduces all
+     * code that would otherwise have to filter out persons by checking
+     * the 'Not active' state of person.status */
+    for (let key in chat.persons) {
+      if (chat.persons[key].status !== 'Active') {
+        delete chat.persons[key];
+      }
+    }
+    addChatMessage(chat, null, `${session.name} requested to start the chat.`);
+    chat.state = state;
+
+    sendUpdateToPersons(chat, {
+      state: chat.state, 
+      chat: chat.chat 
+    });
+    break;
+  }
+
+}
+
+const resetDisconnectCheck = (chat, req) => {  
+  if (req.disconnectCheck) {
+    clearTimeout(req.disconnectCheck);
+  }
+  //req.disconnectCheck = setTimeout(() => { wsInactive(chat, req) }, 20000);
+}
+
+const join = (peers, session, { hasVideo, hasAudio }) => {
+  const ws = session.ws;
+
+  if (!session.name) {
+    console.error(`${session.id}: <- join - No name set yet. Audio not available.`);
+    return;
+  }
+
+  console.log(`${session.id}: <- join - ${session.name}`);
+  console.log(`${all}: -> addPeer - ${session.name}`);
+  
+  if (session.name in peers) {
+    console.log(`${session.id}:${session.name} - Already joined to Audio.`);
+    return;
+  }
+
+  for (let peer in peers) {
+    /* Add this caller to all peers */
+    peers[peer].ws.send(JSON.stringify({
+      type: 'addPeer', 
+      data: {
+        peer_id: session.name, 
+        should_create_offer: false,
+        hasAudio, hasVideo
+      }
+    }));
+
+    /* Add each other peer to the caller */
+    ws.send(JSON.stringify({
+      type: 'addPeer', 
+      data: {
+        peer_id: peer, 
+        should_create_offer: true,
+        hasAudio: peers[peer].hasAudio,
+        hasVideo: peers[peer].hasVideo
+      }
+    }));
+  }
+
+  /* Add this user as a peer connected to this WebSocket */
+  peers[session.name] = {
+    ws,
+    hasAudio,
+    hasVideo
+  };
+};
+
+const part = (peers, session) => {
+  const ws = session.ws;
+
+  if (!session.name) {
+    console.error(`${session.id}: <- part - No name set yet. Audio not available.`);
+    return;
+  }
+
+  if (!(session.name in peers)) {
+    console.log(`${session.id}: <- ${session.name} - Does not exist in chat audio.`);
+    return;
+  }
+
+  console.log(`${session.id}: <- ${session.name} - Audio part.`);
+  console.log(`${all}: -> removePeer - ${session.name}`);
+
+  delete peers[session.name];
+
+  /* Remove this peer from all other peers, and remove each
+   * peer from this peer */
+  for (let peer in peers) {
+    peers[peer].ws.send(JSON.stringify({
+      type: 'removePeer',
+      data: {'peer_id': session.name}
+    }));
+    ws.send(JSON.stringify({
+      type: 'removePeer', 
+      data: {'peer_id': session.name}
+    }));
+  }
+};
+
+
+const getName = (session) => {
+  return session ? (session.name ? session.name : session.id) : 'Admin';
+}
+
+const saveChat = async (chat) => {
+  /* Shallow copy chat, filling its sessions with a shallow copy of sessions so we can then
+   * delete the person field from them */
+  const reducedChat = Object.assign({}, chat, { sessions: {} }),
+    reducedSessions = [];
+  
+  for (let id in chat.sessions) {
+    const reduced = Object.assign({}, chat.sessions[id]);
+    if (reduced.person) {
+      delete reduced.person;
+    }
+    if (reduced.ws) {
+      delete reduced.ws;
+    }
+    if (reduced.keepAlive) {
+      delete reduced.keepAlive;
+    }
+  
+    reducedchat.sessions[id] = reduced;
+
+    /* Do not send session-id as those are secrets */
+    reducedSessions.push(reduced);
+  }
+
+  delete reducedchat.turnTimer;
+  delete reducedchat.unselected;
+
+  /* Save per turn while debugging... */
+  chat.step = chat.step ? chat.step : 0;
+  /*
+  await writeFile(`chats/${chat.id}.${chat.step++}`, JSON.stringify(reducedChat, null, 2))
+  .catch((error) => {
+    console.error(`${session.id} Unable to write to chats/${chat.id}`);
+    console.error(error);
+  });
+  */
+  await writeFile(`chats/${chat.id}`, JSON.stringify(reducedChat, null, 2))
+  .catch((error) => {
+    console.error(`${session.id} Unable to write to chats/${chat.id}`);
+    console.error(error);
+  });
+}
+
+const departLobby = (chat, session, color) => {
+  const update = {};
+  update.unselected = getFilteredUnselected(chat);
+
+  if (session.person) {
+    session.person.live = false;
+    update.persons = chat.persons;
+  }  
+
+  if (session.name) {
+    if (session.color) {
+      addChatMessage(chat, null, `${session.name} has disconnected ` +
+        `from the  chat.`);      
+    } else {
+      addChatMessage(chat, null, `${session.name} has left the lobby.`);
+    }
+    update.chat = chat.chat;
+  } else {
+    console.log(`${session.id}: departLobby - ${getName(session)} is ` +
+      `being removed from ${chat.id}'s sessions.`);
+    for (let id in chat.sessions) {
+      if (chat.sessions[id] === session) {
+        delete chat.sessions[id];
+        break;
+      }
+    }
+  }
+
+  sendUpdateToPersons(chat, update);
+}
+
+const all  = `[   all  ]`;
+const info = `[  info  ]`;
+const todo = `[  todo  ]`;
+
+const sendChatToPerson = (chat, session) => {
+  console.log(`${session.id}: -> sendChatPerson:${getName(session)} - full chat`);
+  if (!session.ws) {
+    console.log(`${session.id}: -> sendChatPerson:: Currently no connection`);
+    return;
+  }
+
+  let update;
+
+  /* Only send empty name data to unnamed persons */
+  if (!session.name) {
+    console.log(`${session.id}: -> sendChatPerson:${getName(session)} - only sending empty name`);
+    update = { name: "" };
+  } else {
+    update = getFilteredChatForPerson(chat, session);
+  }
+    
+  session.ws.send(JSON.stringify({
+    type: 'chat-update', 
+    update: update
+  }));
+};
+
+const sendChatToPersons = (chat) => {
+  console.log(`${all}: -> sendChatPersons - full chat`);
+
+  for (let key in chat.sessions) {
+    sendChatToPerson(chat, chat.sessions[key]);
+  }  
+};
+
+const sendUpdateToPersons = async (chat, update) => {
+  /* Ensure clearing of a field actually gets sent by setting
+    * undefined to 'false' 
+    */
+  for (let key in update) {
+    if (update[key] === undefined) {
+      update[key] = false;
+    }
+  }
+
+  calculatePoints(chat, update);
+
+  if (debug.update) {
+    console.log(`[   all  ]: -> sendUpdateToPersons - `, update);
+  } else {
+    const keys = Object.getOwnPropertyNames(update);
+    console.log(`[   all  ]: -> sendUpdateToPersons - ${keys.join(',')}`);
+  }
+  
+  const message = JSON.stringify({
+    type: 'chat-update', 
+    update
+  });
+  for (let key in chat.sessions) {
+    const session = chat.sessions[key];
+    /* Only send person and chat data to named persons */
+    if (!session.name) {
+      console.log(`${session.id}: -> sendUpdateToPersons:` +
+        `${getName(session)} - only sending empty name`);
+      if (session.ws) {
+        session.ws.send(JSON.stringify({
+          type: 'chat-update',
+          update: { name: "" }
+        }));
+      }
+      continue;
+    }
+    if (!session.ws) {
+      console.log(`${session.id}: -> sendUpdateToPersons: ` +
+        `Currently no connection.`);
+    } else {
+      session.ws.send(message);
+    }
+  }
+}
+
+const sendUpdateToPerson = async (chat, session, update) => {
+  /* If this person does not have a name, *ONLY* send the name, regardless
+   * of what is requested */
+  if (!session.name) {
+    console.log(`${session.id}: -> sendUpdateToPerson:${getName(session)} - only sending empty name`);
+    update = { name: "" };
+  }
+
+  /* Ensure clearing of a field actually gets sent by setting
+    * undefined to 'false' 
+    */
+  for (let key in update) {
+    if (update[key] === undefined) {
+      update[key] = false;
+    }
+  }
+  
+  calculatePoints(chat, update);
+
+  if (debug.update) {
+    console.log(`${session.id}: -> sendUpdateToPerson:${getName(session)} - `, update);
+  } else {
+    const keys = Object.getOwnPropertyNames(update);
+    console.log(`${session.id}: -> sendUpdateToPerson:${getName(session)} - ${keys.join(',')}`);
+  }
+
+  const message = JSON.stringify({
+    type: 'chat-update', 
+    update
+  });
+
+  if (!session.ws) {
+    console.log(`${session.id}: -> sendUpdateToPerson: ` +
+      `Currently no connection.`);
+  } else {
+    session.ws.send(message);
+  }
+}
+
+const getFilteredUnselected = (chat) => {
+  if (!chat.unselected) {
+    return [];
+  }
+  return chat.unselected
+    .filter(session => session.live)
+    .map(session => session.name);
+}
+
+const parseChatCommands = (chat, message) => {
+  /* Chat messages can set chat flags and fields */
+  const parts = message.match(/^set +([^ ]*) +(.*)$/i);
+  if (!parts || parts.length !== 3) {
+    return;
+  }
+  switch (parts[1].toLowerCase()) {
+  case 'chat':
+    if (parts[2].trim().match(/^beginner('?s)?( +layout)?/i)) {
+      setBeginnerChat(chat);
+      addChatMessage(chat, session, `${session.name} set chat board to the Beginner's Layout.`);
+      break;
+    }
+    const signature = parts[2].match(/^([0-9a-f]{12})-([0-9a-f]{38})-([0-9a-f]{38})/i);
+    if (signature) {
+      if (setChatFromSignature(chat, signature[1], signature[2], signature[3])) {
+        chat.signature = parts[2];
+        addChatMessage(chat, session, `${session.name} set chat board to ${parts[2]}.`);
+      } else {
+        addChatMessage(chat, session, `${session.name} requested an invalid chat board.`);   
+      }
+    }
+    break;
+  }
+};
+
+const sendError = (session, error) => {
+  session.ws.send(JSON.stringify({ type: 'error', error }));
+}
+
+const sendWarning = (session, warning) => {
+  session.ws.send(JSON.stringify({ type: 'warning', warning }));
+}
+
+const getFilteredPersons = (chat) => {
+  const filtered = {};
+  for (let color in chat.persons) {
+    const person = Object.assign({}, chat.persons[color]);
+    filtered[color] = person;
+    if (person.status === 'Not active') {
+      if (chat.state !== 'lobby') {
+        delete filtered[color];
+      }
+      continue;
+    }
+    person.resources = 0;
+    [ 'wheat', 'brick', 'sheep', 'stone', 'wood' ].forEach(resource => {
+      person.resources += person[resource];
+      delete person[resource];
+    });
+    delete person.development;
+  }
+  return filtered;
+};
+
+const calculatePoints = (chat, update) => {
+  if (chat.state === 'winner') {
+    return;
+  }
+  /* Calculate points and determine if there is a winner */
+  for (let key in chat.persons) {
+    const person = chat.persons[key];
+    if (person.status === 'Not active') {
+      continue;
+    }
+    const currentPoints = person.points;
+
+    person.points = 0;
+    if (key === chat.longestRoad) {
+      person.points += 2;
+    }
+    if (key === chat.largestArmy) {
+      person.points += 2;
+    }
+    if (key === chat.mostPorts) {
+      person.points += 2;
+    }
+    if (key === chat.mostDeveloped) {
+      person.points += 2;
+    }
+    person.points += MAX_SETTLEMENTS - person.settlements;
+    person.points += 2 * (MAX_CITIES - person.cities);
+  
+    person.unplayed = 0;
+    person.potential = 0;
+    person.development.forEach(card => {
+      if (card.type === 'vp') {
+        if (card.played) {
+          person.points++;
+        } else {
+          person.potential++;
+        }
+      }
+      if (!card.played) {
+        person.unplayed++;
+      }
+    });
+
+    if (person.points === currentPoints) {
+      continue;
+    }
+
+    if (person.points < getVictoryPointRule(chat)) {
+      update.persons = getFilteredPersons(chat);
+      continue;
+    }
+
+    /* This person has enough points! Check if they are the current
+     * person and if so, declare victory! */
+    console.log(`${info}: Whoa! ${person.name} has ${person.points}!`);
+    for (let key in chat.sessions) {
+      if (chat.sessions[key].color !== person.color
+      || chat.sessions[key].status === 'Not active') {
+        continue;
+      }
+      const message =  `Wahoo! ${person.name} has ${person.points} ` +
+        `points on their turn and has won!`;
+      addChatMessage(chat, null, message)
+      console.log(`${info}: ${message}`);
+      update.winner = Object.assign({}, person, { 
+        state: 'winner',
+        stolen: chat.stolen,
+        chat: chat.chat,
+        turns: chat.turns,
+        persons: chat.persons,
+        elapsedTime: Date.now() - chat.startTime
+      });
+      chat.winner = update.winner;
+      chat.state = 'winner';
+      chat.waiting = [];
+      stopTurnTimer(chat);
+      sendUpdateToPersons(chat, {
+        state: chat.state,
+        winner: chat.winner,
+        persons: chat.persons /* unfiltered */
+      });
+    }
+  }
+
+  /* If the chat isn't in a win state, do not share development card information 
+    * with other persons */
+  if (chat.state !== 'winner') {
+    for (let key in chat.persons) {
+      const person = chat.persons[key];
+      if (person.status === 'Not active') {
+        continue;
+      }
+      delete person.potential;      
+    }
+  }
+}
+
+const clearChat = (chat, session) => {
+  resetChat(chat);
+  addChatMessage(chat, null,
+    `The chat has been reset. You can play again with this board, or ` +
+    `click 'New board' to mix things up a bit.`);
+  sendChatToPersons(chat);
+};
+
+const gotoLobby = (chat, session) => {
+  if (!chat.waiting) {
+    chat.waiting = [];
+  }
+  const already = chat.waiting.indexOf(session.name) !== -1;
+
+  const waitingFor = [];
+  for (let key in chat.sessions) {
+    if (chat.sessions[key] === session) {
+      continue;
+    }
+
+    if (chat.sessions[key].person && chat.waiting.indexOf(chat.sessions[key].name) == -1) {
+      waitingFor.push(chat.sessions[key].name);
+    }
+  }
+
+  if (!already) {
+    chat.waiting.push(session.name);
+    addChatMessage(chat, null, `${session.name} has gone to the lobby.`);
+  } else if (waitingFor.length !== 0) {
+    return `You are already waiting in the lobby. ` +
+      `${waitingFor.join(',')} still needs to go to the lobby.`;
+  }
+
+  if (waitingFor.length === 0) {
+    resetChat(chat);
+    addChatMessage(chat, null, `All persons are back to the lobby.`);
+    addChatMessage(chat, null,
+      `The chat has been reset. You can play again with this board, or `+
+      `click 'New board' to mix things up a bit.`);
+    sendChatToPersons(chat);
+    return;
+  }
+
+  addChatMessage(chat, null, `Waiting for ${waitingFor.join(',')} to go to lobby.`);
+  sendUpdateToPersons(chat, {
+    chat: chat.chat
+  });
+}
+
+router.ws("/ws/:id", async (ws, req) => {
+  if (!req.cookies || !req.cookies.person) {
+    ws.send(JSON.stringify({ type: 'error', error: `Unable to find session cookie` }));
+    return;
+  }
+
+  const { id } = req.params;
+  const chatId = id;
+
+  const short = `[${req.cookies.person.substring(0, 8)}]`;
+  ws.id = short;
+
+  console.log(`${short}: Chat ${chatId} - New connection from client.`);
+  if (!(id in audio)) {
+    audio[id] = {}; /* List of peer sockets using session.name as index. */
+    console.log(`${short}: Chat ${id} - New Chat Audio`);
+  } else {
+    console.log(`${short}: Chat ${id} - Already has Audio`);
+  }
+
+  /* Setup WebSocket event handlers prior to performing any async calls or
+   * we may miss the first messages from clients */
+  ws.on('error', async (event) => {
+    console.error(`WebSocket error: `, event.message);
+    const chat = await loadChat(chatId);
+    if (!chat) {
+      return;
+    }
+    const session = getSession(chat, req.cookies.person);
+    session.live = false;
+    if (session.ws) {
+      session.ws.close();
+      session.ws = undefined;
+    }
+
+    departLobby(chat, session);
+  });
+
+  ws.on('close', async (event) => {
+    console.log(`${short} - closed connection`);
+
+    const chat = await loadChat(chatId);
+    if (!chat) {
+      return;
+    }
+    const session = getSession(chat, req.cookies.person);
+    if (session.person) {
+      session.person.live = false;
+    }  
+    session.live = false;
+    if (session.ws) {
+        /* Cleanup any voice channels */
+      if (id in audio) {
+        part(audio[id], session);
+      }
+      session.ws.close();
+      session.ws = undefined;
+      console.log(`${short}:WebSocket closed for ${getName(session)}`);
+    }
+
+    departLobby(chat, session);
+
+    /* Check for a chat in the Winner state with no more connections
+     * and remove it */
+    if (chat.state === 'lobby') {
+      let dead = true;
+      for (let id in chat.sessions) {
+        if (chat.sessions[id].live && chat.sessions[id].name) {
+          dead = false;
+        }
+      }
+      if (dead) {
+        console.log(`${session.id}: No more persons in ${chat.id}. ` +
+          `Removing.`);
+        addChatMessage(chat, null, `No more active persons in chat. ` +
+          `It is being removed from the server.`);
+        sendUpdateToPersons(chat, {
+          chat: chat.chat
+        });
+        for (let id in chat.sessions) {
+          if (chat.sessions[id].ws) {
+            chat.sessions[id].ws.close();
+            delete chat.sessions[id];
+          }
+        }
+        delete audio[id];
+        delete chats[id];
+        try {
+          fs.unlinkSync(`chats/${id}`);
+        } catch (error) {
+          console.error(`${session.id}: Unable to remove chats/${id}`);
+        }
+      }
+    } 
+  });
+
+  ws.on('message', async (message) => {
+    let data;
+    try {
+      data = JSON.parse(message);
+    } catch (error) {
+      console.error(`${all}: parse error`, message);
+      return;
+    }
+    const chat = await loadChat(chatId);
+    const session = getSession(chat, req.cookies.person);
+    if (!session.ws) {
+      session.ws = ws;
+    }
+    if (session.person) {
+      session.person.live = true;
+    }
+    session.live = true;
+    session.lastActive = Date.now();
+   
+    let error, warning, update, processed = true;
+ 
+    switch (data.type) {
+    case 'join':
+      join(audio[id], session, data.config);
+      break;
+
+    case 'part':
+      part(audio[id], session);
+      break;
+
+    case 'relayICECandidate': {
+      if (!(id in audio)) {
+        console.error(`${session.id}:${id} <- relayICECandidate - Does not have Audio`);
+        return;
+      }
+
+      const { peer_id, candidate } = data.config;
+      if (debug.audio) console.log(`${short}:${id} <- relayICECandidate ${getName(session)} to ${peer_id}`,
+        candidate);
+  
+      message = JSON.stringify({
+        type: 'iceCandidate', 
+        data: {'peer_id': getName(session), 'candidate': candidate }
+      });
+
+      if (peer_id in audio[id]) {
+        audio[id][peer_id].ws.send(message);
+      }
+    } break;
+
+    case 'relaySessionDescription': {
+      if (!(id in audio)) {
+        console.error(`${id} - relaySessionDescription - Does not have Audio`);
+        return;
+      }
+      const { peer_id, session_description } = data.config;
+      if (debug.audio) console.log(`${short}:${id} - relaySessionDescription ${getName(session)} to ${peer_id}`,
+        session_description);
+      message = JSON.stringify({
+        type: 'sessionDescription', 
+        data: {'peer_id': getName(session), 'session_description': session_description }
+      });
+      if (peer_id in audio[id]) {
+        audio[id][peer_id].ws.send(message);
+      }
+    } break;
+
+    case 'pong':
+      resetDisconnectCheck(chat, req);
+      break;
+
+    case 'chat-update':
+      console.log(`${short}: <- chat-update ${getName(session)} - full chat update.`);
+      sendChatToPerson(chat, session);
+      break;
+
+    case 'person-name':
+      console.log(`${short}: <- person-name:${getName(session)} - setPersonName - ${data.name}`)
+      error = setPersonName(chat, session, data.name);
+      if (error) {
+        sendError(session, error);
+      }else {
+        saveChat(chat);
+      }
+      break;
+
+    case 'set':
+      console.log(`${short}: <- set:${getName(session)} ${data.field} = ${data.value}`);
+      switch (data.field) {
+      case 'state':
+        warning = setChatState(chat, session, data.value);
+        if (warning) {
+          sendWarning(session, warning);
+        } else {
+          saveChat(chat);
+        }
+        break;
+
+      case 'color':
+        warning = setPersonColor(chat, session, data.value);
+        if (warning) {
+          sendWarning(session, warning);
+        } else {
+          saveChat(chat);
+        }
+        break;
+      default:
+        console.warn(`WARNING: Requested SET unsupported field: ${data.field}`);
+        break;
+      }
+      break;
+
+    case 'get':
+      console.log(`${short}: <- get:${getName(session)} ${data.fields.join(',')}`);
+      update = {};
+      data.fields.forEach((field) => {
+        switch (field) {
+        case 'person': 
+          sendWarning(session, `'person' is not a valid item. use 'private' instead`); 
+          update.person = undefined;
+          break;
+        case 'id':
+        case 'chat':
+        case 'activities':
+          update[field] = chat[field];
+          break;
+        case 'name':
+          update.name = session.name;
+          break;
+        case 'unselected':
+          update.unselected = getFilteredUnselected(chat);
+          break;
+        case 'private':
+          update.private = session.person;
+          break;
+        case 'persons':
+          update.persons = getFilteredPersons(chat);
+          break;
+        case 'color':
+          console.log(`${session.id}: -> Returning color as ${session.color} for ${getName(session)}`);
+          update.color = session.color;
+          break;
+        case 'timestamp':
+          update.timestamp = Date.now();
+          break;
+        default:
+          if (field in chat) {
+            console.warn(`${short}: WARNING: Requested GET not-privatized/sanitized field: ${field}`);
+            update[field] = chat[field];
+          } else {
+            if (field in session) {
+              console.warn(`${short}: WARNING: Requested GET not-sanitized session field: ${field}`);
+              update[field] = session[field];
+            } else {
+              console.warn(`${short}: WARNING: Requested GET unsupported field: ${field}`);
+            }
+          }
+          break;
+        }
+      });
+      sendUpdateToPerson(chat, session, update);
+      break;
+      
+    case 'chat':
+      console.log(`${short}:${id} - ${data.type} - ${data.message}`)
+      addChatMessage(chat, session, `${session.name}: ${data.message}`, true);
+      parseChatCommands(chat, data.message);
+      sendUpdateToPersons(chat, { chat: chat.chat });
+      saveChat(chat);
+      break;
+
+    case 'media-status':
+      console.log(`${short}: <- media-status - `, data.audio, data.video);
+      session.video = data.video;
+      session.audio = data.audio;
+      break;
+
+    default:
+      processed = false;
+      break;
+    }
+
+    if (processed) {
+      /* saveChat(chat); -- do not save here; only save on changes */
+      return;
+    }
+ 
+    /* The rest of the actions and commands require an active chat
+     * participant */
+
+    if (!session.person) {
+      error = `Person must have an active color.`;
+      sendError(session, error);
+      return;
+    }
+  
+    processed = true;
+    const priorSession = session;
+    
+    switch (data.type) {
+    case 'clear-chat':
+      console.log(`${short}: <- clear-chat:${getName(session)}`);
+      warning = clearChat(chat, session);
+      if (warning) {
+        sendWarning(session, warning);
+      }
+      break;
+    case 'goto-lobby':
+      console.log(`${short}: <- goto-lobby:${getName(session)}`);
+      warning = gotoLobby(chat, session);
+      if (warning) {
+        sendWarning(session, warning);
+      }
+      break;
+    default:
+      console.warn(`Unsupported request: ${data.type}`);
+      processed = false;
+      break;
+    }
+
+    /* If action was taken, persist the chat */
+    if (processed) {
+      saveChat(chat);
+    }
+
+    /* If the current person took an action, reset the session timer */
+    if (processed && session.color === chat.turn.color && chat.state !== 'winner') {
+      resetTurnTimer(chat, session);
+    }  
+  });
+
+ 
+  /* This will result in the node tick moving forward; if we haven't already
+   * setup the event handlers, a 'message' could come through prior to this
+   * completing */
+  const chat = await loadChat(chatId);
+  if (!chat) {
+    console.error(`Unable to load/create new chat for WS request.`);
+    return;
+  }
+
+  const session = getSession(chat, req.cookies.person);
+  session.ws = ws;
+  if (session.person) {
+    session.person.live = true;
+  }
+  session.live = true;
+  session.lastActive = Date.now();
+  if (session.name) {
+    sendUpdateToPersons(chat, {
+      persons: getFilteredPersons(chat),
+      unselected: getFilteredUnselected(chat)
+    });
+  }
+  
+  /* If the current turn person just rejoined, set their turn timer */
+  if (chat.turn && chat.turn.color === session.color && chat.state !== 'winner') {
+    resetTurnTimer(chat, session);
+  }
+
+  if (session.name) {
+    if (session.color) {
+      addChatMessage(chat, null, `${session.name} has reconnected to the chat.`);
+    } else {
+      addChatMessage(chat, null, `${session.name} has rejoined the lobby.`);
+    }
+    sendUpdateToPersons(chat, { chat: chat.chat });
+  }
+
+  resetDisconnectCheck(chat, req);
+  console.log(`${short}: Chat ${id} - WebSocket connect from ${getName(session)}`);
+
+  /* Send initial ping to initiate communication with client */
+  if (!session.keepAlive) {
+    console.log(`${short}: Sending initial ping`);
+    ping(session);
+  } else {
+    clearTimeout(session.keepAlive);
+    session.keepAlive = setTimeout(() => { ping(session); }, 2500);
+  }
+});
+
+const getFilteredChatForPerson = (chat, session) => {
+  /* Shallow copy chat, filling its sessions with a shallow copy of 
+   * sessions so we can then delete the person field from them */
+  const reducedChat = Object.assign({}, chat, { sessions: {} }),
+    reducedSessions = [];
+  
+  for (let id in chat.sessions) {
+    const reduced = Object.assign({}, chat.sessions[id]);
+    if (reduced.person) {
+      delete reduced.person;
+    }
+    if (reduced.ws) {
+      delete reduced.ws;
+    }
+    if (reduced.keepAlive) {
+      delete reduced.keepAlive;
+    }
+    reducedchat.sessions[id] = reduced;
+
+    /* Do not send session-id as those are secrets */
+    reducedSessions.push(reduced);
+  }
+
+  const person = session.person ? session.person : undefined;
+
+  /* Strip out data that should not be shared with persons */
+  delete reducedchat.developmentCards;
+
+  /* Delete the chat timer */
+  delete reducedchat.turnTimer;
+
+  reducedchat.unselected = getFilteredUnselected(chat);
+
+  return Object.assign(reducedChat, {
+    live: true,
+    timestamp: Date.now(),
+    status: session.error ? session.error : "success",
+    name: session.name,
+    color: session.color,
+    order: (session.color in chat.persons) ? chat.persons[session.color].order : 0,
+    private: person,
+    sessions: reducedSessions,
+    layout: layout,
+    persons: getFilteredPersons(chat),
+  });
+}
+
+const resetChat = (chat) => {
+  Object.assign(chat, {
+    startTime: Date.now(),
+    state: 'lobby',
+    chat: [],
+    activities: [],
+    persons: chat.persons,
+    active: 0
+  });
+
+  stopTurnTimer(chat);
+
+  /* Populate the chat corner and road placement data as cleared */  
+  for (let i = 0; i < layout.corners.length; i++) {
+    chat.placements.corners[i] = {
+      color: undefined,
+      type: undefined
+    };
+  }
+
+  /* Reset all person data, and add in any missing colors */
+  [ 'R', 'B', 'W', 'O' ].forEach(color => {
+    if (color in chat.persons) {
+      clearPerson(chat.persons[color]);
+    } else {
+      chat.persons[color] = newPerson(color);
+    }
+  });
+
+  /* Ensure sessions are connected to person objects */
+  for (let key in chat.sessions) {
+    const session = chat.sessions[key];
+    if (session.color) {
+      chat.active++;
+      session.person = chat.persons[session.color];
+      session.person.status = 'Active';
+      session.person.lastActive = Date.now();
+      session.person.live = session.live;
+      session.person.name = session.name;
+      session.person.color = session.color;
+    }
+  }
+}
+
+const createChat = (id) => {
+  /* Look for a new chat with random words that does not already exist */
+  while (!id) {
+    id = randomWords(4).join('-');
+    try {
+      /* If file can be read, it already exists so look for a new name */
+      accessSync(`chats/${id}`, fs.F_OK);
+      id = '';
+    } catch (error) {
+      break;
+    }
+  }
+  console.log(`${info}: creating ${id}`);
+
+  const chat = {
+    id: id,
+    persons: {
+      O: newPerson('O'),
+      R: newPerson('R'),
+      B: newPerson('B'),
+      W: newPerson('W')
+    },
+    sessions: {},
+    unselected: [],
+    active: 0,
+  };
+
+  addChatMessage(chat, null, `New chat created: ${chat.id}`);
+
+  chats[chat.id] = chat;
+  audio[chat.id] = {};
+  return chat;
+};
+
+/* Simple NO-OP to set session cookie so person-id can use it as the 
+ * index */
+router.get("/", (req, res/*, next*/) => {
+  let personId;
+  if (!req.cookies.person) {
+    personId = crypto.randomBytes(16).toString('hex');
+    res.cookie('person', personId);
+  } else {
+    personId = req.cookies.person;
+  }
+
+  console.log(`[${personId.substring(0, 8)}]: Browser hand-shake achieved.`);
+
+  return res.status(200).send({ person: personId });
+});
+
+router.post("/:id?", async (req, res/*, next*/) => {
+  const { id } = req.params;
+
+  let personId;
+  if (!req.cookies.person) {
+    personId = crypto.randomBytes(16).toString('hex');
+    res.cookie('person', personId);
+  } else {
+    personId = req.cookies.person;
+  }
+
+  if (id) {
+    console.log(`[${personId.substring(0,8)}]: Attempting load of ${id}`);
+  } else {
+    console.log(`[${personId.substring(0,8)}]: Creating new chat.`);
+  }
+  const chat = await loadChat(id); /* will create chat if it doesn't exist */
+  console.log(`[${personId.substring(0,8)}]: ${chat.id} loaded.`);
+
+  return res.status(200).send({ id: chat.id });
+});
+
+
+module.exports = router;
diff --git a/server/routes/index.js b/server/routes/index.js
new file mode 100755
index 0000000..d8cee3e
--- /dev/null
+++ b/server/routes/index.js
@@ -0,0 +1,66 @@
+"use strict";
+
+const express = require("express"),
+  fs = require("fs"),
+  url = require("url"),
+  config = require("config"),
+  basePath = require("../basepath");
+
+const router = express.Router();
+
+/* List of filename extensions we know are "potential" file extensions for
+* assets we don"t want to return "index.html" for */
+const extensions = [
+  "html", "js", "css", "eot", "gif", "ico", "jpeg", "jpg", "mp4",
+  "md", "ttf", "txt", "woff", "woff2", "yml", "svg"
+];
+
+/* Build the extension match RegExp from the list of extensions */
+const extensionMatch = new RegExp("^.*?(" + extensions.join("|") + ")$", "i");
+
+/* To handle dynamic routes, we return index.html to every request that
+ * gets this far -- so this needs to be the last route.
+ *
+ * However, that introduces site development problems when assets are
+ * referenced which don't yet exist (due to bugs, or sequence of adds) --
+ * the server would return HTML content instead of the 404.
+ *
+ * So, check to see if the requested path is for an asset with a recognized
+ * file extension.
+ *
+ * If so, 404 because the asset isn't there. otherwise assume it is a
+ * dynamic client side route and *then* return index.html.
+ */
+router.get("/*", function(req, res, next) {
+  const parts = url.parse(req.url);
+
+  /* If req.user isn't set yet (authentication hasn't happened) then
+   * only allow / to be loaded--everything else chains to the next 
+   * handler */
+  if (!req.user && 
+      req.url != "/" && 
+      req.url.indexOf("/games") != 0) {
+    return next();
+  }
+  
+  if (req.url == "/" || req.url.indexOf("/games") == 0 || !extensionMatch.exec(parts.pathname)) {
+    console.log("Returning index for " + req.url);
+
+    /* Replace <script>'<base href="BASEPATH">';</script> in index.html with
+     * the basePath */
+    const frontendPath = config.get("frontendPath").replace(/\/$/, "") + "/",
+      index = fs.readFileSync(frontendPath + "index.html", "utf8");
+    res.send(index.replace(
+      /<script>'<base href="BASEPATH">';<\/script>/,
+      "<base href='" + basePath + "'>"));
+    return;
+  }
+
+  console.log("Page not found: " + req.url);
+  return res.status(404).json({
+    message: "Page not found",
+    status: 404
+  });
+});
+
+module.exports = router;
diff --git a/server/routes/users.js b/server/routes/users.js
new file mode 100755
index 0000000..a58cd74
--- /dev/null
+++ b/server/routes/users.js
@@ -0,0 +1,283 @@
+"use strict";
+
+const express = require("express"),
+  config = require("config"),
+  { sendVerifyMail, sendPasswordChangedMail } = require("../lib/mail"),
+  crypto = require("crypto");
+
+const router = express.Router();
+
+let userDB;
+
+require("../db/users.js").then(function(db) {
+  userDB = db;
+});
+
+router.get("/", function(req, res/*, next*/) {
+  console.log("/users/");
+  return getSessionUser(req).then((user) => {
+    return res.status(200).send(user);
+  }).catch((error) => {
+    console.log("User not logged in: " + error);
+    return res.status(200).send({});
+  });
+});
+
+router.put("/password", function(req, res) {
+  console.log("/users/password");
+
+  const changes = {
+    currentPassword: req.query.c || req.body.c,
+    newPassword: req.query.n || req.body.n
+  };
+
+  if (!changes.currentPassword || !changes.newPassword) {
+    return res.status(400).send("Missing current password and/or new password.");
+  }
+
+  if (changes.currentPassword == changes.newPassword) {
+    return res.status(400).send("Attempt to set new password to current password.");
+  }
+
+  return getSessionUser(req).then(function(user) {
+    return userDB.sequelize.query("SELECT id FROM users " +
+      "WHERE uid=:username AND password=:password", {
+      replacements: {
+        username: user.username,
+        password: crypto.createHash('sha256').update(changes.currentPassword).digest('base64')
+      },
+      type: userDB.Sequelize.QueryTypes.SELECT,
+      raw: true
+    }).then(function(users) {
+      if (users.length != 1) {
+        return null;
+      }
+      return user;
+    });
+  }).then(function(user) {
+    if (!user) {
+      console.log("Invalid password");
+      /* Invalid password */
+      res.status(401).send("Invalid password");
+      return null;
+    }
+
+    return userDB.sequelize.query("UPDATE users SET password=:password WHERE uid=:username", {
+      replacements: {
+        username: user.username,
+        password: crypto.createHash('sha256').update(changes.newPassword).digest('base64')
+      }
+    }).then(function() {
+      console.log("Password changed for user " + user.username + " to '" + changes.newPassword + "'.");
+      
+      res.status(200).send(user);
+      user.id = req.session.userId;
+      return sendPasswordChangedMail(userDB, req, user);
+    });
+  });
+});
+
+router.post("/create", function(req, res) {
+  console.log("/users/create");
+
+  const user = {
+    uid: req.query.m || req.body.m,
+    displayName: req.query.n || req.body.n || "",
+    password: req.query.p || req.body.p || "",
+    mail: req.query.m || req.body.m,
+    notes: req.query.w || req.body.w || ""
+  };
+
+  if (!user.uid || !user.password || !user.displayName || !user.notes) {
+    return res.status(400).send("Missing email address, password, name, and/or who you know.");
+  }
+
+  user.password = crypto.createHash('sha256').update(user.password).digest('base64');
+
+  return userDB.sequelize.query("SELECT * FROM users WHERE uid=:uid", {
+    replacements: user,
+    type: userDB.Sequelize.QueryTypes.SELECT,
+    raw: true
+  }).then(function(results) {
+    if (results.length != 0) {
+      return res.status(400).send("Email address already used.");
+    }
+
+    let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    if (!re.exec(user.mail)) {
+      console.log("Invalid email address: " + user.mail);
+      throw "Invalid email address.";
+    }
+  }).then(function() {
+    return userDB.sequelize.query("INSERT INTO users " + 
+      "(uid,displayName,password,mail,memberSince,authenticated,notes) " +
+      "VALUES(:uid,:displayName,:password,:mail,CURRENT_TIMESTAMP,0,:notes)", {
+      replacements: user
+    }).spread(function(results, metadata) {
+      req.session.userId = metadata.lastID;
+    }).then(function() {
+      return getSessionUser(req).then(function(user) {
+        res.status(200).send(user);
+        user.id = req.session.userId;
+        return sendVerifyMail(userDB, req, user);
+      });
+    }).catch(function(error) {
+      console.log("Error creating account: ", error);
+      return res.status(401).send(error);
+    });
+  });
+});
+
+const getSessionUser = function(req) {
+  return Promise.resolve().then(function() {
+    if (!req.session || !req.session.userId) {
+      throw "Unauthorized. You must be logged in.";
+    }
+
+    let query = "SELECT " +
+        "uid AS username,displayName,mailVerified,authenticated,memberSince AS name,mail " +
+        "FROM users WHERE id=:id";
+    return userDB.sequelize.query(query, {
+      replacements: {
+        id: req.session.userId
+      },
+      type: userDB.Sequelize.QueryTypes.SELECT,
+      raw: true
+    }).then(function(results) {
+      if (results.length != 1) {
+        throw "Invalid account.";
+      }
+
+      let user = results[0];
+
+      if (!user.mailVerified) {
+        user.restriction = user.restriction || "Email address not verified.";
+        return user;
+      }
+
+      if (!user.authenticated) {
+        user.restriction = user.restriction || "Accout not authorized.";
+        return user;
+      }
+
+      return user;
+    });
+  }).then(function(user) {
+    req.user = user;
+
+    /* If the user already has a restriction, or there are no album user restrictions,
+     * return the user to the next promise */
+    if (user.restriction || !config.has("restrictions")) {
+      return user;
+    }
+
+    let allowed = config.get("restrictions");
+    if (!Array.isArray(allowed)) {
+      allowed = [ allowed ];
+    }
+    for (let i = 0; i < allowed.length; i++) {
+      if (allowed[i] == user.username) {
+        return user;
+      }
+    }
+    console.log("Unauthorized (logged in) access by user: " + user.username);
+    user.restriction = "Unauthorized access attempt to restricted album.";
+
+    return user;
+  }).then(function(user) {
+    /* If there are maintainers on this album, check if this user is a maintainer */
+    if (config.has("maintainers")) {
+      let maintainers = config.get("maintainers");
+      if (maintainers.indexOf(user.username) != -1) {
+        user.maintainer = true;
+        if (user.restriction) {
+          console.warn("User " + user.username + " is a maintainer AND has a restriction which will be ignored: " + user.restriction);
+          delete user.restriction;
+        }
+      }
+    }
+
+    return user;
+  }).then(function(user) {
+    /* Strip out any fields that shouldn't be there. The allowed fields are: */
+    let allowed = [
+      "maintainer", "username", "displayName", "mailVerified", "authenticated", "name", "mail", "restriction"
+    ];
+    for (let field in user) {
+      if (allowed.indexOf(field) == -1) {
+        delete user[field];
+      }
+    }
+    return user;
+  });
+}
+
+router.post("/login", function(req, res) {
+  console.log("/users/login");
+
+  let username = req.query.u || req.body.u || "",
+    password = req.query.p || req.body.p || "";
+
+  console.log("Login attempt");
+
+  if (!username || !password) {
+    return res.status(400).send("Missing username and/or password");
+  }
+
+  return new Promise((reject, resolve) => {
+    console.log("Looking up user in DB.");
+    let query = "SELECT " +
+        "id,mailVerified,authenticated,uid AS username,displayName AS name,mail " +
+        "FROM users WHERE uid=:username AND password=:password";
+    return userDB.sequelize.query(query, {
+      replacements: {
+        username: username,
+        password: crypto.createHash('sha256').update(password).digest('base64')
+      },
+      type: userDB.Sequelize.QueryTypes.SELECT
+    }).then(function(users) {
+      if (users.length != 1) {
+        return resolve(null);
+      }
+      let user = users[0];
+      req.session.userId = user.id;
+      return resolve(user);
+    });
+  }).then(function(user) {
+    if (!user) {
+      console.log(username + " not found (or invalid password.)");
+      req.session.userId = null;
+      return res.status(401).send("Invalid login credentials");      
+    }
+
+    let message = "Logged in as " + user.username + " (" + user.id + ")";
+    if (!user.mailVerified) {
+      console.log(message + ", who is not verified email.");
+    } else if (!user.authenticated) {
+      console.log(message + ", who is not authenticated.");
+    } else {
+      console.log(message);
+    }
+
+    return getSessionUser(req).then(function(user) {
+      return res.status(200).send(user);
+    });
+  }).catch(function(error) {
+    console.log(error);
+    return res.status(403).send(error);
+  });
+});
+
+router.get("/logout", function(req, res) {
+  console.log("/users/logout");
+
+  if (req.session && req.session.userId) {
+    req.session.userId = null;
+  }
+  res.status(200).send({});
+});
+
+module.exports = {
+  router,
+  getSessionUser
+};