vimp-engine 0.7.2 → 0.8.0

package/src/client/components/model/CanvasManager.js

@@ -0,0 +1,319 @@
+import Publisher from '../../../lib/Publisher.js';
+import { lerp, clamp } from '../../../lib/math.js';
+
+// Singleton CanvasManagerModel
+
+let canvasManagerModel;
+
+export default class CanvasManagerModel {
+  constructor(data) {
+    if (canvasManagerModel) {
+      return canvasManagerModel;
+    }
+
+    canvasManagerModel = this;
+
+    this._data = {};
+    this._coordX = 0; // текущая координата X игрока
+    this._coordY = 0; // текущая координата Y игрока
+
+    // текущие смещения камеры (для плавности)
+    this._camOffsetX = 0;
+    this._camOffsetY = 0;
+    this._camZoomModifier = 1;
+
+    // параметры тряски камеры
+    this._shakeIntensity = 0;
+    this._shakeDuration = 0;
+    this._shakeTotalDuration = 0;
+    this._lastShakeTime = 0;
+
+    // средние значения вектора движения и скорости
+    this._avgDx = 0;
+    this._avgDy = 0;
+    this._avgSpeed = 0;
+
+    // ширина экрана, при которой масштаб игры = 1.0 * baseScale
+    // если экран меньше этого значения,
+    // картинка canvas будет пропорционально уменьшаться
+    this._designWidth = 1920; // Full HD
+
+    // настройки камеры из конфига
+    const camConfig = data.dynamicCamera || {};
+
+    this._lookAheadFactor = camConfig.lookAheadFactor || 0;
+
+    // dead zone по правилу "0.5 пикселя"
+    const safeFactor = Math.max(this._lookAheadFactor, 1);
+
+    // если lookAheadFactor = 30, deadZone ≈ 0.016
+    // если lookAheadFactor = 0,deadZone = 0.5
+    this._deadZone = 0.5 / safeFactor;
+
+    this._zoomOutFactor = clamp(camConfig.zoomOutFactor ?? 0, 0, 1);
+    this._maxZoomOut = camConfig.maxZoomOut || 1;
+
+    // плавность изменений динамической камеры:
+    this._smoothnessPosition = clamp(camConfig.smoothnessPosition ?? 0.1, 0, 1);
+    this._smoothnessZoom = clamp(camConfig.smoothnessZoom ?? 0.005, 0, 1);
+    this._smoothnessVelocity = clamp(camConfig.smoothnessVelocity ?? 0.1, 0, 1);
+
+    const canvases = data.canvases || {};
+
+    for (const canvasName in canvases) {
+      if (Object.hasOwn(canvases, canvasName)) {
+        const canvasData = canvases[canvasName];
+        const [w, h] = (canvasData.baseScale || '1:1')
+          .split(':')
+          .map(value => Number(value));
+        const baseScale = Number((w / h).toFixed(2));
+
+        this._data[canvasName] = {
+          ...canvasData,
+          baseScale,
+          currentScale: baseScale,
+          dynamicCamera: !!canvasData.dynamicCamera,
+          shakeCamera: !!canvasData.shakeCamera,
+        };
+      }
+    }
+
+    this.publisher = new Publisher();
+  }
+
+  // рассчитывает размеры элементов с учетом пропорций
+  resize(data) {
+    const screenWidth = data.width;
+    const screenHeight = data.height;
+
+    // нулевой (свёрнутая вкладка/окно) resize уводил бы currentScale в 0, а
+    // renderer — в размер 0x0; scale сам не пересчитается до следующего
+    // настоящего resize, и полотно останется пустым
+    if (
+      !Number.isFinite(screenWidth) ||
+      screenWidth <= 0 ||
+      !Number.isFinite(screenHeight) ||
+      screenHeight <= 0
+    ) {
+      return;
+    }
+
+    for (const canvasName in this._data) {
+      if (Object.hasOwn(this._data, canvasName)) {
+        const { fixSize, aspectRatio, baseScale } = this._data[canvasName];
+        let width, height;
+
+        // если есть фиксированный размер полотна
+        if (fixSize) {
+          const parts = fixSize.split(':');
+
+          width = +parts[0];
+          height = +parts[1] || +parts[0];
+        } else {
+          // если задано соотношение сторон
+          if (aspectRatio) {
+            const parts = aspectRatio.split(':');
+
+            // строку в число
+            const widthRatio = parseInt(parts[0], 10);
+            const heightRatio = parseInt(parts[1], 10);
+
+            width = screenWidth;
+            height = (width / widthRatio) * heightRatio;
+
+            // если фактическая высота больше полученной,
+            // то вычисления производятся относительно высоты
+            if (height > screenHeight) {
+              height = screenHeight;
+              width = (height / heightRatio) * widthRatio;
+            }
+          } else {
+            width = screenWidth;
+            height = screenHeight;
+          }
+
+          width = +width.toFixed();
+          height = +height.toFixed();
+
+          this._data[canvasName].currentScale =
+            (width / this._designWidth) * baseScale;
+        }
+
+        this.publisher.emit('resize', {
+          id: canvasName,
+          sizes: {
+            width: Math.max(1, width),
+            height: Math.max(1, height),
+          },
+        });
+      }
+    }
+
+    this.updateCoords(this._coordX, this._coordY);
+  }
+
+  // рассчитывает текущее смещение тряски
+  _calculateShakeOffset(shakeData) {
+    // обработка новых данных о тряске
+    if (typeof shakeData === 'string') {
+      const [intensity, duration] = shakeData.split(':').map(Number);
+      this._shakeIntensity = intensity;
+      this._shakeTotalDuration = duration;
+      this._shakeDuration = duration;
+      this._lastShakeTime = Date.now();
+    }
+
+    let shakeX = 0;
+    let shakeY = 0;
+
+    if (this._shakeDuration > 0) {
+      const now = Date.now();
+      const dt = now - (this._lastShakeTime || now);
+      this._lastShakeTime = now;
+
+      // уменьшение длительности
+      this._shakeDuration -= dt;
+
+      if (this._shakeDuration > 0) {
+        // расчет затухания
+        const currentIntensity =
+          this._shakeIntensity *
+          (this._shakeDuration / this._shakeTotalDuration);
+
+        // случайное смещение
+        shakeX = (Math.random() - 0.5) * 2 * currentIntensity;
+        shakeY = (Math.random() - 0.5) * 2 * currentIntensity;
+      } else {
+        this._shakeDuration = 0;
+      }
+    } else {
+      // обновление времени для следующего старта
+      this._lastShakeTime = Date.now();
+    }
+
+    return { shakeX, shakeY };
+  }
+
+  // вычисляет координаты для отображения
+  updateCoords(x, y, cameraReset, shakeData) {
+    // если сброс динамических данных камеры (телепорт/респаун/смена игрока)
+    if (cameraReset) {
+      this._coordX = x;
+      this._coordY = y;
+
+      // сброс инерции камеры (смещение и зум)
+      this._camOffsetX = 0;
+      this._camOffsetY = 0;
+      this._camZoomModifier = 1;
+
+      // сброс накопителя сглаживания скорости
+      this._avgDx = 0;
+      this._avgDy = 0;
+      this._avgSpeed = 0;
+
+      // сброс эффекта тряски
+      this._shakeDuration = 0;
+    }
+
+    // расчет смещения тряски
+    const { shakeX, shakeY } = this._calculateShakeOffset(shakeData);
+
+    // расчет движения
+    // если был сброс, dx/dy будут равны 0 (т.к. только что обновился _coordX/Y)
+    let dx = x - this._coordX;
+    let dy = y - this._coordY;
+
+    // скорость движения
+    let speed = Math.sqrt(dx * dx + dy * dy);
+
+    // если движение медленнее порога dead zone
+    if (speed < this._deadZone) {
+      dx = 0;
+      dy = 0;
+      speed = 0;
+    }
+
+    // фильтрация шума скорости (позволяет игнорировать сетевой джиттер)
+    this._avgDx = lerp(this._avgDx, dx, this._smoothnessVelocity);
+    this._avgDy = lerp(this._avgDy, dy, this._smoothnessVelocity);
+    this._avgSpeed = lerp(this._avgSpeed, speed, this._smoothnessVelocity);
+
+    // сдвиг камеры в сторону движения
+    const targetOffsetX = this._avgDx * this._lookAheadFactor;
+    const targetOffsetY = this._avgDy * this._lookAheadFactor;
+
+    // зум: чем быстрее, тем меньше масштаб (отдаление)
+    const targetZoomModifier = Math.max(
+      this._maxZoomOut,
+      1 - this._avgSpeed * this._zoomOutFactor,
+    );
+
+    // сглаживание движения камеры
+    this._camOffsetX = lerp(
+      this._camOffsetX,
+      targetOffsetX,
+      this._smoothnessPosition,
+    );
+    this._camOffsetY = lerp(
+      this._camOffsetY,
+      targetOffsetY,
+      this._smoothnessPosition,
+    );
+
+    // сглаживание зума
+    this._camZoomModifier = lerp(
+      this._camZoomModifier,
+      targetZoomModifier,
+      this._smoothnessZoom,
+    );
+
+    this._coordX = x;
+    this._coordY = y;
+
+    for (const canvasName in this._data) {
+      if (Object.hasOwn(this._data, canvasName)) {
+        const { dynamicCamera, currentScale, shakeCamera } =
+          this._data[canvasName];
+
+        // если для полотна включена динамическая камера
+        if (dynamicCamera) {
+          let camX = x + this._camOffsetX;
+          let camY = y + this._camOffsetY;
+
+          // добавление эффекта тряски
+          if (shakeCamera) {
+            camX += shakeX;
+            camY += shakeY;
+          }
+
+          const finalScale = currentScale * this._camZoomModifier;
+
+          this.publisher.emit('updateCoords', {
+            id: canvasName,
+            coords: {
+              x: camX,
+              y: camY,
+            },
+            scale: finalScale,
+          });
+        } else {
+          // если динамическая камера выключена
+          let finalX = x;
+          let finalY = y;
+
+          // добавление эффекта тряски
+          if (shakeCamera) {
+            finalX += shakeX;
+            finalY += shakeY;
+          }
+
+          this.publisher.emit('updateCoords', {
+            id: canvasName,
+            coords: { x: finalX, y: finalY },
+            scale: currentScale,
+          });
+        }
+      }
+    }
+  }
+}

