Merge pull request #32 from halomademeapc/bugfix/#26-theme-switcher-c…

…ontrols

move theme switcher to player settings pane

pokeR/ClientApp/src/app/app.component.html

@@ -1,3 +1,3 @@
 <router-outlet></router-outlet>
 <app-notification-feed></app-notification-feed>
-<app-theme-switcher class="corner-button"></app-theme-switcher>
+<app-theme-switcher class="hidden"></app-theme-switcher>

pokeR/ClientApp/src/app/app.component.scss

@@ -1,8 +1,5 @@
-@import '../theme/variables';
+@import "../theme/variables";
 
-.corner-button {
-    position: fixed;
-    top: $mid;
-    right: $mid;
-    z-index: 30;
-}
+.hidden {
+  display: none;
+}

pokeR/ClientApp/src/app/shared-components/player-settings/player-settings.component.html

@@ -1,5 +1,9 @@
 <app-pane-drawer [label]="playerName" direction="right">
   <div class="player-settings">
+    <h3>Player Settings</h3>
     <app-join-room [isUpdate]="true" [roomId]="roomId"></app-join-room>
+    <div class="spacer"></div>
+    <h3>Theme</h3>
+    <app-theme-switcher></app-theme-switcher>
   </div>
 </app-pane-drawer>

pokeR/ClientApp/src/app/shared-components/player-settings/player-settings.component.scss

@@ -4,4 +4,8 @@
   justify-content: center;
   align-items: stretch;
   min-height: 100%;
+
+  .spacer {
+    height: 30px;
+  }
 }

pokeR/ClientApp/src/app/shared-components/theme-switcher/theme-switcher.component.html

@@ -1,9 +1,4 @@
 <div class="switcher">
-  <div class="switcher-icon">
-    <i *ngIf="currentTheme==modes.automatic" class="mdi mdi-brightness-auto"></i>
-    <i *ngIf="currentTheme==modes.dark" class="mdi mdi-weather-night"></i>
-    <i *ngIf="currentTheme==modes.light" class="mdi mdi-white-balance-sunny"></i>
-  </div>
   <div class="switcher-menu">
     <div class="switcher-option" (click)="setTheme(modes.automatic)" [class.active]="currentTheme==modes.automatic">
       <i class="mdi mdi-brightness-auto"></i>
@@ -19,4 +14,4 @@
       <span>Light</span>
     </div>
   </div>
-</div>
+</div>

pokeR/ClientApp/src/app/shared-components/theme-switcher/theme-switcher.component.scss

@@ -1,64 +1,43 @@
-@import '../../../theme/variables';
+@import "../../../theme/variables";
 
 .switcher {
-    color: var(--contrast-color);
-    position: relative;
-    z-index: 30;
-
-    .switcher-icon {
-        font-size: 18px;
-        cursor: pointer;
-    }
-
-    .switcher-menu {
-        position: absolute;
-        pointer-events: none;
-        transition: all .3s ease;
-        opacity: 0;
-        transform: translateX(20px);
-        top: 0;
-        right: 0;
-        display: flex;
-        flex-direction: column;
-        background-color: var(--primary-color);
-        border-radius: $slim;
-        z-index: 35;
-
-        .switcher-option {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            padding: $mid;
-            border-radius: $slim;
-            cursor: pointer;
-            box-shadow: 0 0 0 0 inset var(--accent-color);
-            transition: all .3s ease;
-            user-select: none;
-
-            i.mdi {
-                margin-right: $mid;
-            }
-
-            &:hover {
-                background-color: var(--hover-color);
-            }
-
-            &:active {
-                background-color: var(--active-color);
-                transition: all .1s ease;
-            }
-
-            &.active {
-                box-shadow: 0 0 0 $slim inset var(--accent-color);
-            }
-        }
-    }
-
-    &:hover {
-        .switcher-menu {
-            opacity: 1;
-            transform: translateX(0);
-            pointer-events: initial;
-        }
+  color: var(--contrast-color);
+  position: relative;
+
+  .switcher-menu {
+    transition: all 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--primary-color);
+    border-radius: $slim;
+
+    .switcher-option {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: $mid;
+      border-radius: $slim;
+      cursor: pointer;
+      box-shadow: 0 0 0 0 inset var(--accent-color);
+      transition: all 0.3s ease;
+      user-select: none;
+
+      i.mdi {
+        margin-right: $mid;
+      }
+
+      &:hover {
+        background-color: var(--hover-color);
+      }
+
+      &:active {
+        background-color: var(--active-color);
+        transition: all 0.1s ease;
+      }
+
+      &.active {
+        box-shadow: 0 0 0 $slim inset var(--accent-color);
+      }
     }
-}
+  }
+}

pokeR/Hubs/RoomHub.cs

@@ -81,10 +81,6 @@ public async Task UpdateUser(JoinRoomRequest updated)
             await db.SaveChangesAsync();
             var roomId = user?.RoomId;
             await Clients.Group(roomId).SendAsync("UserUpdated", new ListChange<User>(user, await GetRoomUsers(roomId)));
-            if (user.CurrentCardId.HasValue)
-            {
-                await PlayCard(user.CurrentCardId.Value);
-            }
         }
 
         public async Task SwitchHost(Guid Id)

pokeR/PokeR.csproj

@@ -13,7 +13,7 @@
     <BuildServerSideRenderer>false</BuildServerSideRenderer>
     <DockerDefaultTargetOS>Linux</DockerDefaultTargetOS>
     <UserSecretsId>2655f33f-2971-4c41-bf5e-0ad9afe6f19a</UserSecretsId>
-    <Version>2.0.0</Version>
+    <Version>2.1.0</Version>
   </PropertyGroup>
 
   <ItemGroup>