https://crazycars.pages.dev/start__.js

1(function () {
2    // Shared Lib
3    var CANVAS_ID = 'application-canvas';
4
5    // Needed as we will have edge cases for particlar versions of iOS
6    // returns null if not iOS
7    var getIosVersion = function () {
8        if (/iP(hone|od|ad)/.test(navigator.platform)) {
9            var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
10            var version = [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
11            return version;
12        }
13
14        return null;
15    };
16
17    var lastWindowHeight = window.innerHeight;
18    var lastWindowWidth = window.innerWidth;
19    var windowSizeChangeIntervalHandler = null;
20
21    var pcBootstrap = {
22        reflowHandler: null,
23        iosVersion: getIosVersion(),
24
25        createCanvas: function () {
26            canvas = document.createElement('canvas'); // eslint-disable-line no-global-assign
27            canvas.setAttribute('id', CANVAS_ID);
28            canvas.setAttribute('tabindex', 0);
29            // canvas.style.visibility = 'hidden';
30
31            // Disable I-bar cursor on click+drag
32            canvas.onselectstart = function () { return false; };
33
34            // Disable long-touch select on iOS devices
35            canvas.style['-webkit-user-select'] = 'none';
36
37            document.body.appendChild(canvas);
38
39            return canvas;
40        },
41
42
43        resizeCanvas: function (app, canvas) {
44            canvas.style.width = '';
45            canvas.style.height = '';
46            app.resizeCanvas(canvas.width, canvas.height);
47
48            var fillMode = app._fillMode;
49
50            if (fillMode == pc.FILLMODE_NONE || fillMode == pc.FILLMODE_KEEP_ASPECT) {
51                if ((fillMode == pc.FILLMODE_NONE && canvas.clientHeight < window.innerHeight) || (canvas.clientWidth / canvas.clientHeight >= window.innerWidth / window.innerHeight)) {
52                    canvas.style.marginTop = Math.floor((window.innerHeight - canvas.clientHeight) / 2) + 'px';
53                } else {
54                    canvas.style.marginTop = '';
55                }
56            }
57
58            lastWindowHeight = window.innerHeight;
59            lastWindowWidth = window.innerWidth;
60
61            // Work around when in landscape to work on iOS 12 otherwise
62            // the content is under the URL bar at the top
63            if (this.iosVersion && this.iosVersion[0] <= 12) {
64                window.scrollTo(0, 0);
65            }
66        },
67
68        reflow: function (app, canvas) {
69            this.resizeCanvas(app, canvas);
70
71            // Poll for size changes as the window inner height can change after the resize event for iOS
72            // Have one tab only, and rotrait to portrait -> landscape -> portrait
73            if (windowSizeChangeIntervalHandler === null) {
74                windowSizeChangeIntervalHandler = setInterval(function () {
75                    if (lastWindowHeight !== window.innerHeight || lastWindowWidth !== window.innerWidth) {
76                        this.resizeCanvas(app, canvas);
77                    }
78                }.bind(this), 100);
79
80                // Don't want to do this all the time so stop polling after some short time
81                setTimeout(function () {
82                    if (!!windowSizeChangeIntervalHandler) {
83                        clearInterval(windowSizeChangeIntervalHandler);
84                        windowSizeChangeIntervalHandler = null;
85                    }
86                }, 2000);
87            }
88        }
89    };
90
91    // Expose the reflow to users so that they can override the existing
92    // reflow logic if need be
93    window.pcBootstrap = pcBootstrap;
94})();
95
96
97(function () {
98    var canvas, devices, app;
99
100    var createInputDevices = function (canvas) {
101        var devices = {
102            elementInput: new pc.ElementInput(canvas, {
103                useMouse: INPUT_SETTINGS.useMouse,
104                useTouch: INPUT_SETTINGS.useTouch
105            }),
106            keyboard: INPUT_SETTINGS.useKeyboard ? new pc.Keyboard(window) : null,
107            mouse: INPUT_SETTINGS.useMouse ? new pc.Mouse(canvas) : null,
108            gamepads: INPUT_SETTINGS.useGamepads ? new pc.GamePads() : null,
109            touch: INPUT_SETTINGS.useTouch && pc.platform.touch ? new pc.TouchDevice(canvas) : null
110        };
111
112        return devices;
113    };
114
115    var configureCss = function (fillMode, width, height) {
116        // Configure resolution and resize event
117        if (canvas.classList) {
118            canvas.classList.add('fill-mode-' + fillMode);
119        }
120
121        // css media query for aspect ratio changes
122        var css  = "@media screen and (min-aspect-ratio: " + width + "/" + height + ") {";
123        css += "    #application-canvas.fill-mode-KEEP_ASPECT {";

124        css += "        width: auto;";
125        css += "        height: 100%;";
126        css += "        margin: 0 auto;";
127        css += "    }";
128        css += "}";
129
130        // append css to style
131        if (document.head.querySelector) {
132            document.head.querySelector('style').innerHTML += css;
133        }
134    };
135
136    var displayError = function (html) {
137        var div = document.createElement('div');
138
139        div.innerHTML  = [
140            '<table style="background-color: #8CE; width: 100%; height: 100%;">',
141            '  <tr>',
142            '      <td align="center">',
143            '          <div style="display: table-cell; vertical-align: middle;">',
144            '              <div style="">' + html + '</div>',
145            '          </div>',
146            '      </td>',
147            '  </tr>',
148            '</table>'
149        ].join('\n');
150
151        document.body.appendChild(div);
152    };
153
154    canvas = pcBootstrap.createCanvas();
155    devices = createInputDevices(canvas);
156
157    try {
158        app = new pc.Application(canvas, {
159            elementInput: devices.elementInput,
160            keyboard: devices.keyboard,
161            mouse: devices.mouse,
162            gamepads: devices.gamepads,
163            touch: devices.touch,
164            graphicsDeviceOptions: window.CONTEXT_OPTIONS,
165            assetPrefix: window.ASSET_PREFIX || "",
166            scriptPrefix: window.SCRIPT_PREFIX || "",
167            scriptsOrder: window.SCRIPTS || []
168        });
169    } catch (e) {
170        if (e instanceof pc.UnsupportedBrowserError) {
171            displayError('This page requires a browser that supports WebGL.<br/>' +
172                    '<a href="http://get.webgl.org">Click here to find out more.</a>');
173        } else if (e instanceof pc.ContextCreationError) {
174            displayError("It doesn't appear your computer can support WebGL.<br/>" +
175                    '<a href="http://get.webgl.org/troubleshooting/">Click here for more information.</a>');
176        } else {
177            displayError('Could not initialize application. Error: ' + e);
178        }
179
180        return;
181    }
182
183    var configure = function () {
184        app.configure(CONFIG_FILENAME, function (err) {
185            if (err) {
186                console.error(err);
187            }
188
189            configureCss(app._fillMode, app._width, app._height);
190
191            const ltcMat1 = []; 
192            const ltcMat2 = []; 
193
194            if (ltcMat1.length && ltcMat2.length && app.setAreaLightLuts.length === 2) {
195                app.setAreaLightLuts(ltcMat1, ltcMat2);
196            }
197
198            // do the first reflow after a timeout because of
199            // iOS showing a squished iframe sometimes
200            setTimeout(function () {
201                pcBootstrap.reflow(app, canvas);
202                pcBootstrap.reflowHandler = function () { pcBootstrap.reflow(app, canvas); };
203
204                window.addEventListener('resize', pcBootstrap.reflowHandler, false);
205                window.addEventListener('orientationchange', pcBootstrap.reflowHandler, false);
206
207                app.preload(function (err) {
208                    if (err) {
209                        console.error(err);
210                    }
211
212                    app.scenes.loadScene(SCENE_PATH, function (err, scene) {
213                        if (err) {
214                            console.error(err);
215                        }
216
217                        app.start();
218                    });
219                });
220            });
221        });
222    };
223
224    if (PRELOAD_MODULES.length > 0) {
225        loadModules(PRELOAD_MODULES, ASSET_PREFIX, configure);
226    } else {
227        configure();
228    }
229})();