From d01c67f7bfbb0231cd997cb0b6bb31ac90d79758 Mon Sep 17 00:00:00 2001
From: MutantAura <domw0401@gmail.com>
Date: Thu, 30 May 2024 14:03:43 +0100
Subject: [PATCH] Polish the aesthetic and include deadzone visualization.

---
 .../Input/ControllerInputViewModel.cs         | 10 +-
 .../UI/Views/Input/ControllerInputView.axaml  | 96 ++++++++++++-------
 2 files changed, 70 insertions(+), 36 deletions(-)

diff --git a/src/Ryujinx/UI/ViewModels/Input/ControllerInputViewModel.cs b/src/Ryujinx/UI/ViewModels/Input/ControllerInputViewModel.cs
index 9d529a852..fa5432d7e 100644
--- a/src/Ryujinx/UI/ViewModels/Input/ControllerInputViewModel.cs
+++ b/src/Ryujinx/UI/ViewModels/Input/ControllerInputViewModel.cs
@@ -3,6 +3,7 @@ using Ryujinx.Ava.Input;
 using Ryujinx.Ava.UI.Models.Input;
 using Ryujinx.Ava.UI.Views.Input;
 using Ryujinx.Input;
+using System;
 using System.Threading;
 using System.Threading.Tasks;
 
@@ -11,8 +12,8 @@ namespace Ryujinx.Ava.UI.ViewModels.Input
     public class ControllerInputViewModel : BaseModel
     {
         private const int StickUiPollMs = 50; // Milliseconds per poll.
-        private const float CanvasCenterOffset = 75f/2f;
-        private const int StickScaleFactor = 30;
+        private const float CanvasCenterOffset = 47.5f;
+        private const int StickScaleFactor = 45;
 
         private IGamepad _selectedGamepad;
         
@@ -81,6 +82,7 @@ namespace Ryujinx.Ava.UI.ViewModels.Input
                 OnPropertyChanged();
                 OnPropertyChanged(nameof(UiStickRightX));
                 OnPropertyChanged(nameof(UiStickRightY));
+                OnPropertyChanged(nameof(UiDeadzoneRight));
             }
         }
         
@@ -94,6 +96,7 @@ namespace Ryujinx.Ava.UI.ViewModels.Input
                 OnPropertyChanged();
                 OnPropertyChanged(nameof(UiStickLeftX));
                 OnPropertyChanged(nameof(UiStickLeftY));
+                OnPropertyChanged(nameof(UiDeadzoneLeft));
             }
         }
 
@@ -104,6 +107,9 @@ namespace Ryujinx.Ava.UI.ViewModels.Input
         public float UiStickRightX => UiStickRight.Item1 + CanvasCenterOffset;
         public float UiStickRightY => UiStickRight.Item2 + CanvasCenterOffset;
 
+        public float UiDeadzoneLeft => Config.DeadzoneLeft * 95;
+        public float UiDeadzoneRight => Config.DeadzoneRight * 95;
+
         public readonly InputViewModel ParentModel;
 
         public ControllerInputViewModel(InputViewModel model, GamepadInputConfig config)
diff --git a/src/Ryujinx/UI/Views/Input/ControllerInputView.axaml b/src/Ryujinx/UI/Views/Input/ControllerInputView.axaml
index 3889e7080..1d8a3add0 100644
--- a/src/Ryujinx/UI/Views/Input/ControllerInputView.axaml
+++ b/src/Ryujinx/UI/Views/Input/ControllerInputView.axaml
@@ -333,56 +333,84 @@
                             BorderBrush="{DynamicResource ThemeControlBorderColor}"
                             BorderThickness="1"
                             CornerRadius="5"
-                            Height="100"
-                            Width="100">
+                            Height="105"
+                            Width="105">
                             <Canvas
                                 Background="{DynamicResource ThemeBackgroundColor}"
                                 Height="100"
                                 Width="100">
-                                <Ellipse 
-                                    Fill="Gray" 
-                                    Stroke="Blue"
-                                    StrokeThickness="1"
-                                    Width="25" 
-                                    Height="25" 
-                                    Canvas.Bottom="{Binding UiStickLeftY}" 
-                                    Canvas.Left="{Binding UiStickLeftX}" />
+                                <Grid
+                                    Height="100"
+                                    Width="100"
+                                    Background="{DynamicResource ThemeBackgroundColor}">
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="*" />
+                                    </Grid.ColumnDefinitions>
+                                    <Ellipse
+                                        Grid.Column="1"
+                                        HorizontalAlignment="Center"
+                                        Stroke="Black"
+                                        StrokeThickness="1"
+                                        Width="100"
+                                        Height="100"
+                                        Canvas.Bottom="2"
+                                        Canvas.Left="2" />
+                                    <Ellipse
+                                        Grid.Column="1"
+                                        HorizontalAlignment="Center"
+                                        Fill="Gray"
+                                        Opacity="100"
+                                        Height="{Binding UiDeadzoneLeft}"
+                                        Width="{Binding UiDeadzoneLeft}"/>
+                                </Grid>
                                 <Ellipse
-                                    Stroke="Black"
-                                    StrokeThickness="1"
-                                    StrokeDashOffset="2"
-                                    Width="96"
-                                    Height="96"
-                                    Canvas.Bottom="2"
-                                    Canvas.Left="2" />
+                                        Fill="Red" 
+                                        Width="5" 
+                                        Height="5" 
+                                        Canvas.Bottom="{Binding UiStickLeftY}" 
+                                        Canvas.Left="{Binding UiStickLeftX}" />
                             </Canvas>
                         </Border>        
                             <Border
                             BorderBrush="{DynamicResource ThemeControlBorderColor}"
                             BorderThickness="1"
                             CornerRadius="5"
-                            Height="100"
-                            Width="100">
+                            Height="105"
+                            Width="105">
                             <Canvas
                                 Background="{DynamicResource ThemeBackgroundColor}"
                                 Height="100"
                                 Width="100">
-                                <Ellipse 
-                                    Fill="Gray" 
-                                    Stroke="Blue"
-                                    StrokeThickness="1"
-                                    Width="25" 
-                                    Height="25" 
-                                    Canvas.Bottom="{Binding UiStickRightY}" 
-                                    Canvas.Left="{Binding UiStickRightX}"/>
+                                <Grid
+                                    Height="100"
+                                    Width="100"
+                                    Background="{DynamicResource ThemeBackgroundColor}">
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="*" />
+                                    </Grid.ColumnDefinitions>
+                                    <Ellipse
+                                        Grid.Column="1"
+                                        HorizontalAlignment="Center"
+                                        Stroke="Black"
+                                        StrokeThickness="1"
+                                        Width="100"
+                                        Height="100"
+                                        Canvas.Bottom="2"
+                                        Canvas.Left="2" />
+                                    <Ellipse
+                                        Grid.Column="1"
+                                        HorizontalAlignment="Center"
+                                        Fill="Gray"
+                                        Opacity="100"
+                                        Height="{Binding UiDeadzoneRight}"
+                                        Width="{Binding UiDeadzoneRight}"/>
+                                </Grid>
                                 <Ellipse
-                                    Stroke="Black"
-                                    StrokeThickness="1"
-                                    StrokeDashOffset="2"
-                                    Width="96"
-                                    Height="96"
-                                    Canvas.Bottom="2"
-                                    Canvas.Left="2" />
+                                        Fill="Red" 
+                                        Width="5" 
+                                        Height="5" 
+                                        Canvas.Bottom="{Binding UiStickRightY}" 
+                                        Canvas.Left="{Binding UiStickRightX}" />
                             </Canvas>
                         </Border>        
                     </StackPanel>