From 425234d56aff86cc1900ab119a6998fd536f2a3e Mon Sep 17 00:00:00 2001
From: David Sanz <dsanz@plainconcepts.com>
Date: Mon, 17 Feb 2020 17:16:49 +0100
Subject: [PATCH 1/6] In the home page disable the Play buttons until the user
 has not written a name.

---
 Source/Services/RPSLS.Web/Pages/Index.razor    | 18 ++++++++++--------
 Source/Services/RPSLS.Web/wwwroot/css/main.css | 17 +++++++++++++++++
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/Source/Services/RPSLS.Web/Pages/Index.razor b/Source/Services/RPSLS.Web/Pages/Index.razor
index 9074f28..b4ba55d 100644
--- a/Source/Services/RPSLS.Web/Pages/Index.razor
+++ b/Source/Services/RPSLS.Web/Pages/Index.razor
@@ -19,7 +19,7 @@
 
                 @if (string.IsNullOrWhiteSpace(Username))
                 {
-                    <input @bind="@CustomUsername" class="user" type="text" placeholder="Type Username" required />
+                    <input @bind-value="@CustomUsername" @bind-value:event="oninput" class="user" type="text" placeholder="Type Username" required />
 
                     <div class="sign_twitter">
                         @if (!string.IsNullOrWhiteSpace(TwitterOptions?.Value?.ConsumerKey) && !string.IsNullOrWhiteSpace(TwitterOptions?.Value?.ConsumerSecret))
@@ -36,12 +36,12 @@
                 }
 
                 <div class="custom-button-container">
-                    <div class="custom-button">
+                    <div class="custom-button" disabled="@UserNameIsEmpty">
                         <button type="button" @onclick="PlayAgainstBots" class="custom-button-link">Play with a bot</button>
                     </div>
                     @if (MultiplayerSettings.Value.Enabled)
                     {
-                        <div class="custom-button">
+                        <div class="custom-button" disabled="@UserNameIsEmpty">
                             <button type="button" @onclick="PlayAgainstHumans" class="custom-button-link">Play with a friend</button>
                         </div>
                     }
