show dragged items in realtime for all users.

also updates cursor with dragging coordinates while dragging ( mosuemove + pointermove events dont fire during item drag.
fixes mini-game performance by spawning at most 20 pickups

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

@@ -1,14 +1,14 @@
-<bal-app class="has-sticky-footer" style="position: relative;" (mousemove)="mouseMoved($event)">
+<bal-app class="has-sticky-footer" style="position: relative;" (pointermove)="pointerMoved($event)">
+    <div>
+        <app-dragged-item *ngFor="let draggedItem of draggedItems" style="z-index: 1200; position: absolute;"
+                          [itemDragInfo]="draggedItem" [ngStyle]="{'top': draggedItem.posY + 'px', 'left': draggedItem.posX + 'px'}"></app-dragged-item>
+    </div>
     <div>
         <bal-text class="has-text-shadow" *ngFor="let cursor of cursors" style="z-index: 1100; position: absolute;"
                    [ngStyle]="{'top': cursor.posY + 'px', 'left': cursor.posX + 25 + 'px'}"
                    [color]="cursor.color">{{cursor.name}}</bal-text>
         <bal-icon *ngFor="let cursor of cursors" name="edit" style="z-index: 1000; position: absolute;"
                   [ngStyle]="{'top': cursor.posY + 'px', 'left': cursor.posX + 'px'}" [color]="cursor.color"></bal-icon>
-
-        <bal-icon *ngFor="let draggedItem of draggedItems" name="edit" style="z-index: 1200; position: absolute;"
-                  [ngStyle]="{'top': draggedItem.posY + 'px', 'left': draggedItem.posX + 'px'}"></bal-icon>
-
     </div>
     <header>
         <!-- Header content -->

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

@@ -100,7 +100,7 @@ export class AppComponent implements OnDestroy {
     }
   }
 
-  mouseMoved(event: MouseEvent) {
+  pointerMoved(event: PointerEvent) {
     if(this.client.connected) {
       const payload = {posX: event.pageX, posY: event.pageY};
       this.client?.publish({destination: "/app/cursor", body: JSON.stringify(payload)});
@@ -217,19 +217,31 @@ export class AppComponent implements OnDestroy {
   }
 
   private updateDraggedItems(itemDrag: ItemDragInfo) {
-    console.log("Dragging received" + itemDrag.id)
-    const index = this.draggedItems.findIndex(item => item.id === itemDrag.id)
-    if(index >= 0){
-      if(itemDrag.finished){
-        this.draggedItems.splice(index, 1);
+    if (itemDrag.draggingPlayer != this.currentUser) {
+      console.log("Dragging received" + itemDrag.id)
+      const index = this.draggedItems.findIndex(item => item.id === itemDrag.id)
+      if (index >= 0) {
+        if (itemDrag.finished) {
+          this.draggedItems.splice(index, 1);
+        } else {
+          this.draggedItems[index] = itemDrag;
+          this.updateCursorOfDraggingUserIfNeeded(itemDrag);
+        }
       } else {
-        this.draggedItems[index] = itemDrag;
-      }
-    } else {
-      if(!itemDrag.finished){
-        this.draggedItems.push(itemDrag);
+        if (!itemDrag.finished) {
+          this.draggedItems.push(itemDrag);
+          this.updateCursorOfDraggingUserIfNeeded(itemDrag);
+        }
       }
     }
   }
 
+  private updateCursorOfDraggingUserIfNeeded(itemDragInfo : ItemDragInfo) {
+    let cursor = this.cursors.find(cursor => cursor.name === itemDragInfo.draggingPlayer);
+    if(cursor != undefined){
+      cursor.posY = itemDragInfo.posY;
+      cursor.posX = itemDragInfo.posX;
+    }
+  }
+
 }

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

@@ -13,9 +13,10 @@ import { GameComponent } from './components/game/game.component';
 import { balIconAccount, balIconSend, balIconStarShape, balIconStarFull, balIconWeb, balIconX} from '@baloise/design-system-icons'
 import { ItemBaseSelectionComponent } from './components/item-base-selection/item-base-selection.component'
 import {HttpClientModule} from "@angular/common/http";
+import {DraggedItemComponent} from "./components/dragged-item/dragged-item.component";
 
 @NgModule({
-  declarations: [AppComponent, CheckInComponent, InventoryComponent, InventoryItemComponent, ChatComponent, GameComponent, StockComponent, UserBarComponent, ItemBaseSelectionComponent],
+  declarations: [AppComponent, CheckInComponent, InventoryComponent, InventoryItemComponent, ChatComponent, GameComponent, StockComponent, UserBarComponent, ItemBaseSelectionComponent, DraggedItemComponent],
     imports: [
         BrowserModule,
         HttpClientModule,

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

@@ -0,0 +1,3 @@
+<div class="dragged-item" [ngClass]="'ghost-item'">
+    <img [alt]="itemDragInfo" [src]="'assets/items/' + itemDragInfo.name + '.png'"/>
+</div>

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

@@ -0,0 +1,9 @@
+.ghost-item {
+  width:50px;
+  height:50px;
+  border-radius:9px;
+  margin:3px;
+  border-width:2px;
+  border-style: dashed;
+  border-color: gray;
+}

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

@@ -0,0 +1,12 @@
+import {Component, Input} from '@angular/core';
+import {ItemDragInfo} from "../../../model";
+
+@Component({
+  selector: 'app-dragged-item',
+  templateUrl: './dragged-item.component.html',
+  styleUrls: ['./dragged-item.component.scss']
+})
+export class DraggedItemComponent {
+  @Input()
+  itemDragInfo!: ItemDragInfo
+}

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

@@ -46,6 +46,7 @@ export class InventoryItemComponent implements OnInit {
         posX: event.pageX,
         posY : event.pageY,
         id:this.item.id,
+        draggingPlayer: this.item.userLock,
         finished: finished
       }
       this.client?.publish({destination: "/app/item-dragging", body: JSON.stringify(itemDragInfo)

angular-frontend/src/model/index.ts

@@ -88,4 +88,5 @@ export interface ItemDragInfo {
     posX: number;
     posY: number;
     finished : boolean;
+    draggingPlayer : string;
 }

spring-backend/src/main/java/com/baloise/collab/springbackend/game/GameLoopExecutor.java

@@ -29,6 +29,8 @@ public void run() throws InterruptedException {
                     var scoreUpdate = pickUpHandler.collectPickups(character);
                     character.setScore(character.getScore() + scoreUpdate);
                 });
+            } else {
+                quit();
             }
             pickUpHandler.spawnPickupsAndSendToClients();
             lastFrameTime = System.currentTimeMillis();

spring-backend/src/main/java/com/baloise/collab/springbackend/game/PickUpHandler.java

@@ -43,7 +43,7 @@ public int collectPickups(Character character) {
 
     public void spawnPickupsAndSendToClients() {
         var currentTime = System.currentTimeMillis();
-        if (currentTime - lastSpawn > 3000) {
+        if (currentTime - lastSpawn > 3000 && pickups.size() < 20) {
             lastSpawn = currentTime;
             pickups.add(
                     new Pickup(

spring-backend/src/main/java/com/baloise/collab/springbackend/items/ItemDragDTO.java

@@ -5,6 +5,6 @@ public record ItemDragDTO (
     Long id,
     int posX,
     int posY,
-
-    boolean finished){
-}
+    boolean finished,
+    String draggingPlayer
+){ }