rework propic handling

package.json

@@ -13,7 +13,6 @@
     "chartjs-adapter-moment": "^1.0.1",
     "moment": "^2.30.1",
     "node-fetch": "^3.3.1",
-    "pako": "^2.1.0",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",

src/Model/ClientMessage.ts

@@ -1,11 +1,11 @@
 import { GameAction } from "../Scenes/Game/Model/GameAction";
 import { GameOptions } from "../Scenes/Game/Model/GameUpdate";
-import { ImagePixels } from "../Utils/ImageSerial";
+import { ImageSrc } from "../Utils/ImageSerial";
 import { Empty, LobbyId, UserId } from "./ServerMessage";
 
 export interface ClientConnect {
     username: string;
-    propic: ImagePixels | null;
+    propic: ImageSrc | null;
     session_id: number;
 }
 
@@ -24,7 +24,7 @@ export type ClientMessage =
     {pong: Empty} |
     {connect: ClientConnect} |
     {user_set_name: string} |
-    {user_set_propic: ImagePixels | null} |
+    {user_set_propic: ImageSrc | null} |
     {lobby_make: LobbyMakeArgs} |
     {lobby_game_options: GameOptions} |
     {lobby_join: LobbyJoinArgs} |

src/Model/Env.ts

@@ -10,13 +10,15 @@ const Env = (() => {
         throw new Error('missing BANG_SERVER_URL environment variable');
     }
 
-    let bangTrackingUrl = bangServerUrl.replace('wss://', 'https://').replace('ws://', 'http://');
-    if (!bangTrackingUrl.endsWith('/')) {
-        bangTrackingUrl += '/';
+    let bangServerBaseUrl = bangServerUrl.replace('wss://', 'https://').replace('ws://', 'http://');
+    if (!bangServerBaseUrl.endsWith('/')) {
+        bangServerBaseUrl += '/';
     }
-    bangTrackingUrl += 'tracking';
+
+    const bangTrackingUrl = bangServerBaseUrl + 'tracking';
+    const bangImageUrl = bangServerBaseUrl + 'image';
 
-    return { bangServerUrl, bangTrackingUrl, language, discordLink, paypalDonateLink } as const;
+    return { bangServerUrl, bangTrackingUrl, bangImageUrl, language, discordLink, paypalDonateLink } as const;
 })();
 
 export default Env;

src/Model/SceneState.ts

@@ -2,9 +2,9 @@ import { Id } from "../Scenes/Game/Model/GameTable";
 import { GameOptions } from "../Scenes/Game/Model/GameUpdate";
 import { UserValue } from "../Scenes/Lobby/LobbyUser";
 import { LobbyValue } from "../Scenes/WaitingArea/LobbyElement";
-import { deserializeImage } from "../Utils/ImageSerial";
 import { createUnionReducer } from "../Utils/UnionUtils";
