Web loading lifecycle progress transition refactor

custom_shell.html

@@ -107,7 +107,7 @@
     <canvas id="canvas" tabindex="0" width="1280" height="720" style="position: absolute; top: 0px; left: 0px; width: 1280px; height: 720px;"></canvas>
 
     <!-- Loading screen with progress bar (updated for better ARIA labeling) -->
-    <div id="loading">
+    <div id="loading" role="status" aria-live="polite" aria-busy="true">
 
         <svg height="414" viewBox="0 0 959.99998 388.125" width="1024" xmlns="http://www.w3.org/2000/svg"><path d="m0 0c-3.611.0-6.636-1.659-9.09-4.967-2.441-3.311-3.668-7.958-3.668-13.938.0-5.993 1.166-10.581 3.503-13.778 2.333-3.207 5.398-4.804 9.2-4.804 3.8.0 6.887 1.617 9.258 4.862 2.371 3.233 3.559 7.861 3.559 13.886.0 6.02-1.227 10.654-3.673 13.89C6.646-1.617 3.616.0.0.0m-.055-59.493c-10.573.0-19.195 3.46-25.859 10.379-6.655 6.925-9.984 17.03-9.984 30.314.0 13.292 3.367 23.356 10.101 30.209 6.736 6.844 15.431 10.269 26.082 10.269 10.649.0 19.251-3.363 25.794-10.109 6.555-6.733 9.827-16.94 9.827-30.591.0-13.661-3.348-23.822-10.05-30.49-6.702-6.654-15.333-9.981-25.911-9.981" transform="matrix(1.41381688 0 0 -1.41381688 570.061916 153.354153)"/><path d="m0 0v-33.768c0-1.577.116-2.571.342-2.988.224-.415.903-.623 2.029-.623 4.144.0 7.283 1.548 9.429 4.634 2.151 3.083 3.215 8.216 3.215 15.405.0 7.192-1.113 11.878-3.325 14.055-2.223 2.183-5.744 3.285-10.561 3.285zm-21.675-52.392v67.735c0 1.883.468 3.369 1.413 4.471.939 1.085 2.161 1.636 3.671 1.636H2.263c11.965.0 21.053-3.018 27.257-9.04 6.215-6.02 9.322-15.499 9.322-28.447.0-27.7-11.821-41.547-35.456-41.547h-19.302c-3.836.0-5.759 1.727-5.759 5.192" transform="matrix(1.41381688 0 0 -1.41381688 665.564378 154.460028)"/><path d="m0 0c-3.612.0-6.645-1.659-9.095-4.967-2.44-3.311-3.662-7.958-3.662-13.938.0-5.993 1.169-10.581 3.499-13.778 2.33-3.207 5.398-4.804 9.2-4.804 3.801.0 6.89 1.617 9.258 4.862 2.372 3.233 3.56 7.861 3.56 13.886.0 6.02-1.225 10.654-3.671 13.89-2.447 3.232-5.473 4.849-9.089 4.849m-.058-59.493c-10.577.0-19.193 3.46-25.851 10.379-6.663 6.925-9.993 17.03-9.993 30.314.0 13.292 3.367 23.356 10.1 30.209 6.741 6.844 15.431 10.269 26.086 10.269 10.651.0 19.246-3.363 25.797-10.109 6.55-6.733 9.822-16.94 9.822-30.591.0-13.661-3.349-23.822-10.05-30.49-6.699-6.654-15.338-9.981-25.911-9.981" transform="matrix(1.41381688 0 0 -1.41381688 781.763328 153.354153)"/><path d="m0 0c0-1.496-3.721-2.255-11.176-2.255-7.448.0-11.18.759-11.18 2.255v56.681h-13.545c-1.281.0-2.185 1.727-2.71 5.198-.226 1.652-.334 3.343-.334 5.077.0 1.724.108 3.422.334 5.077.525 3.462 1.429 5.202 2.71 5.202h49.112c1.279.0 2.179-1.74 2.712-5.202.221-1.655.335-3.353.335-5.077.0-1.734-.114-3.425-.335-5.077-.533-3.471-1.433-5.198-2.712-5.198h-13.211z" transform="matrix(1.41381688 0 0 -1.41381688 892.014153 233.329815)"/><path d="m0 0c-6.078.094-13.034-1.173-13.034-1.173v-11.863h6.995l-.078-5.288c0-1.959-1.942-2.943-5.815-2.943-3.878.0-7.303 1.642-10.274 4.917-2.978 3.279-4.459 8.072-4.459 14.388.0 6.329 1.447 10.995 4.345 14.006 2.892 3.008 6.683 4.517 11.346 4.517 1.959.0 3.987-.316 6.096-.961 2.11-.639 3.519-1.238 4.238-1.799.713-.577 1.391-.85 2.032-.85.638.0 1.671.746 3.1 2.255 1.431 1.505 2.713 3.786 3.844 6.827 1.126 3.057 1.69 5.4 1.69 7.062.0 1.649-.036 2.786-.109 3.386-1.581 1.73-4.499 3.102-8.755 4.122-4.248 1.017-9.011 1.522-14.28 1.522-11.594.0-20.66-3.65-27.207-10.95-6.552-7.303-9.822-16.783-9.822-28.452.0-13.701 3.347-24.087 10.041-31.162 6.706-7.074 15.51-10.607 26.425-10.607 5.87.0 11.08.505 15.632 1.522 4.557 1.013 7.586 2.053 9.093 3.105l.452 35.33c0 2.053-5.418 2.985-11.496 3.089" transform="matrix(1.41381688 0 0 -1.41381688 491.081866 176.607765)"/><g transform="matrix(1.25 0 0 -1.25 -94.249997 597.49874)"><path d="m0 0c-.624-1.28-1.771-2.454-3.449-3.516-1.676-1.069-3.805-1.6-6.391-1.6-3.412.0-6.156 1.075-8.24 3.249-2.076 2.157-3.116 5.266-3.116 9.323v10.116c0 3.969.98 7.013 2.946 9.138 1.962 2.108 4.59 3.177 7.872 3.177 3.208.0 5.695-.844 7.455-2.513 1.755-1.675 2.677-4.015 2.757-7.003l-.044-.133h-2.619c-.094 2.29-.759 4.057-2.01 5.305-1.244 1.238-3.095 1.864-5.539 1.864-2.473.0-4.432-.837-5.866-2.516-1.43-1.675-2.143-4.103-2.143-7.293v-10.174c0-3.308.771-5.83 2.311-7.567 1.54-1.724 3.616-2.588 6.236-2.588 1.913.0 3.451.339 4.602 1.033 1.155.684 1.956 1.519 2.409 2.51v8.861h-7.06v2.463h9.889z" transform="matrix(1.1310535 0 0 1.1310535 441.34721 235.75121)"/><path d="m0 0c1.553.0 2.936.44 4.144 1.336 1.21.9 2.058 2.037 2.561 3.422v5.468H2.213c-1.91.0-3.44-.541-4.585-1.623-1.148-1.075-1.716-2.418-1.716-4.015.0-1.349.355-2.457 1.074-3.311.718-.857 1.722-1.277 3.014-1.277m7.124-2.04c-.14.876-.249 1.587-.318 2.144-.067.567-.101 1.131-.101 1.704C5.938.554 4.948-.486 3.725-1.301c-1.221-.821-2.579-1.228-4.075-1.228-2.092.0-3.701.648-4.84 1.946C-6.322.72-6.894 2.476-6.894 4.693c0 2.343.823 4.223 2.473 5.618 1.649 1.395 3.89 2.092 6.709 2.092h4.417v3.106c0 1.786-.456 3.193-1.351 4.21-.914 1.004-2.17 1.512-3.791 1.512-1.508.0-2.752-.479-3.728-1.45-.973-.965-1.456-2.144-1.456-3.549l-2.623.023-.046.137c-.074 1.906.647 3.591 2.168 5.084 1.515 1.489 3.459 2.229 5.825 2.229 2.338.0 4.22-.711 5.657-2.128 1.429-1.431 2.146-3.471 2.146-6.124V3.057c0-.903.042-1.78.121-2.617.081-.848.212-1.665.417-2.48z" transform="matrix(1.1310535 0 0 1.1310535 456.01527 232.82495)"/><path d="m0 0 .24-3.923C.904-2.519 1.794-1.437 2.897-.668c1.107.759 2.41 1.138 3.906 1.138 1.527.0 2.814-.444 3.852-1.343 1.039-.896 1.805-2.252 2.292-4.074.623 1.682 1.505 3.011 2.65 3.973 1.145.964 2.534 1.444 4.143 1.444 2.217.0 3.937-.897 5.156-2.692 1.224-1.799 1.834-4.559 1.834-8.288v-14.765h-2.823v14.814c0 3.1-.429 5.283-1.263 6.538-.839 1.257-2.042 1.89-3.598 1.89-1.637.0-2.915-.691-3.834-2.096-.914-1.405-1.478-3.161-1.683-5.282v-.655-15.209H10.72v14.798c0 3.027-.424 5.194-1.292 6.488-.864 1.294-2.066 1.936-3.609 1.936-1.475.0-2.668-.45-3.562-1.342-.9-.897-1.54-2.125-1.928-3.683v-18.197h-2.806V0z" transform="matrix(1.1310535 0 0 1.1310535 476.7303 259.10521)"/><path d="m0 0c-1.758.0-3.202-.802-4.334-2.402-1.133-1.606-1.718-3.585-1.765-5.944h11.66v1.082c0 2.086-.489 3.823-1.469 5.201-.986 1.379-2.347 2.063-4.092 2.063m.397-23.76c-2.725.0-4.954 1.026-6.685 3.073-1.726 2.043-2.591 4.657-2.591 7.841v4.197c0 3.19.867 5.85 2.602 7.965 1.739 2.105 3.828 3.158 6.277 3.158 2.648.0 4.699-.939 6.164-2.823 1.468-1.887 2.201-4.422 2.201-7.603v-2.773H-6.099v-2.102c0-2.447.586-4.484 1.752-6.11 1.168-1.63 2.755-2.438 4.744-2.438 1.382.0 2.585.244 3.588.724 1.003.491 1.863 1.179 2.578 2.082l1.149-1.988c-.763-.968-1.752-1.75-2.959-2.33-1.204-.577-2.659-.873-4.356-.873" transform="matrix(1.1310535 0 0 1.1310535 522.82277 256.83868)"/><path d="m0 0c-1.763.0-3.21-.802-4.341-2.402-1.126-1.606-1.712-3.585-1.763-5.944H5.559v1.082c0 2.086-.488 3.823-1.474 5.201-.981 1.379-2.341 2.063-4.085 2.063m.394-23.76c-2.726.0-4.951 1.026-6.679 3.073-1.733 2.043-2.6 4.657-2.6 7.841v4.197c0 3.19.871 5.85 2.602 7.965 1.744 2.105 3.834 3.158 6.283 3.158 2.643.0 4.703-.939 6.164-2.823 1.463-1.887 2.197-4.422 2.197-7.603v-2.773H-6.104v-2.102c0-2.447.587-4.484 1.76-6.11 1.162-1.63 2.742-2.438 4.738-2.438 1.387.0 2.585.244 3.585.724 1.007.491 1.866 1.179 2.589 2.082l1.141-1.988c-.764-.968-1.75-1.75-2.959-2.33-1.204-.577-2.658-.873-4.356-.873" transform="matrix(1.1310535 0 0 1.1310535 558.0805 256.83868)"/><path d="m0 0 .23-4.178C.904-2.695 1.794-1.544 2.912-.743c1.108.805 2.413 1.213 3.914 1.213 2.258.0 3.988-.835 5.189-2.513 1.214-1.675 1.815-4.279 1.815-7.812v-15.42h-2.825v15.394c0 2.888-.423 4.905-1.264 6.075-.836 1.17-2.065 1.753-3.665 1.753-1.435.0-2.638-.466-3.603-1.414-.969-.939-1.691-2.19-2.172-3.767v-18.041h-2.805V0z" transform="matrix(1.1310535 0 0 1.1310535 575.91679 259.10521)"/><path d="m0 0c0-2.565.486-4.605 1.472-6.123.974-1.532 2.457-2.288 4.436-2.288 1.356.0 2.498.361 3.435 1.101.934.74 1.672 1.77 2.218 3.077v12.52c-.525 1.346-1.246 2.434-2.157 3.272-.91.824-2.062 1.238-3.448 1.238-1.975.0-3.468-.86-4.46-2.587-.999-1.73-1.496-3.986-1.496-6.756zm-2.833 3.454c0 3.582.723 6.459 2.177 8.627 1.442 2.157 3.448 3.239 6.004 3.239 1.419.0 2.664-.346 3.728-1.04 1.066-.681 1.947-1.678 2.654-2.946l.274 3.516h2.381v-25.298c0-3.239-.751-5.749-2.26-7.525-1.511-1.769-3.657-2.665-6.428-2.665-.996.0-2.067.156-3.212.459-1.147.303-2.162.701-3.052 1.2l.776 2.463c.759-.492 1.608-.873 2.548-1.141.932-.277 1.895-.41 2.894-.41 2.009.0 3.498.645 4.46 1.932.966 1.304 1.45 3.19 1.45 5.687v3.057c-.717-1.138-1.597-2.011-2.64-2.614-1.039-.606-2.253-.909-3.622-.909-2.539.0-4.53.994-5.968 2.982-1.441 1.984-2.164 4.631-2.164 7.932z" transform="matrix(1.1310535 0 0 1.1310535 600.8685 242.30884)"/><path d="m627.82321 230.5176h-3.20089v28.58738h3.20089zm0 36.72644h-3.20089v4.50385h3.20089z"/><path d="m0 0 .23-4.178C.906-2.695 1.792-1.544 2.908-.743c1.115.805 2.422 1.213 3.916 1.213 2.258.0 3.995-.835 5.199-2.513 1.211-1.675 1.807-4.279 1.807-7.812v-15.42h-2.825v15.394c0 2.888-.422 4.905-1.261 6.075-.843 1.17-2.063 1.753-3.668 1.753-1.434.0-2.635-.466-3.599-1.414C1.51-4.406.785-5.657.306-7.234v-18.041h-2.809V0z" transform="matrix(1.1310535 0 0 1.1310535 638.15379 259.10521)"/><path d="m0 0c-1.763.0-3.208-.802-4.334-2.402-1.129-1.606-1.718-3.585-1.768-5.944H5.56v1.082c0 2.086-.486 3.823-1.47 5.201-.981 1.379-2.343 2.063-4.09 2.063m.401-23.76c-2.733.0-4.958 1.026-6.681 3.073-1.73 2.043-2.595 4.657-2.595 7.841v4.197c0 3.19.865 5.85 2.6 7.965 1.739 2.105 3.831 3.158 6.275 3.158 2.646.0 4.706-.939 6.172-2.823 1.462-1.887 2.195-4.422 2.195-7.603v-2.773H-6.102v-2.102c0-2.447.59-4.484 1.757-6.11 1.166-1.63 2.748-2.438 4.746-2.438 1.382.0 2.579.244 3.578.724 1.012.491 1.869 1.179 2.591 2.082l1.147-1.988c-.769-.968-1.755-1.75-2.962-2.33-1.203-.577-2.658-.873-4.354-.873" transform="matrix(1.1310535 0 0 1.1310535 669.70883 256.83868)"/></g><path d="m181.9082 48.951172c-15.35819 3.414273-30.55119 8.168521-44.79492 15.33789.32574 12.577316 1.13879 24.628133 2.78711 36.869138-5.5316 3.54397-11.34506 6.58567-16.51172 10.73438-5.2496 4.03861-10.61179 7.90171-15.36523 12.625-9.496329-6.28112-19.545975-12.18414-29.900393-17.39453C66.96181 119.13483 56.525128 132.09977 48 146.60742c6.699845 10.51682 13.885852 21.08679 20.541016 29.33008v71.6543 9.10156 8.2832c.162871.00107.326917.00634.488281.02149l54.585933 5.26367c2.85931.27598 5.09977 2.57801 5.29883 5.44336l1.6836 24.0957 47.61523 3.39844 3.2793-22.24024c.42528-2.88343 2.8998-5.02148 5.8164-5.02148h57.58985c2.9151.0 5.38918 2.13805 5.81445 5.02148l3.2793 22.24024 47.61719-3.39844 1.68164-24.0957c.20057-2.86535 2.43953-5.16588 5.29882-5.44336l54.56446-5.26367c.16136-.01504.32348-.01999.48632-.02149v-7.10547l.02344-.00586V175.9375c7.68652-9.6765 14.96452-20.34983 20.54102-29.33008-8.52211-14.50765-18.96376-27.47259-30.125-39.48437-10.35139 5.21039-20.40601 11.11341-29.90235 17.39453-4.75192-4.72329-10.10418-8.58639-15.36132-12.625-5.16515-4.14871-10.98676-7.19041-16.50782-10.73438 1.64381-12.241005 2.45791-24.291822 2.78516-36.869138-14.24524-7.169369-29.437-11.923617-44.80273-15.33789-6.13484 10.310684-11.74472 21.477157-16.63086 32.392578-5.79402-.968181-11.61467-1.327114-17.44336-1.396484V79.9375c-.04075.0-.07858.009766-.11328.009766-.03616.0-.07516-.009766-.11133-.009766v.009766c-5.83926.069365-11.65565.428303-17.45117 1.396484-4.88314-10.915421-10.48893-22.081894-16.63282-32.392578zM138.72266 179.20312c18.16924.0 32.89648 14.7157 32.89648 32.87891.0 18.17528-14.72724 32.89844-32.89648 32.89844-18.1602.0-32.89063-14.72316-32.89063-32.89844.0-18.16321 14.73043-32.87891 32.89063-32.87891zm154.76367.0c18.15868.0 32.88672 14.7157 32.88672 32.87891.0 18.17528-14.72804 32.89844-32.88672 32.89844-18.17227.0-32.89844-14.72316-32.89844-32.89844.0-18.16321 14.72617-32.8789 32.89844-32.87891zm-77.38672 19.24024c5.8483.0 10.59961 4.31463 10.59961 9.62305v30.2832c0 5.31294-4.75131 9.62305-10.59961 9.62305s-10.58789-4.31011-10.58789-9.62305v-30.2832c0-5.30842 4.73959-9.62305 10.58789-9.62305z" stroke-width="1.50807" transform="scale(.93749999)"/><g stroke-width="1.41382"><path d="m295.00412 263.89328-1.58489 22.71014c-.19086 2.73715-2.36814 4.91584-5.10529 5.11236l-54.50971 3.88941c-.1329.01-.2658.0141-.39728.0141-2.70888.0-5.04592-1.98783-5.44603-4.70801l-3.12595-21.19877h-44.47726l-3.12595 21.19877c-.41991 2.85308-2.97043 4.90453-5.84331 4.69387l-54.50971-3.88941c-2.73715-.19652-4.91442-2.37521-5.10529-5.11236l-1.58489-22.71014-46.015498-4.43656c.02121 4.94553.08483 10.36328.08483 11.44202.0 48.59854 61.649488 71.95763 138.244428 72.22625h.0933.0947c76.59494-.26862 138.22322-23.62771 138.22322-72.22625.0-1.09853.0664-6.49366.0891-11.44202z"/><path d="m153.47185 200.6558c0 11.30205-9.16012 20.46217-20.47065 20.46217-11.30488.0-20.47066-9.16012-20.47066-20.46217s9.16578-20.47065 20.47066-20.47065c11.31053.0 20.47065 9.1686 20.47065 20.47065"/><path d="m251.72267 200.6558c0 11.30205 9.15729 20.46217 20.45934 20.46217 11.31337.0 20.47066-9.16012 20.47066-20.46217s-9.15729-20.47065-20.47066-20.47065c-11.30205.0-20.45934 9.1686-20.45934 20.47065"/></g></svg>
 
