view rlgterm.js @ 77:f8bb37f48d58

Make font resizing affect the keyboard too. The keyboard font size now changes along with the terminal font size. This allows the keyboard to work at page widths down at least to 600px.
author John "Elwin" Edwards <elwin@sdf.org>
date Sat, 23 Jun 2012 17:41:27 -0700
parents a497ecd116d9
children 06375a159188
line wrap: on
line source

/* rlgterm.js: Roguelike Gallery's driver for termemu.js */

// A state machine that keeps track of polling the server.
var ajaxstate = {
  state: 0,
  timerID: null,
  clear: function () {
    if (this.timerID != null) {
      window.clearTimeout(this.timerID);
      this.timerID = null;
    }
  },
  set: function (ms) {
    this.clear();
    this.timerID = window.setTimeout(getData, ms);
  },
  gotdata: function () {
    this.set(1000);
    this.state = 1;
  },
  gotnothing: function () {
    if (this.state == 0) {
      this.set(1000);
      this.state = 1;
    }
    else if (this.state < 4) {
      this.set(4000);
      this.state++;
    }
    else if (session.playing) {
      if (this.state < 8) {
        this.set(15000);
        this.state++;
      }
      else {
        /* It's been over a minute.  Stop polling. */
        this.clear();
      }
    }
    else {
      /* If watching, it can't stop polling entirely, because there
       * are no POST events to start it up again. */
      this.set(10000);
    }
  },
  posted: function (wasdata) {
    if (wasdata) {
      this.set(1000);
      this.state = 1;
    }
    else {
      this.set(200);
      this.state = 0;
    }
  }
};

/* Data on the available games. */
var games = {
  "rogue3": {
    "name": "Rogue V3",
    "uname": "rogue3"
  },
  "rogue4": {
    "name": "Rogue V4",
    "uname": "rogue4"
  },
  "rogue5": {
    "name": "Rogue V5",
    "uname": "rogue5"
  },
  "srogue": {
    "name": "Super-Rogue",
    "uname": "srogue"
  }
};

var session = {
  /* The session id assigned by the server. */
  id: null,
  /* Login name and key */
  lname: null,
  lcred: null,
  /* Whether the game is being played or just watched. */
  playing: false
};

/* The interval ID for checking the status of current games. */
var statInterval = null;
/* How frequently to check. */
var statDelta = 8000;

function writeData(hexstr) {
  var codenum;
  var codes = [];
  var nc;
  var u8wait = 0; /* Stores bits from previous bytes of multibyte sequences. */
  var expect = 0; /* The number of 10------ bytes expected. */
  /* UTF-8 translation. */
  for (var i = 0; i < hexstr.length; i += 2) {
    nc = Number("0x" + hexstr.substr(i, 2));
    if (nc < 0x7F) {
      /* 0------- */
      codes.push(nc);
      /* Any incomplete sequence will be discarded. */
      u8wait = 0;
      expect = 0;
    }
    else if (nc < 0xC0) {
      /* 10------ : part of a multibyte sequence */
      if (expect > 0) {
        u8wait <<= 6;
        u8wait += (nc & 0x3F);
        expect--;
        if (expect == 0) {
          codes.push(u8wait);
          u8wait = 0;
        }
      }
      else {
        /* Assume an initial byte was missed. */
        u8wait = 0;
      }
    }
    /* These will all discard any incomplete sequence. */
    else if (nc < 0xE0) {
      /* 110----- : introduces 2-byte sequence */
      u8wait = (nc & 0x1F);
      expect = 1;
    }
    else if (nc < 0xF0) {
      /* 1110---- : introduces 3-byte sequence */
      u8wait = (nc & 0x0F);
      expect = 2;
    }
    else if (nc < 0xF8) {
      /* 11110--- : introduces 4-byte sequence */
      u8wait = (nc & 0x07);
      expect = 3;
    }
    else if (nc < 0xFC) {
      /* 111110-- : introduces 5-byte sequence */
      u8wait = (nc & 0x03);
      expect = 4;
    }
    else if (nc < 0xFE) {
      /* 1111110- : introduces 6-byte sequence */
      u8wait = (nc & 0x01);
      expect = 5;
    }
    else {
      /* 1111111- : should never appear */
      u8wait = 0;
      expect = 0;
    }
    /* Supporting all 31 bits is probably overkill... */
  }
  termemu.write(codes);
  return;
}

/* State for sending and receiving messages. */
var nsend = 0; // The number of the next packet to send.
var nrecv = 0; // The next packet expected.
var msgQ = []; // Queue for out-of-order messages.

