@mothepro/fancy-p2p/dist/esm/demo/p2p.js

A quick and efficient way to form p2p groups in the browser

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, html, customElement, property, internalProperty } from 'lit-element';
import P2P from '../index.js';
import './lobby.js';
import './ready.js';
let default_1 = class default_1 extends LitElement {
    constructor() {
        super(...arguments);
        this.random = 0;
        this.log = (...detail) => this.dispatchEvent(new CustomEvent('log', { detail, bubbles: true }))
            && this.requestUpdate();
        this.proposeGroup = ({ detail }) => {
            try {
                this.p2p.proposeGroup(...detail);
            }
            catch (err) {
                this.log('Proposal failed', err);
            }
        };
        this.broadcast = ({ detail }) => {
            try {
                this.p2p.broadcast(detail);
            }
            catch (err) {
                this.log('Broadcast failed', err);
            }
        };
        this.render = () => {
            var _a;
            if ((_a = this.p2p) === null || _a === void 0 ? void 0 : _a.stateChange.isAlive)
                switch (this.p2p.state) {
                    case 1 /* LOBBY */:
                        return html `
            <lit-lobby
              .connection=${this.p2p.lobbyConnection}
              @proposeGroup=${this.proposeGroup}
            ></lit-lobby>`;
                    case 2 /* LOADING */:
                        return 'Loading...';
                    case 3 /* READY */:
                        return html `
            <lit-ready
              .peers=${this.p2p.peers}
              next-random=${this.random}
              @broadcast=${this.broadcast}
              @requestRNG=${() => this.random = this.p2p.random(true)}
            ></lit-ready>`;
                }
            return 'Offline';
        };
    }
    async firstUpdated() {
        const { stuns, name, lobby, server: address, version, retries, timeout, fallback } = this;
        this.p2p = new P2P({ name, stuns, lobby, retries, timeout, fallback, server: { address, version } });
        try {
            for await (const state of this.p2p.stateChange) {
                this.log(`State changed to ${state}`);
                if (state == 3 /* READY */)
                    this.random = this.p2p.random(true);
            }
        }
        catch (err) {
            this.log('State deactivated', err);
        }
        this.log('State will no longer be updated');
    }
};
__decorate([
    property({ type: String })
], default_1.prototype, "name", void 0);
__decorate([
    property({ type: Array })
], default_1.prototype, "stuns", void 0);
__decorate([
    property({ type: String })
], default_1.prototype, "server", void 0);
__decorate([
    property({ type: String })
], default_1.prototype, "lobby", void 0);
__decorate([
    property({ type: String })
], default_1.prototype, "version", void 0);
__decorate([
    property({ type: Number })
], default_1.prototype, "retries", void 0);
__decorate([
    property({ type: Number })
], default_1.prototype, "timeout", void 0);
__decorate([
    property({ type: Boolean })
], default_1.prototype, "fallback", void 0);
__decorate([
    internalProperty()
], default_1.prototype, "random", void 0);
default_1 = __decorate([
    customElement('lit-p2p')
], default_1);
export default default_1;
//# sourceMappingURL=p2p.js.map