Merge branch 'dev'

index.html

@@ -15,8 +15,23 @@
     <meta name="url" content="https://pixelbattle.fun">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <!-- PWA support -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <link rel="manifest" href="/manifest.webmanifest">
+    <link rel="apple-touch-icon" href="/pwa/favicon_700x700.png">
+    <link rel="apple-touch-icon" sizes="57x57" href="/pwa/favicon_57x57.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="/pwa/favicon_72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="/pwa/favicon_76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="/pwa/favicon_114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="/pwa/favicon_120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="/pwa/favicon_144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="/pwa/favicon_152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/pwa/favicon_180x180.png">
+
     <link rel="icon" href="/images/meta/favicon.svg" type="image/svg+xml">
 
+    <!-- Preview support -->
     <meta property="og:url" content="https://pixelbattle.fun" />
     <meta property="og:site_name" content="PixelBattle" />
     <meta property="og:image" content="/images/meta/banner.png" />

package.json

@@ -7,39 +7,40 @@
     "preview": "vite preview --host 0.0.0.0"
   },
   "license": "GPL-3.0-only",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "homepage": "https://github.com/pixelate-it/pixelbattle-frontend#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pixelate-it/pixelbattle-frontend.git"
   },
   "dependencies": {
-    "@pixi/app": "^7.3.3",
-    "@pixi/color": "^7.3.3",
-    "@pixi/core": "^7.3.3",
-    "@pixi/display": "^7.3.3",
-    "@pixi/events": "^7.3.3",
-    "@pixi/graphics": "^7.3.3",
-    "@pixi/math": "^7.3.3",
-    "@pixi/particle-container": "^7.3.3",
-    "@pixi/sprite": "^7.3.3",
-    "@pixi/utils": "^7.3.3",
-    "@preact/signals": "^1.2.2",
+    "@pixi/app": "^7.4.2",
+    "@pixi/color": "^7.4.2",
+    "@pixi/core": "^7.4.2",
+    "@pixi/display": "^7.4.2",
+    "@pixi/events": "^7.4.2",
+    "@pixi/graphics": "^7.4.2",
+    "@pixi/math": "^7.4.2",
+    "@pixi/particle-container": "^7.4.2",
+    "@pixi/sprite": "^7.4.2",
+    "@pixi/utils": "^7.4.2",
+    "@preact/signals": "^1.3.0",
     "js-cookie": "^3.0.5",
-    "pixi-viewport": "^5.0.2",
-    "preact": "^10.19.3",
-    "preact-iso": "^2.3.2",
-    "preact-render-to-string": "^6.3.1",
+    "pixi-viewport": "5.0.2",
+    "preact": "^10.23.1",
+    "preact-render-to-string": "^6.5.7",
     "react-colorful": "^5.6.1",
-    "terser": "^5.28.1"
+    "wouter-preact": "^3.3.1"
   },
   "devDependencies": {
-    "@preact/preset-vite": "^2.8.1",
+    "@preact/preset-vite": "^2.9.0",
     "@types/js-cookie": "^3.0.6",
-    "@types/node": "^20.11.0",
-    "eslint": "^8.56.0",
-    "eslint-config-preact": "^1.3.0",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.11"
+    "@types/node": "^22.1.0",
+    "eslint": "^9.8.0",
+    "eslint-config-preact": "^1.4.0",
+    "terser": "^5.31.5",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.0",
+    "vite-plugin-pwa": "^0.20.1"
   }
 }

public/robots.txt

@@ -0,0 +1,10 @@
+User-agent: *
+Disallow: /404
+Disallow: /manifest.webmanifest
+Disallow: /cdn-cgi/
+Disallow: /pwa/
+Disallow: /images/
+Disallow: /fonts/
+
+User-agent: Yandex
+Disallow: /?*server

src/classes/AppFetch.ts

