<commit_before>
/*================================================================================================*\
                       ______  __      ______  ______  ______  ______    
                      /\  ___\/\ \    /\  __ \/\__  _\/\  ___\/\  ___\   
                      \ \___  \ \ \___\ \  __ \/_/\ \/\ \  __\\ \___  \  
                       \/\_____\ \_____\ \_\ \_\ \ \_\ \ \_____\/\_____\ 
                        \/_____/\/_____/\/_/\/_/  \/_/  \/_____/\/_____/ 
                                                                         
                        \*================================================================================================*/

                        "use strict";

//== utility functions ===========================================================================\\

// [min,max)
function randint(min, max) {
	return Math.floor(Math.random() * (max - min)) + min;
}

function distance(a, b) {
	return Math.sqrt(Math.pow(b[0]-a[0],2)+Math.pow(b[1]-a[1],2));
}

// order matters
Object.prototype.equals = function(x) {
	return (JSON.stringify(this) === JSON.stringify(x));
}

Array.prototype.equals = function(array) {

	if (!array) return false;

	if (this.length != array.length) return false;

	for (var i = 0; i < this.length; i++) {
		if (this[i] instanceof Array && array[i] instanceof Array) {
			if (!this[i].equals(array[i])) return false;
		} else if (this[i] != array[i]) return false;
	} return true;
}

Array.prototype.hasMember = function(x) {
	if (this.length === 0) return false;
	for(var i = 0; i < this.length; i++) {
		if ((this[i] instanceof Array && x instanceof Array) ||
			(this[i] instanceof Object && x instanceof Object)) {
			if (this[i].equals(x)) return true;
	} else if (this[i] === x) return true;
} return false;
}

// TODO: menu, undo, swipe for touch, add option for hearistic, allow for list of animations

