✨ ct.camera, UI and game coordinates, and nested rooms

app/data/ct.libs/fittoscreen/CHANGELOGmd

@@ -0,0 +1,5 @@
+# v3.0.0
+
+- Support for the new `ct.camera`.
+- Removed `ct.fittoscreen.manageViewport`.
+- Removed "Expand, manage viewport" mode, as "Expand" replaces it.

app/data/ct.libs/fittoscreen/DOCS.md

@@ -2,10 +2,6 @@
 
 Resizes the canvas immediately.
 
-## `ct.fittoscreen.manageViewport();`
-
-Shifts the viewport so the previous central point stays in the same place. You usually don't need to call it manually. Works only if "Manage the view" option is enabled.
-
 ## `ct.fittoscreen.toggleFullscreen();`
 
 Tries to toggle the fullscreen mode. Errors, if any, will be logged to console. Also, this won't work in the internal ct.js debugger. Instead, test it in your browser.

app/data/ct.libs/fittoscreen/README.md

@@ -1,3 +1,3 @@
-This module allows you to automagically fit your game to screen, either by resizing the whole drawing canvas or by simple scaling.
+This module allows you to automagically fit your game to screen, either by resizing the whole drawing canvas or by simple scaling. See the settings for this module for different scaling methods.
 
-It also gives you functions to enter a real fullscreen mode programmatically.
+It also gives you functions to enter a real fullscreen mode programmatically (see the "Reference" tab).

app/data/ct.libs/fittoscreen/index.js