/* Processes a message from the server, returning true or false if it was a 
 * data message with or without data, null if not data.
 * All non-special responseTexts should be handed directly to this function.
 */
function processMsg(msg) {
  var msgDicts;
  var havedata = null; // eventual return value
  try {
    msgDicts = JSON.parse(msg);
  } catch (e) {
    if (e instanceof SyntaxError)
      return null;
  }
  if (msgDicts.length === 0)
    return false;
  for (var j = 0; j < msgDicts.length; j++) {
    if (!msgDicts[j].t)
      continue;
    else if (msgDicts[j].t == "E") {
      if (msgDicts[j].c == 1 || msgDicts[j].c == 6 || msgDicts[j].c == 7) {
        gameover();
        if (msgDicts[j].c == 1) {
          logout();
        }
      }
      debug(1, "Server error: " + msgDicts[j].s);
    }
    // A data message
    else if (msgDicts[j].t == "d") {
      if (msgDicts[j].n === nrecv) {
        writeData(msgDicts[j].d);
        nrecv++;
        /* Process anything in the queue that's now ready. */
        var next;
        while ((next = msgQ.shift()) !== undefined) {
          writeData(next.d);
          nrecv++;
        }
      }
      else if (msgDicts[j].n > nrecv) {
        /* The current message comes after one still missing.  Queue this one
         * for later use. */
        debug(1, "Got packet " + msgDicts[j].n + ", expected " + nrecv);
        msgQ[msgDicts[j].n - nrecv - 1] = msgDicts[j];
      }
      else {
        /* This message's number was encountered previously. */
        debug(1, "Discarding packet " + msgDicts[j].n + ", expected " + nrecv);
      }
      havedata = true;
    }
    else if (msgDicts[j].t == "T") {
      setTitle(msgDicts[j].d);
    }
    else if (msgDicts[j].t == "q") {
      gameover();
    }
    else {
      debug(1, "Unrecognized server message " + msg);
    }
  }
  return havedata;
}

function getData() {
  if (session.id == null)
    return;
  var datareq = new XMLHttpRequest();
  var msg = JSON.stringify({"id": session.id, "t": "n"});
  datareq.onerror = errHandler;
  datareq.onreadystatechange = function () {
    if (datareq.readyState == 4 && datareq.status == 200) {
      var wasdata = processMsg(datareq.responseText);
      if (wasdata != null) {
        if (wasdata)
          ajaxstate.gotdata();
        else
          ajaxstate.gotnothing();
      }
      return;
    }
  };
  datareq.open('POST', '/feed', true);
  datareq.send(msg);
  return;
}

function postResponseHandler() {
  if (this.readyState == 4 && this.status == 200) {
    // We might want to do something with wasdata someday.
    var wasdata = processMsg(this.responseText);
    ajaxstate.posted();
    return;
  }
}

function errHandler() {
  debug(1, "Server unavailable?");
}

function sendback(str) {
  /* For responding to terminal queries. */
  var msgDict = {"id": session.id, "t": "d", "n": nsend++, "d": str};
  var datareq = new XMLHttpRequest();
  datareq.onerror = errHandler;
  datareq.onreadystatechange = postResponseHandler;
  datareq.open('POST', '/feed', true);
  datareq.send(JSON.stringify(msgDict));
  return;
}

function sendkey(ev) {
  if (!session.playing)
    return;
  var keynum = ev.keyCode;
  var code;
  if (keynum >= 65 && keynum <= 90) {
    /* Letters. */
    if (ev.ctrlKey)
      keynum -= 64;
    else if (!ev.shiftKey)
      keynum += 32;
    code = keynum.toString(16);
    if (code.length < 2)
      code = "0" + code;
  }
  else if (keynum >= 48 && keynum <= 57) {
    /* The number row, NOT the numpad. */
    if (ev.shiftKey) {
      code = numShifts[keynum - 48].toString(16);
    }
    else {
      code = keynum.toString(16);
    }
  }
  else if (keynum in keyHexCodes) {
    if (ev.shiftKey)
      code = keyHexCodes[keynum][1];
    else
      code = keyHexCodes[keynum][0];
  }
  else if (keynum >= 16 && keynum <= 20) {
    /* Shift, Cntl, Alt, CAPSLOCK */
    return;
  }
  else {
    debug(1, "Ignoring keycode " + keynum);
    return;
  }
  ev.preventDefault();
  var datareq = new XMLHttpRequest();
  var msgDict = {"id": session.id, "t": "d", "n": nsend++, "d": code};
  datareq.onerror = errHandler;
  datareq.onreadystatechange = postResponseHandler;
  datareq.open('POST', '/feed', true);
  datareq.send(JSON.stringify(msgDict));
  return;
}