package/src/client/components/model/Chat.js

@@ -0,0 +1,119 @@
+import Publisher from '../../../lib/Publisher.js';
+
+// Singleton ChatModel
+
+let chatModel;
+
+export default class ChatModel {
+  constructor(data) {
+    if (chatModel) {
+      return chatModel;
+    }
+
+    chatModel = this;
+
+    this._listLimit = data.listLimit || 5;
+    this._lineTime = data.lineTime || 15000;
+    this._cacheMin = data.cacheMin || 200;
+    this._cacheMax = data.cacheMax || 300;
+    this._messages = data.messages || {};
+
+    this._formatMessage = data.formatMessage;
+    this._sanitizeMessage = data.sanitizeMessage;
+
+    this._cache = []; // хранилище сообщений
+    this._list = []; // активный чат-лист
+    this._counter = 0; // id для сообщения чат-листа
+
+    this.publisher = new Publisher();
+  }
+
+  // открывает cmd
+  open() {
+    this.publisher.emit('open');
+    this.publisher.emit('mode', { name: 'chat', status: 'opened' });
+  }
+
+  // закрывает cmd
+  close(success) {
+    this.publisher.emit('close', success ? true : false);
+    this.publisher.emit('mode', { name: 'chat', status: 'closed' });
+  }
+
+  // отправляет сообщение на сервер
+  sendMessage(message) {
+    message = this._sanitizeMessage(message);
+
+    if (message) {
+      this.publisher.emit('socket', message);
+    }
+  }
+
+  // обновляет чат-лист. Данные могут быть 2-х видов:
+  // - в виде строки '<группа шаблонов>:<номер шаблона>:<параметры>'
+  // - в виде массива [<текст сообщения>,<имя автора>,<тип для класса>]
+  updateChat(arr) {
+    // если данные - строка
+    if (typeof arr === 'string') {
+      arr = arr.split(':');
+
+      // если сообщений не найдено
+      if (!this._messages[arr[0]] || !this._messages[arr[0]][arr[1]]) {
+        return;
+      }
+
+      let message = this._messages[arr[0]][arr[1]];
+      const params = arr[2];
+
+      // если есть параметры
+      if (params) {
+        message = this._formatMessage(message, params.split(','));
+      }
+
+      arr = [message];
+    }
+
+    // если количество сообщений в хранилище достигло предела -
+    // удалить лишние
+    if (this._cache.length === this._cacheMax) {
+      this._cache.splice(0, this._cache.length - this._cacheMin);
+    }
+
+    // добавить объект сообщения в хранилище
+    this._cache.push(arr);
+
+    // если количество выделенных линий исчерпано -
+    // удалить линию принудительно
+    if (this._list.length === this._listLimit) {
+      this.removeFromList(true);
+    }
+
+    this.publisher.emit('newLine', {
+      id: this._counter,
+      message: arr,
+    });
+
+    this.publisher.emit('newTimer', {
+      id: this._counter,
+      time: this._lineTime,
+    });
+
+    this._counter += 1;
+  }
+
+  // добавляет объект в чат-лист
+  addToList(data) {
+    this._list.push(data);
+  }
+
+  // удаляет объект из чат-листа
+  removeFromList(sync) {
+    const data = this._list.shift();
+
+    this.publisher.emit('oldLine', data.messageId);
+
+    if (sync) {
+      this.publisher.emit('oldTimer', data.timerId);
+    }
+  }
+}