@@ -10,34 +10,29 @@ import { ApiErrorResponse, ApiResponse } from "../interfaces/ApiResponse";
 import { ServerNotificationMap } from "../lib/notificationMap";
 
 export class AppFetch {
-    private static fetch<T extends {}>(options: { url: string, method: "POST" | "PUT" | "GET", withCredentials: boolean, body?: unknown }) {
-        const headers: HeadersInit = {
-            'Content-Type': 'application/json',
-        }
-
-        if (options.withCredentials) {
-            headers["Authorization"] = `Bearer ${ProfileManager.profile.value?.token}`
-        }
-
+    private static fetch<T extends {}>(options: { url: string, method: "POST" | "PUT" | "GET", body?: unknown }) {
         return fetch(config.url.api + options.url, {
+            credentials: 'include',
             method: options.method,
-            headers: options.method === "GET" ? undefined : headers,
-            body: options.body ? JSON.stringify(options.body) : undefined
+            body: options.body ? JSON.stringify(options.body) : undefined,
+            headers: options.method === "GET" ? undefined : {
+                'Content-Type': 'application/json'
+            }
         })
             .then(res => res.json() as Promise<T | ApiErrorResponse>)
-            .then(AppFetch.checkForErrors<T>)
+            .then(AppFetch.checkForErrors<T>);
     }
 
-    static async post<T extends {}>(url: string, body: unknown, withCredentials: boolean = false) {
-        return AppFetch.fetch<T>({ url, method: "POST", withCredentials, body })
+    static async post<T extends {}>(url: string, body: unknown) {
+        return AppFetch.fetch<T>({ url, method: "POST", body })
     }
 
-    static async put<T extends {}>(url: string, body: unknown, withCredentials: boolean = false) {
-        return AppFetch.fetch<T>({ url, method: "PUT", withCredentials, body })
+    static async put<T extends {}>(url: string, body: unknown) {
+        return AppFetch.fetch<T>({ url, method: "PUT", body })
     }
 
-    static async get<T extends {}>(url: string, withCredentials: boolean = false) {
-        return AppFetch.fetch<T>({ url, method: "GET", withCredentials })
+    static async get<T extends {}>(url: string) {
+        return AppFetch.fetch<T>({ url, method: "GET" })
     }
 
 
@@ -67,7 +62,7 @@ export class AppFetch {
 
     static async pixels() {
         return fetch(config.url.api + "/pixels.png")
-            .then(res => res.arrayBuffer())
+            .then(res => res.blob())
     }
 
 
@@ -88,10 +83,10 @@ export class AppFetch {
     }
 
     static async putPixel(pixel: ApiPixel) {
-        return AppFetch.put<ApiResponse>("/pixels", pixel, true)
+        return AppFetch.put<ApiResponse>("/pixels", pixel)
     }
 
     static async changeTag(tag: string): Promise<ApiResponse> {
-        return AppFetch.post<ApiResponse>(`/users/${ProfileManager.profile.value?.id}/tag`, { tag }, true)
+        return AppFetch.post<ApiResponse>(`/users/${ProfileManager.profile.value?.id}/tag`, { tag })
     }
 }

src/classes/AppImage.ts

@@ -1,7 +1,7 @@
 import { Point } from "@pixi/math";
 import { AppColor } from "./AppColor";
 
-export enum imageFormat {
+export enum ImageFormat {
     RGB = 3,
     RGBA = 4
 }
@@ -11,12 +11,12 @@ export class AppImage {
     private _size!: Point;
 
     constructor(
-        private readonly _raw: ArrayBuffer,
-        private readonly bufferPixelDataSize: imageFormat = imageFormat.RGBA
+        private readonly _raw: Blob,
+        private readonly bufferPixelDataSize: ImageFormat = ImageFormat.RGBA
     ) {}
 
     private convertRGBAtoRGB(DATA_RGBA: Uint8ClampedArray, { x, y }: Point) {
-        const DATA_RGB = new Uint8ClampedArray(x * y * imageFormat.RGB);
+        const DATA_RGB = new Uint8ClampedArray(x * y * ImageFormat.RGB);
         for(let i = 0, j = 0; i < DATA_RGBA.length; i += 4, j += 3) {
             DATA_RGB[j] = DATA_RGBA[i];
             DATA_RGB[j + 1] = DATA_RGBA[i + 1];
@@ -27,7 +27,7 @@ export class AppImage {
     }
 
     async process() {
-        const bitmap = await createImageBitmap(new Blob([ this._raw ]));
+        const bitmap = await createImageBitmap(this._raw);
         const canvas = document.createElement('canvas');
         const ctx = canvas.getContext('2d')!;
 
@@ -38,7 +38,7 @@ export class AppImage {
         const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
 
         this._size = new Point(bitmap.width, bitmap.height);
-        this._buffer = this.bufferPixelDataSize === imageFormat.RGB
+        this._buffer = this.bufferPixelDataSize === ImageFormat.RGB
             ? this.convertRGBAtoRGB(imageData, this._size)
             : imageData;
 

src/components/Bar/BottomBar/BottomBar.module.css

@@ -1,21 +1,20 @@
 .wrapper {
-    position: absolute;
-    left: 50%;
-    bottom: 10px;
-    transform: translateX(-50%);
+    margin-top: 12px;
     display: grid;
     grid-template-columns: 1fr auto;
     /* grid-template-rows: 1fr 1fr; */
     grid-template-areas:
         "Cooldown Coordinates"
         "Palette Palette";
     align-items: end;
-    /* justify-items: end; */
+    align-self: center;
 
     pointer-events: none;
     gap: 5px;
 }
 
+
+
 .cooldown {
     grid-area: Cooldown;
     justify-self: start;
@@ -34,27 +33,15 @@
     grid-area: Palette;
 }
 
-.notifications {
-    /* position: absolute; */
-    position: absolute;
-    right: 10px;
-    bottom: 10px;
 
-}
 
 @media screen and (max-width: 600px) {
     .wrapper {
-        left: 0;
-        bottom: 0;
-        transform: none;
-        right: 0;
+        align-self: stretch;
     }
 
-    .coordinates {
+    .coordinates, .cooldown {
         margin-right: 10px;
     }
 
-    .cooldown {
-        margin-left: 10px;
-    }
 }

src/components/Bar/BottomBar/BottomBar.tsx

@@ -11,8 +11,8 @@ export function BottomBar() {
     return (
         <div className={styles.wrapper}>
             <div className={styles.coordinates}>
-                <PixelInfo />
                 <Coordinates />
+                <PixelInfo />
             </div>
 
             <div className={styles.cooldown}>

src/components/Bar/Sidebar/Sidebar.module.css

@@ -1,23 +1,20 @@
 .sidebar {
-    position: absolute;
-    right: 10px;
-    top: 10px;
     display: flex;
     flex-direction: column;
     gap: 10px;
     align-items: flex-end;
-    /* max-width: 100%; */
-    /* width: 100%; */
     pointer-events: none;
+    flex: 1 1 auto;
+    overflow-y: auto;
+    overflow-x: hidden;
+    border-radius: 8px;
+    align-self: flex-end;
 }
 
 @media screen and (max-width: 600px) {
     .sidebar {
         position: static;
-        /* width: 100%; */
         box-sizing: border-box;
         padding: 10px;
-        /* margin-right: 10px; */
-        /* max-width: calc(100% - 20px); */
     }
 }

src/components/Bar/Sidebar/Sidebar.tsx

@@ -3,13 +3,16 @@ import styles from "./Sidebar.module.css";
 import { Profile } from "../../Windows/Profile/Profile";
 import { NotificationList } from "../../Notifications/NotificationList/NotificationList";
 import { Overlay } from "../../Windows/Overlay/Overlay";
-
+import { Snapshot } from "../../Windows/Snapshot/Snapshot";
 
 export function Sidebar() {
-    return <div className={styles.sidebar}>
-        <Profile />
-        <Tags />
-        <Overlay />
-        <NotificationList />
-    </div>
+	return (
+		<div className={styles.sidebar}>
+			<Profile />
+			<Tags />
+			<Overlay />
+			<Snapshot />
+			<NotificationList />
+		</div>
+	);
 }