@@ -1,56 +1,32 @@
 (function (ct) {
     var width,
         height;
-    var oldWidth, oldHeight;
     var canv = ct.pixiApp.view;
-    var manageViewport = function (room) {
-        room = room || ct.room;
-        room.x -= (width - oldWidth) / 2;
-        room.y -= (height - oldHeight) / 2;
-    };
     var resize = function() {
         const {mode} = ct.fittoscreen;
         width = window.innerWidth;
         height = window.innerHeight;
         var kw = width / ct.roomWidth,
-            kh = height / ct.roomHeight,
-            minorWidth = kw > kh;
+            kh = height / ct.roomHeight;
         var k = Math.min(kw, kh);
         if (mode === 'fastScale') {
             canv.style.transform = 'scale(' + k + ')';
             canv.style.position = 'absolute';
             canv.style.left = (width - ct.width) / 2 + 'px';
             canv.style.top = (height - ct.height) / 2 + 'px';
         } else {
-            var {room} = ct;
-            if (!room) {
-                return;
-            }
-            oldWidth = ct.width;
-            oldHeight = ct.height;
             if (mode === 'expandViewport' || mode === 'expand') {
-                for (const bg of ct.types.list.BACKGROUND) {
-                    bg.width = width;
-                    bg.height = height;
-                }
-                ct.viewWidth = width;
-                ct.viewHeight = height;
+                ct.camera.width = width;
+                ct.camera.height = height;
             }
             if (mode !== 'scaleFit') {
                 ct.pixiApp.renderer.resize(width, height);
                 if (mode === 'scaleFill') {
-                    if (minorWidth) {
-                        ct.viewWidth = Math.ceil(width / k);
-                    } else {
-                        ct.viewHeight = Math.ceil(height / k);
-                    }
-                    for (const bg of ct.types.list.BACKGROUND) {
-                        bg.width = ct.viewWidth;
-                        bg.height = ct.viewHeight;
-                    }
+                    ct.camera.width = Math.ceil(width / k);
+                    ct.camera.height = Math.ceil(height / k);
                 }
             } else {
-                ct.pixiApp.renderer.resize(Math.floor(ct.viewWidth * k), Math.floor(ct.viewHeight * k));
+                ct.pixiApp.renderer.resize(Math.floor(ct.camera.width * k), Math.floor(ct.camera.height * k));
                 canv.style.position = 'absolute';
                 canv.style.left = (width - ct.width) / 2 + 'px';
                 canv.style.top = (height - ct.height) / 2 + 'px';
@@ -59,9 +35,6 @@
                 ct.pixiApp.stage.scale.x = k;
                 ct.pixiApp.stage.scale.y = k;
             }
-            if (mode === 'expandViewport') {
-                manageViewport(room);
-            }
         }
     };
     var toggleFullscreen = function () {
@@ -96,7 +69,6 @@
     height = window.innerHeight;
     window.addEventListener('resize', resize);
     ct.fittoscreen = resize;
-    ct.fittoscreen.manageViewport = manageViewport;
     ct.fittoscreen.toggleFullscreen = queueFullscreen;
     var $mode = '/*%mode%*/';
     Object.defineProperty(ct.fittoscreen, 'mode', {
@@ -105,11 +77,8 @@
         set(value) {
             if ($mode === 'fastScale' && value !== 'fastScale') {
                 canv.style.transform = '';
-            } else if (value === 'fastScale' || value === 'expand' || value === 'expandViewport') {
-                ct.pixiApp.stage.scale.x = ct.pixiApp.stage.scale.y = 1;
             }
             $mode = value;
-            ct.fittoscreen();
         },
         get() {
             return $mode;

app/data/ct.libs/fittoscreen/module.json

@@ -1,7 +1,7 @@
 {
     "main": {
         "name": "Fit to Screen",
-        "version": "2.0.0",
+        "version": "3.0.0",
         "authors": [{
             "name": "Cosmo Myzrail Gorynych",
             "mail": "[email protected]"
@@ -17,10 +17,6 @@
             "value": "expand",
             "name": "Expand",
             "help": "Expands the viewport, remaining the scale of the copies untouched"
-        }, {
-            "value": "expandViewport",
-            "name": "Expand, manage viewport",
-            "help": "Additionally moves the viewport so that the central point always stays in the center of the drawing canvas."
         }, {
             "value": "scaleFit",
             "name": "Scaling with letterboxing",

app/data/ct.libs/mouse/CHANGELOG.md

@@ -1,3 +1,10 @@
+v3.0.0
+
+* Support the new ct.camera object
+* Introduce `ct.mouse.xui`, `ct.mouse.yui`, as well as `ct.mouse.xuiprev` and `ct.mouse.yuiprev`
+* Remove `ct.mouse.rx` and `ct.mouse.ry
+* Fix broken `Wheel` input method
+
 v2.0.0
 
 * Support the new Actions system

app/data/ct.libs/mouse/DOCS.md

@@ -1,6 +1,6 @@
 ## `ct.mouse.x`, `ct.mouse.y`
 
-Current cursor position at horisontal and vertical axes, in world coordinates.
+Current cursor position at horisontal and vertical axes, in game coordinates.
 
 **Example: make a copy follow the cursor**
 
@@ -9,11 +9,9 @@ this.x = ct.mouse.x;
 this.y = ct.mouse.y;
 ```
 
-# `ct.mouse.rx`, `ct.mouse.ry`
+# `ct.mouse.xui`, `ct.mouse.yui`
 
-A cursor position relative to the current view (or camera), but not relative to the room.
-
-`ct.mouse.rx` is the same as `ct.mouse.x - ct.room.x`.
+A cursor position relative to the current view (UI coordinates), but not relative to the room.
 
 ## `ct.mouse.pressed`
 
@@ -43,7 +41,11 @@ Can be either `true` or `false`. Determines whether there is a cursor inside the
 
 ## `ct.mouse.hovers(copy)`
 
-Returns `true` if the mouse hovers over a given `copy`. This does **not** take scaling and rotation into account, as well as polygonal shapes (as they are hollow).
+Returns `true` if the mouse hovers over a given `copy` in game coordinates. This does **not** take scaling and rotation into account, as well as polygonal shapes (as they are hollow).
+
+## `ct.mouse.hoversUi(copy)`
+
+Returns `true` if the mouse hovers over a given `copy` in UI coordinates. This does **not** take scaling and rotation into account, as well as polygonal shapes (as they are hollow).
 
 ## `ct.mouse.hide()`, `ct.mouse.show()`
 Change the visibility of the mouse cursor.

app/data/ct.libs/mouse/index.js

@@ -17,10 +17,10 @@
     };
 
     ct.mouse = {
-        rx: 0,
-        ry: 0,
         xprev: 0,
         yprev: 0,
+        xuiprev: 0,
+        yuiprev: 0,
         inside: false,
         pressed: false,
         down: false,
@@ -41,11 +41,20 @@
             }
             return false;
         },
-        get x() {
-            return ct.mouse.rx + ct.rooms.current.x;
-        },
-        get y() {
-            return ct.mouse.ry + ct.rooms.current.y;
+        hoversUi(copy) {
+            if (!copy.shape) {
+                return false;
+            }
+            if (copy.shape.type === 'rect') {
+                return ct.u.prect(ct.mouse.xui, ct.mouse.yui, copy);
+            }
+            if (copy.shape.type === 'circle') {
+                return ct.u.pcircle(ct.mouse.xui, ct.mouse.yui, copy);
+            }
+            if (copy.shape.type === 'point') {
+                return ct.mouse.xui === copy.x && ct.mouse.yui === copy.y;
+            }
+            return false;
         },
         hide() {
             ct.pixiApp.renderer.view.style.cursor = 'none';
@@ -57,11 +66,10 @@
 
     ct.mouse.listenerMove = function(e) {
         var rect = ct.pixiApp.view.getBoundingClientRect();
-        ct.mouse.rx = (e.clientX - rect.left) * ct.viewWidth / rect.width;
-        ct.mouse.ry = (e.clientY - rect.top) * ct.viewHeight / rect.height;
-        ct.mouse.x = ct.mouse.rx + ct.rooms.current.x;
-        ct.mouse.y = ct.mouse.ry + ct.rooms.current.y;
-        if (ct.mouse.rx > 0 && ct.mouse.ry > 0 && ct.mouse.ry < ct.viewHeight && ct.mouse.rx < ct.viewWidth) {
+        ct.mouse.xui = (e.clientX - rect.left) * ct.camera.width / rect.width;
+        ct.mouse.yui = (e.clientY - rect.top) * ct.camera.height / rect.height;
+        [ct.mouse.x, ct.mouse.y] = ct.u.uiToGameCoord(ct.mouse.xui, ct.mouse.yui);
+        if (ct.mouse.xui > 0 && ct.mouse.yui > 0 && ct.mouse.yui < ct.camera.height && ct.mouse.xui < ct.camera.width) {
             ct.mouse.inside = true;
         } else {
             ct.mouse.inside = false;
@@ -88,25 +96,28 @@
         e.preventDefault();
     };
     ct.mouse.listenerWheel = function (e) {
-        ct.mouse.wheel = e.wheelDelta || -e.detail < 0? -1 : 1;
-        setKey('wheel', ct.mouse.wheel);
-        e.preventDefault();
+        setKey('Wheel', e.wheelDelta || -e.detail < 0? -1 : 1);
+        //e.preventDefault();
     };
 
     ct.mouse.setupListeners = function () {
         if (document.addEventListener) {
             document.addEventListener('mousemove', ct.mouse.listenerMove, false);
             document.addEventListener('mouseup', ct.mouse.listenerUp, false);
             document.addEventListener('mousedown', ct.mouse.listenerDown, false);
-            document.addEventListener('wheel', ct.mouse.listenerWheel, false);
+            document.addEventListener('wheel', ct.mouse.listenerWheel, false, {
+                passive: false
+            });
             document.addEventListener('contextmenu', ct.mouse.listenerContextMenu, false);
-            document.addEventListener('DOMMouseScroll', ct.mouse.listenerWheel, false);
+            document.addEventListener('DOMMouseScroll', ct.mouse.listenerWheel, {
+                passive: false
+            });
         } else { // IE?
             document.attachEvent('onmousemove', ct.mouse.listenerMove);
             document.attachEvent('onmouseup', ct.mouse.listenerUp);
             document.attachEvent('onmousedown', ct.mouse.listenerDown);
-            document.attachEvent('oncontextmenu', ct.mouse.listenerWheel);
-            document.attachEvent('onmousewheel', ct.mouse.listenerContextMenu);
+            document.attachEvent('onmousewheel', ct.mouse.listenerWheel);
+            document.attachEvent('oncontextmenu', ct.mouse.listenerContextMenu);
         }
     };
 })();

app/data/ct.libs/mouse/injects/afterroomdraw.js

@@ -1,3 +1,6 @@
 ct.mouse.xprev = ct.mouse.x;
 ct.mouse.yprev = ct.mouse.y;
+ct.mouse.xuiprev = ct.mouse.xui;
+ct.mouse.yuiprev = ct.mouse.yui;
 ct.mouse.pressed = ct.mouse.released = false;
+ct.inputs.registry['mouse.Wheel'] = 0;

app/data/ct.libs/mouse/module.json

@@ -1,7 +1,7 @@
 {
     "main": {
         "name": "Mouse Input",
-        "version": "2.1.0",
+        "version": "3.0.0",
         "authors": [{
             "name": "Cosmo Myzrail Gorynych",
             "mail": "[email protected]"

app/data/ct.libs/mouse/types.d.ts

@@ -1,14 +1,14 @@
 declare namespace ct {
     /** A module that tells mouse coordinates and integrates with ct.js' Actions system */
     namespace mouse {
-        /** Current cursor position at horisontal and vertical axes, in world coordinates */
+        /** Current cursor position at horisontal and vertical axes, in game coordinates */
         var x: number;
-        /** Current cursor position at horisontal and vertical axes, in world coordinates */
+        /** Current cursor position at horisontal and vertical axes, in game coordinates */
         var y: number;
-        /** A cursor position relative to the current view (or camera), but not relative to the room. */
-        var rx: number;
-        /** A cursor position relative to the current view (or camera), but not relative to the room. */
-        var ry: number;
+        /** A cursor position in UI coordinates. */
+        var xui: number;
+        /** A cursor position in UI coordinates. */
+        var yui: number;
         /** Can be either `true` or `false`. Determines whether a mouse button was pressed. */
         var pressed: boolean;
         /** Can be either `true` or `false`. Determines whether a mouse button is held down. */
@@ -19,5 +19,7 @@ declare namespace ct {
         var inside: boolean;
         /** Returns `true` if the mouse hovers over a given `copy`. This does **not** take scaling and rotation into account, as well as polygonal shapes (as they are hollow). */
         function hovers(copy: Copy): boolean;
+        /** Returns `true` if the mouse hovers over a given `copy`. This does **not** take scaling and rotation into account, as well as polygonal shapes (as they are hollow). */
+        function hoversUi(copy: Copy): boolean;
     }
 }

app/data/ct.libs/place/README.md

@@ -1,11 +1,18 @@
-Checks collisions between copies.
+Checks collisions between copies. See the "Reference" tab for the methods.
+
+
+# Collisions in sense of UI and game coordinates
+
+`ct.place` calculates collisions relative to a copy's parent. As UI layers and game layers live in different coordinates, you cannot reliably check collisions between copies of different coordinate spaces. Due to that, use different collision groups for UI elements and gameplay copies.
+
 
 # Additions to copies
 
 You can call `this.moveContinuous('CollisionGroup');` at any copy to perform precise movement with collision checks. It takes gravity into account, too, and uses the `ct.place.moveAlong` method.
 
 Additional field in the type editor "Collision group" defines the `ctype` property used in most ct.place methods.
 
+
 # Preparing types
 
 > This is useful only when you are going to create copies of different shapes dynamically. In other cases, refer to the Docs tab, as ct.IDE defines these shapes itself.
@@ -23,6 +30,7 @@ It is important to create a new `shape` object and not to change existing one, b
 
 Besides the `shape` parameter, each Copy can have a `ctype` parameter. It is used for grouping Copies into different collision groups, like 'Enemies', 'HeroBullets', 'Obstacles' etc.
 
+
 # Collision shapes
 
 * `'point'` — does not require any additional parameters;

app/data/ct.libs/place/injects/ondestroy.js

@@ -1,6 +1,3 @@
-if (this.ctype) {
-    ct.place.ctypeCollections[this.$ctype].splice(ct.place.ctypeCollections[this.$ctype].indexOf(this), 1);
-}
 if (this.$chashes) {
     for (const hash of this.$chashes) {
         ct.place.grid[hash].splice(ct.place.grid[hash].indexOf(this), 1);

app/data/ct.libs/place/injects/roomonleave.js

@@ -1,2 +1 @@
-ct.place.grid = {};
-ct.place.ctypeCollections = {};
+ct.place.grid = {};

app/data/ct.libs/place/injects/start.js

@@ -1,15 +1,5 @@
-ct.place.ctypeCollections = {};
 Object.defineProperty(ct.types.Copy.prototype, 'ctype', {
     set: function(value) {
-        if (this.ctype) {
-            ct.place.ctypeCollections[this.ctype].splice(ct.place.ctypeCollections[this.ctype].indexOf(this), 1);
-        }
-        if (value) {
-            if (!(value in ct.place.ctypeCollections)) {
-                ct.place.ctypeCollections[value] = [];
-            }
-            ct.place.ctypeCollections[value].push(this);
-        }
         this.$ctype = value;
     },
     get: function() {