@@ -188,22 +188,47 @@
 
     <script src="$GODOT_URL"></script> <!-- Godot replaces with actual JS file, e.g., tmp_js_export.js -->
     <script>
-        var engine = new Engine($GODOT_CONFIG); // Official placeholder for config
+        // Consolidate engine configuration with custom telemetry hooks
+        var customConfig = Object.assign({}, $GODOT_CONFIG, {
+            onProgress: function(current, total) {
+                if (total > 0 && current >= 0) {
+                    var percent = Math.min(100, Math.floor((current / total) * 100));
+                    console.log("Telemetry - Assembly Transfer: " + percent + "%");
+                }
+            }
+        });
+
+        // Initialize engine instance with customConfig
+        var engine = new Engine(customConfig);
 
         // Start Godot engine (async for stability)
         engine.startGame().then(() => {
             console.log("Godot engine started successfully!");
 
-            // Hide the loading UI
+            // Hide loading UI, clean up ARIA live-region attributes, and focus canvas
             var loadingDiv = document.getElementById('loading');
             if (loadingDiv) {
                 loadingDiv.style.display = 'none';
                 loadingDiv.setAttribute('aria-hidden', 'true');
+                loadingDiv.setAttribute('aria-busy', 'false');
+                loadingDiv.removeAttribute('role');
+                loadingDiv.removeAttribute('aria-live');
             }
+
+            var canvas = document.getElementById('canvas');
+            if (canvas) {
+                canvas.focus();
+            }
+
             window.godotInitialized = true;
         }).catch(err => {
             console.error("Error starting Godot:", err);
-            // Fallback if engine fails to boot
+
+            var loadingDiv = document.getElementById('loading');
+            if (loadingDiv) {
+                loadingDiv.setAttribute('aria-busy', 'false');
+            }
+
             alert('Error loading SkyLockAssault. Please refresh.');
         });
 