function Slates() {

	var canvas;
	var ctx;

	var width;
	var height;

    // config params

    // good config : 4, 8, 3

    var GRID_SIZE     = 4;
    var NUM_OF_SLATES = 8;
    var NUM_OF_CRUMBS = (function(x) { return Math.max(Math.min(x,NUM_OF_SLATES-1),1); })(3);

    // aesthetics

    // colors
    var BG_COLOR          = "rgba(252, 252, 252, 1)"; //"rgba(230, 230, 230, 1)"; // light gray
    var SQR_COLOR         = "rgba(200, 200, 200, 1)"; // dark gray
    var SLATE_COLOR       = "rgba(35,  114, 170, 1)"; // blue
    var CRUMB_COLOR       = "rgba(178,  34,  34, 1)"; // firebrick
    var VISITED_COLOR     = "rgba(0,   153,  51, 1)"; // green
    var HOVER_COLOR       = "rgba(0,     0,   0,.5)"; // transparent black
    var FONT_COLOR        = BG_COLOR;                 // light gray

    // scaling
    var LINE_WIDTH_FACTOR = 8;  // larger => smaller
    var BR_FACTOR         = 10; // larger => smaller
    var CRUMB_SIZE_FACTOR = 2.25;
    var FONT_SIZE_FACTOR  = 1.5;
    var SEL_HEIGHT_FACTOR = 10;
    var SHADOW_FACTOR     = 3;

    // derived properties
    var PAD;
    var DIV_SIZE;
    var LINE_WIDTH;
    var SQR_SIZE;
    var BORDER_RADIUS;
    var CRUMB_SIZE;
    var FONT_SIZE;
    var FONT_OFFSET;
    var SHADOW_BLUR;
    var SEL_OFS; 
    var SEL_SIZE;
    var LP;	 
    var CTR_OFS; 
    var BR_OFS;
    var SEL_BR;
    var LP_OFS;

    // global vars

    var finalState = [randint(1, GRID_SIZE-1), randint(1, GRID_SIZE-1)];    
    var crumbs     = [{loc: finalState, visited: false}];
    var grid       = initGrid();
    var slates     = initSlates();
    var hover      = [-1,-1];
    var selection  = [];

    // animation global vars
    var aPos = null;
    var bPos = null;

    var animate    = false;
    var target     = null;
    var rot        = 0;
    var TARGET_ROT = 2*Math.PI; // radians

    //== init code ===============================================================================\\

    function setStyle() {
    	ctx.textAlign     = 'center';
    	ctx.textBaseline  = 'middle';
    	ctx.shadowColor   = "black";
    	ctx.shadowOffsetY = 0;
    	ctx.shadowOffsetX = 0;

    	canvas.style.marginTop  = -LINE_WIDTH/2 + "px";
    	canvas.style.marginLeft = -LINE_WIDTH/2 + "px";

    	var content = document.getElementById("content");
    	// content.style.width
    }

    // last function call in resize
    function setDerivedProperties() {
    	var br = .9;

    	PAD           = (width-width*br)/2;
    	DIV_SIZE      = Math.round((width*br)/GRID_SIZE);
    	LINE_WIDTH    = DIV_SIZE/LINE_WIDTH_FACTOR;
    	SQR_SIZE      = DIV_SIZE-LINE_WIDTH;
    	BORDER_RADIUS = SQR_SIZE/BR_FACTOR;
    	CRUMB_SIZE    = SQR_SIZE/CRUMB_SIZE_FACTOR;
    	FONT_SIZE     = CRUMB_SIZE*FONT_SIZE_FACTOR;
    	FONT_OFFSET   = DIV_SIZE/2+LINE_WIDTH/2+PAD;
    	SHADOW_BLUR   = DIV_SIZE/SHADOW_FACTOR;
    	SEL_OFS       = SQR_SIZE/SEL_HEIGHT_FACTOR;
    	SEL_SIZE      = SQR_SIZE-(SEL_OFS*2);
    	LP            = LINE_WIDTH+PAD;
    	CTR_OFS       = DIV_SIZE/2+LINE_WIDTH/2+PAD;
    	BR_OFS        = BORDER_RADIUS-(BORDER_RADIUS/Math.sqrt(2));
    	SEL_BR        = BORDER_RADIUS-BR_OFS;
    	LP_OFS        = LP+SEL_OFS;

    	setStyle();<commit_msg>scaling<commit_after>
/*================================================================================================*\
                       ______  __      ______  ______  ______  ______    
                      /\  ___\/\ \    /\  __ \/\__  _\/\  ___\/\  ___\   
                      \ \___  \ \ \___\ \  __ \/_/\ \/\ \  __\\ \___  \  
                       \/\_____\ \_____\ \_\ \_\ \ \_\ \ \_____\/\_____\ 
                        \/_____/\/_____/\/_/\/_/  \/_/  \/_____/\/_____/ 
                                                                         
                        \*================================================================================================*/

                        "use strict";

//== utility functions ===========================================================================\\

// [min,max)
function randint(min, max) {
	return Math.floor(Math.random() * (max - min)) + min;
}

function distance(a, b) {
	return Math.sqrt(Math.pow(b[0]-a[0],2)+Math.pow(b[1]-a[1],2));
}

// order matters
Object.prototype.equals = function(x) {
	return (JSON.stringify(this) === JSON.stringify(x));
}

Array.prototype.equals = function(array) {

	if (!array) return false;

	if (this.length != array.length) return false;

	for (var i = 0; i < this.length; i++) {
		if (this[i] instanceof Array && array[i] instanceof Array) {
			if (!this[i].equals(array[i])) return false;
		} else if (this[i] != array[i]) return false;
	} return true;
}

Array.prototype.hasMember = function(x) {
	if (this.length === 0) return false;
	for(var i = 0; i < this.length; i++) {
		if ((this[i] instanceof Array && x instanceof Array) ||
			(this[i] instanceof Object && x instanceof Object)) {
			if (this[i].equals(x)) return true;
	} else if (this[i] === x) return true;
} return false;
}

// TODO: menu, undo, swipe for touch, add option for hearistic, allow for list of animations

function Slates() {

	var canvas;
	var ctx;

	var width;
	var height;

    // config params

    // good config : 4, 8, 3

    var GRID_SIZE     = 4;
    var NUM_OF_SLATES = 8;
    var NUM_OF_CRUMBS = (function(x) { return Math.max(Math.min(x,NUM_OF_SLATES-1),1); })(3);

    // aesthetics

    // colors
    var BG_COLOR          = "rgba(252, 252, 252, 1)"; //"rgba(230, 230, 230, 1)"; // light gray
    var SQR_COLOR         = "rgba(200, 200, 200, 1)"; // dark gray
    var SLATE_COLOR       = "rgba(35,  114, 170, 1)"; // blue
    var CRUMB_COLOR       = "rgba(178,  34,  34, 1)"; // firebrick
    var VISITED_COLOR     = "rgba(0,   153,  51, 1)"; // green
    var HOVER_COLOR       = "rgba(0,     0,   0,.5)"; // transparent black
    var FONT_COLOR        = BG_COLOR;                 // light gray

    // scaling
    var LINE_WIDTH_FACTOR = 8;  // larger => smaller
    var BR_FACTOR         = 10; // larger => smaller
    var CRUMB_SIZE_FACTOR = 2.25;
    var FONT_SIZE_FACTOR  = 1.5;
    var SEL_HEIGHT_FACTOR = 10;
    var SHADOW_FACTOR     = 3;

    // derived properties
    var PAD;
    var DIV_SIZE;
    var LINE_WIDTH;
    var SQR_SIZE;
    var BORDER_RADIUS;
    var CRUMB_SIZE;
    var FONT_SIZE;
    var FONT_OFFSET;
    var SHADOW_BLUR;
    var SEL_OFS; 
    var SEL_SIZE;
    var LP;	 
    var CTR_OFS; 
    var BR_OFS;
    var SEL_BR;
    var LP_OFS;

    // global vars

    var finalState = [randint(1, GRID_SIZE-1), randint(1, GRID_SIZE-1)];    
    var crumbs     = [{loc: finalState, visited: false}];
    var grid       = initGrid();
    var slates     = initSlates();
    var hover      = [-1,-1];
    var selection  = [];

    // animation global vars
    var aPos = null;
    var bPos = null;

    var animate    = false;
    var target     = null;
    var rot        = 0;
    var TARGET_ROT = 2*Math.PI; // radians

    //== init code ===============================================================================\\

    function setStyle() {
    	ctx.textAlign     = 'center';
    	ctx.textBaseline  = 'middle';
    	ctx.shadowColor   = "black";
    	ctx.shadowOffsetY = 0;
    	ctx.shadowOffsetX = 0;

    	// canvas.style.marginTop  = -LINE_WIDTH/2 + "px";
    	// canvas.style.marginLeft = -LINE_WIDTH/2 + "px";

    	var content = document.getElementById("content");
    	// content.style.width
    }

    // last function call in resize
    function setDerivedProperties() {
    	var br = .9;

    	PAD           = (width-width*br)/2;
    	DIV_SIZE      = Math.round((width*br)/GRID_SIZE);
    	LINE_WIDTH    = DIV_SIZE/LINE_WIDTH_FACTOR;
    	SQR_SIZE      = DIV_SIZE-LINE_WIDTH;
    	BORDER_RADIUS = SQR_SIZE/BR_FACTOR;
    	CRUMB_SIZE    = SQR_SIZE/CRUMB_SIZE_FACTOR;
    	FONT_SIZE     = CRUMB_SIZE*FONT_SIZE_FACTOR;
    	FONT_OFFSET   = DIV_SIZE/2+LINE_WIDTH/2+PAD;
    	SHADOW_BLUR   = DIV_SIZE/SHADOW_FACTOR;
    	SEL_OFS       = SQR_SIZE/SEL_HEIGHT_FACTOR;
    	SEL_SIZE      = SQR_SIZE-(SEL_OFS*2);
    	LP            = LINE_WIDTH+PAD;
    	CTR_OFS       = DIV_SIZE/2+LINE_WIDTH/2+PAD;
    	BR_OFS        = BORDER_RADIUS-(BORDER_RADIUS/Math.sqrt(2));
    	SEL_BR        = BORDER_RADIUS-BR_OFS;
    	LP_OFS        = LP+SEL_OFS;

    	setStyle();
{'fraction_non_alphanumeric': 0.19870537465672813, 'fraction_numerical': 0.02079246763436642, 'mean_word_length': 2.055738687443812, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3653019', 'n_tokens_mistral': 3828, 'n_tokens_neox': 3448, 'n_words': 741}