@workadventure/map-starter-kit-core 0.0.1

package/public/styles/styles.css

@@ -0,0 +1,431 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  min-height: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  font-family: "Roboto", Arial, sans-serif;
+  text-align: center;
+  background: #1b2a41;
+  color: white;
+}
+body .bg {
+  background-size: cover;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  filter: blur(8px);
+  opacity: 0.35;
+}
+
+h1,
+h2 {
+  font-weight: bold;
+  font-size: 1.3rem;
+  margin: 0;
+}
+h1 strong,
+h2 strong {
+  color: #66E979;
+}
+
+header {
+  background: rgba(27, 42, 65, 0.85);
+  border-radius: 16px;
+  height: 86px;
+  display: flex;
+  align-items: center;
+  position: fixed;
+  width: calc(100% - 32px);
+  z-index: 1;
+  padding: 0 28px;
+}
+header .logo {
+  display: block;
+  position: relative;
+}
+header .socials {
+  display: flex;
+  justify-content: center;
+  margin-right: 48px;
+  column-gap: 12px;
+}
+header .btn-header-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  column-gap: 12px;
+}
+
+.content {
+  padding: 16px;
+  position: relative;
+  z-index: 1;
+}
+.content main {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 32px;
+  flex-wrap: wrap;
+  padding-top: 134px;
+  padding-bottom: 121px;
+}
+
+.btn {
+  display: inline-block;
+  padding: 13px 20px 12px;
+  background-color: rgba(65, 86, 246, 0.9);
+  color: white;
+  border-radius: 8px;
+  text-decoration: none;
+  text-align: center;
+  width: auto;
+  position: relative;
+  font-size: 15px;
+  outline: none;
+  border: none;
+  transition: all 0.5s ease-out;
+  cursor: pointer;
+}
+.btn:hover {
+  filter: brightness(135%);
+}
+.btn.btn-light {
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.card-map {
+  max-width: 342px;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: center;
+  background: rgba(27, 42, 65, 0.5);
+  height: fit-content;
+  min-width: 340px;
+}
+.card-map .map-cover {
+  min-height: 230px;
+  width: 100%;
+  background-size: cover;
+  background-position: center;
+}
+.card-map .map-date {
+  font-family: "Roboto Condensed", Arial, sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: #ffffff;
+  opacity: 0.5;
+  margin-top: 12px;
+}
+.card-map .map-name {
+  font-family: "Roboto", "Arial", sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 28px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: #ffffff;
+}
+.card-map .map-detail {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 6px;
+}
+.card-map .map-detail .map-file {
+  font-family: "Roboto Condensed", Arial, sans-serif;
+  font-style: italic;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 20px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: #ffffff;
+}
+.card-map .map-detail .map-weight {
+  font-family: "Roboto Condensed", Arial, sans-serif;
+  font-style: italic;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 20px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: #ffffff;
+}
+.card-map .map-desc {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: #ffffff;
+  margin-bottom: 16px;
+  padding: 2px 12px;
+}
+.card-map .map-copyright {
+  font-size: 12px;
+  opacity: 0.7;
+  padding: 2px 12px;
+}
+.card-map .map-testurl {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12px;
+  gap: 12px;
+  width: 100%;
+  background: #1b2a41;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.form-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding-bottom: 80px;
+}
+.form-center.steps {
+  align-items: start;
+  text-align: left;
+  gap: 48px;
+  max-width: 780px;
+  margin: auto;
+  transition: all 1s ease-out;
+}
+.form-center.steps .step {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+.form-center.steps .step.inactive {
+  opacity: 0.35;
+  pointer-events: none;
+}
+.form-center.steps .step .step-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.form-center.steps .step .step-title .step-number {
+  border-radius: 8px;
+  padding: 6px 12px;
+  border: 1px solid rgb(255, 255, 255);
+}
+.form-center.steps .step .alert {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 12px 12px 12px 24px;
+  gap: 32px;
+  background: rgba(233, 109, 81, 0.2);
+  border: 1px solid rgba(233, 109, 81, 0.5);
+  border-radius: 16px;
+  align-self: stretch;
+  text-align: left;
+}
+.form-center.steps .step .alert .alert-text {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 24px;
+  color: #F4D5CB;
+}
+.form-center.steps .step .step-text {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  color: rgba(255, 255, 255, 0.75);
+}
+.form-center.steps .step input[type=text], .form-center.steps .step input[type=password], .form-center.steps .step input[type=url] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0px 6px 0px 16px;
+  color: white;
+  font-size: 18px;
+  gap: 4px;
+  height: 52px;
+  width: 100%;
+  background: #1B2A41;
+  border: 1px solid #3C5E90;
+  border-radius: 12px;
+  flex: none;
+  order: 0;
+  align-self: stretch;
+  flex-grow: 0;
+}
+.form-center.steps .step input[type=text].error, .form-center.steps .step input[type=password].error, .form-center.steps .step input[type=url].error {
+  border: 1px solid #E96D51;
+  color: #E96D51;
+}
+.form-center.steps .step input[type=text].success, .form-center.steps .step input[type=password].success, .form-center.steps .step input[type=url].success {
+  color: #66E979;
+  border: 1px solid #66E979;
+}
+.form-center h1 {
+  font-family: "Oswald";
+  font-weight: 400;
+  font-size: 40px;
+}
+.form-center .sub-heading {
+  font-size: 14px;
+  line-height: 24px;
+  margin-bottom: 48px;
+}
+.form-center .radio-wrapper {
+  display: flex;
+  gap: 32px;
+}
+.form-center .radio-wrapper .radio-card {
+  cursor: pointer;
+}
+.form-center .radio-wrapper .radio-card .radio {
+  opacity: 0;
+  display: none;
+}
+.form-center .radio-wrapper .radio-card .radio:hover ~ .card-details {
+  background: rgba(255, 255, 255, 0.1);
+}
+.form-center .radio-wrapper .radio-card .radio:checked ~ .card-details {
+  background: white;
+}
+.form-center .radio-wrapper .radio-card .radio:checked ~ .card-details h2 {
+  color: #4156F6;
+}
+.form-center .radio-wrapper .radio-card .radio:checked ~ .card-details svg {
+  display: flex;
+}
+.form-center .radio-wrapper .radio-card .radio:checked ~ .card-details div strong {
+  color: #1B2A41;
+}
+.form-center .radio-wrapper .radio-card .radio:checked ~ .card-details div {
+  color: #1B2A41;
+}
+.form-center .radio-wrapper .radio-card .card-details {
+  border: 1px solid rgb(255, 255, 255);
+  border-radius: 24px;
+  padding: 32px 48px;
+  transition: all 1s ease-out;
+  position: relative;
+}
+.form-center .radio-wrapper .radio-card .card-details h2 {
+  font-family: "Oswald";
+  font-weight: 400;
+  font-size: 26px;
+  margin-bottom: 8px;
+}
+.form-center .radio-wrapper .radio-card .card-details svg {
+  display: none;
+  position: absolute;
+  right: 24px;
+  top: 24px;
+}
+.form-center .radio-wrapper .radio-card .card-details div {
+  font-size: 16px;
+  line-height: 24px;
+  color: rgba(255, 255, 255, 0.5);
+}
+.form-center .radio-wrapper .radio-card .card-details div strong {
+  display: block;
+  font-weight: 700;
+  color: rgb(255, 255, 255);
+}
+
+.button-wrapper {
+  background: rgba(27, 42, 65, 0.85);
+  display: flex;
+  align-items: center;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  z-index: 1;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 16px;
+  flex-direction: row;
+  justify-content: center;
+  text-align: center;
+}
+.button-wrapper a,
+.button-wrapper .btn {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 16px 64px;
+  font-size: 18px;
+  gap: 8px;
+  background: #e96d51;
+  border-radius: 8px;
+  color: white;
+  text-decoration: none;
+}
+.button-wrapper a.btn,
+.button-wrapper .btn.btn {
+  transition: all 1s ease-out;
+}
+.button-wrapper a.btn.btn-ghost,
+.button-wrapper .btn.btn.btn-ghost {
+  background: rgba(255, 255, 255, 0.1);
+}
+.button-wrapper a.btn.btn-ghost:hover,
+.button-wrapper .btn.btn.btn-ghost:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+.button-wrapper a.btn.btn-secondary,
+.button-wrapper .btn.btn.btn-secondary {
+  background: #4156F6;
+}
+
+.bg-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+  transition: opacity 2s ease-in-out;
+  filter: blur(2px);
+  opacity: 0;
+  z-index: -1;
+}
+.bg-image.active {
+  opacity: 0.60;
+  z-index: 0;
+}
+
+/*# sourceMappingURL=styles.css.map */

