mirror of
https://github.com/BeamMP/Concept-BNG-UI.git
synced 2026-04-04 23:06:23 +00:00
125 lines
7.0 KiB
HTML
125 lines
7.0 KiB
HTML
<!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()">< 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 ></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>
|
|
|
|
</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>
|