???

2019-09-24 12:29:05 +10:00
parent 5fb44ee226
commit b681c9218a
7 changed files with 156 additions and 95 deletions
@@ -5,7 +5,7 @@ const { connect } = require('preact-redux');
 const actions = require('./../actions');

 const TeamFooter = require('./team.footer');
-const ListFooter = require('./list.footer');
+const PlayFooter = require('./play.footer');
 const InstanceFooter = require('./instance.footer');
 const GameFooter = require('./game.footer');

@@ -30,8 +30,8 @@ function renderHeader(args) {
    if (game) return <GameFooter />;
    if (instance) return <InstanceFooter />;

-    if (nav === 'team') return <TeamFooter />;
-    if (nav === 'list') return <ListFooter />;
+    if (nav === 'team' || nav === 'account') return <TeamFooter />;
+    if (nav === 'play' || nav === 'shop' || !nav) return <PlayFooter />;
 }


@@ -9,7 +9,7 @@ const addState = connect(
            ws,
            game,
            account,
-            showNav,
+            animating,
        } = state;

        function sendGameReady() {
@@ -24,9 +24,9 @@ const addState = connect(
        return {
            game,
            account,
+            animating,
            sendInstanceState,
            sendGameReady,
-            showNav,
        };
    },

@@ -36,15 +36,7 @@ const addState = connect(
            dispatch(actions.setInstance(null));
        }

-        function skip() {
-            dispatch(actions.setSkip(true));
-        }
-
-        function setShowNav(v) {
-            return dispatch(actions.setShowNav(v));
-        }
-
-        return { setShowNav, quit, skip };
+        return { quit };
    }

 );
