Init repo

Gouderg · Jul 13, 2022 · 0568a4b · 0568a4b
commit 0568a4b
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,8 @@
+# Wave drawing
+
+Draw with some predefined tiles and the wave collapse function algorithm
+
+- Commencer par l'algorithme de base avec des templates de base
+- Ajouter la possibilité de pouvoir faire des rotations de tiles
+- Utiliser que des tuiles de couleurs pour tenter de faire des mosaiques.
+- Faire un générateur de règle avant pour permettre de créer des patterns encore plus différents.
diff --git a/css/constante.css b/css/constante.css
@@ -0,0 +1,11 @@
+:root {
+    --background: #bbd2e1;
+
+    --predefined_1: #c1946a;
+    --predefined_2: #405d27;
+    --predefined_3: #3e4444;
+    --predefined_4: #82b74b;
+
+
+    --tile-size: 32px;
+}
diff --git a/css/index.css b/css/index.css
@@ -0,0 +1,39 @@
+/* Layout de la page */
+
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: var(--background);
+}
+
+.container-grid {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.grid {
+    display: flex;
+    flex-direction: column;
+}
+
+.row {
+    display: flex;
+    flex-direction: row;
+}
+
+.tile {
+    margin: 1px;
+    width: var(--tile-size);
+    height: var(--tile-size);
+
+    /* border: 1px solid black; */
+}
+.color1 {
+    background-color: var(--predefined_1);
+}
+
+.color2 {
+    background-color: var(--predefined_4);
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wave drawing</title>
+
+    <!-- CSS -->
+    <link type="text/css" rel="stylesheet" href="css/constante.css">
+    <link type="text/css" rel="stylesheet" href="css/index.css">
+
+    <!-- JS -->
+    <script src="js/index.js" defer></script>
+
+
+</head>
+<body onload="initgrid()">
+    <section id="container-grid" class="container-grid">
+        <div class="grid" id="grid"></div>
+        <button class="grid-button" id="grid-button"></button>
+    </section>
+    <section id="menu" class="menu"></section>
+</body>
+</html>
diff --git a/js/index.js b/js/index.js
@@ -0,0 +1,37 @@
+'use strict';
+
+const nbTiles = 20;
+let grid = [];
+
+
+function initgrid() {
+    for (let i = 0; i < nbTiles; i++) {
+        let val = []
+        for (let j = 0; j < nbTiles; j++) {
+            val.push(i+j);
+        }
+        grid.push(val);
+    }
+
+    drawgrid()
+}
+
+
+
+function drawgrid() {
+    let grid_inner = "";
+    for (let i = 0; i < nbTiles; i++) {
+        let row = "<div class='row'>"
+        for (let j = 0; j < nbTiles; j++) {
+            if (grid[i][j] % 2) {
+                row += "<div class='tile color2'>&nbsp;</div>"
+            } else {
+                row += "<div class='tile color1'>&nbsp;</div>"
+            }
+        }
+        row += "</div>"
+        grid_inner += row
+    }
+
+    document.getElementById("grid").innerHTML = grid_inner
+}