Information added. Readme, welcome message on page load

README.md

@@ -0,0 +1,57 @@
+# Online Map Maker for the 42 so_long project
+
+With this **online** map maker you can visually design your own maps for the 42 so_long project and export them as a number map. 
+
+If you have any suggestions or want to add features yourself, just join the project.
+
+
+![Alt text](img/screenshot.png?raw=true "Title")
+
+# Toolbox
+
+There are several tools in the Map Maker which are explained below. New features will be added soon.
+
+## Map size
+
+**Height:** Set the height of your map
+**Width:** Set the hidth of your map
+
+if you create a big map you will have to use the zoom out feature.
+
+## Enemy Identification (so_long BONUS)
+
+If you want to create a map with enemies you can set your so_long bonus enemy char / int.
+
+## Rubber
+
+Not sure which Block you want at this Position? No problem, just use the rubber to delete the actual block.
+You dont have to use the rubber,  **you can just replace the actual block with another one.**
+
+**IMPORTANT:** if you generate a map with white rubber places you will have some "6" in your number map. its only for visual purpose.
+
+## Zoom out
+
+To see the whole map, you can zoom in.
+**Be careful:** zooming in can freeze the page at the moment.
+
+## Pencils
+
+**Wall:** Draw walls (NumberMap identifier: 1)
+**Floor:** Draw the floor. Floor is the default filled block (NumberMap identifier: 0)
+**Collectible:** Draw collectibles (NumberMap identifier: 1)
+**Player/Start:** Draw start (NumberMap identifier: P)
+**Enemy:** Draw enemy (NumberMap identifier: [your choice -> default F])
+**Goal:** Draw exit (NumberMap identifier: E)
+
+## Generate
+
+just click on generate and copy your generated NumberMap!
+
+
+# Future features
+
+- **Auto Maze/Map Generator** (generate tons of maps that automatically follow the rules or are suitable for evaluations)  
+- **multiple pencil settings** (like size) and tools like "**fill an area**"  
+- **Custom start fill** ((currently it's the floor))  
+- **Better Map graphics** (if you have good ones push them ;) )
+- **import** your current map to edit it

custom.js

@@ -4,6 +4,7 @@ document.addEventListener("DOMContentLoaded", function () {
     document.getElementById("nw").addEventListener("change", map_async);
     document.getElementById("nh").addEventListener("change", map_async);
     document.getElementById("generate").addEventListener("click", generate_map_code);
+    document.getElementById("close-modal").addEventListener("click", close_modal);
 
 	// Pencil Selection --> need more pencils like brush
     document.querySelectorAll('.pencil').forEach(function(pencil) {
@@ -17,6 +18,13 @@ document.addEventListener("DOMContentLoaded", function () {
 		});
 	});
 
+    window.onload = function() {
+        setTimeout(function() {
+          document.getElementById('modal').style.opacity = 1;
+          document.getElementById('modal-content').style.transform = 'translateX(0)';
+        }, 1500);
+      };
+
 
 	// Zoom Slider --> need to be improved, a bit laggy
 	let zoomTimeout;
@@ -44,6 +52,10 @@ document.addEventListener("DOMContentLoaded", function () {
 		return numberMap;
 	}
 
+    function close_modal() {
+        document.getElementById("modal").style.display = "none";
+    }
+
 	// clear all visual cells from the game container
 	function clearCells() {
 		const cells = document.querySelectorAll(".cell");

index.html

@@ -14,6 +14,23 @@ <h1>42 So Long Map Maker</h1>
 	 </a> 
     </header>
 
+	<div id="modal" class="modal">
+		<div class="modal-content" id="modal-content">
+			<h2>Some Informations:</h2>
+			<p>With this map maker you can visually design your own maps for your so_long project and export them as a number map.<br />
+				Although it&#39;s still under development, you can choose different pencils to customize your map with walls, floor, collectibles and even enemies with your specific character (like &quot;A&quot; or a number).</p>
+				<p>if you wanna scale your map (width & height) up you may have to use the zoom function.</p>
+				<p style="color: red;">BE CAREFUL: zoom in may cause page freeze at the moment</p>
+				<p><strong>coming soon:</strong></p>
+
+				<p>- <strong>Map Generato</strong>r (generate tons of maps that automatically follow the rules or are suitable for evaluations)<br />
+				- <strong>multiple pencil settings</strong> (like size) and tools like &quot;<strong>fill an area</strong>&quot;<br />
+				- <strong>Custom start fill</strong> (at the moment it&#39;s the Floor)<br />
+				- <strong>Better Map graphics</strong> (if you have good ones push them ;) )</p>
+			<button id="close-modal">Okay</button>	
+		</div>
+	</div>
+
 	<div id="toolbar">
 		<input id="select-value" type="hidden"></input>
 		<div class="toolbar-item-group" id="floor">

style.css

@@ -10,13 +10,69 @@ body {
 	flex-direction: column;
 	justify-content: center;
 	height: 100vh;
-
 	background-color: #ffffff;
 	opacity: 0.8;
 	background-image: radial-gradient(#a9a9a9 0.55px, #ffffff 0.55px);
 	background-size: 11px 11px;
 }
 
+/* --Welcome Modal-- */
+.modal {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	background-color: #ffffff9d;
+	z-index: 1000;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	opacity: 0;
+	transition: 1s;
+}
+
+.modal-content {
+	width: 900px;
+	background-color: #ffffff;
+	padding: 20px;
+	border-radius: 20px;
+	box-shadow: 0px 0px 50px 0px #d1d1d1c7;
+	box-shadow: 0px 0px 70px 10px #afafaf;
+	padding: 20px;
+	padding: 40px;
+	font-family: Verdana, Geneva, Tahoma, sans-serif;
+	font-size: medium;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	transform: translateX(-20px);
+	transition: 1s;
+}
+
+#close-modal {
+	position: relative;
+	padding-left: 10px;
+	padding-right: 10px;
+	margin-bottom: 2px;
+	background-color: rgb(12, 179, 0);
+	border: 0;
+	font-size: 20px;
+	transition: 1s;
+	display: flex;
+	align-self: flex-end;
+	text-transform: uppercase;
+	color: white;
+	margin-top: 30px;
+	margin-right: 10px;
+	transition: 1s;
+}
+
+#close-modal:hover {
+	transform: translate(5px, 0px);
+	transition: 1s;
+}
+
+/* --Header-- */
+
 header {
 	display: flex;
 	z-index: 100;
@@ -68,6 +124,13 @@ h1 {
 	color: black;
 }
 
+h2 {
+	font-size: 28px;
+	font-family: 'Roboto', sans-serif;
+	color: black;
+	text-transform: uppercase;
+}
+
 h3 {
 	font-size: 15px;
 	font-family: 'Roboto', sans-serif;