html terminal
Diffstat (limited to 'html-src/viewer.html')
| -rw-r--r-- | html-src/viewer.html | 60 |
1 files changed, 60 insertions, 0 deletions
diff --git a/html-src/viewer.html b/html-src/viewer.html new file mode 100644 index 0000000..0630dde --- /dev/null +++ b/html-src/viewer.html @@ -0,0 +1,60 @@ +<!doctype html> +<html lang="en-US"> + +<head> + <meta charset="utf-8" /> + <title>view the current game</title> + <style> + img { + user-select: none; + } + + body { + background-color: #3E3B3B; + } + </style> +</head> + +<body> + <img id="picture" draggable="false"> + <script src="https://unpkg.com/@panzoom/[email protected]/dist/panzoom.min.js"></script> + <script type="module"> + let begin = [] + let end = [0, 0] + let press = false + import init, { render } from "/masm.js"; + async function base(buffer) { + const base64url = await new Promise(r => { + const reader = new FileReader() + reader.onload = () => r(reader.result) + reader.readAsDataURL(new Blob([buffer])) + }); + return base64url.slice(base64url.indexOf(',') + 1) + } + init().then(() => { + fetch("http://apricotalliance.org/savefile").then(function (content) { + content.arrayBuffer().then(function (buf) { + let pic = document.getElementById('picture'); + let imgbuf = render(new Uint8Array(buf)); + console.log("render done"); + pic.src = URL.createObjectURL(new Blob([imgbuf])) + let panzoom = Panzoom(pic, { maxScale: 7, cursor: "grab", noBind: true }); + panzoom.pan(pic.width / 2, pic.height / 2, { animate: true }) + panzoom.zoom(1, { animate: true }) + pic.addEventListener('pointerdown', (event) => { + pic.style.cursor = "grabbing" + panzoom.handleDown(event) + }) + pic.addEventListener('pointerup', (event) => { + pic.style.cursor = "grab" + panzoom.handleUp(event) + }) + pic.addEventListener('pointermove', panzoom.handleMove) + pic.addEventListener('wheel', panzoom.zoomWithWheel) + }) + }) + }); + </script> +</body> + +</html>
\ No newline at end of file |