@workadventure/map-starter-kit-core 1.1.1 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/js/index.js +88 -4
- package/dist/assets/views/index.html +4 -101
- package/dist/assets/views/step1-git.html +2 -2
- package/dist/assets/views/step2-hosting.html +2 -2
- package/dist/assets/views/step3-steps-selfhosted.html +2 -2
- package/dist/assets/views/step3-steps.html +2 -2
- package/dist/assets/views/step4-validated-selfhosted.html +3 -3
- package/dist/assets/views/step4-validated.html +2 -2
- package/package.json +1 -1
- package/public/assets/js/index.js +88 -4
- package/public/assets/views/index.html +4 -101
- package/public/assets/views/step1-git.html +2 -2
- package/public/assets/views/step2-hosting.html +2 -2
- package/public/assets/views/step3-steps-selfhosted.html +2 -2
- package/public/assets/views/step3-steps.html +2 -2
- package/public/assets/views/step4-validated-selfhosted.html +3 -3
- package/public/assets/views/step4-validated.html +2 -2
package/dist/assets/js/index.js
CHANGED
|
@@ -74,7 +74,91 @@ async function createBackgroundImageFade(images = null) {
|
|
|
74
74
|
}, 5000); // Change image every 5 seconds
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
-
//
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
77
|
+
// Mustache template for a map card (rendered in loadTMJ)
|
|
78
|
+
const CARD_TEMPLATE = `
|
|
79
|
+
<div class="map-cover" style="background-image: url('{{mapImageUrl}}');"></div>
|
|
80
|
+
<div class="map-date">
|
|
81
|
+
Last edit: {{lastModifiedFormatted}}
|
|
82
|
+
</div>
|
|
83
|
+
<div class="map-name">
|
|
84
|
+
{{mapName}}
|
|
85
|
+
</div>
|
|
86
|
+
<div class="map-detail">
|
|
87
|
+
<div class="map-file">
|
|
88
|
+
<strong>{{filename}}</strong>.tmj
|
|
89
|
+
</div>
|
|
90
|
+
<div class="map-weight">
|
|
91
|
+
<strong>{{size}}</strong>
|
|
92
|
+
<span style="opacity: .5">Mo</span>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
<div class="map-desc">
|
|
96
|
+
{{mapDescription}}
|
|
97
|
+
</div>
|
|
98
|
+
<div class="map-testurl">
|
|
99
|
+
<a href="#" class="btn" data-map-path="{{path}}">Test my map</a>
|
|
100
|
+
</div>
|
|
101
|
+
`;
|
|
102
|
+
|
|
103
|
+
// Load maps from API and render map cards with Mustache
|
|
104
|
+
async function loadTMJ() {
|
|
105
|
+
try {
|
|
106
|
+
const Mustache = (await import('https://cdn.jsdelivr.net/npm/mustache@4.2.0/+esm')).default;
|
|
107
|
+
const maps = await getMapsList();
|
|
108
|
+
|
|
109
|
+
const mapImages = maps
|
|
110
|
+
.map((map) => {
|
|
111
|
+
if (map.mapImage) {
|
|
112
|
+
return map.mapImage.startsWith('http') ? map.mapImage : `/${map.mapImage}`;
|
|
113
|
+
}
|
|
114
|
+
return null;
|
|
115
|
+
})
|
|
116
|
+
.filter((img) => img !== null);
|
|
117
|
+
|
|
118
|
+
if (mapImages.length > 0) {
|
|
119
|
+
await createBackgroundImageFade(mapImages);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
const defaultPlaceholder = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1620" height="1024"><rect fill="%231b2a41" width="100%" height="100%"/></svg>';
|
|
123
|
+
const mapsData = maps.map((map) => {
|
|
124
|
+
const mapImageUrl = map.mapImage
|
|
125
|
+
? (map.mapImage.startsWith('http') ? map.mapImage : `/${map.mapImage}`)
|
|
126
|
+
: (mapImages.length > 0 ? mapImages[0] : defaultPlaceholder);
|
|
127
|
+
return {
|
|
128
|
+
...map,
|
|
129
|
+
mapImageUrl,
|
|
130
|
+
mapDescription: map.mapDescription || 'No description available',
|
|
131
|
+
};
|
|
132
|
+
});
|
|
133
|
+
|
|
134
|
+
const mainElement = document.querySelector('main');
|
|
135
|
+
if (!mainElement) return;
|
|
136
|
+
|
|
137
|
+
mainElement.innerHTML = '';
|
|
138
|
+
mapsData.forEach((map) => {
|
|
139
|
+
const section = document.createElement('section');
|
|
140
|
+
section.className = 'card-map';
|
|
141
|
+
section.innerHTML = Mustache.render(CARD_TEMPLATE, map);
|
|
142
|
+
|
|
143
|
+
const testBtn = section.querySelector('.map-testurl a');
|
|
144
|
+
if (testBtn) {
|
|
145
|
+
testBtn.addEventListener('click', (e) => {
|
|
146
|
+
e.preventDefault();
|
|
147
|
+
const host = window.location.host;
|
|
148
|
+
let path = window.location.pathname;
|
|
149
|
+
if (path.endsWith('index.html')) {
|
|
150
|
+
path = path.slice(0, -'index.html'.length);
|
|
151
|
+
}
|
|
152
|
+
const instanceId = Math.random().toString(36).substring(2, 15);
|
|
153
|
+
const url = `https://play.workadventu.re/_/${instanceId}/${host}${path}${map.path}`;
|
|
154
|
+
window.open(url, '_blank');
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
mainElement.appendChild(section);
|
|
158
|
+
});
|
|
159
|
+
} catch (error) {
|
|
160
|
+
console.error('Error loading maps:', error);
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
export { getMapsList, getImagesList, createBackgroundImageFade, loadTMJ };
|
|
@@ -13,108 +13,11 @@
|
|
|
13
13
|
<title>WorkAdventure build your map</title>
|
|
14
14
|
<link rel="icon" href="public/images/favicon.svg" type="image/svg+xml">
|
|
15
15
|
<script type="module">
|
|
16
|
-
document.addEventListener("DOMContentLoaded", (
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
loadTMJ();
|
|
16
|
+
document.addEventListener("DOMContentLoaded", () => {
|
|
17
|
+
import('/public/assets/js/index.js').then((module) => {
|
|
18
|
+
module.loadTMJ();
|
|
20
19
|
});
|
|
21
20
|
});
|
|
22
|
-
|
|
23
|
-
async function loadTMJ() {
|
|
24
|
-
try {
|
|
25
|
-
// Get the list of maps from the API
|
|
26
|
-
const maps = await window.getMapsList();
|
|
27
|
-
|
|
28
|
-
// Retrieve map images for background fade
|
|
29
|
-
const mapImages = maps
|
|
30
|
-
.map(map => {
|
|
31
|
-
if (map.mapImage) {
|
|
32
|
-
return map.mapImage.startsWith('http') ? map.mapImage : `/${map.mapImage}`;
|
|
33
|
-
}
|
|
34
|
-
return null;
|
|
35
|
-
})
|
|
36
|
-
.filter(img => img !== null);
|
|
37
|
-
|
|
38
|
-
// Create background image fade
|
|
39
|
-
if (mapImages.length > 0) {
|
|
40
|
-
await window.createBackgroundImageFade(mapImages);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
// Mustache template for a map card
|
|
44
|
-
const cardTemplate = `
|
|
45
|
-
<div class="map-cover" style="background-image: url('{{mapImageUrl}}');"></div>
|
|
46
|
-
<div class="map-date">
|
|
47
|
-
Last edit: {{lastModifiedFormatted}}
|
|
48
|
-
</div>
|
|
49
|
-
<div class="map-name">
|
|
50
|
-
{{mapName}}
|
|
51
|
-
</div>
|
|
52
|
-
<div class="map-detail">
|
|
53
|
-
<div class="map-file">
|
|
54
|
-
<strong>{{filename}}</strong>.tmj
|
|
55
|
-
</div>
|
|
56
|
-
<div class="map-weight">
|
|
57
|
-
<strong>{{size}}</strong>
|
|
58
|
-
<span style="opacity: .5">Mo</span>
|
|
59
|
-
</div>
|
|
60
|
-
</div>
|
|
61
|
-
<div class="map-desc">
|
|
62
|
-
{{mapDescription}}
|
|
63
|
-
</div>
|
|
64
|
-
<div class="map-testurl">
|
|
65
|
-
<a href="#" class="btn" data-map-path="{{path}}">Test my map</a>
|
|
66
|
-
</div>
|
|
67
|
-
`;
|
|
68
|
-
|
|
69
|
-
// Prepare data for Mustache
|
|
70
|
-
const mapsData = maps.map(map => {
|
|
71
|
-
// Build the image URL - use the first available image or a default image
|
|
72
|
-
const mapImageUrl = map.mapImage
|
|
73
|
-
? (map.mapImage.startsWith('http') ? map.mapImage : `/${map.mapImage}`)
|
|
74
|
-
: (mapImages.length > 0 ? mapImages[0] : 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1620" height="1024"><rect fill="%231b2a41" width="100%" height="100%"/></svg>');
|
|
75
|
-
|
|
76
|
-
return {
|
|
77
|
-
...map,
|
|
78
|
-
mapImageUrl: mapImageUrl,
|
|
79
|
-
mapDescription: map.mapDescription || 'No description available'
|
|
80
|
-
};
|
|
81
|
-
});
|
|
82
|
-
|
|
83
|
-
// Render each map with Mustache and inject them into the container
|
|
84
|
-
const mainElement = document.querySelector('main');
|
|
85
|
-
if (mainElement) {
|
|
86
|
-
// Clear existing content
|
|
87
|
-
mainElement.innerHTML = '';
|
|
88
|
-
|
|
89
|
-
// Create a section for each map
|
|
90
|
-
mapsData.forEach(map => {
|
|
91
|
-
const section = document.createElement('section');
|
|
92
|
-
section.className = 'card-map';
|
|
93
|
-
section.innerHTML = Mustache.render(cardTemplate, map);
|
|
94
|
-
|
|
95
|
-
// Add an event handler for the "Test my map" button
|
|
96
|
-
const testBtn = section.querySelector('.map-testurl a');
|
|
97
|
-
if (testBtn) {
|
|
98
|
-
testBtn.addEventListener('click', (e) => {
|
|
99
|
-
e.preventDefault();
|
|
100
|
-
const host = window.location.host;
|
|
101
|
-
let path = window.location.pathname;
|
|
102
|
-
if (path.endsWith('index.html')) {
|
|
103
|
-
path = path.substr(0, path.length - 'index.html'.length);
|
|
104
|
-
}
|
|
105
|
-
const instanceId = Math.random().toString(36).substring(2, 15);
|
|
106
|
-
const url = `https://play.workadventu.re/_/${instanceId}/${host}${path}${map.path}`;
|
|
107
|
-
window.open(url, '_blank');
|
|
108
|
-
});
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
mainElement.appendChild(section);
|
|
112
|
-
});
|
|
113
|
-
}
|
|
114
|
-
} catch (error) {
|
|
115
|
-
console.error('Error loading maps:', error);
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
21
|
</script>
|
|
119
22
|
</head>
|
|
120
23
|
|
|
@@ -150,7 +53,7 @@
|
|
|
150
53
|
</div>
|
|
151
54
|
</header>
|
|
152
55
|
<main>
|
|
153
|
-
<!-- Map cards
|
|
56
|
+
<!-- Map cards are injected here by index.js -->
|
|
154
57
|
</main>
|
|
155
58
|
<div class="button-wrapper">
|
|
156
59
|
<div style="flex-grow: 1;">
|
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
<script type="module">
|
|
16
16
|
document.addEventListener("DOMContentLoaded", (event) => {
|
|
17
17
|
// Load index.js to have access to getMapsList
|
|
18
|
-
import('/public/assets/js/index.js').then(() => {
|
|
19
|
-
|
|
18
|
+
import('/public/assets/js/index.js').then((module) => {
|
|
19
|
+
module.createBackgroundImageFade();
|
|
20
20
|
});
|
|
21
21
|
});
|
|
22
22
|
</script>
|
|
@@ -47,8 +47,8 @@
|
|
|
47
47
|
<script type="module">
|
|
48
48
|
document.addEventListener("DOMContentLoaded", (event) => {
|
|
49
49
|
// Load index.js to have access to getMapsList
|
|
50
|
-
import('/public/assets/js/index.js').then(() => {
|
|
51
|
-
|
|
50
|
+
import('/public/assets/js/index.js').then((module) => {
|
|
51
|
+
module.createBackgroundImageFade();
|
|
52
52
|
});
|
|
53
53
|
});
|
|
54
54
|
</script>
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
<link rel="icon" href="public/images/favicon.svg" type="image/svg+xml">
|
|
15
15
|
<script type="module">
|
|
16
16
|
document.addEventListener("DOMContentLoaded", (event) => {
|
|
17
|
-
import('/public/assets/js/index.js').then(() => {
|
|
18
|
-
|
|
17
|
+
import('/public/assets/js/index.js').then((module) => {
|
|
18
|
+
module.createBackgroundImageFade();
|
|
19
19
|
});
|
|
20
20
|
});
|
|
21
21
|
</script>
|
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
<script type="module">
|
|
16
16
|
document.addEventListener("DOMContentLoaded", (event) => {
|
|
17
17
|
// Load index.js to have access to getMapsList
|
|
18
|
-
import('/public/assets/js/index.js').then(() => {
|
|
19
|
-
|
|
18
|
+
import('/public/assets/js/index.js').then((module) => {
|
|
19
|
+
module.createBackgroundImageFade();
|
|
20
20
|
});
|
|
21
21
|
});
|
|
22
22
|
</script>
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
<link rel="icon" href="public/images/favicon.svg" type="image/svg+xml">
|
|
15
15
|
<script type="module">
|
|
16
16
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
17
|
-
await import('/public/assets/js/index.js');
|
|
17
|
+
const module = await import('/public/assets/js/index.js');
|
|
18
18
|
const main = document.querySelector('main .maps-container');
|
|
19
19
|
const emptyEl = document.getElementById('maps-empty');
|
|
20
20
|
const errorEl = document.getElementById('maps-error');
|
|
@@ -84,8 +84,8 @@
|
|
|
84
84
|
|
|
85
85
|
// Background fade from first map image if available
|
|
86
86
|
const firstImg = maps[0]?.mapImage;
|
|
87
|
-
if (firstImg && typeof
|
|
88
|
-
|
|
87
|
+
if (firstImg && typeof module.createBackgroundImageFade === 'function') {
|
|
88
|
+
module.createBackgroundImageFade([firstImg]);
|
|
89
89
|
}
|
|
90
90
|
} catch (e) {
|
|
91
91
|
loadingEl.style.display = 'none';
|
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
<script type="module">
|
|
16
16
|
document.addEventListener("DOMContentLoaded", (event) => {
|
|
17
17
|
// Load index.js to have access to getMapsList
|
|
18
|
-
import('/public/assets/js/index.js').then(() => {
|
|
19
|
-
|
|
18
|
+
import('/public/assets/js/index.js').then((module) => {
|
|
19
|
+
module.createBackgroundImageFade();
|
|
20
20
|
});
|
|
21
21
|
});
|
|
22
22
|
</script>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workadventure/map-starter-kit-core",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"description": "Core app, HTML pages and static assets for the WorkAdventure Map Starter Kit. Update this package to get new UI and server features without touching your maps or config.",
|
|
5
5
|
"main": "src/server.ts",
|
|
6
6
|
"scripts": {
|
|
@@ -74,7 +74,91 @@ async function createBackgroundImageFade(images = null) {
|
|
|
74
74
|
}, 5000); // Change image every 5 seconds
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
-
//
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
77
|
+
// Mustache template for a map card (rendered in loadTMJ)
|
|
78
|
+
const CARD_TEMPLATE = `
|
|
79
|
+
<div class="map-cover" style="background-image: url('{{mapImageUrl}}');"></div>
|
|
80
|
+
<div class="map-date">
|
|
81
|
+
Last edit: {{lastModifiedFormatted}}
|
|
82
|
+
</div>
|
|
83
|
+
<div class="map-name">
|
|
84
|
+
{{mapName}}
|
|
85
|
+
</div>
|
|
86
|
+
<div class="map-detail">
|
|
87
|
+
<div class="map-file">
|
|
88
|
+
<strong>{{filename}}</strong>.tmj
|
|
89
|
+
</div>
|
|
90
|
+
<div class="map-weight">
|
|
91
|
+
<strong>{{size}}</strong>
|
|
92
|
+
<span style="opacity: .5">Mo</span>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
<div class="map-desc">
|
|
96
|
+
{{mapDescription}}
|
|
97
|
+
</div>
|
|
98
|
+
<div class="map-testurl">
|
|
99
|
+
<a href="#" class="btn" data-map-path="{{path}}">Test my map</a>
|
|
100
|
+
</div>
|
|
101
|
+
`;
|
|
102
|
+
|
|
103
|
+
// Load maps from API and render map cards with Mustache
|
|
104
|
+
async function loadTMJ() {
|
|
105
|
+
try {
|
|
106
|
+
const Mustache = (await import('https://cdn.jsdelivr.net/npm/mustache@4.2.0/+esm')).default;
|
|
107
|
+
const maps = await getMapsList();
|
|
108
|
+
|
|
109
|
+
const mapImages = maps
|
|
110
|
+
.map((map) => {
|
|
111
|
+
if (map.mapImage) {
|
|
112
|
+
return map.mapImage.startsWith('http') ? map.mapImage : `/${map.mapImage}`;
|
|
113
|
+
}
|
|
114
|
+
return null;
|
|
115
|
+
})
|
|
116
|
+
.filter((img) => img !== null);
|
|
117
|
+
|
|
118
|
+
if (mapImages.length > 0) {
|
|
119
|
+
await createBackgroundImageFade(mapImages);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
const defaultPlaceholder = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1620" height="1024"><rect fill="%231b2a41" width="100%" height="100%"/></svg>';
|
|
123
|
+
const mapsData = maps.map((map) => {
|
|
124
|
+
const mapImageUrl = map.mapImage
|
|
125
|
+
? (map.mapImage.startsWith('http') ? map.mapImage : `/${map.mapImage}`)
|
|
126
|
+
: (mapImages.length > 0 ? mapImages[0] : defaultPlaceholder);
|
|
127
|
+
return {
|
|
128
|
+
...map,
|
|
129
|
+
mapImageUrl,
|
|
130
|
+
mapDescription: map.mapDescription || 'No description available',
|
|
131
|
+
};
|
|
132
|
+
});
|
|
133
|
+
|
|
134
|
+
const mainElement = document.querySelector('main');
|
|
135
|
+
if (!mainElement) return;
|
|
136
|
+
|
|
137
|
+
mainElement.innerHTML = '';
|
|
138
|
+
mapsData.forEach((map) => {
|
|
139
|
+
const section = document.createElement('section');
|
|
140
|
+
section.className = 'card-map';
|
|
141
|
+
section.innerHTML = Mustache.render(CARD_TEMPLATE, map);
|
|
142
|
+
|
|
143
|
+
const testBtn = section.querySelector('.map-testurl a');
|
|
144
|
+
if (testBtn) {
|
|
145
|
+
testBtn.addEventListener('click', (e) => {
|
|
146
|
+
e.preventDefault();
|
|
147
|
+
const host = window.location.host;
|
|
148
|
+
let path = window.location.pathname;
|
|
149
|
+
if (path.endsWith('index.html')) {
|
|
150
|
+
path = path.slice(0, -'index.html'.length);
|
|
151
|
+
}
|
|
152
|
+
const instanceId = Math.random().toString(36).substring(2, 15);
|
|
153
|
+
const url = `https://play.workadventu.re/_/${instanceId}/${host}${path}${map.path}`;
|
|
154
|
+
window.open(url, '_blank');
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
mainElement.appendChild(section);
|
|
158
|
+
});
|
|
159
|
+
} catch (error) {
|
|
160
|
+
console.error('Error loading maps:', error);
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
export { getMapsList, getImagesList, createBackgroundImageFade, loadTMJ };
|
|
@@ -13,108 +13,11 @@
|
|
|
13
13
|
<title>WorkAdventure build your map</title>
|
|
14
14
|
<link rel="icon" href="public/images/favicon.svg" type="image/svg+xml">
|
|
15
15
|
<script type="module">
|
|
16
|
-
document.addEventListener("DOMContentLoaded", (
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
loadTMJ();
|
|
16
|
+
document.addEventListener("DOMContentLoaded", () => {
|
|
17
|
+
import('/public/assets/js/index.js').then((module) => {
|
|
18
|
+
module.loadTMJ();
|
|
20
19
|
});
|
|
21
20
|
});
|
|
22
|
-
|
|
23
|
-
async function loadTMJ() {
|
|
24
|
-
try {
|
|
25
|
-
// Get the list of maps from the API
|
|
26
|
-
const maps = await window.getMapsList();
|
|
27
|
-
|
|
28
|
-
// Retrieve map images for background fade
|
|
29
|
-
const mapImages = maps
|
|
30
|
-
.map(map => {
|
|
31
|
-
if (map.mapImage) {
|
|
32
|
-
return map.mapImage.startsWith('http') ? map.mapImage : `/${map.mapImage}`;
|
|
33
|
-
}
|
|
34
|
-
return null;
|
|
35
|
-
})
|
|
36
|
-
.filter(img => img !== null);
|
|
37
|
-
|
|
38
|
-
// Create background image fade
|
|
39
|
-
if (mapImages.length > 0) {
|
|
40
|
-
await window.createBackgroundImageFade(mapImages);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
// Mustache template for a map card
|
|
44
|
-
const cardTemplate = `
|
|
45
|
-
<div class="map-cover" style="background-image: url('{{mapImageUrl}}');"></div>
|
|
46
|
-
<div class="map-date">
|
|
47
|
-
Last edit: {{lastModifiedFormatted}}
|
|
48
|
-
</div>
|
|
49
|
-
<div class="map-name">
|
|
50
|
-
{{mapName}}
|
|
51
|
-
</div>
|
|
52
|
-
<div class="map-detail">
|
|
53
|
-
<div class="map-file">
|
|
54
|
-
<strong>{{filename}}</strong>.tmj
|
|
55
|
-
</div>
|
|
56
|
-
<div class="map-weight">
|
|
57
|
-
<strong>{{size}}</strong>
|
|
58
|
-
<span style="opacity: .5">Mo</span>
|
|
59
|
-
</div>
|
|
60
|
-
</div>
|
|
61
|
-
<div class="map-desc">
|
|
62
|
-
{{mapDescription}}
|
|
63
|
-
</div>
|
|
64
|
-
<div class="map-testurl">
|
|
65
|
-
<a href="#" class="btn" data-map-path="{{path}}">Test my map</a>
|
|
66
|
-
</div>
|
|
67
|
-
`;
|
|
68
|
-
|
|
69
|
-
// Prepare data for Mustache
|
|
70
|
-
const mapsData = maps.map(map => {
|
|
71
|
-
// Build the image URL - use the first available image or a default image
|
|
72
|
-
const mapImageUrl = map.mapImage
|
|
73
|
-
? (map.mapImage.startsWith('http') ? map.mapImage : `/${map.mapImage}`)
|
|
74
|
-
: (mapImages.length > 0 ? mapImages[0] : 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1620" height="1024"><rect fill="%231b2a41" width="100%" height="100%"/></svg>');
|
|
75
|
-
|
|
76
|
-
return {
|
|
77
|
-
...map,
|
|
78
|
-
mapImageUrl: mapImageUrl,
|
|
79
|
-
mapDescription: map.mapDescription || 'No description available'
|
|
80
|
-
};
|
|
81
|
-
});
|
|
82
|
-
|
|
83
|
-
// Render each map with Mustache and inject them into the container
|
|
84
|
-
const mainElement = document.querySelector('main');
|
|
85
|
-
if (mainElement) {
|
|
86
|
-
// Clear existing content
|
|
87
|
-
mainElement.innerHTML = '';
|
|
88
|
-
|
|
89
|
-
// Create a section for each map
|
|
90
|
-
mapsData.forEach(map => {
|
|
91
|
-
const section = document.createElement('section');
|
|
92
|
-
section.className = 'card-map';
|
|
93
|
-
section.innerHTML = Mustache.render(cardTemplate, map);
|
|
94
|
-
|
|
95
|
-
// Add an event handler for the "Test my map" button
|
|
96
|
-
const testBtn = section.querySelector('.map-testurl a');
|
|
97
|
-
if (testBtn) {
|
|
98
|
-
testBtn.addEventListener('click', (e) => {
|
|
99
|
-
e.preventDefault();
|
|
100
|
-
const host = window.location.host;
|
|
101
|
-
let path = window.location.pathname;
|
|
102
|
-
if (path.endsWith('index.html')) {
|
|
103
|
-
path = path.substr(0, path.length - 'index.html'.length);
|
|
104
|
-
}
|
|
105
|
-
const instanceId = Math.random().toString(36).substring(2, 15);
|
|
106
|
-
const url = `https://play.workadventu.re/_/${instanceId}/${host}${path}${map.path}`;
|
|
107
|
-
window.open(url, '_blank');
|
|
108
|
-
});
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
mainElement.appendChild(section);
|
|
112
|
-
});
|
|
113
|
-
}
|
|
114
|
-
} catch (error) {
|
|
115
|
-
console.error('Error loading maps:', error);
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
21
|
</script>
|
|
119
22
|
</head>
|
|
120
23
|
|
|
@@ -150,7 +53,7 @@
|
|
|
150
53
|
</div>
|
|
151
54
|
</header>
|
|
152
55
|
<main>
|
|
153
|
-
<!-- Map cards
|
|
56
|
+
<!-- Map cards are injected here by index.js -->
|
|
154
57
|
</main>
|
|
155
58
|
<div class="button-wrapper">
|
|
156
59
|
<div style="flex-grow: 1;">
|
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
<script type="module">
|
|
16
16
|
document.addEventListener("DOMContentLoaded", (event) => {
|
|
17
17
|
// Load index.js to have access to getMapsList
|
|
18
|
-
import('/public/assets/js/index.js').then(() => {
|
|
19
|
-
|
|
18
|
+
import('/public/assets/js/index.js').then((module) => {
|
|
19
|
+
module.createBackgroundImageFade();
|
|
20
20
|
});
|
|
21
21
|
});
|
|
22
22
|
</script>
|
|
@@ -47,8 +47,8 @@
|
|
|
47
47
|
<script type="module">
|
|
48
48
|
document.addEventListener("DOMContentLoaded", (event) => {
|
|
49
49
|
// Load index.js to have access to getMapsList
|
|
50
|
-
import('/public/assets/js/index.js').then(() => {
|
|
51
|
-
|
|
50
|
+
import('/public/assets/js/index.js').then((module) => {
|
|
51
|
+
module.createBackgroundImageFade();
|
|
52
52
|
});
|
|
53
53
|
});
|
|
54
54
|
</script>
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
<link rel="icon" href="public/images/favicon.svg" type="image/svg+xml">
|
|
15
15
|
<script type="module">
|
|
16
16
|
document.addEventListener("DOMContentLoaded", (event) => {
|
|
17
|
-
import('/public/assets/js/index.js').then(() => {
|
|
18
|
-
|
|
17
|
+
import('/public/assets/js/index.js').then((module) => {
|
|
18
|
+
module.createBackgroundImageFade();
|
|
19
19
|
});
|
|
20
20
|
});
|
|
21
21
|
</script>
|
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
<script type="module">
|
|
16
16
|
document.addEventListener("DOMContentLoaded", (event) => {
|
|
17
17
|
// Load index.js to have access to getMapsList
|
|
18
|
-
import('/public/assets/js/index.js').then(() => {
|
|
19
|
-
|
|
18
|
+
import('/public/assets/js/index.js').then((module) => {
|
|
19
|
+
module.createBackgroundImageFade();
|
|
20
20
|
});
|
|
21
21
|
});
|
|
22
22
|
</script>
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
<link rel="icon" href="public/images/favicon.svg" type="image/svg+xml">
|
|
15
15
|
<script type="module">
|
|
16
16
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
17
|
-
await import('/public/assets/js/index.js');
|
|
17
|
+
const module = await import('/public/assets/js/index.js');
|
|
18
18
|
const main = document.querySelector('main .maps-container');
|
|
19
19
|
const emptyEl = document.getElementById('maps-empty');
|
|
20
20
|
const errorEl = document.getElementById('maps-error');
|
|
@@ -84,8 +84,8 @@
|
|
|
84
84
|
|
|
85
85
|
// Background fade from first map image if available
|
|
86
86
|
const firstImg = maps[0]?.mapImage;
|
|
87
|
-
if (firstImg && typeof
|
|
88
|
-
|
|
87
|
+
if (firstImg && typeof module.createBackgroundImageFade === 'function') {
|
|
88
|
+
module.createBackgroundImageFade([firstImg]);
|
|
89
89
|
}
|
|
90
90
|
} catch (e) {
|
|
91
91
|
loadingEl.style.display = 'none';
|
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
<script type="module">
|
|
16
16
|
document.addEventListener("DOMContentLoaded", (event) => {
|
|
17
17
|
// Load index.js to have access to getMapsList
|
|
18
|
-
import('/public/assets/js/index.js').then(() => {
|
|
19
|
-
|
|
18
|
+
import('/public/assets/js/index.js').then((module) => {
|
|
19
|
+
module.createBackgroundImageFade();
|
|
20
20
|
});
|
|
21
21
|
});
|
|
22
22
|
</script>
|