mnml/client/src/components/play.jsx

// const { connect } = require('preact-redux');
const preact = require('preact');
const { connect } = require('preact-redux');

const { errorToast, infoToast } = require('../utils');
const actions = require('./../actions');

const VERSION = process.env.npm_package_version;

const addState = connect(
    function receiveState(state) {
        const {
            ws,
            account,
            instances,
            invite,
            pvp,
        } = state;

        function sendInstanceState(id) {
            ws.sendInstanceState(id);
        }

        function sendInstancePractice() {
            ws.sendInstancePractice();
        }

        function sendInstanceQueue() {
            ws.sendInstanceQueue();
        }

        function sendInstanceInvite() {
            ws.sendInstanceInvite();
        }

        function sendInstanceLeave() {
            ws.sendInstanceLeave();
        }

        return {
            account,
            instances,
            invite,
            pvp,

            sendInstanceState,
            sendInstanceQueue,
            sendInstancePractice,
            sendInstanceInvite,
            sendInstanceLeave,
        };
    },

    function receiveDispatch(dispatch) {
        function setMtxActive(mtx) {
            dispatch(actions.setConstructRename(null));
            dispatch(actions.setMtxActive(mtx));
            return true;
        }

        function setNav(place) {
            return dispatch(actions.setNav(place));
        }

        return {
            setMtxActive,
            setNav,
        };
    }
);

function Play(args) {
    const {
        account,
        instances,
        invite,
        pvp,

        sendInstanceState,
        sendInstanceQueue,
        sendInstancePractice,
        sendInstanceInvite,
        sendInstanceLeave,

        setNav,
    } = args;

    const inviteBtn = () => {
        if (!invite) {
            return (
                <figure>
                    <button
                        class='ready'
                        onClick={() => sendInstanceInvite()}
                        type="submit">
                        Invite
                    </button>
                    <figcaption>Invite a Friend</figcaption>
                </figure>

            );
        }

        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 to clipboard.');
            } catch (err) {
                console.error('link copy error', err);
                errorToast('Invite link copy error.');
            }

            document.body.removeChild(textArea);
            return true;
        }

        return (
            <figure>
                <button
                    class='ready'
                    onClick={copyClick}
                    type="submit">
                    Copy &#x1F517;
                </button>
                <figcaption>Click to Copy</figcaption>
            </figure>
        );
    };

    const pvpBtn = () => {
        if (pvp) return (
            <figure>
                <button
                    class="ready"
                    onClick={() => sendInstanceLeave()}
                    >
                    Cancel
                </button>
                <figcaption>Finding Opponent</figcaption>
            </figure>
        );

        return (
            <figure>
                <button
                    class="ready"
                    onClick={() => sendInstanceQueue()}>
                    PVP
                </button>
                <figcaption>Matchmaking</figcaption>
            </figure>
        );
    }

    const subscription = account.subscribed
        ? <button
            class="yellow-btn"
            disabled>
            Subscribed
        </button>
        : <button
            onClick={() => setNav('shop')}
            class="yellow-btn"
            role="link">
            Subscribe
        </button>;

    const list = () => {
        if (!instances.length) {
            return (
                <div class='list play'>
                    {pvpBtn()}
                    {inviteBtn()}
                    <figure>
                        <button
                            class="ready"
                            onClick={() => sendInstancePractice()}>
                            Learn
                        </button>
                        <figcaption>Practice MNML</figcaption>
                    </figure>
                    <figure>
                        <button
                            class='discord-btn'
                            onClick={() => window.open('https://discord.gg/YJJgurM') }>
                                &nbsp;
                        </button>
                        <figcaption>Join the Community</figcaption>
                    </figure>
                </div>
            );
        }

        return (
            <div class='list play rejoin'>
                <figure>
                    <button
                        class="ready"
                        onClick={() => sendInstanceState(instances[0].id)}>
                        Rejoin
                    </button>
                    <figcaption>Resume playing</figcaption>
                </figure>
            </div>
        );
    };

    return (
        <section class="top">
            <div class="news">
                <h1>v{VERSION}</h1>
                {list()}
            </div>
            <div>
                <h1 class="credits">¤ {account.balance}</h1>
                <div class='list'>
                    {subscription}
                    <button
                        onClick={() => setNav('shop')}
                        class="yellow-btn"
                        role="link">
                        Get Credits
                    </button>
                </div>
                <div>
                    Join our Discord server to find opponents and talk to the devs. <br />
                    Message <b>@ntr</b> or <b>@mashy</b> for some credits to get started.<br />
                    <a href='https://www.youtube.com/watch?v=VtZLlkpJuS8'>Tutorial Playthrough on YouTube</a>
                </div>
                <br />
                <div>
                    If you enjoy the game you can support the development:
                    <ul>
                        <li>Invite people to play pvp games and grow the community. </li>
                        <li><b>Subscribe</b> or purchase <b>credits</b>.</li>
                    </ul>
                </div>
            </div>
        </section>
    );
}

module.exports = addState(Play);