ResistanceRacing2k97/index.html

<!doctype html>
<html>
   <head>
      <title>Resistance Racing 2025</title>
      <!--<script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>-->
      <script src="./lib/jquerySlim.js"></script>
      <script src="./lib/phaser.min.js"></script>
      <script src="./lib/howler.min.js"></script>
      <script src="src/inputs.js"></script>
      <script src="src/racingSounds.js"></script>
      <!--<script src="src/shaderGreenscale.js"></script>-->
   </head>

   <body>
      <script>
         const SAVEGAMENAME = "rr25";
         const CONSTANT = {
            FOO: 0,
            BAR: 1,
         };
         const HALFPI = Math.PI * 0.5;

         const PLAYERMODE = {
            LOOK: 0,
            INTERACT: 1,
            DIALOGUE: 2,
            CUTSCENE: 3,
            SHIP: 4,
         };
         const PLAYERMOVE = {
            STAND: 0,
            WALK: 1,
            RUN: 2,
            SIT: 3,
            LIE: 4,
            CROUCH: 5,
            SHIP: 6,
         };

         const DRAWMODE = {
            D3D: 0,
            D2D: 1,
            NOSCALE2D: 2,
            BILLBOARD: 3,
            BILLBOARD3D: 4,
         };

         const GLYPHS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ .,";

         let globalOrientation = {
            alpha: null,
            beta: 0,
            gamma: 0,
         };
         let offsetOrientation = {
            yaw: Math.PI * -0.5,
            pitch: 0,
            roll: 0,
         };
         let isMobile = false;

         let rando = null;

         let view = {
            full: {
               width: 0,
               height: 0,
            },
            half: {
               widht: 0,
               height: 0,
            },
         };

         let OPTIONS = {
            sound: {
               master: 0.75,
               music: 0.75,
               sfx: 0.75,
               speech: 0.75,
               mute: false,
            },
            effects: {
               screenshake: 1,
               shader: true,
               viewDistWalk: 1,
               viewDistShip: 1,
               fov: 1,
            },
            controls: {
               mouse: {
                  sensitivity: 3,
               },
               mobile: false,
            },
            config: {
               preferredCam: 0,
               collisionRadar: 1,
               idealLine: 1,
               hideUI: false,
            },
         };

         /*
         let deltaAdapter = {
            interval: null,
            last: 0,
            current: 0,
            //diff: 0,
         }
         deltaAdapter.interval = setInterval(() => {
            deltaAdapter.last = deltaAdapter.current;
            deltaAdapter.current = Date.now();
            //deltaAdapter.diff = deltaAdapter.current - deltaAdapter.last;
         }, 1000)
         */

         function getNegDir(_dir) {
            let d = _dir + 2;
            if (d > 3) {
               d -= 4;
            }
            return d;
         }

         function normAngle(_val) {
            let v = _val;
            while (v > Math.PI) {
               v -= Math.PI * 2;
            }
            while (v < Math.PI * -1) {
               v += Math.PI * 2;
            }
            return v;
         }

         function zeroPad(_num, _pad) {
            let str = String(_num);
            for (let i = str.length; i < _pad; i++) {
               str = "0" + str;
            }
            return str;
         }

         function timeToLapTime(_time) {
            let allSeconds = _time / 1000;
            let allMinutes = Math.floor(allSeconds / 60);
            let displaySeconds = Math.floor(allSeconds % 60);
            let displayMinutes = allMinutes;
            let displayMilliss = Math.floor((allSeconds % 1) * 10000);
            return zeroPad(displayMinutes, 2) + ":" + zeroPad(displaySeconds, 2) + ":" + zeroPad(displayMilliss, 4);
         }

         let game = null;

         let urlParams = new URLSearchParams(window.location.search);
         let ref = urlParams.get("ref");

         //shader
         //let greenscalePipeline;

         //adds
         let rti, pip, eud, gl_vec3, gl_vec4, gl_quat, gl_mat3, gl_rvaa, flagManager;

         //orientation
         function orientationHandler(_ev) {
            globalOrientation.alpha = _ev.alpha;
            globalOrientation.beta = _ev.beta;
            globalOrientation.gamma = _ev.gamma;
         }
         window.addEventListener("deviceorientation", orientationHandler);

         function getRotationMatrix(_alpha, _beta, _gamma) {
            let degtorad = Math.PI / 180; // Degree-to-Radian conversion
            let cX = Math.cos(_beta * degtorad);
            let cY = Math.cos(_gamma * degtorad);
            let cZ = Math.cos(_alpha * degtorad);
            let sX = Math.sin(_beta * degtorad);
            let sY = Math.sin(_gamma * degtorad);
            let sZ = Math.sin(_alpha * degtorad);

            let m11 = cZ * cY - sZ * sX * sY;
            let m12 = -cX * sZ;
            let m13 = cY * sZ * sX + cZ * sY;

            let m21 = cY * sZ + cZ * sX * sY;
            let m22 = cZ * cX;
            let m23 = sZ * sY - cZ * cY * sX;

            let m31 = -cX * sY;
            let m32 = sX;
            let m33 = cX * cY;

            return [m13, m11, m12, m23, m21, m22, m33, m31, m32];
         }

         function getEulerAngles(_matrix) {
            let radtodeg = 180 / Math.PI; // Radian-to-Degree conversion
            let sy = Math.sqrt(_matrix[0] * _matrix[0] + _matrix[3] * _matrix[3]);

            let singular = sy < 1e-6; // If

            let x = 0;
            let y = 0;
            let z = 0;
            if (!singular) {
               x = Math.atan2(_matrix[7], _matrix[8]);
               y = Math.atan2(-_matrix[6], sy);
               z = Math.atan2(_matrix[3], _matrix[0]);
            } else {
               x = Math.atan2(-_matrix[5], _matrix[4]);
               y = Math.atan2(-_matrix[6], sy);
               z = 0;
            }
            return [radtodeg * x, radtodeg * y, radtodeg * z];
         }

         //savegame
         function saveOptions() {
            let save = JSON.parse(localStorage.getItem(SAVEGAMENAME));
            save.sound.mute = OPTIONS.sound.mute;
            localStorage.setItem(SAVEGAMENAME, JSON.stringify(save));
         }

         function loadOptions() {
            let save = JSON.parse(localStorage.getItem(SAVEGAMENAME));
            OPTIONS.sound.mute = save.sound.mute;
         }

         //gamepads
         let gamepads = {};
         let gamepadsConnected = 0;
         function gamepadHandler(_event, _connecting) {
            var gamepad = _event.gamepad;
            // Note:
            // gamepad === navigator.getGamepads()[gamepad.index]

            if (_connecting) {
               gamepads[gamepad.index] = gamepad;
               console.log(gamepad);
               gamepadsConnected += 1;
            } else {
               delete gamepads[gamepad.index];
               gamepadsConnected -= 1;
               console.log(gamepad);
            }
         }
         window.addEventListener(
            "gamepadconnected",
            function (e) {
               gamepadHandler(e, true);
            },
            false,
         );
         window.addEventListener(
            "gamepaddisconnected",
            function (e) {
               gamepadHandler(e, false);
            },
            false,
         );

         window.addEventListener("gamepadconnected", (e) => {
            console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length);
         });

         //disable right clicking
         document.addEventListener("contextmenu", (event) => event.preventDefault());
      </script>
      <script type="module">
         import Preloader from "./src/preloader.js";
         import ScnLoad from "./src/scnLoad.js";
         import Scn3d from "./src/scn3d.js";
         import ScnMainMenu from "./src/scnMainMenu.js";
         import ScnSavegameCheck from "./src/scnSavegameCheck.js";

         import RTI from "./src/additionalMath/rayTriangleIntersection.js";
         import PIP from "./src/additionalMath/pointInPolygon.js";
         import EuclidianDistance from "./src/additionalMath/euclidianDistance.js";
         import GL_Vec3 from "./src/additionalMath/gl_vec3.js";
         import GL_Vec4 from "./src/additionalMath/gl_vec4.js";
         import GL_Quat from "./src/additionalMath/gl_quat.js";
         import GL_Mat3 from "./src/additionalMath/gl_mat3.js";
         import GL_RVAA from "./src/additionalMath/gl_rvaa.js";

         import FlagManager from "./src/flagManager.js";

         let ratio = Math.max(0.5, Math.min(1.77, window.innerWidth / window.innerHeight));
         //alert(ratio)
         let w = 512;
         let h = Math.floor(w / ratio);
         console.log(w + " x " + h);

         var config = {
            type: Phaser.AUTO,
            width: w, //512
            height: h, //320
            render: {
               antialias: false,
               roundPixels: true,
               pixelArt: true,
            },
            scale: {
               autoCenter: true,
               mode: Phaser.Scale.FIT,
            },
            seed: ["hugging"],
            scene: [Preloader(), ScnLoad, Scn3d, ScnSavegameCheck],
            input: {
               smoothFactor: 0.199, //prev .99
            },
         };
         game = new Phaser.Game(config);

         rti = new RTI();
         pip = new PIP();
         eud = new EuclidianDistance();
         gl_vec3 = new GL_Vec3();
         gl_vec4 = new GL_Vec4();
         gl_quat = new GL_Quat();
         gl_mat3 = new GL_Mat3();
         gl_rvaa = new GL_RVAA();

         let showControls = true;
         flagManager = new FlagManager();

         /*
         $("#editorbox").hide();
         $("#infotext").hide();
         $("#btnControls").on("click", () => {
            showControls = !showControls;
            if (showControls === true) {
               $("#infotext").show();
            } else {
               $("#infotext").hide();
            }
         });
         $("#mouse_sensitivity").change(() => {
            OPTIONS.controls.mouse.sensitivity = Number($("#mouse_sensitivity").val());
         });
          */
      </script>

      <!--
      <div id="videoHolder" class="videoHolder">
         <video id="trailer" width="100%" height="100%" loop>
            <source src="assets/video/rrTrailer00b.mp4" type="video/mp4" />
            Your browser does not support the video tag.
         </video>
      </div>
       --

      <script>
         /*
         $(".videoHolder").hide();
         $(".videoHolder").on("click", (_ev) => {
            _ev.stopPropagation();
            $(".videoHolder").hide();
            $("#trailer")[0].pause();
            $("#trailer")[0].currentTime = 0;

            for (let s of game.scene.scenes[2].soundManager.musicRef) {
               s.howlGroup.volume(OPTIONS.sound.music);
            }
         });
          */
      </script>

      <!--
    <div id="onScreenControls" class="onScreenControls">
        <p style="color: red">NOT YET SUPPORTED</p>
        <div class="altCtrlGrid">
            <span></span>
            <button class="altCtrlBtn">↩️</button>
            <button class="altCtrlBtn">🔼</button>
            <button class="altCtrlBtn">↪️</button>
            <span></span>
            <button class="altCtrlBtn">👆</button>
            <button class="altCtrlBtn">❌</button>
            <span></span>
            <span></span>
            <button class="altCtrlBtn">◀️</button>
            <button class="altCtrlBtn">🔽</button>
            <button class="altCtrlBtn">▶️</button>
        </div>
    </div>

    <div id="editorbox" class="editorbox">
        <button id="btnPrintModel">print model</button>
        <button id="btnNewModel">new model</button>
        <button id="btnControls">controls</button>

        <div id="infotext" class="infotext">
            <table id="infotabel" class="infotable">
                <tr>
                    <td>Q + E</td>
                    <td>toggle edit mode</td>
                </tr>
                <tr>
                    <td>W / A / S / D</td>
                    <td>move</td>
                </tr>
                <tr>
                    <td>SPACE / C</td>
                    <td>move up / down</td>
                </tr>
                <tr>
                    <td>ARROWKEYS</td>
                    <td>look around</td>
                </tr>
                <tr>
                    <td>N</td>
                    <td>duplicate quad</td>
                </tr>
                <tr>
                    <td>1 / 2 / 3 / 4</td>
                    <td>(de)select quad corner</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>toggle all selected quad corners</td>
                </tr>
                <tr>
                    <td>T + mousewheel</td>
                    <td>flip through texture</td>
                </tr>
                <tr>
                    <td>T + X / Y</td>
                    <td>flip through texture</td>
                </tr>
                <tr>
                    <td>Z + mousewheel</td>
                    <td>flip through texturebank</td>
                </tr>
                <tr>
                    <td>Z + X / Y</td>
                    <td>flip through texturebank</td>
                </tr>
                <tr>
                    <td>I / K</td>
                    <td>move selected corner forward / back</td>
                </tr>
                <tr>
                    <td>J / L</td>
                    <td>move selected corners left / right</td>
                </tr>
                <tr>
                    <td>U / O</td>
                    <td>move selected corners up / down</td>
                </tr>
                <tr>
                    <td>X / Y</td>
                    <td>rotate quad</td>
                </tr>
                <tr>
                    <td>Q + M</td>
                    <td>toggle edit collisionquads</td>
                </tr>
                <tr>
                    <td>M</td>
                    <td>show / hide collisionquads</td>
                </tr>
                <tr>
                    <td>G + Mousewheel</td>
                    <td>change gridsize</td>
                </tr>
            </table>
        </div>
    </div>
    <div id="optionbox" class="editorbox infotext">
        <input type="range" id="mouse_sensitivity" min="1" max="5" value="3">Mouse Sensitivity</input>
    </div>

    -->
   </body>

   <style>
      body {
         overflow: hidden;
         margin: 0;
         padding: 0;
         background-color: #131313;
      }

      .editorbox {
         position: absolute;
         display: none;
         padding: 1em;
         z-index: 100;
      }

      .infotext {
         color: white;
      }

      .infotable td {
         color: white;
      }

      .bookSearch {
         display: none;
         position: absolute;
         top: 0;
         left: 0;
         padding: 1em;
         z-index: 100;
      }

      .onScreenEditor {
         position: absolute;
         width: 100%;
         top: 0;
         left: 0;
         z-index: 100;
         font-size: 1em;
      }

      .onScreenControls {
         position: absolute;
         display: none;
         width: 100%;
         height: 25%;
         top: 75%;
         background-color: rgba(0, 0, 0, 0.1);
         z-index: 100;
         font-size: 1em;
         pointer-events: none;
      }

      .videoHolder {
         position: absolute;
         display: flex;
         background-color: #000000;
         width: 100%;
         height: 100%;
         z-index: 100;
         cursor: pointer;
      }

      .arcadeItch {
         display: none;
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
      }

      .arcadeItch > iframe {
         border: none;
         width: 100%;
         height: 100%;
      }

      .altCtrlGrid {
         display: grid;
         grid-template-rows: 1fr 1fr;
         grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
         gap: 0.1em;
         height: 100%;
      }

      .altCtrlBtn {
         background-color: #333333;
         font-size: 5em;
         opacity: 0.5;
         stroke-opacity: 1;
         pointer-events: auto;
      }

      .altCtrlBtn:hover {
         background-color: #88aa88;
      }
   </style>
</html>