Show what the user is doing on their profile

LittleBigRefresh · Aug 28, 2024 · 9e1e6a3 · 9e1e6a3
1 parent 99fa15f
commit 9e1e6a3
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 11 deletions.
diff --git a/src/app/api/token-storage.service.ts b/src/app/api/token-storage.service.ts
@@ -41,6 +41,7 @@ export class TokenStorageService {
             return JSON.parse(str);
         } catch (e) {
             console.error("Failed to retrieve stored user", e, str);
+            this.ClearStoredUser()
             return null;
         }
     }

diff --git a/src/app/components/ui/info/user-status.component.ts b/src/app/components/ui/info/user-status.component.ts
@@ -0,0 +1,42 @@
+import {Component, Input} from '@angular/core';
+import {Room} from "../../../api/types/rooms/room";
+import {LevelLinkComponent} from "../text/links/level-link.component";
+
+@Component({
+  selector: 'app-user-status',
+  standalone: true,
+  imports: [
+    LevelLinkComponent
+  ],
+  template: `
+    @if(activeRoom) {
+      <div class="bg-green w-2 h-2 rounded-full inline-block align-middle mr-1"></div>
+      <span class="text-secondary-bright">
+        Online,
+        @switch (activeRoom.levelType) {
+          @case (0) {
+            <span>playing a story level</span>
+          }
+          @case(1) {
+            <span>playing <app-level-link [level]="null" [levelId]="activeRoom.levelId"></app-level-link></span>
+          }
+          @case (2) {
+            <span>on the moon</span>
+          }
+          @case (5) {
+            <span>in the pod</span>
+          }
+          @default {
+            <span>unhandled level type {{activeRoom.levelType}}</span>
+          }
+        }
+      </span>
+    } @else {
+      <div class="bg-secondary w-2 h-2 rounded-full inline-block align-middle mr-1"></div>
+      <span class="text-secondary">Offline</span>
+    }
+  `
+})
+export class UserStatusComponent {
+  @Input() activeRoom: Room | undefined;
+}
diff --git a/src/app/components/ui/layouts/fancy-header.component.ts b/src/app/components/ui/layouts/fancy-header.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnDestroy} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {ContainerHeaderComponent} from "../container-header.component";
 import {DarkContainerComponent} from "../dark-container.component";
 import {DateComponent} from "../info/date.component";
@@ -7,7 +7,6 @@ import {PageTitleComponent} from "../text/page-title.component";
 import {LevelStatisticsComponent} from "../../items/level-statistics.component";
 import { AsyncPipe, NgTemplateOutlet } from "@angular/common";
 import {LayoutService} from "../../../services/layout.service";
-import {Subscription} from "rxjs";
 
 @Component({
   selector: 'app-fancy-header',
@@ -39,6 +38,7 @@ import {Subscription} from "rxjs";
               <ng-content select="[titleSubtext]"></ng-content>
             </span>
           </div>
+          <ng-content select="[belowTitle]"></ng-content>
           <ng-content select="[statistics]"></ng-content>
           @if (!(layout.isMobile | async)) {
             <ng-container *ngTemplateOutlet="descriptionTemplate"></ng-container>

diff --git a/src/app/pages/user/user.component.html b/src/app/pages/user/user.component.html
@@ -1,8 +1,14 @@
 @if (user) {
-  <app-fancy-header [title]="user.username" [description]="user.description | default: user.username + ' hasn\'t introduced themselves yet.'">
-    <app-user-avatar [user]="user" [size]="(layout.isMobile | async) ? 90 : 176" avatar></app-user-avatar>
-    <ng-container titleSubtext>
-      Joined <app-date [date]="user.joinDate"></app-date>
-    </ng-container>
-  </app-fancy-header>
+    <app-fancy-header [title]="user.username"
+                      [description]="user.description | default: user.username + ' hasn\'t introduced themselves yet.'">
+        <app-user-avatar [user]="user" [size]="(layout.isMobile | async) ? 90 : 176" avatar></app-user-avatar>
+        <ng-container titleSubtext>
+            Joined
+            <app-date [date]="user.joinDate"></app-date>
+            <br>
+        </ng-container>
+        <ng-container belowTitle>
+            <app-user-status [activeRoom]="user.activeRoom"></app-user-status>
+        </ng-container>
+    </app-fancy-header>
 }
diff --git a/src/app/pages/user/user.component.ts b/src/app/pages/user/user.component.ts
@@ -9,17 +9,19 @@ import {UserAvatarComponent} from "../../components/ui/photos/user-avatar.compon
 import {DateComponent} from "../../components/ui/info/date.component";
 import {FancyHeaderComponent} from "../../components/ui/layouts/fancy-header.component";
 import {LayoutService} from "../../services/layout.service";
+import {UserStatusComponent} from "../../components/ui/info/user-status.component";
 
 @Component({
   selector: 'app-user',
   standalone: true,
-    imports: [
+  imports: [
     DefaultPipe,
     UserAvatarComponent,
     DateComponent,
     FancyHeaderComponent,
-    AsyncPipe
-],
+    AsyncPipe,
+    UserStatusComponent
+  ],
   templateUrl: './user.component.html',
   styles: ``
 })