package/src/client/components/model/Controls.js

@@ -0,0 +1,120 @@
+import Publisher from '../../../lib/Publisher.js';
+
+// Singleton ControlsModel
+
+let controlsModel;
+
+export default class ControlsModel {
+  constructor(data) {
+    if (controlsModel) {
+      return controlsModel;
+    }
+
+    controlsModel = this;
+
+    this._keySetList = data.keySetList;
+    this._modes = data.modes;
+    this._cmds = data.cmds;
+
+    this._currentKeySet = this._keySetList[0]; // текущий набор клавиш
+    this._currentModes = {}; // статусы режимов
+    this._pressedKeys = {}; // объект для хранения состояния зажатых клавиш
+    this._areKeysEnabled = false; // статус возможности нажатия клавиш
+
+    this.publisher = new Publisher();
+  }
+
+  // добавляет команду
+  addKey(event) {
+    const keyCode = event.keyCode;
+    const mode = this._modes[keyCode];
+    const cmd = this._cmds[keyCode];
+
+    // если запрет на ввод клавиш,
+    // то доступны только stat и chat
+    if (
+      this._areKeysEnabled === false &&
+      mode !== 'stat' &&
+      mode !== 'chat' &&
+      !this._currentModes.chat
+    ) {
+      return;
+    }
+
+    // если чат активен
+    if (this._currentModes.chat) {
+      if (cmd) {
+        this.publisher.emit('chat', cmd);
+      }
+
+      if (mode === 'stat') {
+        event.preventDefault();
+        this.publisher.emit('mode', mode);
+      }
+    } else {
+      // если клавиша ещё не зажата
+      if (!this._pressedKeys[keyCode]) {
+        const name = this._currentKeySet[keyCode];
+
+        if (name) {
+          this._pressedKeys[keyCode] = true;
+          this.publisher.emit('socket', `down:${name}`);
+        }
+      }
+
+      if (this._currentModes.vote) {
+        this.publisher.emit('vote', keyCode);
+      }
+
+      if (this._currentModes.stat) {
+        event.preventDefault();
+      }
+
+      if (mode) {
+        event.preventDefault();
+        this.publisher.emit('mode', mode);
+      }
+    }
+  }
+
+  // удаляет команду
+  removeKey(event) {
+    const keyCode = event.keyCode;
+    const mode = this._modes[keyCode];
+
+    // если клавиша была зажата
+    if (this._pressedKeys[keyCode]) {
+      const name = this._currentKeySet[keyCode];
+
+      if (name) {
+        this._pressedKeys[keyCode] = false;
+        this.publisher.emit('socket', `up:${name}`);
+      }
+    }
+
+    if (this._currentModes.stat && mode === 'stat') {
+      this.publisher.emit('stat');
+    }
+  }
+
+  // меняет состояние режима
+  setMode(mode, status) {
+    if (status === 'opened') {
+      this._currentModes[mode] = true;
+    } else if (status === 'closed') {
+      this._currentModes[mode] = false;
+    }
+  }
+
+  // меняет набор клавиш
+  changeKeySet(key) {
+    this._currentKeySet = this._keySetList[key];
+    this._pressedKeys = {};
+  }
+
+  // задаёт возможность нажатия клавиш
+  // (stat и chat доступны при любом значении)
+  setKeysEnabled(isEnabled) {
+    this._areKeysEnabled = isEnabled;
+  }
+}