@@ -229,14 +254,14 @@
         document.getElementById('mute-weapon').onchange = (e) => window.toggleMuteWeapon([e.target.checked]);
         document.getElementById('mute-menu').onchange = (e) => window.toggleMuteMenu([e.target.checked]);
         document.getElementById('mute-rotors').onchange = (e) => window.toggleMuteRotors([e.target.checked]);
-        document.getElementById('options-back-button').onclick = () => window.optionsBackPressed([]);  // Add this for options back
-        document.getElementById('controls-back-button').onclick = () => window.controlsBackPressed([]);  // Add this for controls back
-        document.getElementById('audio-back-button').onclick = () => window.audioBackPressed([]);  // Add this for audio back
-        document.getElementById('audio-reset-button').onclick = () => window.audioResetPressed([]);  // Add for reset
-        document.getElementById('advanced-back-button').onclick = () => window.advancedBackPressed([]);  // Add this for advanced back
-        document.getElementById('advanced-reset-button').onclick = () => window.advancedResetPressed([]);  // Add for reset
-        document.getElementById('gameplay-back-button').onclick = () => window.gameplayBackPressed([]);  // Add this for advanced back
-        document.getElementById('gameplay-reset-button').onclick = () => window.gameplayResetPressed([]);  // Add for reset
+        document.getElementById('options-back-button').onclick = () => window.optionsBackPressed([]);
+        document.getElementById('controls-back-button').onclick = () => window.controlsBackPressed([]);
+        document.getElementById('audio-back-button').onclick = () => window.audioBackPressed([]);
+        document.getElementById('audio-reset-button').onclick = () => window.audioResetPressed([]);
+        document.getElementById('advanced-back-button').onclick = () => window.advancedBackPressed([]);
+        document.getElementById('advanced-reset-button').onclick = () => window.advancedResetPressed([]);
+        document.getElementById('gameplay-back-button').onclick = () => window.gameplayBackPressed([]);
+        document.getElementById('gameplay-reset-button').onclick = () => window.gameplayResetPressed([]);
     </script>
 <div class="ime" contenteditable="true" style="background: none; opacity: 0; position: fixed; text-align: left; font-size: 1px; left: 0px; top: 0px; width: 100%; height: 40px; pointer-events: none; display: none;"></div>
 </body>