diff options
| author | Leonardo Bishop <me@leonardobishop.com> | 2023-07-27 22:11:31 +0100 |
|---|---|---|
| committer | Leonardo Bishop <me@leonardobishop.com> | 2023-07-27 22:11:31 +0100 |
| commit | 71db52c5443a7bf82d9a23a770994a42b043be04 (patch) | |
| tree | f75f2605bb1bdc53842cd85c90d105dcc77e1c10 /code/ui/mainmenu | |
Initial commit
Diffstat (limited to 'code/ui/mainmenu')
| -rw-r--r-- | code/ui/mainmenu/LoadingScreen.razor | 41 | ||||
| -rw-r--r-- | code/ui/mainmenu/LoadingScreen.razor.scss | 101 | ||||
| -rw-r--r-- | code/ui/mainmenu/MainMenu.razor | 30 | ||||
| -rw-r--r-- | code/ui/mainmenu/MainMenu.razor.scss | 257 |
4 files changed, 429 insertions, 0 deletions
diff --git a/code/ui/mainmenu/LoadingScreen.razor b/code/ui/mainmenu/LoadingScreen.razor new file mode 100644 index 0000000..9e3e5ae --- /dev/null +++ b/code/ui/mainmenu/LoadingScreen.razor @@ -0,0 +1,41 @@ +@using System
+@using Sandbox;
+@using Sandbox.UI;
+@using Sandbox.Menu;
+@attribute [StyleSheet]
+@inherits RootPanel
+@namespace DmMenu
+@implements Sandbox.Menu.ILoadingScreenPanel
+
+<root class="loadingpanel">
+
+ <div class="title">LOADING</div>
+ <div class="subtitle">@Progress.Title</div>
+
+ @if (Progress.Fraction > 0)
+ {
+ <div class="progress">
+ <div class="bar" style="width: @(Progress.Percent)%;"></div>
+ <div class="text-left">@(Progress.Percent.ToString("0") )%</div>
+ <div class="text-right"><span>@(Progress.Mbps.ToString("0"))</span><span class="unit">Mbps</span></div>
+ </div>
+ }
+
+ <div class="controls">
+ <div class="button" onclick="@Game.Menu.CancelLoading">
+ Cancel
+ </div>
+ </div>
+
+</root>
+
+@code
+{
+ public LoadingProgress Progress;
+
+ public void OnLoadingProgress( LoadingProgress progress )
+ {
+ Progress = progress;
+ StateHasChanged();
+ }
+}
\ No newline at end of file diff --git a/code/ui/mainmenu/LoadingScreen.razor.scss b/code/ui/mainmenu/LoadingScreen.razor.scss new file mode 100644 index 0000000..894d259 --- /dev/null +++ b/code/ui/mainmenu/LoadingScreen.razor.scss @@ -0,0 +1,101 @@ +.loadingpanel
+{
+ background-image: url( "menu/boxes.webm" );
+ background-position: center;
+ background-size: cover;
+ background-tint: #555;
+ width: 100%;
+ height: 100%;
+ color: white;
+ padding: 100px;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ font-family: Poppins;
+ pointer-events: all;
+ color: #ccc;
+
+ > .title
+ {
+ font-size: 80px;
+ font-weight: bolder;
+ }
+
+ > .subtitle
+ {
+ font-size: 30px;
+ color: #aaa;
+ font-weight: 200;
+ }
+
+ > .controls
+ {
+ position: absolute;
+ bottom: 100px;
+ right: 200px;
+
+ .button
+ {
+ font-size: 20px;
+ padding: 10px 50px;
+ background-color: #666;
+ color: #111;
+ font-weight: bold;
+ cursor: pointer;
+
+ &:hover
+ {
+ background-color: #888;
+ }
+ }
+ }
+
+ > .progress
+ {
+ margin: 50px 0px;
+ background-color: #0003;
+ width: 500px;
+ border-radius: 5px;
+ overflow: hidden;
+
+ .bar
+ {
+ background-color: #fff1;
+ position: absolute;
+ height: 100%;
+ }
+
+ .text-left
+ {
+ flex-grow: 1;
+ flex-shrink: 0;
+ }
+
+ .text-right
+ {
+ flex-shrink: 0;
+ }
+
+ .text-left, .text-right
+ {
+ padding: 5px 20px;
+ white-space: nowrap;
+ font-weight: bold;
+ opacity: 0.2;
+ font-size: 20px;
+ align-items: flex-end;
+
+ .unit
+ {
+ font-size: 15px;
+ opacity: 0.5;
+ }
+ }
+ }
+}
+
+choosemappage.navigator-body
+{
+ margin: 0;
+ padding: 0;
+}
\ No newline at end of file diff --git a/code/ui/mainmenu/MainMenu.razor b/code/ui/mainmenu/MainMenu.razor new file mode 100644 index 0000000..ffca318 --- /dev/null +++ b/code/ui/mainmenu/MainMenu.razor @@ -0,0 +1,30 @@ +@using System
+@using Sandbox;
+@using Sandbox.MenuSystem;
+@using Sandbox.UI;
+@attribute [StyleSheet]
+@inherits Sandbox.UI.GameMenu.DefaultGameMenu
+
+<style>
+.wip-warning {
+ position: absolute;
+ z-index: 1000000;
+ background-color: #FF4136;
+ font-family: 'Roboto';
+ font-size: 40px;
+ width: 100%;
+ font-weight: 700;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+</style>
+<root class="gamemainmenu">
+
+
+ <div class="wip-warning">Work in progress! Expect bugs, missing features, and general weird-ness. Things *will* break.</div>
+
+ <div class="navigator-canvas" slot="navigator-canvas"></div>
+
+
+</root>
diff --git a/code/ui/mainmenu/MainMenu.razor.scss b/code/ui/mainmenu/MainMenu.razor.scss new file mode 100644 index 0000000..cbedff5 --- /dev/null +++ b/code/ui/mainmenu/MainMenu.razor.scss @@ -0,0 +1,257 @@ +
+.gamemainmenu
+{
+ background-image: url( "menu/boxes.webm" );
+ background-position: center;
+ background-size: cover;
+ opacity: 1;
+ flex-direction: column;
+ font-size: 25px;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ transition: all 0.3s ease-out;
+ color: white;
+
+ &:intro
+ {
+ opacity: 0;
+ transform: scaleX( 1.1 );
+ }
+
+ &.ingame
+ {
+ background-color: #151313ee;
+ background-image: none;
+ }
+
+}
+
+.button, .block
+{
+ padding: 4px 16px;
+
+ opacity: 0.8;
+
+ font-size: 28px;
+ font-family: Poppins;
+ font-weight: 700;
+ flex-shrink: 0;
+}
+
+.button
+{
+ background-color: #000a;
+ cursor: pointer;
+
+ &:hover
+ {
+ opacity: 1;
+ }
+
+ &:active
+ {
+ left: 2px;
+ top: 3px;
+ }
+}
+
+
+.gamemainmenu .navigator-canvas
+{
+ height: 100%;
+ flex-grow: 1;
+ flex-shrink: 0;
+ backdrop-filter: blur( 20px );
+ padding: 0px 100px;
+
+ .navigator-body
+ {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ padding: 100px 0px;
+ }
+}
+
+section
+{
+ flex-direction: column;
+ flex-grow: 1;
+ flex-shrink: 0;
+
+ &.nogrow
+ {
+ flex-grow: 0;
+ }
+
+ &.box
+ {
+ background-color: rgba( black, 0.5 );
+
+ }
+}
+
+.scroll
+{
+ overflow-y: scroll;
+ flex-shrink: 1;
+ flex-grow: 0;
+}
+
+h2
+{
+ font-family: poppins;
+ font-weight: 400;
+ opacity: 0.2;
+ margin-bottom: 16px;
+ flex-shrink: 0;
+}
+
+.member-list
+{
+ overflow-x: scroll;
+ padding: 20px;
+ gap: 8px;
+}
+
+
+
+.hidden
+{
+ display: none;
+}
+
+.inset
+{
+ overflow: hidden;
+}
+
+.layout
+{
+ flex-direction: column;
+
+ > *
+ {
+ flex-shrink: 0;
+ }
+
+ > .body
+ {
+ flex-grow: 1;
+ flex-shrink: 0;
+ flex-direction: column;
+
+ &.columned
+ {
+ flex-direction: row;
+ flex-grow: 1;
+ flex-shrink: 1;
+ justify-content: space-around;
+ align-items: center;
+
+ > .left
+ {
+ flex-grow: 0;
+ flex-shrink: 0;
+ overflow-y: scroll;
+ flex-direction: column;
+ }
+
+ > .right
+ {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-direction: column;
+ }
+ }
+ }
+}
+
+.navbar
+{
+ padding: 32px 0;
+ flex-shrink: 0;
+
+ .right, .left
+ {
+ flex-grow: 0;
+ flex-shrink: 0;
+ gap: 10px;
+ }
+
+ .left
+ {
+ flex-grow: 1;
+ }
+}
+
+$form-row-height: 48px;
+
+.form
+{
+ flex-direction: column;
+ flex-shrink: 0;
+ flex-grow: 0;
+ gap: 2px;
+ margin-bottom: 50px;
+
+ > .form-group
+ {
+ flex-direction: column;
+ flex-shrink: 0;
+ margin-bottom: 20px;
+
+ > .form-label
+ {
+ opacity: 0.5;
+ height: $form-row-height;
+ font-size: 20px;
+ white-space: nowrap;
+ }
+ }
+}
+
+.form .form-control
+{
+ flex-grow: 1;
+
+ SliderControl, > DropDown, > textentry, SliderControl textentry
+ {
+ flex-grow: 1;
+ font-size: 20px;
+ height: $form-row-height;
+ }
+
+ > textentry, SliderControl textentry
+ {
+ flex-grow: 1;
+ background-color: #ffffff05;
+ height: $form-row-height;
+ color: #aaa;
+ width: 600px;
+ border-radius: 0;
+ padding: 5px;
+
+ &:hover
+ {
+ background-color: #ffffff11;
+ }
+
+ &:focus
+ {
+ background-color: #ffffff22;
+ color: #fff;
+ }
+ }
+
+ SliderControl
+ {
+
+ }
+}
+
+choosemappage.navigator-body
+{
+ padding: 0;
+}
\ No newline at end of file |