Merge pull request #6 from OriolBonjoch/feature/disable-buttons

Merge from /feature/disable-buttons to master
2020-02-19 15:04:14 +01:00 · 2020-02-19 15:04:14 +01:00 · b166d19b55
--- 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>
 }

--- a/Source/Services/RPSLS.Web/Components/MainTitle.razor
+++ b/Source/Services/RPSLS.Web/Components/MainTitle.razor
--- 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);
        }
    }

--- a/Source/Services/RPSLS.Web/Pages/Index.razor
+++ b/Source/Services/RPSLS.Web/Pages/Index.razor
@ -12,9 +12,15 @@
 <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">
+                <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>
@ -22,7 +28,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))
@ -38,14 +44,14 @@
                    </div>
                }

-                <div class="custom-button-container">
-                    <div class="custom-button">
-                        <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">
-                            <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>
@ -62,13 +68,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()
    {
--- 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;
--- 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>

@ -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");
--- 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">
+                <RPSLS.Web.Components.MainTitle Title="@Title" ShowHelp="@ShowHelp"></RPSLS.Web.Components.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();
+    }
 }
--- 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;
@ -59,13 +61,7 @@

    .login-section .custom-button {
        margin: 1rem;
-    }
-
-    .login-section img {
-        height: 100%;
-        grid-row: 1 / span 2;
-        /* position: relative; */
-    }
+    }    

    .login-section .subtitle-container {
        text-align: center;
@ -115,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;
--- 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,8 +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 {
+    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 {
+.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);
 }
@ -144,6 +159,8 @@ a.secondary-link {
    transform: translate(0, 4px);
 }

+
+
 /* Cookies Banner */
 .cookie-banner {
    background: #372369;
@ -210,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;
+}
--- 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;
    }