package/public/styles/styles.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;EACE;;;AAEF;AAAA;EAEE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;;AACA;AAAA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;;AAKR;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEE;EACE;EACA;;AACA;EACE;;AAEF;EACE;;AACA;EACE;;AAEF;EACE;;AAGA;EACE;;AAFJ;EAIE;;AAIN;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;;AAQZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;EACE;;AACA;AAAA;EACE;;AACA;AAAA;EACE;;AAGJ;AAAA;EACE","file":"styles.css"}

package/semantic-release.config.js

@@ -0,0 +1,8 @@
+export const branches = ["master"];
+export const plugins = [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/npm",
+    "@semantic-release/git",
+    "@semantic-release/github",
+];

package/src/controllers/FrontController.ts

@@ -0,0 +1,95 @@
+import express from 'express';
+import * as fs from "node:fs";
+import * as path from "node:path";
+import Mustache from 'mustache';
+import { getCoreRoot } from '../getCoreRoot.js';
+
+export class FrontController {
+    private app: express.Application;
+
+    constructor(app: express.Application) {
+        this.app = app;
+        // Assets are now configured in app.ts
+        this.setupRoutes();
+        this.setupRoutesStep1();
+        this.setupRoutesStep2();
+        this.setupRoutesStep3();
+        this.setupRoutesStep4();
+    }
+
+    private setupRoutes() {
+        // Route for the Mustache renderer on "/"
+        this.app.get('/', async (_, res) => {
+            try {
+                res.send(await this.renderTemplate('index'));
+            } catch (error) {
+                console.error('Error rendering template:', error);
+                res.status(500).send('Error rendering template');
+            }
+        });
+    }
+
+    /**
+     * Render a template file
+     * @param filename - The filename of the template to render
+     * @returns The rendered template
+     */
+    private async renderTemplate(filename: string): Promise<string> {
+        const coreRoot = getCoreRoot();
+        const templatesDir = path.join(coreRoot, 'src/views');
+        if(!fs.existsSync(templatesDir)) {
+            throw new Error(`Templates directory not found: ${templatesDir}`);
+        }
+        const templatePath = path.join(templatesDir, `${filename}.html`);
+        const template = await fs.promises.readFile(templatePath, 'utf-8');
+        // Render the template with Mustache (without data for now)
+        return Mustache.render(template, {});
+    }
+
+    /**
+     * Setup the routes for file "step1-git.html"
+     * @returns void
+     */
+    private setupRoutesStep1() {
+        this.app.get('/step1-git', async (_, res) => {
+            res.send(await this.renderTemplate('step1-git'));
+        });
+    }
+
+    /**
+     * Setup the routes for file "step2-hosting.html"
+     * @returns void
+     */
+    private setupRoutesStep2() {
+        this.app.get('/step2-hosting', async (_, res) => {
+            res.send(await this.renderTemplate('step2-hosting'));
+        });
+    }
+
+    /**
+     * Setup the routes for file "step3-steps.html"
+     * @returns void
+     */
+    private setupRoutesStep3() {
+        this.app.get('/step3-steps', async (_, res) => {
+            res.send(await this.renderTemplate('step3-steps'));
+        });
+        this.app.get('/step3-steps-selfhosted', async (_, res) => {
+            res.send(await this.renderTemplate('step3-steps-selfhosted'));
+        });
+    }
+
+    /**
+     * Setup the routes for file "step4-map.html"
+     * @returns void
+     */
+    private setupRoutesStep4() {
+        this.app.get('/step4-validated', async (_, res) => {
+            res.send(await this.renderTemplate('step4-validated'));
+        });
+        this.app.get('/step4-validated-selfhosted', async (_, res) => {
+            res.send(await this.renderTemplate('step4-validated-selfhosted'));
+        });
+    }
+    
+}

