const color_names = ["Bleu", "Blanc", "Rouge", "Orange", "Noir", "Vert", "Marron", "Jaune"];
const color_values = ["#0384fc","#ffffff","#ff2a1f","#ff9f05","#000000","#6ee03d","#a14d2b","#ffd321"];
var selection = [-1,-1,-1,-1,-1];
const selection_origin = {x: 300, y: 700};
const tentatives_origin = {x: 300, y: 600};
const colors_origin = {x: 1000, y: 300};
const submit_rect = {x1: 1000, y1: 400, x2: 1190, y2: 440}
const scores_origin = {x: 600, y:600};
createCanvas(windowWidth, windowHeight);
var available_colors = [];
for (var i = 0; i < color_names.length; i++) { available_colors.push(i); }
for (var j = 0; j < 4; j++) {
var index = floor(random(available_colors.length));
solution.push(available_colors[index]);
available_colors.splice(index, 1);
var doublon = random() < 0.5;
var color_index = floor(random(solution.length))
var insert_index = floor(random(solution.length))
solution.splice(insert_index,0,color_index);
var last_index = floor(random(available_colors.length));
solution.push(available_colors[last_index]);
afficher_tentatives(tentatives_origin.x, tentatives_origin.y, tentatives);
afficher_selection(selection_origin.x, selection_origin.y, selection);
afficher_choix_couleurs(colors_origin.x, colors_origin.y);
afficher_scores(scores_origin.x, scores_origin.y, scores);
function afficher_ligne(x, y, ligne) {
for (var i = 0; i < ligne.length; i++) {
if (ligne[i] != -1) fill(color_values[ligne[i]]);
var xe = x + i*pin_radius*2.5;
ellipse(xe, y, xe+pin_radius*2, y+pin_radius*2);
function afficher_selection(x, y, selection) {
for (var i = 0; i < selection.length; i++) {
if (selection[i] != -1) {
fill(color_values[selection[i]]);
if (selection_index == i) stroke("white");
var xe = x + i*pin_radius*2.5;
ellipse(xe, y, xe+pin_radius*2, y+pin_radius*2);
function afficher_tentatives(x, y, tentatives) {
for (var i = 0; i < tentatives.length; i++) {
var yl = y - i*pin_radius*2.5;
afficher_ligne(x,yl,tentatives[i]);
function mousePressed() {
if (mouseX > submit_rect.x1 && mouseX < submit_rect.x2 && mouseY > submit_rect.y1 && mouseY < submit_rect.y2) {
tentatives.push([...selection]);
scores.push(verifier_tentative([...selection]));
selection = [-1,-1,-1,-1,-1];
if (mouseY > selection_origin.y && mouseY < selection_origin.y + pin_radius*2) {
var div = floor( (mouseX - selection_origin.x) / (pin_radius*2.5) );
if (div >= 0 && div < 5 && mouseX < selection_origin.x + div*pin_radius*2.5 + pin_radius*2) {
var cdiv1 = floor( (mouseX - colors_origin.x) / (pin_radius*2.5) );
var cdiv2 = floor( (mouseY - colors_origin.y) / (pin_radius*2.5) );
if (cdiv1 >= 0 && cdiv1 < 4 && mouseX < colors_origin.x + pin_radius*(2.5*cdiv1+2) && cdiv2 >= 0 && cdiv2 < 2 && mouseY < colors_origin.y + pin_radius*(2.5*cdiv2+2)) {
var index = cdiv1 + 4*cdiv2;
selection[selection_index] = index;
if (selection_index < 4) { selection_index++; }
else { selection_index = 0 }
function afficher_choix_couleurs(x, y) {
for (var row = 0; row < 2; row++) {
var yc = y + row*pin_radius*2.5;
for (var col = 0; col < 4; col++) {
var xc = x + col*pin_radius*2.5;
fill(color_values[4*row + col]);
ellipse(xc, yc, xc+pin_radius*2, yc+pin_radius*2);
function afficher_submit() {
rect(submit_rect.x1,submit_rect.y1,submit_rect.x2,submit_rect.y2);
text("VALIDER",submit_rect.x1,submit_rect.y1+15,200);
function verifier_tentative(tentative) {
for (var i = 0; i < 5; i++) {
if (solution[i] == tentative[i]) {
for (var i = 0; i < 5; i++) {
var index = tentative.indexOf(solution[i])
if (tentative[i] != -1 && index != -1) {
function afficher_scores(x,y,scores) {
for (var i = 0; i < tentatives.length; i++) {
var yl = y - i*pin_radius*2.5;
var blancs = scores[i][0];
var noirs = scores[i][1];
for (var j = 0; j < 5; j++) {
if (j < blancs) ligne.push(1);
else if (j < blancs+noirs) ligne.push(4);
afficher_ligne(x,yl,ligne);