@@ -53,22 +45,13 @@ function GameFooter(props) {
    const {
        game,
        account,
-        showNav,
+        animating,

        quit,
-        setShowNav,
        sendGameReady,
        sendInstanceState,
    } = props;

-    if (!game) {
-        return (
-            <footer id="footer">
-                <button id="nav-btn" onClick={() => setShowNav(!showNav)} >☰</button>
-            </footer>
-        );
-    }
-
    const playerTeam = game.players.find(t => t.id === account.id);

    function quitClick() {
@@ -86,6 +69,7 @@ function GameFooter(props) {

    const readyBtn = (
        <button
+            disabled={animating}
            class={`${playerTeam.ready ? 'ready' : ''} ready-btn`}
            onClick={sendGameReady}>
            Ready
@@ -122,7 +106,6 @@ function GameFooter(props) {
    return (
        <footer>
            {timer}
-            <button id="nav-btn" onClick={() => setShowNav(!showNav)} >☰</button>
            {game.phase === 'Finish' && quitBtn }
            {game.phase === 'Skill' && readyBtn }
        </footer>
@@ -5,20 +5,16 @@ const actions = require('../actions');

 const addState = connect(
    function receiveState(state) {
-        const { ws, instance, player, nav, showNav } = state;
+        const { ws, instance, player, nav } = state;

        function sendInstanceReady() {
            return ws.sendInstanceReady(instance.id);
        }

-        return { player, instance, sendInstanceReady, nav, showNav };
+        return { player, instance, sendInstanceReady, nav };
    },

    function receiveDispatch(dispatch) {
-        function setShowNav(v) {
-            return dispatch(actions.setShowNav(v));
-        }
-
        function setInfo(c) {
            return dispatch(actions.setInfo(c));
        }
@@ -30,7 +26,6 @@ const addState = connect(
        return {
            setInfo,
            setNav,
-            setShowNav,
        };
    }
 );
@@ -44,7 +39,6 @@ function Instance(args) {

        setInfo,
        setNav,
-        setShowNav,

        sendInstanceReady,
    } = args;
@@ -118,7 +112,6 @@ function Instance(args) {
    return (
        <footer id="footer">
            {timer}
-            <button id="nav-btn" onClick={() => setShowNav(!showNav)} >☰</button>
            {navBtn}
            {readyBtn}
        </footer>
@@ -1,48 +0,0 @@
-const { connect } = require('preact-redux');
-const preact = require('preact');
-
-const actions = require('./../actions');
-
-const addState = connect(
-    function receiveState(state) {
-        const { showNav } = state;
-        return { showNav };
-    },
-    function receiveDispatch(dispatch) {
-        function navToTeam() {
-            return dispatch(actions.setNav('team'));
-        }
-
-        function setShowNav(v) {
-            return dispatch(actions.setShowNav(v));
-        }
-
-        return {
-            navToTeam,
-            setShowNav,
-        };
-    }
-);
-
-function ListFooter(args) {
-    return false;
-
-    // const {
-    //     showNav,
-
-    //     navToTeam,
-    //     setShowNav,
-    // } = args;
-
-    // return (
-    //     <footer>
-    //         <button id="nav-btn" onClick={() => setShowNav(!showNav)} >☰</button>
-    //         <button
-    //             onClick={() => navToTeam()}>
-    //             Back
-    //         </button>
-    //     </footer>
-    // );
-}
-
-module.exports = addState(ListFooter);
@@ -0,0 +1,139 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+
+const { errorToast, infoToast } = require('../utils');
+
+const AccountBox = require('./account.box');
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            ws,
+            instances,
+            invite,
+        } = state;
+
+        function sendInstanceState(id) {
+            ws.sendInstanceState(id);
+        }
+
+        function sendInstancePractice() {
+            ws.sendInstancePractice();
+        }
+
+        function sendInstanceQueue() {
+            ws.sendInstanceQueue();
+        }
+
+        function sendInstanceInvite() {
+            ws.sendInstanceInvite();
+        }
+
+        return {
+            instances,
+            invite,
+
+            sendInstanceState,
+            sendInstanceQueue,
+            sendInstancePractice,
+            sendInstanceInvite,
+        };
+    }
+);
+
+function JoinButtons(args) {
+    const {
+        instances,
+        invite,
+
+        sendInstanceState,
+        sendInstanceQueue,
+        sendInstancePractice,
+        sendInstanceInvite,
+    } = args;
+
+    const discordBtn = (
+        <button
+            class='discord-btn'
+            onClick={() => window.open('https://discord.gg/YJJgurM') }>
+                &nbsp;
+        </button>
+    );
+
+    if (instances.length) {
+        return (
+            <footer id="footer">
+                <div class="timer-container"></div>
+                <button
+                    class='pvp ready full'
+                    onClick={() => sendInstanceState(instances[0].id)}
+                    type="submit">
+                    Rejoin
+                </button>
+            </footer>
+        );
+    }
+
+    const inviteBtn = () => {
+        if (!invite) {
+            return (
+                <button
+                    class='pvp ready'
+                    onClick={() => sendInstanceInvite()}
+                    type="submit">
+                    Invite
+                </button>
+            );
+        }
+
+        function copyClick(e) {
+            const link = `${document.location.origin}#join=${invite}`;
+            const textArea = document.createElement('textarea', { id: '#clipboard' });
+            textArea.value = link;
+            document.body.appendChild(textArea);
+            textArea.focus();
+            textArea.select();
+
+            try {
+                document.execCommand('copy');
+                infoToast('Invite link copied.');
+            } catch (err) {
+                console.error('link copy error', err);
+                errorToast('Invite link copy error.');
+            }
+
+            document.body.removeChild(textArea);
+            return true;
+        }
+
+        return (
+            <button
+                class='pvp ready enabled'
+                onClick={copyClick}
+                type="submit">
+                Copy Link
+            </button>
+        );
+    };
+
+    return (
+        <footer id="footer">
+            <div class="timer-container"></div>
+            <button
+                class='practice'
+                onClick={() => sendInstancePractice()}
+                type="submit">
+                Learn
+            </button>
+            {inviteBtn()}
+            <button
+                class='pvp ready'
+                onClick={() => sendInstanceQueue()}
+                type="submit">
+                PVP
+            </button>
+        </footer>
+    );
+}
+
+module.exports = addState(JoinButtons);