style, resize, animations

static/net.js

@@ -0,0 +1,101 @@
+let SOCKET;
+
+function initNet() {
+    SOCKET = io("/socket");
+
+    SOCKET.on("connect", () => {
+        let oid = selfOid();
+        if (oid) {
+            SOCKET.emit("join", {
+                room: ROOM,
+                name: selfName(),
+                oid: oid,
+            });
+        } else {
+            openCreateUserModal();
+        }
+    });
+
+    SOCKET.on("message", msg => {
+        TEXT._display(msg.text, msg.timeout)
+    })
+
+    SOCKET.on("end_message", msg => {
+        alert(msg.text)
+    })
+
+    SOCKET.on("game_state", msg => {
+        if (msg.state === "PLAYING") {
+            document.getElementById("create-game").style.display = "none";
+
+            SOCKET.emit("get_card", {
+                "oid": selfOid(),
+                "room": ROOM,
+            })
+        } else if (msg.state === "ENDED") {
+            SOCKET.emit("get_end_message")
+        }
+    })
+
+    SOCKET.on("card_state", msg => {
+        if (CARDS.hasOwnProperty("SELF")) {
+            if (CARDS.hasOwnProperty(msg.card.oid)) {
+                CARDS[msg.card.oid]._update(msg.card)
+            } else {
+                const card = new BingoCard(msg.card.oid, msg.parent, XSCALE, YSCALE);
+                card._self = msg.card
+                CARDS[msg.card.oid] = card;
+                updateCards();
+            }
+        }
+    })
+
+    SOCKET.on("get_card_rsp", msg => {
+        // Add self card
+        let card = new BingoCard(msg.card.oid, msg.parent, 1.0);
+
+        card._self = msg.card;
+        CARDS[msg.card.oid] = card;
+        CARDS["SELF"] = card;
+        updateCards();
+    })
+
+    SOCKET.on("join_rsp", msg => {
+
+        if (msg.ok === false) {
+            openCreateUserModal();
+            return;
+        }
+
+        document.getElementById("create-user").style.display = "none";
+
+        localStorage.setItem("oid", msg.oid)
+        document.title = msg.oid
+
+        if (msg.state === "CREATING") {
+            createGameModal();
+
+        } else if (msg.state === "PLAYING") {
+            SOCKET.emit("get_card", {
+                "oid": selfOid(),
+                "room": ROOM,
+            })
+        } else if (msg.state === "ENDED") {
+            SOCKET.emit("get_end_message")
+        }
+    });
+
+    SOCKET.on("room_join", msg => {
+        // console.log(msg);
+    })
+
+    SOCKET.on("style_state", msg => {
+        STYLE = msg.style
+        APP.renderer.backgroundColor = STYLE.background;
+
+        if (TEXT === undefined) {
+            TEXT = makeText();
+            APP.stage.addChild(TEXT);
+        }
+    })
+}

static/room.js

