<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Meerschaum Shell</title>
<style>
  html {
    background: #000;
  }

  h1 {
    margin-bottom: 20px;
    font: 20px/1.5 sans-serif;
  }

  .terminal {
    font-size: 16px !important;
  }


</style>
<script src="{{ xstatic('termjs', 'term.js') }}"></script>
<script src="{{ static('terminado.js') }}"></script>
<script>
window.onload = function() {
    // Test size: 25x80
    var termRowHeight = 0.0 + 1.00*document.getElementById("dummy-screen").offsetHeight / 25;
    var termColWidth = 0.0 + (1.02*document.getElementById("dummy-screen-rows").offsetWidth / 80);
    document.getElementById("dummy-screen").setAttribute("style", "display: none");

    var protocol = (window.location.protocol.indexOf("https") === 0) ? "wss" : "ws";
    var ws_url = protocol+"://"+window.location.host+ "{{ws_url_path}}";

    function calculate_size(element) {
        var rows = Math.max(2, Math.floor(element.innerHeight/termRowHeight)-1);
        var cols = Math.max(3, Math.floor(element.innerWidth/termColWidth)-1);
        console.log("resize:", termRowHeight, termColWidth, element.innerHeight,
                                        element.innerWidth, rows, cols);
        return {rows: rows, cols: cols};
    }

    size = calculate_size(window);
    var terminal = make_terminal(document.body, size, ws_url);

    window.onresize = function() {
      var geom = calculate_size(window);
      terminal.term.resize(geom.cols, geom.rows);
      terminal.socket.send(JSON.stringify(["set_size", geom.rows, geom.cols,
                                window.innerHeight, window.innerWidth]));
    };
};
</script>
</head>
<body>
<!-- test size: 25x80 -->
<pre id="dummy-screen" style="visibility:hidden; border: white solid 5px; font-family: &quot;DejaVu Sans Mono&quot;, &quot;Liberation Mono&quot;, monospace; font-size: 16px;">0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
<span id="dummy-screen-rows" style="visibility:hidden;">01234567890123456789012345678901234567890123456789012345678901234567890123456789</span>
</pre>
</body>
