check

Hytac · Jun 28, 2023 · 7b66e1d · 7b66e1d
1 parent 4373545
commit 7b66e1d
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 47 deletions.
diff --git a/four_colors.js b/four_colors.js
@@ -1,6 +1,6 @@
 class FourColors
 {
-	constructor(canvasId, colors, N) 
+	constructor(canvasId, colors) 
 	{
         this.PaintColors = colors;
         this.PaintCol = -1;
@@ -11,38 +11,38 @@ class FourColors
         this.canvas.addEventListener('click', this.handleMouseClick.bind(this));
 
         // init
+        /*
+        this.clock = setInterval(function(t0){
+            var now = new Date().getTime();
+            var passed = now - t0;
+
+            var timer = document.getElementById('timer');
+            timer.innerHTML = passed / 1000;
+
+        }, 1000, this.timeInit);
+        */
 
+	}
+
+    init(N)
+    {
         var w = this.canvas.width;
         var h = this.canvas.height;
 
         this.n = N;
-
         var positions = Float64Array.from({length: this.n * 2}, (_, i) => Math.random() * (i & 1 ? h : w))
-
         this.voronoi = new d3.Delaunay(positions).voronoi([0, 0, w, h])
-
         this.selected = null;
+
         // Init color array
         this.colors = Array(this.n);
         for (var i = 0; i < this.n; i++) this.colors[i] = 0;
-
         this.error = Array(this.n);
         for (var i = 0; i < this.n; i++) this.error[i] = false;
 
         this.timeInit = new Date().getTime();
-
         this.draw();
-
-        this.clock = setInterval(function(t0){
-            var now = new Date().getTime();
-            var passed = now - t0;
-
-            var timer = document.getElementById('timer');
-            timer.innerHTML = passed / 1000;
-
-        }, 1000, this.timeInit);
-
-	}
+    }
 
     handleMouseMove(event) {
         const mouseX = event.clientX - this.canvas.offsetLeft;

diff --git a/index.html b/index.html
@@ -86,10 +86,15 @@ <h1>FOUR COLORS</h1>
 
 
 		<script>
-
-
+			// Init canvas size
+			canvas_obj = document.getElementById("canvas");
+			var s = getComputedStyle(canvas_obj);
+			var w = s.width.split('px')[0];
+			var h = s.height.split('px')[0];
+			canvas_obj.width = w;
+			canvas_obj.height = h;
+			var canvas = new FourColors("canvas", paint_colors);
 
-			var N = 5;
 
 			// Set color buttons
 			b_c0 = document.getElementById("col0");
@@ -104,16 +109,7 @@ <h1>FOUR COLORS</h1>
 			for (var i = 0; i < buttons.length; i++)
 				buttons[i].style.backgroundColor = paint_colors[i];
 
-			// Init canvas size
-			canvas_obj = document.getElementById("canvas");
-			var s = getComputedStyle(canvas_obj);
-			var w = s.width.split('px')[0];
-			var h = s.height.split('px')[0];
-			canvas_obj.width = w;
-			canvas_obj.height = h;
-
 
-			var canvas = new FourColors("canvas", paint_colors, N);
 
 			function setColor(i)
 			{
@@ -130,9 +126,6 @@ <h1>FOUR COLORS</h1>
 			b_c3.onclick = function() { setColor(3); }
 			b_c4.onclick = function() { setColor(4); }
 
-			// Select first color as default
-			setColor(1);
-
 			// Set pop-up functionality
 			var modal_intro = document.getElementById("help-box");
 			var modal_finish = document.getElementById("congrats-box");
@@ -149,22 +142,25 @@ <h1>FOUR COLORS</h1>
 			}
 
 			// Set menu funciontionality
-			b_easy = document.getElementById("easy");
-			b_med = document.getElementById("medium");
-			b_hard = document.getElementById("hard");
 			document.getElementById("about").onclick = function() {
 				modal_about.style.display = "block";
 			}
-
-			b_easy.onclick = function() { 
-				canvas = new FourColors("canvas", paint_colors, 8);
+			document.getElementById("easy").onclick = function() { 
+				canvas.init(8);
+				setColor(1);
+			}
+			document.getElementById("medium").onclick = function() { 
+				canvas.init(30);
+				setColor(1);
 			}
-			b_med.onclick = function() { 
-				canvas = new FourColors("canvas", paint_colors, 30);
+			document.getElementById("hard").onclick = function() { 
+				canvas.init(50);
+				setColor(1);
 			}
-			b_hard.onclick = function() { 
-				canvas = new FourColors("canvas", paint_colors, 50);
-			 }
+
+			// Default init on medium level
+			canvas.init(30);
+			setColor(1);
 
 		</script>
 

diff --git a/style.css b/style.css
@@ -1,7 +1,7 @@
 body
 {
     background-color: white;
-    color: black;
+    /*color: black;*/
     text-align: justify;
     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
     line-height: 1.5em;
@@ -11,11 +11,12 @@ body
     width: 90%;
 }
 
+/*
 .container
 {
-  border: 1px solid black;
+  border: 0px solid black;
 }
-
+*/
 canvas
 {
     border-style: solid;
@@ -80,7 +81,7 @@ h1
 .dropdown:hover .dropdown-content {display: block;}
 
 /* Change the background color of the dropdown button when the dropdown content is shown */
-.dropdown:hover .dropbtn {background-color: #3e8e41;}
+.dropdown:hover .dropbtn {background-color: #9b9b9b;}