package/src/controllers/MapController.ts

@@ -0,0 +1,104 @@
+import express from 'express';
+import * as fs from "node:fs";
+import * as path from "node:path";
+
+export class MapController {
+    private router: express.Router;
+    private app: express.Application;
+
+    constructor(app: express.Application) {
+        this.app = app;
+        this.router = express.Router();
+        this.setupRoutes();
+        // Register the router on the application with the "/maps" prefix
+        this.app.use('/maps', this.router);
+    }
+
+    /**
+     * Setup the routes for the map controller
+     * @returns void
+     */
+    private setupRoutes() {
+        // Route to retrieve the list of maps with their properties
+        this.router.get('/list', async (_, res) => {
+            try {
+                const mapsDir = './';
+                const maps = await this.getMapsWithProperties(mapsDir);
+                res.json(maps);
+            } catch (error) {
+                console.error('Error getting maps list:', error);
+                res.status(500).json({ error: 'Error getting maps list' });
+            }
+        });
+    }
+
+    /**
+     * Get the list of maps with their properties
+     * @param dir - The directory to search for maps
+     * @param baseDir - The base directory to use for relative paths
+     * @returns The list of maps with their properties
+     */
+    private async getMapsWithProperties(dir: string, baseDir: string = dir): Promise<any[]> {
+        let files = await fs.promises.readdir(dir, { withFileTypes: true });
+        const maps: any[] = [];
+
+        for (const file of files) {
+            const fullPath = path.join(dir, file.name);
+
+            // Exclude the "dist" folder
+            if(file.name === 'dist') continue;
+
+            if (file.isDirectory()) {
+                // Recursively search subdirectories
+                const subMaps = await this.getMapsWithProperties(fullPath, baseDir);
+                maps.push(...subMaps);
+            } else if (file.name.endsWith('.tmj')) {
+                try {
+                    // Read and parse TMJ file
+                    const tmjContent = await fs.promises.readFile(fullPath, 'utf-8');
+                    const tmjData = JSON.parse(tmjContent);
+
+                    // Extract properties
+                    const properties = tmjData.properties || [];
+                    const findProperty = (key: string) => {
+                        const item = properties.find((p: any) => p.name === key);
+                        return item ? item.value : null;
+                    };
+
+                    // Get file stats for size and date
+                    const stats = await fs.promises.stat(fullPath);
+                    const fileSizeInMB = (stats.size / (1024 * 1024)).toFixed(2);
+                    const lastModified = stats.mtime;
+
+                    // Get relative path
+                    const relativePath = path.relative(baseDir, fullPath).replace(/\\/g, '/');
+
+                    // Extract filename without extension
+                    const filename = path.basename(file.name, '.tmj');
+
+                    maps.push({
+                        path: relativePath,
+                        filename: filename,
+                        mapName: findProperty('mapName') || filename,
+                        mapImage: findProperty('mapImage') || null,
+                        mapDescription: findProperty('mapDescription') || '',
+                        mapCopyright: findProperty('mapCopyright') || '',
+                        size: fileSizeInMB,
+                        lastModified: lastModified.toISOString(),
+                        lastModifiedFormatted: lastModified.toLocaleDateString('fr-FR', {
+                            day: '2-digit',
+                            month: '2-digit',
+                            year: 'numeric',
+                            hour: '2-digit',
+                            minute: '2-digit'
+                        })
+                    });
+                } catch (error) {
+                    console.error(`Error reading TMJ file ${fullPath}:`, error);
+                }
+            }
+        }
+
+        return maps;
+    }
+}