Merge remote-tracking branch 'duckie/main' into merge-duckie-main-2026-05-06

# Conflicts:
#	packages/communication/src/messages/parser/room/unit/RoomUnitInfoParser.ts
#	packages/communication/src/messages/parser/user/data/UserProfileParser.ts
#	packages/events/src/session/RoomSessionUserFigureUpdateEvent.ts
#	packages/session/src/handler/RoomUsersHandler.ts

package.json

@@ -12,13 +12,13 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/billsonnn/nitro-renderer.git"
+    "url": "https://github.com/duckietm/Nitro_Render_V3.git"
   },
   "license": "GPL-3.0",
   "bugs": {
-    "url": "https://github.com/billsonnn/nitro-renderer/issues"
+    "url": "https://github.com/duckietm/Nitro_Render_V3/issues"
   },
-  "homepage": "https://github.com/billsonnn/nitro-renderer",
+  "homepage": "https://github.com/duckietm/Nitro_Render_V3",
   "scripts": {
     "build": "vite build",
     "compile": "tsc --project ./tsconfig.json --noEmit false",
@@ -30,12 +30,12 @@
   },
   "main": "./index",
   "dependencies": {
-    "clientjs": "^0.2.1",
+    "@thumbmarkjs/thumbmarkjs": "^1.8.1",
     "gifuct-js": "^2.1.2",
     "howler": "^2.2.4",
     "pako": "^2.1.0",
     "pixi-filters": "^6.1.5",
-    "pixi.js": "^8.17.1"
+    "pixi.js": "^8.18.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
@@ -49,7 +49,7 @@
     "tslib": "^2.6.3",
     "typescript": "~5.8.2",
     "typescript-eslint": "^8.26.1",
-    "vite": "^5.4.9",
+    "vite": "^8.0.10",
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.5"
   }
 }

packages/api/src/nitro/avatar/IAvatarImage.ts

@@ -17,6 +17,7 @@ export interface IAvatarImage
     processAsImageUrl(setType: string): string;
     processAsContainer(setType: string): Container;
     getDirection(): number;
+    getDirectionOffset(): number;
     getFigure(): IAvatarFigureContainer;
     getPartColor(_arg_1: string): IPartColor;
     getMainAction(): IActiveActionData;

packages/api/src/nitro/session/IRoomUserData.ts

@@ -2,6 +2,10 @@ export interface IRoomUserData
 {
     readonly roomIndex: number;
     activityPoints: number;
+    background: number;
+    stand: number;
+    overlay: number;
+    cardBackground: number;
     name: string;
     type: number;
     sex: string;

packages/api/src/nitro/session/IUserDataManager.ts

@@ -18,6 +18,7 @@ export interface IUserDataManager
     updateMotto(roomIndex: number, custom: string): void;
     updateNickIcon(roomIndex: number, nickIcon: string): void;
     updateCustomization(roomIndex: number, nickIcon: string, prefixText: string, prefixColor: string, prefixIcon: string, prefixEffect: string, prefixFont: string, displayOrder: string): void;
+    updateBackground(roomIndex: number, background: number, stand: number, overlay: number, cardBackground?: number): void;
     updateAchievementScore(roomIndex: number, score: number): void;
     updatePetLevel(roomIndex: number, level: number): void;
     updatePetBreedingStatus(roomIndex: number, canBreed: boolean, canHarvest: boolean, canRevive: boolean, hasBreedingPermission: boolean): void;

packages/avatar/src/AvatarImage.ts

@@ -399,6 +399,11 @@ export class AvatarImage implements IAvatarImage, IAvatarEffectListener
         return this._mainDirection;
     }
 
