- Reldens - v4.0.0-beta.38

lib/admin/server/admin-manager-config.js

@@ -4,6 +4,7 @@
  *
  */
 
+const { MapsImporter } = require('../../import/server/maps-importer');
 const { PropertiesHandler } = require('../../game/properties-handler');
 
 class AdminManagerConfig extends PropertiesHandler
@@ -23,6 +24,7 @@ class AdminManagerConfig extends PropertiesHandler
         this.app = serverManager?.app;
         this.applicationFramework = serverManager?.appServerFactory?.applicationFramework;
         this.fileStorageManager = serverManager?.appServerFactory?.fileStorageManager;
+        this.mapsImporter = new MapsImporter(serverManager);
         this.bodyParser = serverManager?.appServerFactory?.bodyParser;
         this.session = serverManager?.appServerFactory?.session;
         this.broadcastCallback = (props) => {

lib/admin/server/admin-translations.js

@@ -29,6 +29,7 @@ class AdminTranslations
                 loginWelcome: 'Reldens',
                 pages: 'Server Management',
                 management: 'Management',
+                mapsWizard: 'Maps Generation',
                 shuttingDown: 'Server is shutting down in:',
                 submitShutdownLabel: 'Shutdown Server',
                 submitCancelLabel: 'Cancel Server Shutdown',

lib/admin/server/templates-list.js

@@ -8,6 +8,8 @@ module.exports.TemplatesList = {
     login: 'login.html',
     dashboard: 'dashboard.html',
     management: 'management.html',
+    mapsWizard: 'maps-wizard.html',
+    mapsWizardMapsSelection: 'maps-wizard-maps-selection.html',
     list: 'list.html',
     listContent: 'list-content.html',
     view: 'view.html',

lib/game/server/login-manager.js

@@ -182,10 +182,10 @@ class LoginManager
         }
     }
 
-    async roleAuthenticationCallback(email, password, roleId = false)
+    async roleAuthenticationCallback(email, password, roleId = 0)
     {
         let user = await this.usersManager.loadUserByEmail(email);
-        let validatedRole = !roleId || String(user.role_id) === String(roleId);
+        let validatedRole = 0 === roleId || String(user.role_id) === String(roleId);
         if(user && validatedRole){
             let result = this.passwordManager.validatePassword(
                 password,

lib/game/server/theme-manager.js

@@ -38,6 +38,8 @@ class ThemeManager
     projectAssetsPath = '';
     projectCssPath = '';
     projectIndexPath = '';
+    projectGenerateDataPath = '';
+    projectGeneratedDataPath = '';
     defaultBrowserBundleOptions = {};
 
     constructor(props)
@@ -59,6 +61,8 @@ class ThemeManager
         this.envFilePath = FileHandler.joinPaths(this.projectRoot, '.env');
         this.installationLockPath = FileHandler.joinPaths(this.projectRoot, structure.INSTALL_LOCK);
         this.projectThemeName = sc.get(props, 'projectThemeName', structure.DEFAULT);
+        this.projectGenerateDataPath = FileHandler.joinPaths(this.projectRoot, 'generate-data');
+        this.projectGeneratedDataPath = FileHandler.joinPaths(this.projectGenerateDataPath, 'generated');
         this.reldensModulePath = FileHandler.joinPaths(this.projectRoot, 'node_modules', 'reldens');
         this.reldensModuleLibPath = FileHandler.joinPaths(this.reldensModulePath, structure.LIB);
         this.reldensModuleThemePath = FileHandler.joinPaths(this.reldensModulePath, structure.THEME);

lib/import/server/maps-importer.js

@@ -4,7 +4,7 @@
  *
  */
 
-const { FileHandler } = require('@reldens/tile-map-generator/lib/files/file-handler');
+const { FileHandler } = require('../../game/server/file-handler');
 const { Logger, sc } = require('@reldens/utils');
 
 class MapsImporter
@@ -24,8 +24,8 @@ class MapsImporter
         this.mapsImages = {};
         this.roomsChangePoints = {};
         this.roomsReturnPoints = {};
-        this.fileHandler = new FileHandler();
         this.createdRooms = {};
+        this.generatedDataPath = this.serverManager?.themeManager?.projectGeneratedDataPath;
     }
 
     async import(data)
@@ -45,6 +45,7 @@ class MapsImporter
         this.importAssociationsForChangePoints = sc.get(data, 'importAssociationsForChangePoints', false);
         this.importAssociationsRecursively = sc.get(data, 'importAssociationsRecursively', false);
         this.verifyTilesetImage = sc.get(data, 'verifyTilesetImage', true);
+        this.setImportFilesPath(data);
         if(this.maps){
             await this.loadValidMaps();
         }
@@ -53,6 +54,18 @@ class MapsImporter
         }
     }
 