-import { ChatMessage, Empty, LobbyEntered, LobbyId, LobbyUpdate, LobbyUserPropic, LobbyUserUpdate, UserId } from "./ServerMessage";
+import Env from "./Env";
+import { ChatMessage, Empty, LobbyEntered, LobbyId, LobbyUpdate, LobbyUserUpdate, UserId } from "./ServerMessage";
 
 export interface LobbyState {
     lobbyId: LobbyId;
@@ -54,7 +54,6 @@ export type SceneUpdate =
     { removeLobby: LobbyId } |
     { setGameOptions: GameOptions } |
     { updateLobbyUser: LobbyUserUpdate } |
-    { updateUserPropic: LobbyUserPropic } |
     { addLobbyChatMessage: ChatMessage };
 
 export function defaultCurrentScene(sessionId?: number): SceneState {
@@ -80,8 +79,14 @@ function newLobbyValue({ lobby_id, name, num_players, num_spectators, max_player
     return { id: lobby_id, name, num_players, num_spectators, max_players, secure, state };
 }
 
-function newUserValue({ user_id, username, flags, lifetime }: LobbyUserUpdate): UserValue {
-    return { id: user_id, name: username, flags, lifetime };
+function getPropicUrl(propic: string | null): string | undefined {
+    if (propic) {
+        return `${Env.bangImageUrl}/${propic}`;
+    }
+}
+
+function newUserValue({ user_id, username, propic, flags, lifetime }: LobbyUserUpdate): UserValue {
+    return { id: user_id, name: username, propic: getPropicUrl(propic), flags, lifetime };
 }
 
 export const sceneReducer = createUnionReducer<SceneState, SceneUpdate>({
@@ -137,17 +142,6 @@ export const sceneReducer = createUnionReducer<SceneState, SceneUpdate>({
         }
         return { ...this, lobbyState: { ...this.lobbyState, users: handleListUpdate(this.lobbyState.users, newUserValue(update)) }};
     },
-    updateUserPropic({ user_id, propic }) {
-        if (this.type !== 'lobby' && this.type !== 'game') {
-            throw new Error('Invalid scene type for updateUserPropic: ' + this.type);
-        }
-        return { ...this, lobbyState: { ...this.lobbyState,
-            users: this.lobbyState.users.map(user => user.id === user_id
-                ? { ...user, propic: deserializeImage(propic) }
-                : user 
-            )
-        }};
-    },
     addLobbyChatMessage(message) {
         if (this.type !== 'lobby' && this.type !== 'game') {
             throw new Error('Invalid scene type for addLobbyChatMessage: ' + this.type);

src/Model/ServerMessage.ts

@@ -1,5 +1,4 @@
 import { GameOptions, GameUpdate } from "../Scenes/Game/Model/GameUpdate";
-import { ImagePixels } from "../Utils/ImageSerial";
 
 export type Empty = Record<string, never>;
 
@@ -41,15 +40,11 @@ export type LobbyUserFlag = 'disconnected' | 'spectator' | 'muted';
 export interface LobbyUserUpdate {
     user_id: UserId;
     username: string;
+    propic: string | null;
     flags: LobbyUserFlag[];
     lifetime: Milliseconds;
 }
 
-export interface LobbyUserPropic {
-    user_id: UserId;
-    propic: ImagePixels | null;
-}
-
 export type LobbyChatArg =
     {user: UserId} |
     {integer: number} |
@@ -71,7 +66,6 @@ export type ServerMessage =
     {lobby_game_options: GameOptions} |
     {lobby_removed: LobbyRemoved} |
     {lobby_user_update: LobbyUserUpdate} |
-    {lobby_user_propic: LobbyUserPropic} |
     {lobby_kick: Empty} |
     {lobby_chat: ChatMessage} |
     {game_update: GameUpdate} |

src/Model/UseBangConnection.ts

@@ -95,9 +95,6 @@ export default function useBangConnection() {
             lobby_user_update(message) {
                 sceneDispatch({ updateLobbyUser: message });
             },
-            lobby_user_propic(message) {
-                sceneDispatch({ updateUserPropic: message })
-            },
             lobby_kick() {
                 sceneDispatch({ gotoWaitingArea: {} });
             },

src/Utils/ImageSerial.ts

@@ -1,12 +1,3 @@
-import { inflate, deflate } from 'pako';
-import { base64ToBytes, bytesToBase64 } from './Base64Utils';
-
-export interface ImagePixels {
-    width: number;
-    height: number;
-    pixels: string;
-}
-
 export type ImageSrc = string;
 
 export async function loadFile(file: File): Promise<string> {
@@ -29,7 +20,7 @@ export async function loadImage(src: ImageSrc): Promise<HTMLImageElement> {
 
 export const PROPIC_SIZE = 512;
 
-export async function serializeImage(src: ImageSrc | undefined, scale?: number): Promise<ImagePixels | null> {
+export async function serializeImage(src: ImageSrc | undefined, scale?: number): Promise<ImageSrc | null> {
     if (!src) return null;
 
     let image = await loadImage(src);
@@ -57,35 +48,5 @@ export async function serializeImage(src: ImageSrc | undefined, scale?: number):
     }
     ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
 
-    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-    const pixels = bytesToBase64(deflate(imageData.data.buffer));
-
-    return { width: canvas.width, height: canvas.height, pixels };
-}
-
-export function deserializeImage(data: ImagePixels | null): ImageSrc | undefined {
-    try {
-        if (!data || data.width === 0 || data.height === 0) {
-            return undefined;
-        }
-
-        const pixels = new Uint8ClampedArray(inflate(base64ToBytes(data.pixels)));
-        let imageData = new ImageData(pixels, data.width, data.height);
-
-        let canvas = document.createElement('canvas');
-        canvas.width = data.width;
-        canvas.height = data.height;
-
-        let ctx = canvas.getContext('2d');
-        if (!ctx) {
-            return undefined;
-        }
-
-        ctx.putImageData(imageData, 0, 0);
-
-        return canvas.toDataURL();
-    } catch (e) {
-        console.error('Cannot deserialize image: ' + e);
-        return undefined;
-    }
+    return canvas.toDataURL('image/png');
 }