highlights items in color of user

angular-frontend/src/app/app.component.ts

@@ -9,7 +9,7 @@ import {
   Item,
   ItemBase,
   ItemLockMessage,
-  ItemTransferMessage
+  ItemTransferMessage, UserColor
 } from "../model";
 import { HttpService } from 'src/http.service';
 import {CreateItemEvent} from "../events";
@@ -105,6 +105,12 @@ export class AppComponent implements OnDestroy {
 
   updateUsers(users: User[]) {
     this.users = users;
+
+    users.map(user => {
+      const userColor : UserColor = {name : user.name, color : user.color}
+      return userColor
+    }).forEach(userColor => store.setUserColor(userColor))
+
     this.cursors = this.cursors.filter(cursor => users.find(user => user.name === cursor.name));
   }
 

angular-frontend/src/app/components/inventory-item/inventory-item.component.html

@@ -1,3 +1,4 @@
-<div class="inventory-item" [ngClass]="item.userLock ? 'locked-item' : ''" [draggable]="item.userLock === currentUser" (dragstart)="onDragStart($event)">
+<div class="inventory-item" [ngClass]="item.userLock ? store.getColorForUserName(item.userLock): ''"
+     [draggable]="item.userLock === currentUser" (dragstart)="onDragStart($event)">
     <img [alt]="item" [src]="'assets/items/' + item.name + '.png'"/>
 </div>

angular-frontend/src/app/components/inventory-item/inventory-item.component.scss

@@ -7,6 +7,22 @@
   box-shadow: 0 0 5px lightgray;
 }
 
-.locked-item {
-  background-color:lightgray;
+.primary {
+  background-color:#b3b6d4;
+}
+
+.grey {
+  background-color:#f6f6f6;
+}
+
+.success {
+  background-color:#e8f3ec;
+}
+
+.warning {
+  background-color:#fff9e8;
+}
+
+.danger {
+  background-color:#fce8e6;
 }

angular-frontend/src/app/components/inventory-item/inventory-item.component.ts

@@ -14,6 +14,8 @@ export class InventoryItemComponent implements OnInit {
     return store.currentUser;
   }
 
+
+
   onDragStart(event: DragEvent) {
     if (this.item.userLock !== this.currentUser) {
       console.warn("EEEEEEEEEEEEEEEEEEEEEEEE!!!")
@@ -26,4 +28,6 @@ export class InventoryItemComponent implements OnInit {
   ngOnInit(): void {
     console.log("hey?")
   }
+
+  protected readonly store = store;
 }

angular-frontend/src/model/index.ts

@@ -75,4 +75,9 @@ export interface ItemLockMessage {
 export interface ItemTransferMessage {
     id: number,
     targetInventoryId: number
+}
+
+export interface UserColor {
+    name: string;
+    color: string;
 }

angular-frontend/src/store/index.ts

@@ -1,9 +1,10 @@
-import {ItemBase} from "../model";
+import {ItemBase, User, UserColor} from "../model";
 
 //me very lazy
 export class MyStore {
     private _itemBases: ItemBase[] = []
     private _currentUser?: string;
+    private _userColors : UserColor[] = []
     public get itemBases(): ItemBase[] {
         return this._itemBases;
     }
@@ -18,6 +19,28 @@ export class MyStore {
     public set currentUser(currentUser: string) {
         this._currentUser = currentUser;
     }
+
+    public setUserColor(userColor : UserColor) {
+        const index = this._userColors.findIndex(color => color.name == userColor.name)
+        if(index < 0){
+            this._userColors.push(userColor)
+        } else {
+            this._userColors[index] = userColor
+        }
+    }
+
+    public getColorForUserName(name : String) {
+        const userColor= this._userColors.find(userColor => userColor.name == name)
+        if(userColor == undefined){
+            return "warning"
+        } else {
+            return userColor.color
+        }
+    }
+
+    public get userColors(){
+        return this._userColors
+    }
 }
 
 const store = new MyStore()