@@ -0,0 +1,354 @@
+const ROOM = window.location.pathname.slice(1);
+
+let APP;
+
+let STYLE;
+
+let CARDS = {};
+let TEXT;
+
+let COLS, ROWS;
+
+let XSCALE, YSCALE;
+
+const CELL_PAD = 4;
+const CARD_PAD = 20;
+
+let WIDTH;
+let HEIGHT;
+let PORTRAIT;
+
+let CARD_WIDTH, CARD_HEIGHT;
+
+function calculateDimensions() {
+
+    WIDTH = window.innerWidth;
+    HEIGHT = window.innerHeight;
+    PORTRAIT = WIDTH < HEIGHT;
+
+    if (PORTRAIT) {
+        COLS = 3;
+        ROWS = 2;
+
+        CARD_WIDTH = 0.65 * WIDTH;
+        CARD_HEIGHT = (1 / 3) * HEIGHT;
+
+        XSCALE = (WIDTH) / ((CARD_WIDTH + CARD_PAD * 2) * COLS + CARD_PAD * 2)
+        YSCALE = (HEIGHT / 3) / ((CARD_HEIGHT + CARD_PAD * 4) * ROWS + CARD_PAD * 4)
+    } else {
+        COLS = 2;
+        ROWS = 3;
+
+        CARD_WIDTH = (1 / 3) * WIDTH;
+        CARD_HEIGHT = 0.70 * HEIGHT;
+
+        XSCALE = (WIDTH / 3) / ((CARD_WIDTH + CARD_PAD * 2) * COLS + CARD_PAD * 2)
+        YSCALE = (HEIGHT) / ((CARD_HEIGHT + CARD_PAD * 4) * ROWS + CARD_PAD * 4)
+    }
+}
+
+maskInputAlphaNum(document.getElementById("name"));
+
+function createGameModal() {
+    document.getElementById("create-game").style.display = "block";
+}
+
+function onCreateGameSubmit() {
+    const gameMode = document.getElementById("game-mode").value;
+    const pool = document.getElementById("pool").value;
+    const maximumSize = document.getElementById("maximum-size").value;
+    const middleFree = document.getElementById("middle-free").value;
+
+    SOCKET.emit("create_game", {
+        "oid": selfOid(),
+        "room": ROOM,
+        "mode": gameMode,
+        "maximum_size": maximumSize,
+        "middle_free": middleFree,
+        "pool": pool.split(/\s+/).map(w => w.trim())
+    })
+    return false;
+}
+
+function openCreateUserModal() {
+    document.getElementById("create-user").style.display = "block";
+}
+
+function onCreateUserSubmit() {
+    const name = document.getElementById("name").value;
+    localStorage.setItem("name", name)
+
+    SOCKET.emit("join", {
+        room: ROOM,
+        name: name
+    });
+    return false;
+}
+
+
+function initApp() {
+    APP = new PIXI.Application({
+        antialias: false,
+        width: window.innerWidth,
+        height: window.innerHeight,
+        resolution: 2,
+        resizeTo: window
+    });
+
+    document.body.appendChild(APP.view);
+    APP.renderer.autoDensity = true;
+    APP.renderer.resize(window.innerWidth, window.innerHeight);
+
+    // pixi-tween init
+    function animate() {
+        window.requestAnimationFrame(animate);
+        APP.renderer.render(APP.stage);
+        PIXI.tweenManager.update();
+    }
+
+    animate();
+}
+
+function makeCell(cell, size, card_oid, xscale, yscale) {
+
+    const g = new PIXI.Graphics();
+    const sprite = new PIXI.Sprite();
+
+    sprite._baseColor = cell.checked ? STYLE.cell.checked : STYLE.cell.base;
+    sprite._color = sprite._baseColor;
+
+    sprite._update = function () {
+        g.clear();
+        g.beginFill(this._color);
+        g.drawRect(0, 0,
+            ((xscale * CARD_WIDTH - CELL_PAD) / size - CELL_PAD),
+            ((yscale * CARD_HEIGHT - CELL_PAD) / size - CELL_PAD)
+        );
+        g.endFill()
+
+        if (g.children.length === 0) {
+            const maxWidth = g.width - 4;
+            const maxHeight = g.height - 4;
+
+            const text = new PIXI.Text(cell.text, {
+                    fontFamily: STYLE.font,
+                    fontSize: xscale === 1 ? 16 : 10,
+                    fill: STYLE.cell.text,
+                    align: "center",
+                    breakWords: true,
+                    wordWrap: true,
+                    wordWrapWidth: maxWidth,
+                }
+            );
+            text.anchor.set(0.5, 0.5)
+            text.x = g.width / 2;
+            text.y = g.height / 2;
+
+            if (text.height < maxHeight) {
+                g.addChild(text);
+            }
+        }
+
+        this.texture = APP.renderer.generateTexture(g, PIXI.SCALE_MODES.LINEAR, 5);
+    }
+
+    sprite._destroy = function () {
+        if (this._tw) {
+            this._tw.stop();
+            this._tw.remove();
+        }
+        this.destroy({texture: true, baseTexture: true, children: true});
+    }
+
+    sprite._update()
+
+    if (xscale === 1) {
+        sprite.interactive = true;
+        sprite.buttonMode = true;
+
+        sprite.on("mouseover", () => {
+            sprite._color = STYLE.cell.hover;
+            sprite._update();
+        })
+
+        sprite.on("mouseout", () => {
+            sprite._color = sprite._baseColor;
+            sprite._update();
+        })
+
+        sprite.on("click", () => {
+            SOCKET.emit("cell_click", {
+                "oid": selfOid(),
+                "cidx": cell.cidx,
+                "card": card_oid,
+                "room": ROOM
+            })
+        })
+    }
+
+    return sprite
+}
+
+function BingoCard(oid, parent, xscale = 1, yscale = 1) {
+
+    let g = new PIXI.Graphics();
+
+
+    g._update = function (card) {
+
+        g.clear();
+        g.setMatrix(new PIXI.Matrix().scale(xscale, yscale));
+        g.lineStyle(3, STYLE.card.base);
+        g.drawRect(0, 0, CARD_WIDTH, CARD_HEIGHT);
+
+        if (!this._text) {
+            this._text = new PIXI.Text(parent, {
+                    fontFamily: STYLE.font,
+                    fontSize: 16,
+                    fill: STYLE.card.text,
+                    align: "center",
+                    strokeThickness: 3
+                }
+            );
+            this._text.anchor.set(0.5, 0.35)
+        } else {
+            g.removeChild(this._text);
+        }
+        this._text.x = g.width / 2;
+        this._text.y = g.height;
+        g.addChild(this._text);
+
+        this._self = card;
+        let toDestroy = [];
+        g.children.forEach(child => {
+            if (child !== this._text) {
+                toDestroy.push(child);
+            }
+        })
+        toDestroy.forEach(x => {
+            x._destroy();
+        })
+
+        let size = Math.floor(Math.sqrt(this._self.cells.length))
+
+        for (let col = 0; col < size; col++) {
+            for (let row = 0; row < size; row++) {
+
+                let cidx = col * size + row;
+                let cell = this._self.cells[cidx];
+                cell.cidx = cidx;
+
+                let c = makeCell(cell, size, oid, xscale, yscale)
+                c.x = (c.width + CELL_PAD) * row + CELL_PAD + 1;
+                c.y = (c.height + CELL_PAD) * col + CELL_PAD + 1;
+
+                if (cell.shake) {
+                    cell.shake = false;
+                    shake(c, "x", 16 * xscale)
+                    shake(c, "y", 16 * xscale)
+                    shake(g, "x", 3 * xscale)
+                    shake(g, "y", 3 * xscale)
+                }
+
+                g.addChild(c);
+            }
+        }
+    }
+
+    return g;
+}
+
+function makeText() {
+
+    const PAD = 5;
+
+    const t = new PIXI.Text("", {
+        fontFamily: STYLE.font,
+        fontSize: 38,
+        fill: STYLE.cell.text,
+        strokeThickness: 2,
+        align: "left",
+        breakWords: true,
+        wordWrap: true,
+        wordWrapWidth: WIDTH / 3 - PAD * 2,
+    });
+
+    t.x = WIDTH / 2;
+    t.y = PORTRAIT ? HEIGHT / 2 : HEIGHT / 12;
+    t.anchor.set(0.5, 0.5)
+
+    t._display = function (text, timeout) {
+        APP.stage.children.sort((a, _) => {
+            return a === t ? 1 : 0;
+        })
+        t.text = text
+
+        if (t._to) {
+            window.clearTimeout(t._to);
+        }
+        t._to = window.setTimeout(() => {
+            t.text = ""
+        }, timeout)
+    }
+
+    return t;
+}
+
+function updateCards() {
+
+    let nextRow = [0, 0];
+    let nextCol = [0, 0];
+    let counter = 0;
+
+    Object.keys(CARDS).forEach(key => {
+
+        if (key === "SELF") {
+            return;
+        }
+        counter += 1;
+
+        let card = CARDS[key];
+
+        if (CARDS["SELF"] === card) {
+            //Self
+            card.x = WIDTH / 2 - (CARD_WIDTH / 2);
+            card.y = HEIGHT / 2 - (CARD_HEIGHT / 2);
+
+        } else {
+            // Other
+            let nextSide = counter % 2;
+            card.x = (CARD_WIDTH * XSCALE + CARD_PAD) * nextCol[nextSide] + CARD_PAD;
+            card.y = (CARD_HEIGHT * YSCALE + CARD_PAD) * nextRow[nextSide] + CARD_PAD;
+
+            if (nextSide === 1) {
+                if (PORTRAIT) {
+                    card.y += HEIGHT * (2 / 3);
+                } else {
+                    card.x += WIDTH * (2 / 3) - CARD_PAD / 2;
+                }
+            }
+
+            if (nextCol[nextSide] === COLS - 1) {
+                nextCol[nextSide] = 0;
+                nextRow[nextSide] += 1;
+            } else {
+                nextCol[nextSide] += 1;
+            }
+
+            //TODO: if count > row*cols, increase rows
+        }
+
+        APP.stage.removeChild(card);
+        APP.stage.addChild(card);
+        card._update(card._self);
+    })
+}
+
+window.onresize = function () {
+    calculateDimensions();
+    updateCards();
+}
+
+calculateDimensions();
+initApp();
+initNet();