@@ -59,13 +59,15 @@
 
 @code
 {
-    private string CustomUsername { get; set; }
+        private string CustomUsername { get; set; }
 
-    [Parameter]
-    public string RedirectUrl { get; set; }
+        [Parameter]
+        public string RedirectUrl { get; set; }
 
-    public string Username { get; set; }
-    public bool IsTwitterUser { get; set; }
+        public string Username { get; set; }
+        public bool IsTwitterUser { get; set; }
+
+        public bool UserNameIsEmpty => String.IsNullOrEmpty(Username) && String.IsNullOrEmpty(CustomUsername);
 
     protected override async Task OnInitializedAsync()
     {
diff --git a/Source/Services/RPSLS.Web/wwwroot/css/main.css b/Source/Services/RPSLS.Web/wwwroot/css/main.css
index 87cd314..2dcba9b 100644
--- a/Source/Services/RPSLS.Web/wwwroot/css/main.css
+++ b/Source/Services/RPSLS.Web/wwwroot/css/main.css
@@ -102,6 +102,10 @@ a.secondary-link {
     color: #fff;
 }
 
+.custom-button[disabled]:hover {
+    transition: none;
+}
+
 .custom-button-link {
     font-size: 1.25rem;
     cursor: pointer;
@@ -130,6 +134,17 @@ a.secondary-link {
     transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
 }
 
+.custom-button[disabled] .custom-button-link {
+    background-color: #d9007d;
+    text-shadow: none;
+    cursor: auto;
+    opacity: 0.5;
+}
+
+.custom-button[disabled]:active .custom-button-link {
+    transform: none;
+}
+
 .custom-button:hover a,
 .custom-button:hover button {
     background-color: #ec6a9c;
@@ -144,6 +159,8 @@ a.secondary-link {
     transform: translate(0, 4px);
 }
 
+
+
 /* Cookies Banner */
 .cookie-banner {
     background: #372369;

From d6daea1691ddbe70442044b0c1d8fbbb66602b14 Mon Sep 17 00:00:00 2001
From: David Sanz <dsanz@plainconcepts.com>
Date: Tue, 18 Feb 2020 12:08:58 +0100
Subject: [PATCH 2/6] Fix issue with the time the hand was shaking in the
 battle. The hand was not shaking the time set (2 seconds).

---
 Source/Services/RPSLS.Web/Pages/MultiplayerBattle.razor | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Source/Services/RPSLS.Web/Pages/MultiplayerBattle.razor b/Source/Services/RPSLS.Web/Pages/MultiplayerBattle.razor
index cca1369..bb897ad 100644
--- a/Source/Services/RPSLS.Web/Pages/MultiplayerBattle.razor
+++ b/Source/Services/RPSLS.Web/Pages/MultiplayerBattle.razor
@@ -186,6 +186,7 @@ else
         battleToBeStarted = true;
         shakeHand = true;
 
+        StateHasChanged();
         await Task.Delay(2000);
         shakeHand = false;
         userHandToShow = SelectedPick.Image;

From 753890db16660300c28f37b4e4cd37f2be2d87a9 Mon Sep 17 00:00:00 2001
From: David Sanz <dsanz@plainconcepts.com>
Date: Tue, 18 Feb 2020 12:35:41 +0100
Subject: [PATCH 3/6] Fix navigation issues.

---
 Source/Services/RPSLS.Web/Pages/MultiplayerResult.razor | 2 +-
 Source/Services/RPSLS.Web/wwwroot/css/not-found.css     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Source/Services/RPSLS.Web/Pages/MultiplayerResult.razor b/Source/Services/RPSLS.Web/Pages/MultiplayerResult.razor
index 3409766..54cad5e 100644
--- a/Source/Services/RPSLS.Web/Pages/MultiplayerResult.razor
+++ b/Source/Services/RPSLS.Web/Pages/MultiplayerResult.razor
@@ -10,7 +10,7 @@
         <a class="custom-button-link" href="/rematch/multiplayer">play again</a>
     </PlayAgainButton>
     <ChooseOpponent>
-        <a class="custom-button-link challenger" href="/login/twitter">choose opponent</a>
+        <a class="custom-button-link challenger" href="/">choose opponent</a>
     </ChooseOpponent>
 </RPSLS.Web.Components.Results>
 
diff --git a/Source/Services/RPSLS.Web/wwwroot/css/not-found.css b/Source/Services/RPSLS.Web/wwwroot/css/not-found.css
index 8dea63b..f333456 100644
--- a/Source/Services/RPSLS.Web/wwwroot/css/not-found.css
+++ b/Source/Services/RPSLS.Web/wwwroot/css/not-found.css
@@ -149,7 +149,7 @@
     }
 
     .not_found-err {
-        line-height: 18rem;
+        line-height: 20rem;
         font-size: 20rem;
     }
 

From e42b3702cc11a0e8d42f418187431578383189b6 Mon Sep 17 00:00:00 2001
From: David Sanz <dsanz@plainconcepts.com>
Date: Tue, 18 Feb 2020 16:47:19 +0100
Subject: [PATCH 4/6] Add leaderboard link to the results page. Adjust styles
 to make the control fit to the home page and the results page.

---
 .../Components/LeaderboardLink.razor          |   6 +-
 .../Services/RPSLS.Web/Pages/BotResult.razor  |   2 +-
 Source/Services/RPSLS.Web/Pages/Index.razor   |   8 +-
 .../RPSLS.Web/Pages/MultiplayerResult.razor   |   4 +-
 .../RPSLS.Web/Shared/ConsoleLayout.razor      | 100 ++++++++++--------
 .../Services/RPSLS.Web/wwwroot/css/index.css  |  28 +++--
 .../Services/RPSLS.Web/wwwroot/css/main.css   |  18 ++++
 7 files changed, 102 insertions(+), 64 deletions(-)

diff --git a/Source/Services/RPSLS.Web/Components/LeaderboardLink.razor b/Source/Services/RPSLS.Web/Components/LeaderboardLink.razor
index 7b99a79..e3c82e1 100644
--- a/Source/Services/RPSLS.Web/Components/LeaderboardLink.razor
+++ b/Source/Services/RPSLS.Web/Components/LeaderboardLink.razor
@@ -2,8 +2,10 @@
 {
     <div class="leaderboard-link">
         <img src="/assets/images/png/astronaut.png">
-        <span>don't miss</span>
-        <a href="/leaderboard">THE LEADERBOARD</a>
+        <div class="leaderboard-link-info">
+            <span>don't miss</span>
+            <a href="/leaderboard">THE LEADERBOARD</a>
+        </div>
     </div>
 }
 
diff --git a/Source/Services/RPSLS.Web/Pages/BotResult.razor b/Source/Services/RPSLS.Web/Pages/BotResult.razor
index 1129423..8380035 100644
--- a/Source/Services/RPSLS.Web/Pages/BotResult.razor
+++ b/Source/Services/RPSLS.Web/Pages/BotResult.razor
@@ -24,7 +24,7 @@
     {
         if (firstRender)
         {
-            Layout.Initialize(title: "results", withHelp: true, hasToShowGithub: true);
+            Layout.Initialize(title: "results", withHelp: true, hasToShowGithub: true, hasToShowLeaderboardLink: true);
         }
     }
 
diff --git a/Source/Services/RPSLS.Web/Pages/Index.razor b/Source/Services/RPSLS.Web/Pages/Index.razor
index b4ba55d..9d564e9 100644
--- a/Source/Services/RPSLS.Web/Pages/Index.razor
+++ b/Source/Services/RPSLS.Web/Pages/Index.razor
@@ -9,7 +9,13 @@
 <div class="index-content">
     <div class="login">
         <div class="login-section">
-            <RPSLS.Web.Components.LeaderboardLink MultiplayerSettings="MultiplayerSettings.Value" />
+            <div class="header-layout">
+                <div class="header-layout-item"></div>
+                <div class="header-layout-item header-layout-item--large"></div>
+                <div class="header-layout-item">
+                    <RPSLS.Web.Components.LeaderboardLink MultiplayerSettings="MultiplayerSettings.Value" />
+                </div>
+            </div>
             <form>
                 <img src="/assets/images/png/logo.png">
                 <div class="subtitle-container">
diff --git a/Source/Services/RPSLS.Web/Pages/MultiplayerResult.razor b/Source/Services/RPSLS.Web/Pages/MultiplayerResult.razor
index 54cad5e..07e70c9 100644
--- a/Source/Services/RPSLS.Web/Pages/MultiplayerResult.razor
+++ b/Source/Services/RPSLS.Web/Pages/MultiplayerResult.razor
@@ -25,12 +25,12 @@
     {
         if (firstRender)
         {
-            Layout.Initialize(title: "results", withHelp: true, hasToShowGithub: true);
+            Layout.Initialize(title: "results", withHelp: true, hasToShowGithub: true, hasToShowLeaderboardLink: true);
         }
     }
 
     protected override void OnInitialized()
-    {
+    {        
         if (Game.GameResult == null)
         {
             NavigationManager.NavigateTo("/lobby");
diff --git a/Source/Services/RPSLS.Web/Shared/ConsoleLayout.razor b/Source/Services/RPSLS.Web/Shared/ConsoleLayout.razor
index 11a5318..5886665 100644
--- a/Source/Services/RPSLS.Web/Shared/ConsoleLayout.razor
+++ b/Source/Services/RPSLS.Web/Shared/ConsoleLayout.razor
@@ -1,43 +1,59 @@
-@layout MainLayout
-@inherits LayoutComponentBase
-@inject SvgHelper svgHelper
-
-<div class="game-content">
-    <MainTitle Title="@Title" ShowHelp="@ShowHelp"></MainTitle>
-    <div class="console">
-        <div class="console-content">
-            <div class="console-controls">
-                @svgHelper.GetImage($"/assets/images/svg/controls_left.svg")
-            </div>
-            <CascadingValue Value="this">
-                @Body
-            </CascadingValue>
-            <div class="console-controls">
-                @svgHelper.GetImage($"/assets/images/svg/controls_right.svg")
-            </div>
-        </div>
-    </div>
-</div>
-
-@if (ShowGithub)
-{
-    <div class="github">
-        <a class="github-text" target="_blank" href="https://github.com/microsoft/RockPaperScissorsLizardSpock">Get the code from GitHub</a>
-    </div>
-}
-
-
-@code
-{
-    string Title { get; set; }
-    bool ShowHelp { get; set; }
-    bool ShowGithub = false;
-
-    public void Initialize(string title, bool withHelp, bool hasToShowGithub = false)
-    {
-        this.Title = title;
-        this.ShowHelp = withHelp;
-        this.ShowGithub = hasToShowGithub;
-        this.StateHasChanged();
-    }
+@layout MainLayout
+@inherits LayoutComponentBase
+@inject SvgHelper svgHelper
+@inject IOptions<MultiplayerSettings> MultiplayerSettings
+
+    <div class="game-content">
+        <div class="header-layout">
+            <div class="header-layout-item"></div>
+            <div class="header-layout-item header-layout-item--large">
+                <MainTitle Title="@Title" ShowHelp="@ShowHelp"></MainTitle>
+            </div>            
+            <div class="header-layout-item">
+                @if (ShowLeaderboardLink)
+                {
+                    <RPSLS.Web.Components.LeaderboardLink MultiplayerSettings="MultiplayerSettings.Value" />
+                }
+            </div>
+        </div>
+        <div class="console">
+            <div class="console-content">
+                <div class="console-controls">
+                    @svgHelper.GetImage($"/assets/images/svg/controls_left.svg")
+                </div>
+                <CascadingValue Value="this">
+                    @Body
+                </CascadingValue>
+                <div class="console-controls">
+                    @svgHelper.GetImage($"/assets/images/svg/controls_right.svg")
+                </div>
+            </div>
+        </div>
+    </div>
+
+@if (ShowGithub)
+{
+    <div class="github">
+        <a class="github-text" target="_blank" href="https://github.com/microsoft/RockPaperScissorsLizardSpock">Get the code from GitHub</a>
+    </div>
+}
+
+
+@code
+{
+    string Title { get; set; }
+    bool ShowHelp { get; set; }
+    bool ShowGithub = false;
+    bool ShowLeaderboardLink = false;
+
+
+
+    public void Initialize(string title, bool withHelp, bool hasToShowGithub = false, bool hasToShowLeaderboardLink = false)
+    {
+        this.Title = title;
+        this.ShowHelp = withHelp;
+        this.ShowGithub = hasToShowGithub;
+        this.ShowLeaderboardLink = hasToShowLeaderboardLink;
+        this.StateHasChanged();
+    }
 }
\ No newline at end of file
diff --git a/Source/Services/RPSLS.Web/wwwroot/css/index.css b/Source/Services/RPSLS.Web/wwwroot/css/index.css
index 9bf5833..c1298d8 100644
--- a/Source/Services/RPSLS.Web/wwwroot/css/index.css
+++ b/Source/Services/RPSLS.Web/wwwroot/css/index.css
@@ -11,19 +11,21 @@
 
 /* Leaderboard link */
 .leaderboard-link {
-    height: 30px;
-    margin-top: 20px;
-    margin-left: 50%;
+    align-items: center;
+    display: flex;
     color: white;
     font-family: Voyager;
-    font-size: 1rem;
+    font-size: 0.8rem;
     line-height: 20px;
     text-align: left;
-    display: grid;
-    grid-template-columns: 60px 200px;
-    grid-template-rows: 40px 40px;
     justify-items: start;
-    align-items: end;
+    padding-top: 1rem;
+}
+
+.leaderboard-link-info {
+    display: flex;
+    flex-direction: column;
+    margin-left: 1rem;
 }
 
     .leaderboard-link img {
@@ -33,9 +35,8 @@
 
     .leaderboard-link a {
         color: #FFAA44;
-        align-self: start;
         text-decoration: none;
-        font-size: 1.2rem;
+        font-size: 1rem;
     }
 
 /* Login Layout */
@@ -52,6 +53,7 @@
     text-align: center;
     align-self: center;
     align-items: center;
+    padding-top: 1rem;
     width: 100%;
     display: flex;
     flex-direction: column;
@@ -61,12 +63,6 @@
         margin: 1rem;
     }
 
-    .login-section img {
-        height: 100%;
-        grid-row: 1 / span 2;
-        /* position: relative; */
-    }
-
     .login-section .subtitle-container {
         text-align: center;
         margin: 1rem 0 1.5rem 0;
diff --git a/Source/Services/RPSLS.Web/wwwroot/css/main.css b/Source/Services/RPSLS.Web/wwwroot/css/main.css
index 2dcba9b..93d1e87 100644
--- a/Source/Services/RPSLS.Web/wwwroot/css/main.css
+++ b/Source/Services/RPSLS.Web/wwwroot/css/main.css
@@ -227,3 +227,21 @@ a.secondary-link {
         padding: 10px 35px;
     }
 }
+
+/* Header Layout */
+.header-layout {
+    display: -ms-flexbox;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    display: flex;
+    width:100%;
+}
+
+.header-layout-item {
+    flex-basis: 0;
+    flex-grow: 1;
+}
+
+.header-layout-item--large {
+    flex-grow: 2;
+}
\ No newline at end of file

From f32bd58f1c4f5da9967bd7f92760eb0a33c7384d Mon Sep 17 00:00:00 2001
From: David Sanz <dsanz@plainconcepts.com>
Date: Tue, 18 Feb 2020 18:03:00 +0100
Subject: [PATCH 5/6] Move the component ConsoleLayout to the correct folder.

---
 .../Services/RPSLS.Web/{Shared => Components}/MainTitle.razor   | 0
 Source/Services/RPSLS.Web/Shared/ConsoleLayout.razor            | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename Source/Services/RPSLS.Web/{Shared => Components}/MainTitle.razor (100%)

diff --git a/Source/Services/RPSLS.Web/Shared/MainTitle.razor b/Source/Services/RPSLS.Web/Components/MainTitle.razor
similarity index 100%
rename from Source/Services/RPSLS.Web/Shared/MainTitle.razor
rename to Source/Services/RPSLS.Web/Components/MainTitle.razor
diff --git a/Source/Services/RPSLS.Web/Shared/ConsoleLayout.razor b/Source/Services/RPSLS.Web/Shared/ConsoleLayout.razor
index 5886665..2b7f445 100644
--- a/Source/Services/RPSLS.Web/Shared/ConsoleLayout.razor
+++ b/Source/Services/RPSLS.Web/Shared/ConsoleLayout.razor
@@ -7,7 +7,7 @@
         <div class="header-layout">
             <div class="header-layout-item"></div>
             <div class="header-layout-item header-layout-item--large">
-                <MainTitle Title="@Title" ShowHelp="@ShowHelp"></MainTitle>
+                <RPSLS.Web.Components.MainTitle Title="@Title" ShowHelp="@ShowHelp"></RPSLS.Web.Components.MainTitle>
             </div>            
             <div class="header-layout-item">
                 @if (ShowLeaderboardLink)

From a7c849430714939e128ec3e25222800cfb9b19ea Mon Sep 17 00:00:00 2001
From: David Sanz <dsanz@plainconcepts.com>
Date: Wed, 19 Feb 2020 15:01:03 +0100
Subject: [PATCH 6/6] Feedback for the styles.

---
 Source/Services/RPSLS.Web/Pages/Index.razor    | 12 ++++++------
 .../Services/RPSLS.Web/wwwroot/css/index.css   | 18 +++++++++++-------
 Source/Services/RPSLS.Web/wwwroot/css/main.css |  8 ++++----
 3 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/Source/Services/RPSLS.Web/Pages/Index.razor b/Source/Services/RPSLS.Web/Pages/Index.razor
index 9d564e9..e0b78ad 100644
--- a/Source/Services/RPSLS.Web/Pages/Index.razor
+++ b/Source/Services/RPSLS.Web/Pages/Index.razor
@@ -17,7 +17,7 @@
                 </div>
             </div>
             <form>
-                <img src="/assets/images/png/logo.png">
+                <img class="logo" src="/assets/images/png/logo.png">
                 <div class="subtitle-container">
                     <h2 class="subtitle">The geek version of rock-paper-scissors.</h2>
                     <h2 class="subtitle">Play with a friend or try to defeat our bot!</h2>
@@ -41,14 +41,14 @@
                     </div>
                 }
 
-                <div class="custom-button-container">
-                    <div class="custom-button" disabled="@UserNameIsEmpty">
-                        <button type="button" @onclick="PlayAgainstBots" class="custom-button-link">Play with a bot</button>
+                <div class="custom-button-container" >
+                    <div class="custom-button @(UserNameIsEmpty? "custom-button-disabled" : "")">
+                        <button type="button" @onclick="PlayAgainstBots" class="custom-button-link" disabled="@UserNameIsEmpty">Play with a bot</button>
                     </div>
                     @if (MultiplayerSettings.Value.Enabled)
                     {
-                        <div class="custom-button" disabled="@UserNameIsEmpty">
-                            <button type="button" @onclick="PlayAgainstHumans" class="custom-button-link">Play with a friend</button>
+                        <div class="custom-button @(UserNameIsEmpty? "custom-button-disabled" : "")">
+                            <button type="button" @onclick="PlayAgainstHumans" class="custom-button-link" disabled="@UserNameIsEmpty">Play with a friend</button>
                         </div>
                     }
                 </div>
diff --git a/Source/Services/RPSLS.Web/wwwroot/css/index.css b/Source/Services/RPSLS.Web/wwwroot/css/index.css
index c1298d8..785ad2c 100644
--- a/Source/Services/RPSLS.Web/wwwroot/css/index.css
+++ b/Source/Services/RPSLS.Web/wwwroot/css/index.css
@@ -61,7 +61,7 @@
 
     .login-section .custom-button {
         margin: 1rem;
-    }
+    }    
 
     .login-section .subtitle-container {
         text-align: center;
@@ -111,14 +111,18 @@
         height: 3.5rem;
     }
 
-    /* Twitter */
-    .login-section .sign_twitter {
-        margin-top: 1rem;
-        color: #ffffff;
-        font-size: 1.1rem;
-        margin-bottom: 2.5rem;
+    .login-section .logo {
+        width: 72%;
     }
 
+/* Twitter */
+.login-section .sign_twitter {
+    margin-top: 1rem;
+    color: #ffffff;
+    font-size: 1.1rem;
+    margin-bottom: 2.5rem;
+}
+
         .login-section .sign_twitter a {
             text-decoration: underline;
             color: #ffffff;
diff --git a/Source/Services/RPSLS.Web/wwwroot/css/main.css b/Source/Services/RPSLS.Web/wwwroot/css/main.css
index 93d1e87..11d9eb7 100644
--- a/Source/Services/RPSLS.Web/wwwroot/css/main.css
+++ b/Source/Services/RPSLS.Web/wwwroot/css/main.css
@@ -102,7 +102,7 @@ a.secondary-link {
     color: #fff;
 }
 
-.custom-button[disabled]:hover {
+.custom-button-disabled:hover {
     transition: none;
 }
 
@@ -134,19 +134,19 @@ a.secondary-link {
     transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
 }
 
-.custom-button[disabled] .custom-button-link {
+.custom-button-disabled .custom-button-link {
     background-color: #d9007d;
     text-shadow: none;
     cursor: auto;
     opacity: 0.5;
 }
 
-.custom-button[disabled]:active .custom-button-link {
+.custom-button-disabled:active .custom-button-link {
     transform: none;
 }
 
 .custom-button:hover a,
-.custom-button:hover button {
+.custom-button:hover button:not([disabled]) {
     background-color: #ec6a9c;
     text-shadow: 0 -1px 1px rgba(175, 49, 95, 0.9), 0 0 5px rgba(255, 255, 255, 0.8);
 }