New concept MainMenu is now loosely ready for testing.

This is a functional mainmenu which can be tested in-game.
2026-10-25 21:40:15 +00:00 · 2023-05-08 22:31:07 +01:00
1 parent cdb9ae9afe
commit 011769d0b6
@@ -0,0 +1,124 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>BeamNG Main UI</title>
+
+  <!-- *** Wondering where all the JS files have gone? Look in resources.js! *** -->
+
+  <script type="module" src="./resourceLoader.js"></script>
+
+  <!-- These need to be outside the resource loader for... reasons -->
+  <link type="text/css" rel="stylesheet" href="/ui/lib/ext/angular-material/angular-material-no-animate.min.css">
+  <link type="text/css" rel="stylesheet" href="/ui/entrypoints/main/main.css">
+
+</head>
+
+<body ng-controller="AppCtrl as app" ng-show="app.uiVisible" use-lang-font="1" class="container">
+
+  <md-content ng-cloak ng-if="app.uitest" layout="row" style="border:2px solid #aaa;position:absolute;width:{{app.uitestshow?'400px':'1.6em'}};height:200px;top:50%;right:0; transform:translateY(-50%); z-index:var(--zorder_index_mdcontent); padding:2px;font-family:monospace;border-radius:5px; overflow:hidden;">
+    <div style="width: 1.2em; padding: 2.5em 0;" ng-click="app.uitestshow = !app.uitestshow">
+      <span style="display: block; white-space: nowrap; transform-origin: 50% 50%; transform: rotate(90deg);">UI Debug Show/Hide</span>
+    </div>
+    <div layout="column" ng-show="app.uitestshow" style="flex-grow: 1;">
+      <div layout="row" style="background-color:rgb(102, 35, 35);">
+        <p flex=35>Current UI state:</p>
+        <md-select ng-model="app.currentStateName" ng-change="app.switchState(app.currentStateName)" flex>
+          <md-option ng-repeat="(idx, state) in app.states track by $index" ng-value="state.name">{{state.name}}</md-option>
+        </md-select>
+      </div>
+      <div layout="row" style="background-color:rgb(102, 35, 35);">
+        <md-button flex md-no-ink style="display:block; z-index:var(--zorder_index_prevnext)" class="md-button" ng-click="app.prevState()">&lt; previous</md-button>
+        <md-button flex md-no-ink style="display:block; z-index:var(--zorder_index_prevnext)" class="md-button" ng-click="app.nextState()">next &gt;</md-button>
+      </div>
+      <div layout="row" layout-align="start center" style="background-color:rgb(36, 35, 102);">
+        <md-checkbox ng-model="app.showApps">Show apps</md-checkbox>
+        <div>Gamestate: <span style="color:rgb(68, 207, 68)">{{app.gameState}}</span></div>
+        <md-button  ng-click="app.reloadUI()">reload</md-button>
+      </div>
+      <div layout="row" layout-align="start center" style="background-color:rgb(102, 102, 35);">
+        UI sound:
+        <input id="bng-test-sound" type="text" value="event:>UI>Generic>Select" style="font-size: 0.8em; width: 18em;"/>
+        <md-button bng-test-sound="bng-test-sound" style="min-width: unset;">test</md-button>
+      </div>
+      Gamepad Emulation: use the numpad keys 4862
+    </div>
+  </md-content>
+  <div ng-cloak id="reconnectScreen" ng-if="!$root.ingame && $root.connectionState != 'open'">
+    <div class="reconnectScreenText">
+      <center>
+        <div style="font-size:2vh;margin:3vh;">... reconnecting ...</div>
+      </center>
+    </div>
+  </div>
+
+  <!-- UI LOADING - broken UI fallback only -->
+  <div ng-if="!app.uiReady" style="z-index:var(--zorder_index_broken_ui_loading); position: absolute; top:0;left:0;right:0;bottom:0;background: black; color:white; font-family: Roboto Bold;" layout="column" layout-align="end center">
+    <h1 style="">
+      Loading UI...
+    </h1>
+    <div style="">
+      Mods can slow down this process or may have broken the game (<a href="http-external://go.beamng.com/uibroken" style="color:var(--bng-orange)">click here for help</a>)
+      <br>
+      &nbsp;
+    </div>
+  </div>
+
+  <!--  .............. waiting screen overlay ..............  -->
+  <div ng-cloak ng-if="app.isWaiting" style="width:100%; height:100%; background: rgba(0, 0, 0, 0.6); position: absolute; z-index: var(--zorder_index_waiting_screen);" layout="row" layout-align="center center">
+    <ng-md-icon class="material-icons" style="font-size: 20rem; color: white; text-shadow: -1px 1px 8px #DB7B00, 1px -1px 8px #DB7B00; z-index:var(--zorder_index_waiting_screen_icon);">
+      access_time
+    </ng-md-icon>
+  </div>
+
+  <!-- pause indicator (show only while paused), not to be confused with the pause button (shown only while not paused). see menu.html -->
+  <div ng-cloak ng-if="!app.mainmenu && app.showPauseIcon && app.uiVisible" class="dashBrdButtonEnd dashMenuHeight" style="var(--zorder_index_waiting_screen_icon);">
+    <div class="dashBrdButton dashBrdButtonPaused" ng-click="app.unpause()">
+      <span style="padding:0; margin:0" bng-translate="ui.inputActions.general.pause.binding" class="bng-binding dashBrdSvgIcon"></span>
+      <span class="dashBrdText">{{:: 'ui.inputActions.general.pause.title' | translate}}</span>
+    </div>
+  </div>
+
+  <game-indicators-layer></game-indicators-layer>
+
+  <mission-popups>
+    <mission-info></mission-info>
+  </mission-popups>
+
+  <!--<game-context-mini-info></game-context-mini-info>-->
+
+  <!-- fullscreen LOADING view, covers the real view -->
+  <div ng-cloak style="position:absolute;top:0;left:0;right:0;bottom:0;z-index: var(--zorder_index_fullscreen_loading)" ng-class="app.transitionAnimation" ui-view="loader" ng-show="$state.current.loaderVisible"></div>
+  <!-- fullscreen DEFAULT view -->
+  <div ng-cloak class="UI-Flex-Wrapper" style="position: absolute; top:0; left:0; right:0; bottom:0; z-index: var(--zorder_index_fullscreen_default); display: flex; flex-direction: column; align-items: stretch; justify-content: start;">
+    <!-- Menu Dashbar goes here -->
+    <dash-menu ng-controller="MenuController as menuCtrl" ng-if="('menu' | includedByState) && (($state.current.name !== 'menu.mainmenu') || !app.mainmenu)">Dash menu goes here</dash-menu>
+
+    <div class="fullscreencontent" style="flex: 1 1 auto; position: relative; pointer-events: none;" ng-class="app.transitionAnimation">
+      <bng-career-banner></bng-career-banner>
+      <!-- All the useful content goes here to cover up all the apps without window resize -->
+      <!-- in theory this line: '!app.mainmenu &&' should be added to the ng-show, but apparently that breaks displaying of some apps (old nav, radial1,2) -->
+
+      <app-container id="mainContainer" ng-class="{ 'uiapps-hidden': !app.showApps }" style="position:absolute !important;top:0;right:0;bottom:0;left:0; z-index: var(--zorder_apps_default);">
+        <canvas id="alignment-canvas"  width="1" height="1"></canvas>
+        <bng-app style="display:none"></bng-app>
+
+      </app-container>
+      <menu-content style="position:absolute !important;top:0;right:0;bottom:0;left:0; z-index: var(--zorder_index_menucontent);" ui-view></menu-content>
+    </div>
+
+    <div class="navbar" ng-if="app.ingame && 'menu' | includedByState">
+      <!-- menuNavBar contents -->
+      <menu-navbar></menu-navbar>
+    </div>
+  </div>
+
+  <fancy-background class="fancyBackgroundFill" ng-if="app.mainmenu"></fancy-background>
+  <!--  .............. popups overlay ..............  -->
+  <bng-intro-popup></bng-intro-popup>
+  <bng-dialog></bng-dialog>
+  <div class="ui-sheet" ng-if="app.uiSheetActive" bng-blur="true"></div>
+  <div id="vue-app"></div>
+
+</body>
+</html>
@@ -0,0 +1,170 @@
+import { onCondition, inPath } from "./resourceLoader.js"
+
+const paths = {
+  MAIN_ENTRYPOINT: '/ui/entrypoints/main',
+  EXTERNAL_LIBS: '/ui/lib/ext',
+  INTERNAL_LIBS: '/ui/lib/int',
+  VUE_DIST: '/ui/ui-vue/dist',
+  ANGULAR_MODULES: '/ui/modules',
+}
+
+const conditions = {
+  VUE_DEV: env => env.isVueDev,
+  NOT_VUE_DEV : env => !env.isVueDev
+}
+
+
+export default [
+
+  // for external clients: emulation over websocket
+  `${paths.MAIN_ENTRYPOINT}/comms.js`,
+
+
+  // Vue START
+  ...onCondition(conditions.NOT_VUE_DEV,
+    inPath(paths.VUE_DIST, [
+      { type: "module", src: '/index.js' },
+      '/index.css'
+    ])
+  ),
+  ...onCondition(conditions.VUE_DEV,
+    {src:'http://localhost:9000/src/main.js', type: 'module'}
+  ),
+  {src: `${paths.EXTERNAL_LIBS}/vue-i18n-next/vue-i18n.global.prod.js`, defer: true},
+  {src: `${paths.EXTERNAL_LIBS}/tiny-emitter/tinyemitter.js`, defer: true},
+  {src: `${paths.INTERNAL_LIBS}/vueService.js`}, //, defer: true},
+
+
+  {src: `${paths.MAIN_ENTRYPOINT}/angularModules.js`, defer: true},
+
+
+  // 3rd party includes
+  ...inPath(paths.EXTERNAL_LIBS, [
+    '/angular/angular.js',
+    '/angular/angular-animate.js',
+    '/angular/angular-aria.js',
+    '/angular/angular-sanitize.js',
+
+    '/angular-ui-router.min.js',
+    '/angular-material/angular-material.js',
+    '/smoothie.min.js',
+    '/angular-translate/angular-translate-beamng.js',
+    '/angular-translate/angular-translate-loader-static-files/angular-translate-loader-static-files.js',
+    '/angular-translate/angular-translate-handler-log/angular-translate-handler-log.js',
+
+    '/ocLazyLoad.min.js',
+    '/angular-toastr.tpls.min.js',
+    '/spine-canvas.js',
+    '/angular-material-paging.js',
+    '/jk-rating-stars.min.js',
+    '/chartist.min.js',
+    '/hu.js',
+
+    '/qrcode.min.js',
+
+    // LottieJS
+    '/lottie.min.js',
+
+    // 3rd party test
+    '/ng-FitText.js',
+
+    '/angular-toastr.min.css',
+    '/angular-material-paging.css',
+    '/jk-rating-stars.min.css',
+    '/chartist.min.css',
+
+  ]),
+
+
+  // BeamNG UI
+  `${paths.MAIN_ENTRYPOINT}/main.js`,
+
+  ...inPath(paths.INTERNAL_LIBS, [
+    '/beamng-core.js',
+    '/utilities.js',
+    '/beamng-data.js'
+  ]),
+  ...inPath(paths.EXTERNAL_LIBS, [
+    '/mdx.js',
+    '/crossfire-chrome.js',
+  ]),
+
+  // Controls
+  ...inPath(paths.INTERNAL_LIBS, [
+    '/beamng.controls.js',
+    '/beamng.controls.css',
+  ]),
+
+  // Angular Modules
+  ...inPath(paths.ANGULAR_MODULES, [
+    '/levelselect/levelselect.js',
+    '/photomode/photomode.js',
+    '/replay/replay.js',
+    '/environment/environment.js',
+    '/scenarioselect/scenarioselect.js',
+    '/scenariocontrol/scenariocontrol.js',
+    '/comic/comic.js',
+    '/vehicleselect/vehicleselect.js',
+    '/options/options.js',
+    '/startScreen/startScreen.js',
+    '/vehicleconfig/vehicleconfig.js',
+    '/loading/loading.js',
+    '/repository/repository.js',
+    '/automation/automation.js',
+    '/quickrace/quickrace.js',
+    '/lightrunner/lightrunner.js',
+    '/dragrace/dragrace.js',
+    '/mapview/mapview.js',
+    '/gameContext/gameContext.js',
+    '/bigmap/bigmap.js',
+
+    '/mainmenu/mainmenu.js',
+    '/menu/menu.js',
+    '/onlineFeatures/online.js',
+    '/career/career.js',
+    '/careerPause/careerPause.js',
+    '/introPopup/intro.js',
+    '/careerQuests/quests.js',
+    '/careerTasklist/tasklist.js',
+    '/careerVehicleSelect/careerVehicleSelect.js',
+    '/threeElementSelect/threeElementSelect.js',
+    '/careerLogBook/logBook.js',
+
+    '/appselect/appselect.js',
+    '/appedit/appedit.js',
+    '/modmanager/modmanager.js',
+    '/play/play.js',
+    '/garage/garage.js',
+    '/refueling/refueling.js',
+    '/partInventory/partInventory.js',
+    '/apps/app-service.js',
+    '/apps/app-container.js',
+    '/apps/app.js',
+
+    '/campaignselect/campaignselect.js',
+
+    '/busRoute/busRoute.js',
+    '/iconView/icons.js',
+
+    '/fadeScreen/fadeScreen.js',
+    '/atom/title/title.js',
+    '/atom/card/card.js',
+    '/atom/tabs/tabs.js',
+
+    '/mainmenu/mainmenu.css',
+    '/menu/menu.css',
+    '/introPopup/intro.css',
+  ]),
+
+  ...inPath(paths.INTERNAL_LIBS, [
+    '/mission-popups/mission-popups.js',
+    '/colorpicker/color.js',
+    '/ui-components/bng-components.js',
+    '/ui-components/bng-components.css'
+  ]),
+
+  `${paths.EXTERNAL_LIBS}/keys.css`
+
+
+]
+