-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
179 lines (153 loc) · 5.39 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>4 Colors</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="icon.png">
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="four_colors.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Four colors" />
<meta property="og:image" content="preview.png" />
</head>
<body>
<!-- Intro pop-up -->
<div id="help-box" class="modal">
<div class="modal-content">
<span class="close" id="closebtn_1">×</span>
<p>Bienvenido a Four colors.</p>
<p>El objetivo del juego es colorear por completo el mapa de tal forma que 2 regiones conectadas siempre
tengan distinto color.
</p>
<p></p>
</div>
</div>
<!-- Intro pop-up -->
<div id="congrats-box" class="modal">
<div class="modal-content">
<span class="close" id="closebtn_2">×</span>
<p>¡¡Enhorabuena!! Has conseguido completar el mapa en</p>
<p class="big_text" id="timer">5.0 s</p>
</div>
</div>
<!-- About pop-up -->
<div id="about-box" class="modal">
<div class="modal-content">
<span class="close" id="closebtn_3">×</span>
<p>El teorema de los 4 colores es uno de los resultados más conocidos y llamativos de la teoría de grafos. Este teorema
establece que cualquier mapa geográfico en un plano, puede ser coloreado con solo 4 colores de manera que ninguna
región adyacente tenga el mismo color.</p>
<p>Este problema fue planteado por primera vez en el siglo XIX, aunque sólo pudo ser demostrado en 1976 utilizando métodos
computacionales.</p>
<p>Este teorema ha encontrado aplicaciones en diversos campos, como la cartografía, la planificación de horarios y la
asignación de recursos. En resumen, es un resultado sorprendente que lo convierte en uno de los logros más
reconocidos y emocionantes en la historia de las matemáticas.</p>
<p>Para saber más visita <a href="https://es.wikipedia.org/wiki/Teorema_de_los_cuatro_colores">Teorema de los Cuatro Colores</a></p>
<p>Copyright: Leandro Ruiz, 2023</p>
</div>
</div>
<div class="container">
<div class="title_area">
<div class="dropdown">
<button id="menu" class="dropbtn">
<img src="menu.png" width="20px" class="img" />
</button>
<div class="dropdown-content">
<a id="easy">Facil</a>
<a id="medium">Medio</a>
<a id="hard">Dificil</a>
<a id="about">Sobre el juego</a>
</div>
</div>
<div class="title">
<h1>FOUR COLORS</h1>
</div>
</div>
<canvas id="canvas" width="100" height="100"></canvas>
<br/>
<div class="button-group">
<button id="col1" class="button"></button>
<button id="col2" class="button"></button>
<button id="col3" class="button"></button>
<button id="col4" class="button"></button>
<button id="col0" class="button"></button>
</div>
<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 paint_colors = ['white', '#e4c1f9', '#a9def9', '#d0f4de', '#fcf6bd'];
var canvas = new FourColors("canvas", paint_colors);
// Set color buttons
b_c0 = document.getElementById("col0");
b_c0.style.display = 'none';
b_c1 = document.getElementById("col1");
b_c2 = document.getElementById("col2");
b_c3 = document.getElementById("col3");
b_c4 = document.getElementById("col4");
var buttons = [b_c0, b_c1, b_c2, b_c3, b_c4];
for (var i = 0; i < buttons.length; i++)
buttons[i].style.backgroundColor = paint_colors[i];
function setColor(i)
{
buttons.forEach(b => {
b.classList.remove('active');
});
buttons[i].classList.add('active');
canvas.PaintCol = i;
}
b_c0.onclick = function() { setColor(0); }
b_c1.onclick = function() { setColor(1); }
b_c2.onclick = function() { setColor(2); }
b_c3.onclick = function() { setColor(3); }
b_c4.onclick = function() { setColor(4); }
// Set pop-up functionality
var modal_intro = document.getElementById("help-box");
var modal_finish = document.getElementById("congrats-box");
var modal_about = document.getElementById("about-box");
modal_intro.style.display = "block";
document.getElementById("closebtn_1").onclick = function() {
modal_intro.style.display = "none";
}
document.getElementById("closebtn_2").onclick = function() {
modal_finish.style.display = "none";
}
document.getElementById("closebtn_3").onclick = function() {
modal_about.style.display = "none";
}
// Set menu funciontionality
document.getElementById("about").onclick = function() {
modal_about.style.display = "block";
}
document.getElementById("easy").onclick = function() {
canvas.init(8);
setColor(1);
}
document.getElementById("medium").onclick = function() {
canvas.init(30);
setColor(1);
}
document.getElementById("hard").onclick = function() {
canvas.init(50);
setColor(1);
}
// Manage finish event
canvas.addEventListener(
"finished",
(e) => {
var timer = document.getElementById("timer");
timer.innerText = e.detail.toFixed(1) + " s";
modal_finish.style.display = "block";
}
);
// Default init on medium level
canvas.init(30);
setColor(1);
</script>
</div>
</body>