Ui/SettingsPanel.razor

The settings panel UI. It allows users to adjust the UI scale, audio volume, screen shake, and flashing reduction, and provides a way to return to the main menu.

@namespace CitySim
@using CitySim.DesignSystem
@using CitySim.Punchboard
@using CitySim.Match
@inherits MatchPanel

<root class="overlay settings-stage @(City.State == GameState.Menu ? "from-menu" : "from-game")">
 <div class="settings-layout" style=@($"max-width: {PlayerPreferences.SurfacePixels(780)};")><PlotterSurface Title=@(GameText.Get("ui.hud.settings")) Kind=@(PbPanelKind.Raised)><ChildContent>
  <div class="settings-content">
   <div class="settings-title">@(GameText.Get("ui.hud.settings"))</div>
   <div class="settings-volume"><div>@(GameText.Get("ui.settings_panel.ui_scale", PlayerPreferences.Current.UiScale))</div><div class="settings-buttons">
    <PlotterButton Text=@(GameText.Get("ui.settings_panel.smaller")) Kind=@(PbButtonKind.Secondary) Disabled=@(PlayerPreferences.Current.UiScale<=60) Clicked=@(() => { Scale(-10); }) />
    <PlotterButton Text=@(GameText.Get("ui.settings_panel.larger")) Kind=@(PbButtonKind.Secondary) Disabled=@(PlayerPreferences.Current.UiScale>=120) Clicked=@(() => { Scale(10); }) />
   </div></div>
   <div class="settings-volume"><div>@(GameText.Get("ui.settings_panel.effects_volume", PlayerPreferences.EffectsLabel))</div><div class="settings-buttons">
    <PlotterButton Text=@(GameText.Get("ui.settings_panel.quieter")) Kind=@(PbButtonKind.Secondary) Disabled=@(PlayerPreferences.Current.EffectsLevel==0) Clicked=@(() => { Level(-1); }) />
    <PlotterButton Text=@(GameText.Get("ui.settings_panel.louder")) Kind=@(PbButtonKind.Secondary) Disabled=@(PlayerPreferences.Current.EffectsLevel==4) Clicked=@(() => { Level(1); }) />
   </div></div>
   <PbToggle Label=@(GameText.Get("ui.settings_panel.reduce_screen_shake")) [email protected] ValueChanged=@((Action<bool>)(value => { City.SetPreferences(PlayerPreferences.Current with {ReduceShake=value}); })) />
   <PbToggle Label=@(GameText.Get("ui.settings_panel.reduce_flashing")) [email protected] ValueChanged=@((Action<bool>)(value => { City.SetPreferences(PlayerPreferences.Current with {ReduceFlashing=value}); })) />
   <PlotterButton CssClass="primary" Text=@(GameText.Get("ui.game_setup_panel.back")) Kind=@(PbButtonKind.Ghost) Clicked=@(() => { City.Screens.Pop(); }) />
  </div>
 </ChildContent></PlotterSurface></div>
</root>
@code {
 void Scale(int delta) => City.SetPreferences(PlayerPreferences.Current with {UiScale=PlayerPreferences.Current.UiScale+delta});
 void Level(int delta) => City.SetPreferences(PlayerPreferences.Current with {EffectsLevel=PlayerPreferences.Current.EffectsLevel+delta});
 protected override void Subscribe() { if (City!=null) City.UiChanged+=Refresh; }
 protected override void Unsubscribe() { if (City!=null) City.UiChanged-=Refresh; }
}