static/util.js

@@ -0,0 +1,59 @@
+function maskInputAlphaNum(input) {
+    input.addEventListener("keydown", e => {
+        if (!isAlphanumeric(e.key) && e.key !== "Backspace" && e.key !== "Enter") {
+            e.preventDefault();
+        }
+    })
+}
+
+function isAlphanumeric(c) {
+    return "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_".indexOf(c) > -1;
+}
+
+// PIXI-tween
+function shake(sprite, axis, amplitude) {
+    sprite._tw = PIXI.tweenManager.createTween(sprite);
+
+    let tw2 = PIXI.tweenManager.createTween(sprite);
+    tw2.time = 1;
+    tw2.from({[axis]: sprite[axis] + 1});
+    tw2.to({[axis]: sprite[axis]});
+    tw2.easing = constant();
+    tw2.expire = true;
+
+    let tw = sprite._tw;
+    tw.time = 400;
+    tw.expire = true;
+    tw.easing = shakeFn(12, amplitude);
+    tw.from({[axis]: sprite[axis]});
+    tw.to({[axis]: sprite[axis] + 1});
+    tw.chain(tw2);
+    tw.start();
+}
+
+let shakeFn = function (duration, amplitude) {
+    let counter = duration;
+
+    return function (t) {
+        if (counter <= 0) {
+            return 1;
+        }
+        counter--;
+        return (Math.random() - 0.5) * amplitude * (counter / duration);
+    };
+}
+
+let constant = function () {
+    return function (t) {
+        return 1;
+    }
+}
+
+// LocalStorage stuff
+function selfOid() {
+    return localStorage.getItem("oid")
+}
+
+function selfName() {
+    return localStorage.getItem("name")
+}