index.html

<style>
        body {
          color: white;
          font-family: arial;
          flex-direction: column;
          background-color: black;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        </style>
<body>
    <div>This is supposed to be zork.</div>
</body>

<script>
var width = 100;
var height = 43;
var charWidth = 10;
var charHeight = 20;

var pressedKeys = [];

var c = document.createElement('canvas');
c.width = width * charWidth;
c.height = height * charHeight;
document.body.append(c);

var ctx = c.getContext('2d');
ctx.textAlign = "left";
ctx.font = '12px arial';

var machine_ptr;
var wasm_instance;

fetch('target/wasm32-unknown-unknown/release/rustzork.wasm')
.then(response => response.arrayBuffer())
.then(bytes => WebAssembly.instantiate(bytes, {
    env: {
        debug_trace: function(x) {
            console.log( "debug trace", x );
        },
        terminal_height: function () {
            return height;
        },
        clear: function() {
            ctx.clearRect(0, 0, width*charWidth, height*charHeight);
        },
        put_line: function(x,y,ptr,len) {
            ctx.fillStyle = `rgb(255,255,255)`;
            var text = "";
            var memory = new Uint8Array(wasm_instance.exports.memory.buffer, ptr, len);
            for( let n of memory.values() )
            {
                text += String.fromCharCode( n );
            }
            ctx.fillText(text, x*charWidth + charWidth / 2, y*charHeight + charHeight);
        }
    }
})
.then( results => {
    wasm_instance = results.instance;
    machine_ptr = wasm_instance.exports.initialize();
    function update() {
        window.requestAnimationFrame(update);
        for( let n of pressedKeys )
        {
            wasm_instance.exports.key_pressed(machine_ptr, n.keyCode);
        }
        pressedKeys = [];
        wasm_instance.exports.update(machine_ptr);
    }
    document.addEventListener('keydown', (event) => {
        //console.log(event);
        pressedKeys.push(event);
    });
    update();
}));
</script>