some clean-up

src/client/canvas.ts

@@ -1,7 +1,7 @@
 import { convertHex } from '../common/convert';
 import { clamp, debounce } from '../common/helper';
 import { CanvasRecord, Placement } from '../common/types/canvas';
-import { IcyNetUser } from '../server/types/user';
+import { IcyNetUser } from '../common/types/user';
 import { Picker } from './picker';
 import { $ } from './utils/dom';
 

src/client/picker.ts

@@ -1,5 +1,5 @@
 import { hexToString, storeHex } from '../common/convert';
-import { IcyNetUser } from '../server/types/user';
+import { IcyNetUser } from '../common/types/user';
 import { $ } from './utils/dom';
 
 export class Picker {
@@ -72,7 +72,7 @@ export class Picker {
     });
 
     this._pickbtn.addEventListener('click', () => {
-      if (this._pickerColor) {
+      if (this._pickerColor !== null) {
         this._setColor(this._pickerColor);
         this._storeColor(this._pickerColor);
       }
@@ -104,17 +104,17 @@ export class Picker {
       this._pickbtn.classList.add('pickable');
       this._pickbtn.style.setProperty('--pick-color', hexToString(pickColor));
     } else if (this._pickerColor !== null && pickColor === null) {
-      console.log('aa');
       this._pickbtn.setAttribute('disabled', 'true');
       this._pickbtn.classList.remove('pickable');
       this._pickbtn.style.removeProperty('--pick-color');
     }
+
     this._pickerColor = pickColor;
   }
 
   private _setColor(color: number): void {
-    this._color = color;
+    this._color = color || 0;
-    this._colorInput.value = hexToString(color);
+    this._colorInput.value = hexToString(color || 0);
   }
 
   private _drawColorList(): void {

src/client/scss/index.scss

@@ -119,7 +119,7 @@ body {
   text-align: center;
   background-color: rgba(221, 221, 221, 0.404);
 
-  *.btn, input, a {
+  .btn, input, a {
     pointer-events: all;
   }
 

src/server/express.d.ts

@@ -1,9 +0,0 @@
-import { IcyNetUser } from './types/user';
-
-declare global {
-  namespace Express {
-    export interface Request {
-      user: IcyNetUser;
-    }
-  }
-}

src/server/index.ts

@@ -8,11 +8,12 @@ import connectRedis from 'connect-redis';
 import http from 'http';
 import { join } from 'path';
 import { Server, Socket } from 'socket.io';
-import { IcyNetUser } from './types/user';
+import { IcyNetUser } from '../common/types/user';
 import { Canvas } from './object/canvas';
 import { CanvasRecord, Placement } from '../common/types/canvas';
 
 import { config } from './config';
+import { Game } from './object/game';
 
 const RedisStore = connectRedis(session);
 const redisClient = config.redis?.enabled ? redis.createClient() : undefined;
@@ -109,84 +110,9 @@ app.use(express.static(join(__dirname, '..', 'public')));
 
 ///
 
-const canvas = new Canvas(config.game.boardSize);
+const game = new Game(io, sessionMiddleware);
-const connections: Socket[] = [];
-const changes: CanvasRecord[] = [];
 
-const dummyUser: IcyNetUser = {
+game.initialize().then(() =>
-  id: 0,
-  username: 'placer',
-  display_name: 'placer',
-  uuid: 'placer',
-  accessToken: 'placer',
-};
-
-io.use((socket, next) =>
-  sessionMiddleware(socket.request as any, {} as any, next as any),
-);
-io.on('connection', (socket) => {
-  const session = (socket.request as any).session;
-  const user =
-    process.env.SKIP_LOGIN === 'true'
-      ? dummyUser
-      : (session?.passport?.user as IcyNetUser);
-
-  connections.push(socket);
-
-  socket.emit(
-    'me',
-    user
-      ? {
-          username: user.username,
-          display_name: user.display_name,
-        }
-      : null,
-  );
-
-  socket.emit('plane', {
-    size: canvas.size,
-    canvas: Object.values(canvas.getFullPlane()),
-  });
-
-  socket.on('color', ({ c, x, y, t }: Placement) => {
-    if (!user || c > 0xffffff || c < 0 || c === null) {
-      return;
-    }
-
-    canvas.setPixelAt(c, x, y, user.username);
-    socket.emit('colorack', { c, x, y, t });
-  });
-
-  socket.on('getplacer', ({ x, y, reqt }) => {
-    canvas.history
-      .getPlacerAt(x, y)
-      .then((placer) => {
-        if (placer) {
-          socket.emit('placerat', { ...placer, reqt });
-        }
-      })
-      .catch((e) => console.error(e));
-  });
-
-  socket.on('disconnect', () => {
-    connections.splice(connections.indexOf(socket), 1);
-  });
-});
-
-canvas.registerChangeHandler((record) => {
-  changes.push(record);
-});
-
-setInterval(() => {
-  if (changes.length && connections.length) {
-    connections.forEach((socket) => socket.emit('changes', changes));
-    changes.length = 0;
-  }
-}, 1000);
-
-///
-
-canvas.initialize().then(() =>
   server.listen(config.server.port, config.server.bind, () => {
     console.log(`Listening at http://localhost:${config.server.port}/`);
   }),

src/server/object/canvas.ts

@@ -2,13 +2,19 @@ import { storeHex, to1D } from '../../common/convert';
 import { CanvasRecord } from '../../common/types/canvas';
 import { History } from './history';
 import { Imager } from './imager';
+import { config } from '../config';
 
 export class Canvas {
   private _fn?: (change: CanvasRecord) => void;
   private _canvas!: Uint32Array;
-  private _imager = new Imager(this.size);
+  private _imager = new Imager(
+    this.size,
+    config.persistence?.filename,
+    config.persistence?.debounce,
+    config.persistence?.forcedInterval,
+  );
 
-  public history = new History();
+  public history = new History(config.persistence?.placeStorage);
 
   constructor(public size = 1000) {}
 

src/server/object/game.ts

@@ -0,0 +1,93 @@
+import { Server, Socket } from 'socket.io';
+import { Canvas } from './canvas';
+import { config } from '../config';
+import { RequestHandler } from 'express';
+import { CanvasRecord, Placement } from '../../common/types/canvas';
+import { IcyNetUser } from '../../common/types/user';
+
+const PLACEHOLDER_USER: IcyNetUser = {
+  id: 0,
+  username: 'placer',
+  display_name: 'placer',
+  uuid: 'placer',
+  accessToken: 'placer',
+};
+
+export class Game {
+  private _canvas = new Canvas(config.game.boardSize);
+  private _connections: Socket[] = [];
+  private _changes: CanvasRecord[] = [];
+  private _interval: any;
+
+  constructor(private io: Server, private session: RequestHandler) {}
+
+  async initialize() {
+    await this._canvas.initialize();
+
+    this.io.use((socket, next) =>
+      this.session(socket.request as any, {} as any, next as any),
+    );
+
+    this.io.on('connection', (socket) => {
+      const session = (socket.request as any).session;
+      const user =
+        process.env.SKIP_LOGIN === 'true'
+          ? PLACEHOLDER_USER
+          : (session?.passport?.user as IcyNetUser);
+
+      this._connections.push(socket);
+
+      socket.emit(
+        'me',
+        user
+          ? {
+              username: user.username,
+              display_name: user.display_name,
+            }
+          : null,
+      );
+
+      socket.emit('plane', {
+        size: this._canvas.size,
+        canvas: Object.values(this._canvas.getFullPlane()),
+      });
+
+      socket.on('color', ({ c, x, y, t }: Placement) => {
+        if (!user || c > 0xffffff || c < 0 || c === null) {
+          return;
+        }
+
+        this._canvas.setPixelAt(c, x, y, user.username);
+        socket.emit('colorack', { c, x, y, t });
+      });
+
+      socket.on('getplacer', ({ x, y, reqt }) => {
+        this._canvas.history
+          .getPlacerAt(x, y)
+          .then((placer) => {
+            if (placer) {
+              socket.emit('placerat', { ...placer, reqt });
+            }
+          })
+          .catch((e) => console.error(e));
+      });
+
+      socket.on('disconnect', () => {
+        this._connections.splice(this._connections.indexOf(socket), 1);
+      });
+    });
+
+    this._canvas.registerChangeHandler((record) => {
+      this._changes.push(record);
+    });
+
+    this._interval = setInterval(() => {
+      if (this._changes.length && this._connections.length) {
+        this._connections.forEach((socket) =>
+          socket.emit('changes', this._changes),
+        );
+        this._changes.length = 0;
+      }
+    }, 1000);
+  }
+}

src/server/object/history.ts

@@ -19,7 +19,7 @@ export class History {
   }
 
   async insert(record: CanvasRecord): Promise<void> {
-    const color = record.color ? record.color : 0;
+    const color = record.color || 0;
     await this.db.run(
       `INSERT INTO Placement (user, x, y, ts, color) VALUES (?,?,?,?,?)`,
       record.user,

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "include": [
-    "src/server/**/*.ts"
+    "src/server/**/*.ts",
+    "src/common/types/user.ts"
   ],
   "exclude": [
     "src/client/**/*.ts"