diff --git a/html-client/src/components/game.container.js b/html-client/src/components/game.container.js
deleted file mode 100644
index 64149b37..00000000
--- a/html-client/src/components/game.container.js
+++ /dev/null
@@ -1,51 +0,0 @@
-const { connect } = require('preact-redux');
-
-const actions = require('../actions');
-
-const Game = require('./game.component');
-
-const addState = connect(
-    function receiveState(state) {
-        const { ws, game, account, activeSkill, activeIncoming } = state;
-
-        function selectSkillTarget(targetCrypId) {
-            if (activeSkill) {
-                return ws.sendGameSkill(game.id, activeSkill.crypId, targetCrypId, activeSkill.skill);
-            }
-            return false;
-        }
-
-        // intercept self casting skills
-        if (activeSkill && activeSkill.skill.self_targeting) {
-            ws.sendGameSkill(game.id, activeSkill.crypId, null, activeSkill.skill.skill);
-        }
-
-        function selectIncomingTarget(crypId) {
-            if (activeIncoming) {
-                return ws.sendGameTarget(game.id, crypId, activeIncoming);
-            }
-            return false;
-        }
-
-        return { game, account, activeSkill, activeIncoming, selectSkillTarget, selectIncomingTarget };
-    },
-
-    function receiveDispatch(dispatch) {
-        function setActiveSkill(crypId, skill) {
-            dispatch(actions.setActiveSkill(crypId, skill));
-        }
-
-        function setActiveIncoming(skillId) {
-            dispatch(actions.setActiveIncoming(skillId));
-        }
-
-        function quit() {
-            dispatch(actions.setGame(null));
-        }
-
-        return { setActiveSkill, setActiveIncoming, quit };
-    }
-
-);
-
-module.exports = addState(Game);
diff --git a/html-client/src/components/game.jsx b/html-client/src/components/game.jsx
deleted file mode 100644
index 83a05744..00000000
--- a/html-client/src/components/game.jsx
+++ /dev/null
@@ -1,169 +0,0 @@
-const preact = require('preact');
-const key = require('keymaster');
-const range = require('lodash/range');
-const molecule = require('./molecule');
-const saw = require('./saw.component');
-
-const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R'];
-
-function GamePanel(props) {
-    const {
-        game,
-        activeSkill,
-        activeIncoming,
-        setActiveSkill,
-        selectSkillTarget,
-        selectIncomingTarget,
-        account,
-    } = props;
-
-    if (!game) return <div>...</div>;
-
-    const otherTeams = game.teams.filter(t => t.id !== account.id);
-
-    const playerTeam = game.teams.find(t => t.id === account.id);
-
-    function Cryp(cryp) {
-        const skills = range(0, 4).map((i) => {
-            const s = cryp.skills[i]
-                ? cryp.skills[i].skill
-                : (<span>&nbsp;</span>);
-
-            return <button key={i} className="cryp-skill-btn" type ="submit" onClick={() => setActiveSkill(cryp.id, s)}>{s}</button>;
-        });
-
-        const stats = [
-            { stat: 'hp', colour: '#1FF01F' },
-            { stat: 'red_shield', colour: '#a52a2a' },
-            { stat: 'blue_shield', colour: '#3498db' },
-        ].map((s, i) => (
-            <figure key={i} alt={s.stat}>
-                {saw(s.colour)}
-                <figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
-            </figure>
-        ));
-
-        return (
-            <div className="cryp-box">
-                <figure className="img">
-                    {molecule}
-                </figure>
-                <div className="skills">
-                    {skills}
-                </div>
-                <div className="stats">
-                    {stats}
-                </div>
-            </div>
-        );
-    }
-
-    function PlayerCrypCard(cryp) {
-        const skills = cryp.skills.map((skill, i) => {
-            const hotkey = SKILL_HOT_KEYS[i];
-            key.unbind(hotkey);
-            key(hotkey, () => setActiveSkill(cryp.id, skill));
-
-            return (
-                <button
-                    key={i}
-                    className="button is-dark"
-                    type="submit"
-                    onClick={() => setActiveSkill(cryp.id, skill)}
-                >
-                    ({hotkey}) {skill.skill} {skill.cd && `(${skill.cd}T)`}
-                </button>
-            );
-        });
-
-        const effects = cryp.effects.map((effect, i) => (
-            <div key={i}>{effect} for {effect.turns}T</div>
-        ));
-
-        return (
-            <div
-                key={cryp.id}
-                style={ activeIncoming ? { cursor: 'pointer' } : {}}
-                onClick={() => selectIncomingTarget(cryp.id)}
-                className="tile is-vertical">
-                {Cryp(cryp, setActiveSkill)}
-            </div>
-        );
-    }
-
-    function PlayerTeam(team) {
-        const cryps = team.cryps.map(c => PlayerCrypCard(c, setActiveSkill));
-
-        return (
-            <div className="tile">
-                {cryps}
-            </div>
-        );
-    }
-
-    function OpponentCrypCard(cryp) {
-        const effects = cryp.effects.map((effect, i) => (
-            <div key={i}>{effect.effect} for {effect.turns}T</div>
-        ));
-
-        return (
-            <div className="tile"
-                style={activeSkill ? { cursor: 'pointer' } : {}}
-                onClick={() => selectSkillTarget(cryp.id)} >
-                <div key={cryp.id} className="tile is-vertical">
-                    <div className="tile is-child">
-                        <div className="columns" >
-                            <div className="column is-10">
-                                <p className="title">{cryp.name}</p>
-                            </div>
-                            <div className="column">
-                                <figure className="image">
-                                    <svg width="40" height="40" data-jdenticon-value={cryp.name} />
-                                </figure>
-                            </div>
-
-                        </div>
-                        <div className="has-text-centered">{cryp.hp.value} / {cryp.hp.value} HP </div>
-                        <progress className="progress is-dark" value={cryp.hp.value} max={cryp.hp.max}></progress>
-
-                    </div>
-                    {effects}
-                </div>
-            </div>
-        );
-    }
-
-    function OpponentTeam(team) {
-        const cryps = team.cryps.map(OpponentCrypCard);
-        return (
-            <div>
-                {cryps}
-            </div>
-        );
-    }
-
-    const logs = game.log.reverse().map((l, i) => (<div key={i}>{l}</div>));
-
-    return (
-        <section>
-            <div className="row">
-                <div className="three columns">
-                    {playerTeam.id}
-                    {PlayerTeam(playerTeam, setActiveSkill)}
-                </div>
-                <div className="six columns" align="center">
-                    Round X
-                </div>
-
-                <div className="three columns">
-                    {otherTeams.id}
-                    {otherTeams.map(OpponentTeam)}
-                </div>
-            </div>
-            <div className="row">
-            </div>
-        </section>
-    );
-}
-
-module.exports = GamePanel;