var charshifts = { '-': "5f", '=': "2b", '[': "7b", ']': "7d", '\\': "7c",
  ';': "3a", '\'': "22", ',': "3c", '.': "3e", '/': "3f", '`': "7e"
}

var kpkeys = { "KP1": "1b4f46", "KP2": "1b4f42", "KP3": "1b5b367e", 
               "KP4": "1b4f44", "KP5": "1b5b45", "KP6": "1b4f43", 
               "KP7": "1b4f48", "KP8": "1b4f41", "KP9": "1b5b357e" };

function vkey(c) {
  if (!session.playing)
    return;
  var keystr;
  if (c.match(/^[a-z]$/)) {
    if (termemu.ctrlp()) {
      var n = c.charCodeAt(0) - 96;
      keystr = n.toString(16);
      if (keystr.length < 2)
        keystr = "0" + keystr;
    }
    else if (termemu.shiftp())
      keystr = c.toUpperCase().charCodeAt(0).toString(16);
    else
      keystr = c.charCodeAt(0).toString(16);
  }
  else if (c.match(/^[0-9]$/)) {
    if (termemu.shiftp())
      keystr = numShifts[c.charCodeAt(0) - 48].toString(16);
    else
      keystr = c.charCodeAt(0).toString(16);
  }
  else if (c == '\n')
    keystr = "0a";
  else if (c == '\t')
    keystr = "09";
  else if (c == '\b')
    keystr = "08";
  else if (c == ' ')
    keystr = "20";
  else if (c in charshifts) {
    if (termemu.shiftp())
      keystr = charshifts[c];
    else
      keystr = c.charCodeAt(0).toString(16);
  }
  else if (c in kpkeys) {
    keystr = kpkeys[c];
  }
  else
    return;
  var datareq = new XMLHttpRequest();
  var msgDict = {"id": session.id, "t": "d", "n": nsend++, "d": keystr};
  datareq.onerror = errHandler;
  datareq.onreadystatechange = postResponseHandler;
  datareq.open('POST', '/feed', true);
  datareq.send(JSON.stringify(msgDict));
  return;
}

function setup() {
  keyHexCodes.init();
  termemu.init("termwrap", 24, 80);
  setTitle("Not connected.");
  setmode("login");
  return;
}

function toggleshift() {
  termemu.toggleshift();
  keydiv = document.getElementById("shiftkey");
  if (termemu.shiftp())
    keydiv.className = "keysel";
  else
    keydiv.className = "key";
  return;
}

function togglectrl() {
  termemu.togglectrl();
  keydiv = document.getElementById("ctrlkey");
  if (termemu.ctrlp())
    keydiv.className = "keysel";
  else
    keydiv.className = "key";
  return;
}

function formlogin(ev) {
  ev.preventDefault();
  if (session.id != null)
    return;
  var loginmsg = {};
  loginmsg["name"] = document.getElementById("input_name").value;
  loginmsg["pw"] = document.getElementById("input_pw").value;
  var req = new XMLHttpRequest();
  req.onerror = errHandler;
  req.onreadystatechange = function () {
    if (req.readyState != 4 || req.status != 200) 
      return;
    var reply = JSON.parse(req.responseText);
    if (reply.t == 'l') {
      /* Success */
      session.lcred = reply.k;
      session.lname = reply.u;
      setTitle("Logged in as " + reply.u);
      debug(1, "Logged in as " + reply.u + " with id " + reply.k);
      setmode("choose");
    }
    else if (reply.t == 'E') {
      debug(1, "Could not log in: " + reply.s);
      document.getElementById("input_name").value = "";
      document.getElementById("input_pw").value = "";
    }
  };
  req.open('POST', '/login', true);
  req.send(JSON.stringify(loginmsg));
  return;
}

function getcurrent(clear) {
  if (session.id || clear) {
    if (statInterval) {
      window.clearInterval(statInterval);
      statInterval = null;
    }
    return;
  }
  if (!statInterval) {
    statInterval = window.setInterval(getcurrent, statDelta);
  }
  var req = new XMLHttpRequest();
  req.onerror = errHandler;
  req.onreadystatechange = function () {
    if (req.readyState != 4 || req.status != 200) 
      return;
    var reply;
    try {
      reply = JSON.parse(req.responseText);
    } catch (e) {
      if (e instanceof SyntaxError)