import Mousetrap from "mousetrap";
import $ from "jquery";
import socket from "../socket"
import "../empties/modal";

const logError = resp => {
  console.error("Unable to join", resp)
};

const init = (gameId) => {
  if(typeof gameId === "undefined") {
    return;
  }

  const boardViewerChannel = socket.channel(`board_viewer:${gameId}`, {contentType: "html"});
  const gameAdminChannel = socket.channel(`game_admin:${gameId}`);

  boardViewerChannel.on("tick", ({content}) => {
    $("#board-viewer").html()
  });

  boardViewerChannel.
    join().
    receive("error", logError);

  gameAdminChannel.
    join().
    receive("error", logError);

  const cmd = (request) => {
    console.log(request);
    gameAdminChannel.
      push(request).
      receive("error", e => console.error(`push "${request}" failed`, e));
  };

  Mousetrap.bind(["q"], () => cmd("stop"));
  Mousetrap.bind(["h", "left"], () => cmd("prev"));
  Mousetrap.bind(["j", "up"], () => cmd("resume"));
  Mousetrap.bind(["k", "down"], () => cmd("pause"));
  Mousetrap.bind(["l", "right"], () => cmd("next"));
  Mousetrap.bind("R", () => cmd("replay"));
};

export default {
  init
};

import Mousetrap from "mousetrap";
import socket from "../socket"
import "../empties/modal";

const logError = resp => {
  console.error("Unable to join", resp)
};

const init = (gameId) => {
  if(typeof gameId === "undefined") {
    return;
  }

  const boardViewerChannel = socket.channel(`board_viewer:${gameId}`, {contentType: "html"});
  const gameAdminChannel = socket.channel(`game_admin:${gameId}`);

  boardViewerChannel.on("tick", ({content}) => {
    document.getElementById("board-viewer").innerHTML = content;
  });

  boardViewerChannel.
    join().
    receive("error", logError);

  gameAdminChannel.
    join().
    receive("error", logError);

  const cmd = (request) => {
    console.log(request);
    gameAdminChannel.
      push(request).
      receive("error", e => console.error(`push "${request}" failed`, e));
  };

  Mousetrap.bind(["q"], () => cmd("stop"));
  Mousetrap.bind(["h", "left"], () => cmd("prev"));
  Mousetrap.bind(["j", "up"], () => cmd("resume"));
  Mousetrap.bind(["k", "down"], () => cmd("pause"));
  Mousetrap.bind(["l", "right"], () => cmd("next"));
  Mousetrap.bind("R", () => cmd("replay"));
};

export default {
  init
};

Optimize dom replacement for board viewer
Optimize dom replacement for board viewer

This one line cuts down the "loading" slice from the chrome timeline from 25% to
3%. jQuery.html performs a very expensive html validation before inserting to
into the dom.

Because we *hope* that we're sending valid html before hand we don't need to do
this.

This leaves page redraw and paint as the next largest bottleneck, which cannot
be overcome without using something other than svg.
