Rubiks_Cube/public/data/scripts/sketch.js

"use strict"

let debug = false,
	viewPort = {x: 0, y: 0},
	font;

let cube,
	mode = true;

let oldMouse = {x: 0, y: 0},
	rotation = {x: -Math.PI / 8, y: -Math.PI / 4};

function preload(){
	font = loadFont("data/styles/font.ttf");
}

function setup(){
	canvasSetup();
	interfaceSetup();
	cube = new Cube();
}

function draw(){
	myOrbitControl();
	
	background(65);
	cube.update();
	cube.show();
}

function myOrbitControl(){
	if (mouseIsPressed){
		let x = map(mouseY - oldMouse.y, 0, height, 0, TWO_PI),
			y = map(mouseX - oldMouse.x, 0, width, 0, TWO_PI);
		rotation.x -= x;
		rotation.y += y;
		if (abs(rotation.x) > PI / 2){
			rotation.x += x;
		}
	}
	rotateX(rotation.x);
	rotateY(rotation.y);
	oldMouse.x = mouseX;
	oldMouse.y = mouseY;
}

function canvasSetup(){
	setFrameRate(60);
	setAttributes('antialias', true);
	let canvas = createCanvas($("#canvasHolder").width(), $("#canvasHolder").height(), WEBGL);
	canvas.parent("canvasHolder");
	textFont(font);

}

function interfaceSetup(){
	
	let buttons = Object.values($("button:not(.actions)")).slice(0, 18);
	
	for (let b of buttons){
		let axis = $(b).parent().attr("class");
		let index = (floor(buttons.indexOf(b) / 2) % 3) - 1;
		let dir = int($(b).attr("id"));
		$(b).click(function(){
			cube.rotate(axis, index, dir, PI / 32);
		});
		$($("." + axis)[index + 1].children).mouseover(function(){
			outer:
			for (let b of cube.bricks){
				for (let lb of cube.getLayer(axis, index)){
					if (b == lb) continue outer;
				}
				for (let f of b.fields){
					f.dark = true;
				}
			}
			$($("." + axis)[index + 1].children).css("background-color", "rgb(30, 30, 30)");
		});
		$($("." + axis)[index + 1].children).mouseleave(function(){
			for (let b of cube.bricks){
				for (let f of b.fields){
					f.dark = false;
				}
			}
			$($("." + axis)[index + 1].children).css("background-color", "rgb(50, 50, 50)");
		});
	}
	
	$($(".actions")[0]).click(function(){cube.scramble(20);});
	$($(".actions")[1]).click(() => solve());
}