@workadventure/map-starter-kit-core 0.0.1

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.
@@ -0,0 +1,154 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <meta name="robots" content="noindex">
9
+ <meta name="title" content="WorkAdventure Starter Kit">
10
+
11
+ <link href="public/styles/styles.css" rel="stylesheet">
12
+
13
+ <title>WorkAdventure test map</title>
14
+ <link rel="icon" href="/images/favicon.svg" type="image/svg+xml">
15
+ <script type="module">
16
+ document.addEventListener("DOMContentLoaded", (event) => {
17
+ // Load index.js to have access to getMapsList
18
+ import('/public/assets/index.js').then(() => {
19
+ window.createBackgroundImageFade();
20
+ });
21
+ });
22
+ </script>
23
+ </head>
24
+
25
+ <body>
26
+ <div class="content">
27
+ <header>
28
+ <div class="logo">
29
+ <a href="https://workadventu.re/" target="_blank" title="Workadventure">
30
+ <img src="public/images/logo.svg" alt="Workadventure logo" height="36" />
31
+ </a>
32
+ </div>
33
+ <div style="flex-grow: 1;"></div>
34
+ <div class="socials">
35
+ <a href="https://discord.gg/G6Xh9ZM9aR" target="_blank" title="discord">
36
+ <img src="/public/images/brand-discord.svg" alt="discord">
37
+ </a>
38
+ <a href="https://github.com/thecodingmachine/workadventure" target="_blank" title="github">
39
+ <img src="/public/images/brand-github.svg" alt="github">
40
+ </a>
41
+ <a href="https://www.youtube.com/channel/UCXJ9igV-kb9gw1ftR33y5tA" target="_blank" title="youtube">
42
+ <img src="/public/images/brand-youtube.svg" alt="youtube">
43
+ </a>
44
+ <a href="https://twitter.com/Workadventure_" target="_blank" title="twitter">
45
+ <img src="/public/images/brand-x.svg" alt="X">
46
+ </a>
47
+ <a href="https://www.linkedin.com/company/workadventu-re" target="_blank" title="linkedin">
48
+ <img src="/public/images/brand-linkedin.svg" alt="linkedin">
49
+ </a>
50
+ </div>
51
+ <div class="btn-header-wrapper">
52
+ <a href="https://discord.gg/G6Xh9ZM9aR" target="_blank" class="btn btn-light">Talk to the community</a>
53
+ <a href="https://docs.workadventu.re/map-building/" target="_blank" class="btn">Documentation</a>
54
+ </div>
55
+ </header>
56
+ <main>
57
+ <section class="form-center">
58
+ <h1>
59
+ How do you want to publish your map?
60
+ </h1>
61
+ <div class="sub-heading">
62
+ Choose the workflow that best fits your team and your way of working.
63
+ </div>
64
+ <div class="radio-wrapper">
65
+ <label class="radio-card">
66
+ <input name="advanced" class="radio" type="radio">
67
+ <div class="card-details">
68
+ <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
69
+ <path d="M8.125 19.5L16.25 27.625L32.5 11.375" stroke="#4156F6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
70
+ </svg>
71
+
72
+ <h2>
73
+ Advanced publishing
74
+ </h2>
75
+ <div>
76
+ <strong>Designed for teams using Git and file versioning.</strong>
77
+ Full control over your files and collaboration workflow.
78
+ </div>
79
+ </div>
80
+ </label>
81
+ <label class="radio-card">
82
+ <input name="advanced" class="radio" type="radio" checked>
83
+ <div class="card-details">
84
+ <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
85
+ <path d="M8.125 19.5L16.25 27.625L32.5 11.375" stroke="#4156F6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
86
+ </svg>
87
+
88
+ <h2>
89
+ Recommended publishing
90
+ </h2>
91
+ <div>
92
+ <strong>The easiest and fastest way to publish your map.</strong>
93
+ No technical setup required. Ideal for getting started quickly.
94
+ </div>
95
+ </div>
96
+ </label>
97
+ </div>
98
+
99
+ </section>
100
+ </main>
101
+ <div class="button-wrapper">
102
+ <div>
103
+ <a href="/" class="btn btn-ghost">
104
+ Previous
105
+ </a>
106
+ </div>
107
+ <div style="flex-grow: 1;">
108
+ </div>
109
+ <div>
110
+ <a href="step2-hosting" class="btn btn-secondary">
111
+ Start configuration
112
+ </a>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ <div class="bg"></div>
117
+ <script>
118
+ // Get radio buttons by finding the label containing "Advanced publishing"
119
+ const radioButtons = document.querySelectorAll('input[name="advanced"]');
120
+ const startConfigButton = document.querySelector('a[href="step2-hosting"]');
121
+ const docUrl = "https://docs.workadventu.re/map-building/tiled-editor/publish/wa-hosted";
122
+
123
+ // Find Advanced publishing radio button by checking parent label text
124
+ let advancedPublishingRadio = null;
125
+ radioButtons.forEach(radio => {
126
+ const label = radio.closest('label');
127
+ if (label && label.textContent.includes('Advanced publishing')) {
128
+ advancedPublishingRadio = radio;
129
+ }
130
+ });
131
+
132
+ // Function to update button href based on selection
133
+ function updateButtonHref() {
134
+ // Check if Advanced publishing is selected
135
+ if (advancedPublishingRadio && advancedPublishingRadio.checked) {
136
+ startConfigButton.href = docUrl;
137
+ startConfigButton.target = "_blank";
138
+ } else {
139
+ startConfigButton.href = "step2-hosting";
140
+ startConfigButton.removeAttribute("target");
141
+ }
142
+ }
143
+
144
+ // Add event listeners to all radio buttons
145
+ radioButtons.forEach(radio => {
146
+ radio.addEventListener('change', updateButtonHref);
147
+ });
148
+
149
+ // Initialize on page load
150
+ updateButtonHref();
151
+ </script>
152
+ </body>
153
+
154
+ </html>
@@ -0,0 +1,153 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <meta name="robots" content="noindex">
9
+ <meta name="title" content="WorkAdventure Starter Kit">
10
+
11
+ <link href="public/styles/styles.css" rel="stylesheet">
12
+
13
+ <title>WorkAdventure test map</title>
14
+ <link rel="icon" href="/images/favicon.svg" type="image/svg+xml">
15
+ </head>
16
+
17
+ <body>
18
+ <div class="content">
19
+ <header>
20
+ <div class="logo">
21
+ <a href="https://workadventu.re/" target="_blank" title="Workadventure">
22
+ <img src="public/images/logo.svg" alt="Workadventure logo" height="36" />
23
+ </a>
24
+ </div>
25
+ <div style="flex-grow: 1;"></div>
26
+ <div class="socials">
27
+ <a href="https://discord.gg/G6Xh9ZM9aR" target="_blank" title="discord">
28
+ <img src="/public/images/brand-discord.svg" alt="discord">
29
+ </a>
30
+ <a href="https://github.com/thecodingmachine/workadventure" target="_blank" title="github">
31
+ <img src="/public/images/brand-github.svg" alt="github">
32
+ </a>
33
+ <a href="https://www.youtube.com/channel/UCXJ9igV-kb9gw1ftR33y5tA" target="_blank" title="youtube">
34
+ <img src="/public/images/brand-youtube.svg" alt="youtube">
35
+ </a>
36
+ <a href="https://twitter.com/Workadventure_" target="_blank" title="twitter">
37
+ <img src="/public/images/brand-x.svg" alt="X">
38
+ </a>
39
+ <a href="https://www.linkedin.com/company/workadventu-re" target="_blank" title="linkedin">
40
+ <img src="/public/images/brand-linkedin.svg" alt="linkedin">
41
+ </a>
42
+ </div>
43
+ <div class="btn-header-wrapper">
44
+ <a href="#" class="btn btn-light">Talk to the community</a>
45
+ <a href="#" class="btn">Documentation</a>
46
+ </div>
47
+ <script type="module">
48
+ document.addEventListener("DOMContentLoaded", (event) => {
49
+ // Load index.js to have access to getMapsList
50
+ import('/public/assets/index.js').then(() => {
51
+ window.createBackgroundImageFade();
52
+ });
53
+ });
54
+ </script>
55
+ </header>
56
+ <main>
57
+ <section class="form-center">
58
+ <h1>
59
+ Which version of WorkAdventure do you use?
60
+ </h1>
61
+ <div class="sub-heading">
62
+ Choose the setup that matches how your WorkAdventure instance is running. This will help us adapt the publishing process to your setup.
63
+ </div>
64
+ <div class="radio-wrapper">
65
+ <label class="radio-card">
66
+ <input name="advanced" class="radio" type="radio">
67
+ <div class="card-details">
68
+ <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
69
+ <path d="M8.125 19.5L16.25 27.625L32.5 11.375" stroke="#4156F6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
70
+ </svg>
71
+
72
+ <h2>
73
+ I use self-hosted
74
+ </h2>
75
+ <div>
76
+ Your map is published on your own WorkAdventure instance.
77
+ <strong>You manage the hosting, configuration, and updates yourself.</strong>
78
+ </div>
79
+ </div>
80
+ </label>
81
+ <label class="radio-card">
82
+ <input name="advanced" class="radio" type="radio">
83
+ <div class="card-details">
84
+ <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
85
+ <path d="M8.125 19.5L16.25 27.625L32.5 11.375" stroke="#4156F6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
86
+ </svg>
87
+
88
+ <h2>
89
+ I use SaaS version
90
+ </h2>
91
+ <div>
92
+ Your map is published on the WorkAdventure platform.
93
+ <strong>We handle hosting, updates, and infrastructure for you.</strong>
94
+ </div>
95
+ </div>
96
+ </label>
97
+ </div>
98
+
99
+ </section>
100
+ </main>
101
+ <div class="button-wrapper">
102
+ <div>
103
+ <a href="step1-git" class="btn btn-ghost">
104
+ Previous
105
+ </a>
106
+ </div>
107
+ <div style="flex-grow: 1;">
108
+ </div>
109
+ <div>
110
+ <a href="step3-steps" class="btn btn-secondary">
111
+ Configure
112
+ </a>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ <div class="bg"></div>
117
+ <script>
118
+ // Get radio buttons by finding the label containing "I use self-hosted"
119
+ const radioButtons = document.querySelectorAll('input[name="advanced"]');
120
+ const configureButton = document.querySelector('a[href="step3-steps"]');
121
+
122
+ // Find "I use self-hosted" radio button by checking parent label text
123
+ let selfHostedRadio = null;
124
+ radioButtons.forEach(radio => {
125
+ const label = radio.closest('label');
126
+ if (label && label.textContent.includes('I use self-hosted')) {
127
+ selfHostedRadio = radio;
128
+ }
129
+ });
130
+
131
+ // Function to update button href based on selection
132
+ function updateButtonHref() {
133
+ // Check if "I use self-hosted" is selected
134
+ if (selfHostedRadio && selfHostedRadio.checked) {
135
+ configureButton.href = "step3-steps-selfhosted";
136
+ configureButton.removeAttribute("target");
137
+ } else {
138
+ configureButton.href = "step3-steps";
139
+ configureButton.removeAttribute("target");
140
+ }
141
+ }
142
+
143
+ // Add event listeners to all radio buttons
144
+ radioButtons.forEach(radio => {
145
+ radio.addEventListener('change', updateButtonHref);
146
+ });
147
+
148
+ // Initialize on page load
149
+ updateButtonHref();
150
+ </script>
151
+ </body>
152
+
153
+ </html>