+    public getDirectionOffset(): number
+    {
+        return this._directionOffset;
+    }
+
     public initActionAppends(): void
     {
         this._actions = [];

packages/communication/package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "@nitrots/api": "1.0.0",
     "@nitrots/events": "1.0.0",
-    "@nitrots/utils": "1.0.0"
+    "@nitrots/utils": "1.0.0",
+    "@thumbmarkjs/thumbmarkjs": "^1.8.1"
   },
   "devDependencies": {
     "typescript": "~5.8.2"

packages/communication/src/CommunicationManager.ts

@@ -5,7 +5,7 @@ import { GetTickerTime, NitroLogger } from '@nitrots/utils';
 import { NitroMessages } from './NitroMessages';
 import { SocketConnection } from './SocketConnection';
 import { AuthenticatedEvent, ClientHelloMessageComposer, ClientPingEvent, InfoRetrieveMessageComposer, PongMessageComposer, SSOTicketMessageComposer, UniqueIDMessageComposer } from './messages';
-import { ClientJS } from 'clientjs';
+import { Thumbmark } from '@thumbmarkjs/thumbmarkjs';
 
 export class CommunicationManager implements ICommunicationManager
 {
@@ -19,84 +19,34 @@ export class CommunicationManager implements ICommunicationManager
     private _socketErrorCallback: () => void = null;
     private _socketReconnectedCallback: () => void = null;
 
-    private _machineId: string = null;
+    private _machineIdPromise: Promise<string> = null;
     private _initResolved: boolean = false;
 
-	private getGpu(): string {
+    private async generateMachineID(): Promise<string>
-        const e = document.createElement('canvas');
-        let t, s, i, r;
-        try {
-            if (
-                ((t = e.getContext('webgl') || e.getContext('experimental-webgl')), (s = t.getExtension('WEBGL_debug_renderer_info')), null === t || null === s))
-                return '';
-        } catch (n) {
-            return '';
-        }
-        return ((i = t.getParameter(s.UNMASKED_VENDOR_WEBGL)), (r = t.getParameter(s.UNMASKED_RENDERER_WEBGL)), i + '|' + r);
-    }
-
-    private getMathResult(): string {
-        let e, t;
-        (e = '<mathroutines>Error</mathroutines>'), (t = '');
-        try {
-            return (
-                (t ='<mathroutines>' + (Math.exp(10) + 1 / Math.exp(10)) / 2 + '|' + Math.tan(-1e300) + '</mathroutines>'), t);
-        } catch (s) {
-            return '<mathroutines>Error</mathroutines>';
-        }
-    }
-
-	private getCanvas(): any {
-		const e = document.createElement('canvas'), t = e.getContext('2d'), userAgent = navigator.userAgent, screenInfo = '${window.screen.width}x${window.screen.height}', currentDate = new Date().toString(), s = 'ThiosIsVerrySeCuRe02938883721moreStuff! | ${userAgent} | ${screenInfo} | ${currentDate}';
-		t.textBaseline = 'top';
-		t.font = "16px 'Arial'";
-		t.textBaseline = 'alphabetic';
-		t.rotate(0.05);
-		t.fillStyle = '#f60';
-		t.fillRect(125, 1, 62, 20);
-		t.fillStyle = '#069';
-		t.fillText(s, 2, 15);
-		t.fillStyle = 'rgba(102, 200, 0, 0.7)';
-		t.fillText(s, 4, 17);
-		t.shadowBlur = 10;
-		t.shadowColor = 'blue';
-		t.fillRect(-20, 10, 234, 5);
-		const i = e.toDataURL();
-		e.width = 0;
-		e.height = 0;
-		let r = 0;
-		if (i.length === 0) return 'nothing!';
-		for (let n = 0; n < i.length; n++) {
-			r = (r << 5) - r + i.charCodeAt(n);
-			r &= r;
-		}
-		return r;
-	}
-
-	private generateMachineID(): string {
-        const fp = new ClientJS();
-        const uniqueId = fp.getCustomFingerprint(
-            fp.getAvailableResolution(),
-            fp.getOS(),
-            fp.getCPU(),
-            fp.getColorDepth(),
-            this.getGpu(),
-            fp.getSilverlightVersion(),
-            fp.getOSVersion(),
-            this.getMathResult(),
-            fp.getCanvasPrint(),
-            this.getCanvas()
-        );
-        return uniqueId == null ? 'FAILED' : `IID-${uniqueId}`;
-    }
-
-    private sendHandshake(): void
     {
-        if(!this._machineId) this._machineId = this.generateMachineID();
+        try
+        {
+            const result = await new Thumbmark().get();
+
+            return result.thumbmark ? `IID-${result.thumbmark}` : 'FAILED';
+        }
+        catch(error)
+        {
+            NitroLogger.warn('[CommunicationManager] Failed to generate machine ID', error);
+
+            return 'FAILED';
+        }
+    }
+
+    private async sendHandshake(): Promise<void>
+    {
+        if(!this._machineIdPromise) this._machineIdPromise = this.generateMachineID();
+
+        const machineId = await this._machineIdPromise;
 
         this._connection.send(new ClientHelloMessageComposer(null, null, null, null));
         this._connection.send(new SSOTicketMessageComposer(GetConfiguration().getValue('sso.ticket', null), GetTickerTime()));
-        this._connection.send(new UniqueIDMessageComposer(this._machineId, '', ''));
+        this._connection.send(new UniqueIDMessageComposer(machineId, '', ''));
     }
 
     constructor()
@@ -120,7 +70,7 @@ export class CommunicationManager implements ICommunicationManager
 
             if(GetConfiguration().getValue<boolean>('system.pong.manually', false)) this.startPong();
 
-            this.sendHandshake();
+            void this.sendHandshake();
         };
         GetEventDispatcher().addEventListener(NitroEventType.SOCKET_RECONNECTED, this._socketReconnectedCallback);
 
@@ -131,7 +81,7 @@ export class CommunicationManager implements ICommunicationManager
             {
                 if(GetConfiguration().getValue<boolean>('system.pong.manually', false)) this.startPong();
 
-                this.sendHandshake();
+                void this.sendHandshake();
             };
             GetEventDispatcher().addEventListener(NitroEventType.SOCKET_OPENED, this._socketOpenedCallback);
 

packages/communication/src/messages/outgoing/room/unit/RoomUnitBackgroundComposer.ts

@@ -4,9 +4,9 @@ export class RoomUnitBackgroundComposer implements IMessageComposer<ConstructorP
 {
     private _data: ConstructorParameters<typeof RoomUnitBackgroundComposer>;
 
-    constructor(backgroundImage: number, backgroundStand: number, backgroundOverlay: number)
+    constructor(backgroundImage: number, backgroundStand: number, backgroundOverlay: number, backgroundCard: number = 0)
     {
-        this._data = [ backgroundImage, backgroundStand, backgroundOverlay ];
+        this._data = [ backgroundImage, backgroundStand, backgroundOverlay, backgroundCard ];
     }
 
     public getMessageArray()

packages/communication/src/messages/parser/room/unit/RoomUnitInfoParser.ts

@@ -10,6 +10,7 @@ export class RoomUnitInfoParser implements IMessageParser
     private _backgroundId: number;
     private _standId: number;
     private _overlayId: number;
+    private _cardBackgroundId: number;
     private _nickIcon: string;
     private _prefixText: string;
     private _prefixColor: string;
@@ -28,6 +29,7 @@ export class RoomUnitInfoParser implements IMessageParser
         this._backgroundId = 0;
         this._standId = 0;
         this._overlayId = 0;
+        this._cardBackgroundId = 0;
         this._nickIcon = '';
         this._prefixText = '';
         this._prefixColor = '';
@@ -51,6 +53,7 @@ export class RoomUnitInfoParser implements IMessageParser
         this._backgroundId = wrapper.readInt();
         this._standId = wrapper.readInt();
         this._overlayId = wrapper.readInt();
+        this._cardBackgroundId = (wrapper.bytesAvailable ? wrapper.readInt() : 0);
         this._nickIcon = (wrapper.bytesAvailable ? wrapper.readString() : '');
         this._prefixText = (wrapper.bytesAvailable ? wrapper.readString() : '');
         this._prefixColor = (wrapper.bytesAvailable ? wrapper.readString() : '');
@@ -102,6 +105,11 @@ export class RoomUnitInfoParser implements IMessageParser
         return this._overlayId;
     }
 
+    public get cardBackgroundId(): number
+    {
+        return this._cardBackgroundId;
+    }
+
     public get nickIcon(): string
     {
         return this._nickIcon;

packages/communication/src/messages/parser/room/unit/RoomUnitParser.ts

@@ -37,6 +37,7 @@ export class RoomUnitParser implements IMessageParser
 			const background = wrapper.readInt();
             const stand = wrapper.readInt();
             const overlay = wrapper.readInt();
+            const cardBackground = wrapper.readInt();
             let figure = wrapper.readString();
             const roomIndex = wrapper.readInt();
             const x = wrapper.readInt();
@@ -53,6 +54,7 @@ export class RoomUnitParser implements IMessageParser
 			user.background = background;
             user.stand = stand;
             user.overlay = overlay;
+            user.cardBackground = cardBackground;
             user.x = x;
             user.y = y;
             user.z = z;

packages/communication/src/messages/parser/room/unit/UserMessageData.ts

@@ -24,6 +24,7 @@ export class UserMessageData
 	private _background: number = 0;
     private _stand: number = 0;
     private _overlay: number = 0;
+    private _cardBackground: number = 0;
     private _webID: number = 0;
     private _groupID: number = 0;
     private _groupStatus: number = 0;
@@ -221,6 +222,16 @@ export class UserMessageData
         this._overlay = k;
     }
 
+    public get cardBackground(): number
+    {
+        return this._cardBackground;
+    }
+
+    public set cardBackground(k: number)
+    {
+        this._cardBackground = k;
+    }
+
     public get webID(): number
     {
         return this._webID;

packages/communication/src/messages/parser/user/data/UserProfileParser.ts

@@ -19,6 +19,7 @@ export class UserProfileParser implements IMessageParser
     private _backgroundId: number;
     private _standId: number;
     private _overlayId: number;
+    private _cardBackgroundId: number;
     private _nickIcon: string;
     private _prefixText: string;
     private _prefixColor: string;
@@ -45,6 +46,7 @@ export class UserProfileParser implements IMessageParser
         this._backgroundId = 0;
         this._standId = 0;
         this._overlayId = 0;
+        this._cardBackgroundId = 0;
         this._nickIcon = '';
         this._prefixText = '';
         this._prefixColor = '';
@@ -86,6 +88,8 @@ export class UserProfileParser implements IMessageParser
             this._standId = wrapper.readInt();
             this._overlayId = wrapper.readInt();
 
+            this._cardBackgroundId = (wrapper.bytesAvailable ? wrapper.readInt() : 0);
+
             if(wrapper.bytesAvailable)
             {
                 this._nickIcon = wrapper.readString();
@@ -185,6 +189,11 @@ export class UserProfileParser implements IMessageParser
         return this._overlayId;
     }
 
+    public get cardBackgroundId(): number
+    {
+        return this._cardBackgroundId;
+    }
+
     public get nickIcon(): string
     {
         return this._nickIcon;

packages/events/src/session/RoomSessionUserFigureUpdateEvent.ts

@@ -12,6 +12,7 @@ export class RoomSessionUserFigureUpdateEvent extends RoomSessionEvent {
   private _backgroundId: number | null;
   private _standId: number | null;
   private _overlayId: number | null;
+  private _cardBackgroundId: number | null;
   private _nickIcon: string;
   private _prefixText: string;
   private _prefixColor: string;
@@ -30,6 +31,7 @@ export class RoomSessionUserFigureUpdateEvent extends RoomSessionEvent {
     backgroundId: number | null,
     standId: number | null,
     overlayId: number | null,
+    cardBackgroundId: number | null = 0,
     nickIcon: string = '',
     prefixText: string = '',
     prefixColor: string = '',
@@ -48,6 +50,7 @@ export class RoomSessionUserFigureUpdateEvent extends RoomSessionEvent {
     this._backgroundId = backgroundId;
     this._standId = standId;
     this._overlayId = overlayId;
+    this._cardBackgroundId = cardBackgroundId;
     this._nickIcon = nickIcon;
     this._prefixText = prefixText;
     this._prefixColor = prefixColor;
@@ -89,6 +92,10 @@ export class RoomSessionUserFigureUpdateEvent extends RoomSessionEvent {
     return this._overlayId;
   }
 
+  public get cardBackgroundId(): number | null {
+    return this._cardBackgroundId;
+  }
+
   public get nickIcon(): string {
     return this._nickIcon;
   }

packages/room/src/common/floorplan/FloorplanEditor.ts

@@ -415,36 +415,27 @@ export class FloorplanEditor
 
     public getCurrentTilemapString(): string
     {
-        const highestTile = this._tilemap[this._height - 1][this._width - 1];
+        // always rescan bounds: bulk operations like toggleSelectAll / fillSquareSelection
+        // mutate tile.height directly without updating _width/_height
+        this._width = 0;
+        this._height = 0;
 
-        if(highestTile.height === 'x')
+        for(let y = MAX_NUM_TILE_PER_AXIS - 1; y >= 0; y--)
         {
-            this._width = -1;
+            if(!this._tilemap[y]) continue;
-            this._height = -1;
 
-            for(let y = MAX_NUM_TILE_PER_AXIS - 1; y >= 0; y--)
+            for(let x = MAX_NUM_TILE_PER_AXIS - 1; x >= 0; x--)
             {
-                if(!this._tilemap[y]) continue;
+                if(!this._tilemap[y][x]) continue;
 
-                for(let x = MAX_NUM_TILE_PER_AXIS - 1; x >= 0; x--)
+                if(this._tilemap[y][x].height !== 'x')
                 {
-                    if(!this._tilemap[y][x]) continue;
+                    if((x + 1) > this._width) this._width = x + 1;
-
+                    if((y + 1) > this._height) this._height = y + 1;
-                    const tile = this._tilemap[y][x];
-
-                    if(tile.height !== 'x')
-                    {
-                        if((x + 1) > this._width)
-                            this._width = x + 1;
-
-                        if((y + 1) > this._height)
-                            this._height = y + 1;
-                    }
                 }
             }
         }
 
-
         const rows = [];
 
         for(let y = 0; y < this._height; y++)

packages/room/src/messages/ObjectRoomMaskUpdateMessage.ts

@@ -5,7 +5,7 @@ import { RoomObjectUpdateMessage } from './RoomObjectUpdateMessage';
 export class ObjectRoomMaskUpdateMessage extends RoomObjectUpdateMessage
 {
     public static ADD_MASK: string = 'RORMUM_ADD_MASK';
-    public static REMOVE_MASK: string = 'RORMUM_ADD_MASK';
+    public static REMOVE_MASK: string = 'RORMUM_REMOVE_MASK';
     public static DOOR: string = 'door';
     public static WINDOW: string = 'window';
     public static HOLE: string = 'hole';

packages/room/src/object/visualization/avatar/AvatarVisualization.ts

@@ -1100,17 +1100,19 @@ export class AvatarVisualization extends RoomObjectSpriteVisualization implement
 
         if(sprite?.texture)
         {
-            const currentDirection = this._avatarImage?.getDirection();
+            const displayedDirection = this._avatarImage?.getDirection();
+            const directionOffset = this._avatarImage?.getDirectionOffset() ?? 0;
             let oppositeTexture = sprite.texture;
 
-            if((currentDirection !== undefined) && this._avatarImage)
+            if((displayedDirection !== undefined) && this._avatarImage)
             {
-                const oppositeDirection = ((currentDirection + 4) % 8);
+                const rawCurrent = ((displayedDirection - directionOffset) % 8 + 8) % 8;
+                const rawOpposite = (rawCurrent + 4) % 8;
+                const displayedOpposite = (displayedDirection + 4) % 8;
 
-                if(oppositeDirection !== currentDirection)
+                if(displayedOpposite !== displayedDirection)
                 {
-                    // Reuse the cached opposite texture if direction and base texture haven't changed
+                    if(this._reflectionOppositeTexture && (this._reflectionOppositeDirection === displayedDirection) && (this._reflectionOppositeBaseTexture === sprite.texture))
-                    if(this._reflectionOppositeTexture && (this._reflectionOppositeDirection === currentDirection) && (this._reflectionOppositeBaseTexture === sprite.texture))
                     {
                         oppositeTexture = this._reflectionOppositeTexture;
                     }
@@ -1118,7 +1120,7 @@ export class AvatarVisualization extends RoomObjectSpriteVisualization implement
                     {
                         const highlightEnabled = ((this.object.model.getValue<number>(RoomObjectVariable.FIGURE_HIGHLIGHT_ENABLE) === 1) && (this.object.model.getValue<number>(RoomObjectVariable.FIGURE_HIGHLIGHT) === 1));
 
-                        this._avatarImage.setDirection(AvatarSetType.FULL, oppositeDirection);
+                        this._avatarImage.setDirection(AvatarSetType.FULL, rawOpposite);
 
                         const renderedOpposite = (this._avatarImage.processAsTexture(AvatarSetType.FULL, highlightEnabled) || sprite.texture);
 
@@ -1129,14 +1131,10 @@ export class AvatarVisualization extends RoomObjectSpriteVisualization implement
                         }
 
                         this._reflectionOppositeTexture = this.cloneTexture(renderedOpposite);
-                        this._reflectionOppositeDirection = currentDirection;
+                        this._reflectionOppositeDirection = displayedDirection;
                         this._reflectionOppositeBaseTexture = sprite.texture;
-
                         oppositeTexture = (this._reflectionOppositeTexture || renderedOpposite);
-
+                        this._avatarImage.setDirection(AvatarSetType.FULL, rawCurrent);
-                        // Restore the live avatar direction and refresh the current texture so
-                        // movement updates do not keep showing the opposite-facing texture.
-                        this._avatarImage.setDirection(AvatarSetType.FULL, currentDirection);
 
                         sprite.texture = (this._avatarImage.processAsTexture(AvatarSetType.FULL, highlightEnabled) || sprite.texture);
                     }

packages/room/src/object/visualization/room/RoomPlane.ts

@@ -812,6 +812,24 @@ export class RoomPlane implements IRoomPlane
         layerContainer.destroy({ children: true });
     }
 
+    private applyPlaneSpriteMasksTo(container: Container): void
+    {
+        if(!this._planeSprite || !this._planeSprite.children) return;
+
+        for(const child of this._planeSprite.children)
+        {
+            if(child instanceof Sprite)
+            {
+                const maskClone = new Sprite(child.texture);
+                maskClone.position.copyFrom(child.position);
+                maskClone.scale.copyFrom(child.scale);
+                container.addChild(maskClone);
+            }
+        }
+
+        if(this._maskFilter && (container.children.length > 1)) container.filters = [this._maskFilter];
+    }
+
     private renderBackgroundColor(): void
     {
         if(!this._planeTexture || this._landscapeBackgroundColor === null) return;
@@ -828,6 +846,8 @@ export class RoomPlane implements IRoomPlane
         const colorContainer = new Container();
         colorContainer.addChild(colorGraphics);
 
+        this.applyPlaneSpriteMasksTo(colorContainer);
+
         const transform = this.getMatrixForDimensions(canvasWidth, canvasHeight);
 
         GetRenderer().render({
@@ -869,6 +889,8 @@ export class RoomPlane implements IRoomPlane
         const colorContainer = new Container();
         colorContainer.addChild(colorGraphics);
 
+        this.applyPlaneSpriteMasksTo(colorContainer);
+
         const transform = this.getMatrixForDimensions(canvasWidth, canvasHeight);
 
         GetRenderer().render({

packages/room/src/renderer/RoomSpriteCanvas.ts

@@ -296,6 +296,8 @@ export class RoomSpriteCanvas implements IRoomRenderingCanvas
                 const ls = plane.leftSide;
                 const rs = plane.rightSide;
 
+                if(!loc || !ls || !rs) continue;
+
                 const corners = [
                     new Vector3d(loc.x, loc.y, loc.z),
                     new Vector3d(loc.x + rs.x, loc.y + rs.y, loc.z + rs.z),

packages/session/src/RoomSession.ts

@@ -97,9 +97,9 @@ export class RoomSession implements IRoomSession
         else GetCommunication().connection.send(new RoomUnitTypingStopComposer());
     }
 	
-	public sendBackgroundMessage(backgroundImage: number, backgroundStand: number, backgroundOverlay: number): void
+	public sendBackgroundMessage(backgroundImage: number, backgroundStand: number, backgroundOverlay: number, backgroundCard: number = 0): void
     {
-        GetCommunication().connection.send(new RoomUnitBackgroundComposer(backgroundImage, backgroundStand, backgroundOverlay));
+        GetCommunication().connection.send(new RoomUnitBackgroundComposer(backgroundImage, backgroundStand, backgroundOverlay, backgroundCard));
     }
 
     public sendMottoMessage(motto: string): void

packages/session/src/RoomSessionManager.ts

@@ -29,7 +29,6 @@ export class RoomSessionManager implements IRoomSessionManager, IRoomHandlerList
 
     public async init(): Promise<void>
     {
-        console.log('[RoomSessionManager] init() called');
         this.createHandlers();
         this.processPendingSession();
         this.setupReconnectListener();

packages/session/src/RoomUserData.ts

@@ -19,6 +19,7 @@ export class RoomUserData implements IRoomUserData
 	private _background: number;
     private _stand: number;
     private _overlay: number;
+    private _cardBackground: number;
     private _webID: number = 0;
     private _groupID: number = 0;
     private _groupStatus: number = 0;
@@ -88,6 +89,16 @@ export class RoomUserData implements IRoomUserData
         this._overlay = k;
     }
 
+    public get cardBackground(): number
+    {
+        return this._cardBackground;
+    }
+
+    public set cardBackground(k: number)
+    {
+        this._cardBackground = k;
+    }
+
     public get name(): string
     {
         return this._name;

packages/session/src/UserDataManager.ts

@@ -169,7 +169,7 @@ export class UserDataManager implements IUserDataManager
         userData.displayOrder = displayOrder;
     }
 	
-	public updateBackground(roomIndex: number, background: number, stand: number, overlay: number): void
+	public updateBackground(roomIndex: number, background: number, stand: number, overlay: number, cardBackground: number = 0): void
     {
         const userData = this.getUserDataByIndex(roomIndex);
 
@@ -178,6 +178,7 @@ export class UserDataManager implements IUserDataManager
         userData.background = background;
         userData.stand = stand;
         userData.overlay = overlay;
+        userData.cardBackground = cardBackground;
     }
 
     public updateAchievementScore(roomIndex: number, score: number): void

packages/session/src/handler/RoomUsersHandler.ts

@@ -65,6 +65,7 @@ export class RoomUsersHandler extends BaseHandler
 				userData.background = user.background;
                 userData.stand = user.stand;
                 userData.overlay = user.overlay;
+                userData.cardBackground = user.cardBackground;
                 userData.activityPoints = user.activityPoints;
                 userData.figure = user.figure;
                 userData.type = user.userType;
@@ -114,9 +115,9 @@ export class RoomUsersHandler extends BaseHandler
         session.userDataManager.updateCustomization(parser.unitId, parser.nickIcon || '', parser.prefixText || '', parser.prefixColor || '', parser.prefixIcon || '', parser.prefixEffect || '', parser.prefixFont || '', parser.displayOrder || 'icon-prefix-name');
         session.userDataManager.updateAchievementScore(parser.unitId, parser.achievementScore);
 		
-		session.userDataManager.updateBackground(parser.unitId, parser.backgroundId, parser.standId, parser.overlayId);
+		session.userDataManager.updateBackground(parser.unitId, parser.backgroundId, parser.standId, parser.overlayId, parser.cardBackgroundId);
 
-        GetEventDispatcher().dispatchEvent(new RoomSessionUserFigureUpdateEvent(session, parser.unitId, parser.figure, parser.gender, parser.motto, parser.achievementScore, parser.backgroundId, parser.standId, parser.overlayId, parser.nickIcon || '', parser.prefixText || '', parser.prefixColor || '', parser.prefixIcon || '', parser.prefixEffect || '', parser.prefixFont || '', parser.displayOrder || 'icon-prefix-name'));
+        GetEventDispatcher().dispatchEvent(new RoomSessionUserFigureUpdateEvent(session, parser.unitId, parser.figure, parser.gender, parser.motto, parser.achievementScore, parser.backgroundId, parser.standId, parser.overlayId, parser.cardBackgroundId, parser.nickIcon || '', parser.prefixText || '', parser.prefixColor || '', parser.prefixIcon || '', parser.prefixEffect || '', parser.prefixFont || '', parser.displayOrder || 'icon-prefix-name'));
 
     }