SurrealEngine-Emscripten/buildScripts/Emscripten/index.html at master · zefir1990/SurrealEngine-Emscripten · 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
96
97
98
<html>
<style>
    html,
    body {
        overflow: hidden;
        height: 100%;
        margin: 0;
    }
    body {
        font-family: Arial, Helvetica, sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
        background-image: url("./background.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: cover;
    }
    #moduleStatusString {
        color: #4AF626;
        text-align: center;
        font-size: 30px;
    }
    #canvas {
        display: none;
        /*border: 1px solid white; Uncomment for layout debug*/
    }
</style>
<head>
<title>Surreal Engine Emscripten Demo</title>
</head>
<body>
    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
        <canvas id="canvas"></canvas>
        <div id="moduleStatusString">Should start downloading Unreal Tournament Demo (338)...</div>
    </div>
    <script type="text/javascript">
        let canvas = document.getElementById("canvas");
        // make the canvas fullscreen
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        canvas.oncontextmenu = (e) =>{
            e.preventDefault();
        }
        let resizeCanvas = () => {
            let scaleX = window.innerWidth / 1920;
            let scaleY = window.innerHeight / 1080;
            let scale = Math.min(scaleX, scaleY);
            canvas.style.transform = `scaleX(${scale}) scaleY(${scale})`;
        }
        window.addEventListener('resize', resizeCanvas);
        let statusElement = document.getElementById('moduleStatusString');
        var downloadingSymbolRightArrow = false;
        var Module = {
            setStatus: function (text) {
                try {
                    // Cool preloader
                    let regexMatch = text.match("([0-9]*)\/([0-9]*)");
                    if (regexMatch != null && regexMatch.length == 3) {
                        let downloaded = parseFloat(regexMatch[1]) / 1024.0 / 1024.0;
                        var total = parseFloat(regexMatch[2]) / 1024.0 / 1024.0;
                        if (total == 0) {
                            total = 1;
                        }
                        let percent = (downloaded / total) * 100;
                        let progress = Math.round(percent).toString() + "%";
                        let downloadingSymbol = downloadingSymbolRightArrow == true ? ">" : "<";
                        downloadingSymbolRightArrow = !downloadingSymbolRightArrow;
                        let outputString = "Downloading Unreal Tournament Demo (338)...<br>" + downloadingSymbol + " " + downloaded.toFixed(2).toString() + " MB / " + total.toFixed(2).toString() + " MB " + progress;
                        statusElement.innerHTML = outputString;
                        if (percent > 99 && statusElement.style.display != "none") {
                            statusElement.style.display = "none";
                            canvas.style.display = "block";
                            resizeCanvas();
                        }
                    }
                    else {
                        statusElement.innerHTML = "";
                    }
                }
                catch (error) {
                    console.log(error);
                    statusElement.innerHTML = `Error: ${error.toString()}`;
                }
            }
        };
        Module.canvas = canvas;
    </script>
    <script>
        let checkFocus=()=>{
            window.focus();
        }
        window.setInterval(checkFocus, 1000);
    </script>
    <script type="text/javascript" src="SurrealEngine.js"></script>
</body>
</html>