Skip to content

Commit da58906

Browse files
gparantgparant
committed
fix: refactor index.js and move loadTMJ function inisde
1 parent 0bf232b commit da58906

File tree

8 files changed

+105
-118
lines changed

8 files changed

+105
-118
lines changed

‎public/assets/js/index.js‎

Lines changed: 88 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,91 @@ async function createBackgroundImageFade(images = null) {
7474
}, 5000); // Change image every 5 seconds
7575
}
7676

77-
// Exporter la fonction pour qu'elle soit accessible depuis index.html
78-
// Use a global declaration for TypeScript/JavaScript
79-
window.getMapsList = getMapsList;
80-
window.createBackgroundImageFade = createBackgroundImageFade;
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 };

‎public/assets/views/index.html‎

Lines changed: 4 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -13,108 +13,11 @@
1313
<title>WorkAdventure build your map</title>
1414
<link rel="icon" href="public/images/favicon.svg" type="image/svg+xml">
1515
<script type="module">
16-
document.addEventListener("DOMContentLoaded", (event) => {
17-
// Load index.js to have access to getMapsList
18-
import('/public/assets/js/index.js').then(() => {
19-
loadTMJ();
16+
document.addEventListener("DOMContentLoaded", () => {
17+
import('/public/assets/js/index.js').then((module) => {
18+
module.loadTMJ();
2019
});
2120
});
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-
}
11821
</script>
11922
</head>
12023

@@ -150,7 +53,7 @@
15053
</div>
15154
</header>
15255
<main>
153-
<!-- Map cards will be injected here dynamically by Mustache -->
56+
<!-- Map cards are injected here by index.js -->
15457
</main>
15558
<div class="button-wrapper">
15659
<div style="flex-grow: 1;">

‎public/assets/views/step1-git.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
<script type="module">
1616
document.addEventListener("DOMContentLoaded", (event) => {
1717
// Load index.js to have access to getMapsList
18-
import('/public/assets/js/index.js').then(() => {
19-
window.createBackgroundImageFade();
18+
import('/public/assets/js/index.js').then((module) => {
19+
module.createBackgroundImageFade();
2020
});
2121
});
2222
</script>

‎public/assets/views/step2-hosting.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@
4747
<script type="module">
4848
document.addEventListener("DOMContentLoaded", (event) => {
4949
// Load index.js to have access to getMapsList
50-
import('/public/assets/js/index.js').then(() => {
51-
window.createBackgroundImageFade();
50+
import('/public/assets/js/index.js').then((module) => {
51+
module.createBackgroundImageFade();
5252
});
5353
});
5454
</script>

‎public/assets/views/step3-steps-selfhosted.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
<link rel="icon" href="public/images/favicon.svg" type="image/svg+xml">
1515
<script type="module">
1616
document.addEventListener("DOMContentLoaded", (event) => {
17-
import('/public/assets/js/index.js').then(() => {
18-
window.createBackgroundImageFade();
17+
import('/public/assets/js/index.js').then((module) => {
18+
module.createBackgroundImageFade();
1919
});
2020
});
2121
</script>

‎public/assets/views/step3-steps.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
<script type="module">
1616
document.addEventListener("DOMContentLoaded", (event) => {
1717
// Load index.js to have access to getMapsList
18-
import('/public/assets/js/index.js').then(() => {
19-
window.createBackgroundImageFade();
18+
import('/public/assets/js/index.js').then((module) => {
19+
module.createBackgroundImageFade();
2020
});
2121
});
2222
</script>

‎public/assets/views/step4-validated-selfhosted.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<link rel="icon" href="public/images/favicon.svg" type="image/svg+xml">
1515
<script type="module">
1616
document.addEventListener("DOMContentLoaded", async () => {
17-
await import('/public/assets/js/index.js');
17+
const module = await import('/public/assets/js/index.js');
1818
const main = document.querySelector('main .maps-container');
1919
const emptyEl = document.getElementById('maps-empty');
2020
const errorEl = document.getElementById('maps-error');
@@ -84,8 +84,8 @@
8484

8585
// Background fade from first map image if available
8686
const firstImg = maps[0]?.mapImage;
87-
if (firstImg && typeof window.createBackgroundImageFade === 'function') {
88-
window.createBackgroundImageFade([firstImg]);
87+
if (firstImg && typeof module.createBackgroundImageFade === 'function') {
88+
module.createBackgroundImageFade([firstImg]);
8989
}
9090
} catch (e) {
9191
loadingEl.style.display = 'none';

‎public/assets/views/step4-validated.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
<script type="module">
1616
document.addEventListener("DOMContentLoaded", (event) => {
1717
// Load index.js to have access to getMapsList
18-
import('/public/assets/js/index.js').then(() => {
19-
window.createBackgroundImageFade();
18+
import('/public/assets/js/index.js').then((module) => {
19+
module.createBackgroundImageFade();
2020
});
2121
});
2222
</script>

0 commit comments

Comments
 (0)