feat(viewport): add viewport module

Author: Valentin Vetter

engine/modules/viewport/pom.xml

@@ -0,0 +1,30 @@
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+	<modelVersion>4.0.0</modelVersion>
+
+    <parent>
+        <groupId>com.codingame</groupId>
+        <artifactId>gameengine</artifactId>
+        <version>master-SNAPSHOT</version>
+        <relativePath>../../../pom.xml</relativePath>
+	</parent>
+
+    <groupId>com.codingame.gameengine</groupId>
+    <artifactId>module-viewport</artifactId>
+	<name>CodinGame Game Engine Viewport Module</name>
+	<description>A module to display a zoomable viewport for the CodinGame engine toolkit.</description>
+
+	<dependencies>
+		<dependency>
+			<groupId>com.codingame.gameengine</groupId>
+			<artifactId>core</artifactId>
+			<version>${project.version}</version>
+		</dependency>
+		<dependency>
+            <groupId>com.codingame.gameengine</groupId>
+            <artifactId>module-entities</artifactId>
+            <version>${project.version}</version>
+        </dependency>
+	</dependencies>
+	
+</project>

engine/modules/viewport/src/main/java/com/codingame/gameengine/module/viewport/ViewportModule.java

@@ -0,0 +1,67 @@
+package com.codingame.gameengine.module.viewport;
+
+import java.util.HashSet;
+import java.util.Set;
+
+import com.codingame.gameengine.core.AbstractPlayer;
+import com.codingame.gameengine.core.GameManager;
+import com.codingame.gameengine.core.Module;
+import com.codingame.gameengine.module.entities.GraphicEntityModule;
+import com.google.inject.Inject;
+import com.google.inject.Singleton;
+
+/**
+ * The ViewportModule allows you to create a zoomable/draggable container.
+ * 
+ * @see https://davidfig.github.io/pixi-viewport/jsdoc/
+ * 
+ */
+@Singleton
+public class ViewportModule implements Module {
+
+    GameManager<AbstractPlayer> gameManager;
+    @Inject GraphicEntityModule entityModule;
+    Set<Integer> registered = new HashSet<>();
+    Set<Integer> newEntityIds = new HashSet<>();
+
+    @Inject
+    ViewportModule(GameManager<AbstractPlayer> gameManager) {
+        this.gameManager = gameManager;
+        gameManager.registerModule(this);
+    }
+
+    @Override
+    public void onGameInit() {
+        sendFrameData();
+    }
+
+    @Override
+    public void onAfterGameTurn() {
+        sendFrameData();
+    }
+
+    @Override
+    public void onAfterOnEnd() {
+    }
+
+    private void sendFrameData() {
+        Object[] data = { newEntityIds };
+
+        gameManager.setViewData("viewport", data);
+
+        newEntityIds.clear();
+    }
+
+    /**
+     * Makes the Entity with the given ID a Viewport
+     * 
+     * @param entityId
+     */
+    public void createViewport(int entityId) {
+        if (!registered.contains(entityId)) {
+            newEntityIds.add(entityId);
+            registered.add(entityId);
+        }
+    }
+
+}

engine/modules/viewport/src/main/resources/view/viewport-module/ViewportModule.js

@@ -0,0 +1,108 @@
+import { HEIGHT, WIDTH } from '../core/constants.js'
+import { getRenderer } from '../core/rendering.js'
+import { api as entityModule } from '../entity-module/GraphicEntityModule.js'
+import vp from './lib/viewport.es.js'
+
+export class ViewportModule {
+
+  static get name() {
+    return 'viewport'
+  }
+
+  entityIds = []
+
+  /**
+   * Called when data is received.
+   * Handles data for the given frame. Returns data that will be sent as parameter to updateScene.
+   * @param frameInfo information about the current frame.
+   * @param frameData data that has been sent from the Java module.
+   */
+  handleFrameData (frameInfo, frameData) {
+    // Handle your data here
+    const [newEntityIds] = frameData
+
+    this.entityIds = [...this.entityIds, ...newEntityIds]
+
+    // Return what is necessary to your module
+    return { frameInfo, frameData }
+  }
+
+  /**
+   * Called when the viewer needs to be rerendered (init phase, resized viewer).
+   * @param container a PIXI Container. Add your elements to this object.
+   * @param canvasData canvas data containing width and height.
+   */
+  reinitScene (container, canvasData) {
+    if (this.vp == null) {
+      this.vp = vp()
+    }
+
+    this.entityIds.forEach(entityId => {
+      this._initViewPort(entityId);
+    })
+  }
+  
+  _initViewPort(entityId) {
+    const entity = entityModule.entities.get(entityId)
+
+    const viewport = new this.vp.Viewport({
+      screenWidth: WIDTH,
+      screenHeight: HEIGHT,
+      worldWidth: WIDTH,
+      worldHeight: HEIGHT,
+
+      interaction: getRenderer().plugins.interaction, // the interaction module is important for wheel to work properly when renderer.view is placed or scaled,
+      divWheel: getRenderer().view,
+      passiveWheel: false,
+      stopPropagation: true
+    })
+
+    viewport
+      .drag()
+      .wheel()
+
+    viewport.fitWorld()
+    viewport.interactiveChildren = false
+    Object.defineProperty(viewport, 'cursor', {
+      get: () => viewport.input.isMouseDown ? 'grabbing' : 'grab'
+    })
+
+    entity.container.removeChildren()
+    viewport.addChild(entity.graphics)
+    const parent = entity.container.parent
+    if (parent) {
+      parent.removeChild(entity.container)
+    }
+    entity.container = viewport
+    if (parent) {
+      parent.addChild(entity.container)
+    }
+  }
+
+  /**
+   * Called when global data is received. Should only be called on init.
+   * @param players information about players, such as avatar, name, color..
+   * @param globalData data that has been sent from the Java module.
+   */
+  handleGlobalData (players, globalData) {
+    this.globalData = globalData
+  }
+
+  /**
+   * Called when the scene needs an update.
+   * @param previousData data from the previous frame.
+   * @param currentData data of the current frame.
+   * @param progress progress of the frame. 0 <= progress <= 1
+   * @param speed the speed of the viewer, setted up by the user.
+   */
+  updateScene (previousData, currentData, progress, speed) {
+  }
+
+  /**
+   * Called every delta milliseconds.
+   * @param delta time between current and last call. Aproximately 16ms by default.
+   */
+  animateScene (delta) {
+  }
+
+}