+    setImportFilesPath(data)
+    {
+        let generatedDataPath = String(sc.get(data, 'generatedDataPath', ''));
+        if('' !== generatedDataPath){
+            this.generatedDataPath = generatedDataPath;
+        }
+        let relativeGeneratedDataPath = String(sc.get(data, 'relativeGeneratedDataPath', ''));
+        if('' !== relativeGeneratedDataPath){
+            this.generatedDataPath = FileHandler.joinPaths(this.serverManager.projectRoot, relativeGeneratedDataPath);
+        }
+    }
+
     validRepositories(repositoriesKey)
     {
         for(let repositoryKey of repositoriesKey){
@@ -74,10 +87,10 @@ class MapsImporter
     loadMapByTitle(mapTitle, useTitleAsFileName = false)
     {
         let mapFileName = useTitleAsFileName ? mapTitle : this.maps[mapTitle];
-        let fullPath = this.fileHandler.joinPaths(this.serverManager.projectRoot, 'generate-data', mapFileName + '.json');
-        let fileContent = this.fileHandler.exists(fullPath) ? this.fileHandler.readFile(fullPath) : '';
+        let fullPath = FileHandler.joinPaths(this.generatedDataPath, mapFileName + '.json');
+        let fileContent = FileHandler.exists(fullPath) ? FileHandler.readFile(fullPath) : '';
         if('' === fileContent){
-            Logger.critical('File "' + mapFileName + '.json" not found.');
+            Logger.critical('File "' + mapFileName + '.json" not found.', fullPath);
             return;
         }
         let jsonContent = sc.toJson(fileContent);
@@ -92,12 +105,8 @@ class MapsImporter
                     Logger.critical('File "' + mapFileName + '.json" must have at least one tileset with an image.');
                     return;
                 }
-                let checkImagePath = this.fileHandler.joinPaths(
-                    this.serverManager.projectRoot,
-                    'generate-data',
-                    tileset.image
-                );
-                if(!this.fileHandler.exists(checkImagePath)){
+                let checkImagePath = FileHandler.joinPaths(this.generatedDataPath, tileset.image);
+                if(!FileHandler.exists(checkImagePath)){
                     Logger.critical('File "' + checkImagePath + '" not found.');
                     return;
                 }
@@ -170,9 +179,9 @@ class MapsImporter
     copyFiles(fileNames)
     {
         for(let fileName of fileNames){
-            let from = this.fileHandler.joinPaths(this.serverManager.projectRoot, 'generate-data', fileName);
-            let to = this.fileHandler.joinPaths(this.serverManager.themeManager.projectThemePath, 'assets', 'maps');
-            let result = this.fileHandler.copyFile(from, fileName, to);
+            let from = FileHandler.joinPaths(this.generatedDataPath, fileName);
+            let to = FileHandler.joinPaths(this.serverManager.themeManager.projectThemePath, 'assets', 'maps', fileName);
+            let result = FileHandler.copyFile(from, to);
             if(!result){
                 Logger.critical('Could not copy file "' + from + '" to "' + to + '".');
                 return false;

theme/admin/reldens-admin-client.js

@@ -92,13 +92,11 @@ window.addEventListener('DOMContentLoaded', () => {
     let listSelect = document.querySelector('.list-select');
     if(listSelect){
         listSelect.addEventListener('click', (event) => {
-            console.log('click', event.currentTarget.dataset.checked, event);
             let checkboxes = document.querySelectorAll('.ids-checkbox');
             for(let checkbox of checkboxes){
                 checkbox.checked = 1 === Number(event.currentTarget.dataset.checked);
             }
             event.currentTarget.dataset.checked = 1 === Number(event.currentTarget.dataset.checked) ? 0 : 1;
-            console.log('changed to:', event.currentTarget.dataset.checked);
         });
     }
 
@@ -166,4 +164,75 @@ window.addEventListener('DOMContentLoaded', () => {
             );
         }
     }
+
+    // maps wizard functions:
+    let mapsWizardsOptions = document.querySelectorAll('.maps-wizard-form .map-wizard-option.with-state');
+    for(let option of mapsWizardsOptions){
+        option.addEventListener('click', (event) => {
+            let wizardOptionsContainer = document.querySelectorAll('.wizard-option-container');
+            for(let container of wizardOptionsContainer){
+                container.classList.remove('active');
+            }
+            event.currentTarget.parentNode.classList.add('active');
+        });
+    }
+
+    let mapCanvasElements = document.querySelectorAll('.mapCanvas');
+    for (let mapCanvas of mapCanvasElements) {
+        fetch(mapCanvas.dataset.mapJson)
+            .then(response => response.json())
+            .then(data => drawMap(mapCanvas, data))
+            .catch(error => console.error('Error fetching JSON:', error));
+    }
+
+    function drawMap(mapCanvas, mapData)
+    {
+        let context = mapCanvas.getContext('2d');
+        let tileset = new Image();
+        tileset.src = mapCanvas.dataset.imageKey;
+        // we are assuming there is only one tileset in mapData.tilesets since the maps are coming from the optimizer:
+        let tilesetInfo = mapData.tilesets.shift();
+        let tileWidth = tilesetInfo.tilewidth;
+        let tileHeight = tilesetInfo.tileheight;
+        let margin = tilesetInfo.margin;
+        let spacing = tilesetInfo.spacing;
+        let columns = tilesetInfo.columns;
+
+        tileset.onload = () => {
+            for(let layer of mapData.layers){
+                if('tilelayer' !== layer.type){
+                    continue;
+                }
+                let width = layer.width;
+                for(let index = 0; index < layer.data.length; index++){
+                    let tileIndex = Number(layer.data[index]);
+                    if (tileIndex === 0) {
+                        continue;
+                    }
+                    let colIndex = index % width;
+                    let rowIndex = Math.floor(index / width);
+                    // adjusting for 0-based index:
+                    let tileId = tileIndex - 1;
+                    let sx = margin + (tileId % columns) * (tileWidth + spacing);
+                    let sy = margin + Math.floor(tileId / columns) * (tileHeight + spacing);
+                    context.drawImage(
+                        tileset,
+                        sx,
+                        sy,
+                        tileWidth,
+                        tileHeight,
+                        colIndex * tileWidth,
+                        rowIndex * tileHeight,
+                        tileWidth,
+                        tileHeight
+                    );
+                }
+            }
+        };
+
+        tileset.onerror = () => {
+            console.error('Error loading tileset image');
+        };
+    }
+
 });

theme/admin/reldens-admin-client.scss

@@ -500,6 +500,67 @@ $darkGreen: #27ae60;
 
             }
         }
+
+        textarea {
+            position: relative;
+            display: block;
+            width: 98%;
+            padding: 1%;
+            margin: 1rem 0;
+        }
+    }
+
+    .maps-wizard {
+        .main-action-container.maps-selection {
+            width: 100%;
+
+            .wizard-options-container {
+                display: flex;
+                justify-content: space-between;
+                flex-wrap: wrap;
+                width: 100%;
+            }
+        }
+
+        .wizard-options-container {
+            padding: 0;
+            margin-bottom: 1rem;
+
+            .wizard-map-option-container {
+                display: flex;
+                flex-direction: column;
+                list-style: none;
+
+                label {
+                    cursor: pointer;
+                }
+
+                canvas {
+                    max-width: 400px;
+                    margin-top: 1rem;
+                }
+            }
+
+            .wizard-option-container {
+                list-style: none;
+
+                .main-option {
+                    display: inline-block;
+                    cursor: pointer;
+                }
+
+                .maps-wizard-option-content {
+                    display: none;
+                    padding-left: 1.6rem;
+                }
+
+                &.active {
+                    .maps-wizard-option-content {
+                        display: block;
+                    }
+                }
+            }
+        }
     }
 
     .entity-view, .entity-edit {

theme/admin/templates/maps-wizard-maps-selection.html

@@ -0,0 +1,40 @@
+<h2>Maps Wizard</h2>
+<div class="sub-content maps-wizard">
+    <div class="sub-content-box">
+        <form class="sub-content-form maps-wizard-form confirmation-required"
+            name="maps-wizard-form"
+            id="maps-wizard-form"
+            action="{{&actionPath}}"
+            method="post"
+            enctype="multipart/form-data">
+            <input type="hidden" name="mainAction" id="mainAction" value="import"/>
+            <input type="hidden" name="generatedMapsHandler" id="generatedMapsHandler" value="{{&generatedMapsHandler}}"/>
+            <div class="main-action-container maps-selection">
+                <p>Select the maps to be imported:</p>
+                <ul class="wizard-options-container">
+                {{#maps}}
+                    <li class="wizard-map-option-container">
+                        <div class="selector-box">
+                            <input class="map-wizard-option" type="checkbox" name="selectedMaps[]" id="maps-wizard-map-option-{{&key}}" value="{{&key}}"/>
+                            <input type="hidden" name="map-title-{{&key}}" id="map-title-{{&key}}" value="{{&key}}"/>
+                            <label class="main-option" for="maps-wizard-map-option-{{&key}}">
+                                {{&key}}
+                            </label>
+                        </div>
+                        <canvas
+                            class="mapCanvas"
+                            width="{{&mapWidth}}"
+                            height="{{&mapHeight}}"
+                            data-tile-width="{{&tileWidth}}"
+                            data-tile-height="{{&tileHeight}}"
+                            data-image-key="{{&mapImage}}"
+                            data-map-json="{{&mapJson}}">
+                        </canvas>
+                    </li>
+                {{/maps}}
+                </ul>
+            </div>
+            <input type="submit" class="button button-primary button-maps-wizard" value="Import Selected Maps"/>
+        </form>
+    </div>
+</div>