MCPEweb/shell.html at main · unbreakify/MCPEweb · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!doctype html>
<html lang="en-us">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>Minecraft</title>
    <link rel="manifest" href="manifest.json">
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: black;
            display: flex;
            align-items: center;
            justify-content: center;
            touch-action: none;
            /* Prevent browser scroll/zoom on touch */
        }

        canvas.emscripten {
            /* Fills the whole window – the C++ renderer now sets its
               resolution from window.innerWidth/Height dynamically */
            display: block;
            outline: none;
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1"></canvas>

    <script type='text/javascript'>
        var Module = {
            canvas: (function () { return document.getElementById('canvas'); })()
        };

        // ─── Multi-touch → Mouse event translation ──────────────────────────────────
        // Emscripten's SDL layer listens for MouseEvents on the canvas.
        // We synthesise those events from Touch data so that:
        //   • Every touch point generates correct mousemove / mousedown / mouseup.
        //   • Coordinates are scaled from CSS pixels to canvas logical pixels
        //     (accounting for letterboxing via getBoundingClientRect).
        //   • All touches are tracked independently so multi-touch doesn't break.
        // ────────────────────────────────────────────────────────────────────────────

        (function () {
            var canvas = document.getElementById('canvas');

            // Handle Native Mouse Clicks to lock pointer only for REAL mice
            canvas.addEventListener('mousedown', function (e) {
                // e.isTrusted ensures this was a physical mouse click
                if (e.isTrusted && !document.pointerLockElement && !window.mcMenuOpen) {
                    canvas.requestPointerLock();
                }
            });

            // Prevent default touch behaviors on the canvas (like scrolling, double-tap zoom)
            // This also prevents the browser from synthesizing native 'mousedown' events from touches
            canvas.addEventListener('touchstart', function (e) {
                e.preventDefault();
            }, { passive: false });

            // Block document-level default touch behaviours (scroll / zoom),
            // but only for non-input elements (the existing rule).
            document.addEventListener('touchstart', function (e) {
                var t = e.target.tagName;
                if (t !== 'INPUT' && t !== 'TEXTAREA' && t !== 'BUTTON' && t !== 'SELECT' && t !== 'OPTION') {
                    e.preventDefault();
                }
            }, { passive: false });
        })();
    </script>
    <script type='text/javascript'>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('./sw.js')
                    .then(registration => {
                        console.log('ServiceWorker registration successful with scope: ', registration.scope);
                    }, err => {
                        console.log('ServiceWorker registration failed: ', err);
                    });
            });
        }
    </script>
    {{{ SCRIPT }}}
</body>

</html>