<commit_before>import * as _ from "lodash";
import {getBalloon, getNinja} from "./sample";
import {convertToBytes, toHexString} from "./conversion";

const erase = 0;
const brush = 1;
type PixelSelection = 0 | 1;

let dataElement = document.getElementById('basic-data');
let byteElement = document.getElementById('byte-data');

let canvas : HTMLCanvasElement = <HTMLCanvasElement>document.getElementById('screen');
let ctx : CanvasRenderingContext2D = canvas.getContext('2d');

canvas.onselectstart = function () {return false};

var mousepressed = false;

window.addEventListener('mousedown', event => mousepressed = true);
window.addEventListener('mouseup', event => mousepressed = false);

canvas.addEventListener('mousedown', event => makeSelection(event));
canvas.addEventListener('mousemove', event => {
    if(mousepressed) 
        makeSelection(event);
});


//FIXME: this prevents overflown pixel to be drawn on the other side
const coordFix = (coord: number) => Math.min(Math.max(0, coord - 10), 470)
function makeSelection(event: any) {
    const [x, y] = [coordFix(event.offsetX), coordFix(event.offsetY)]
    if (event.metaKey)
        select(x, y, erase);
    else
        select(x, y, brush);
}

let data = getBalloon();

function get(x: number, y: number) {
    return data[y * 24 + x];
}

function draw(): void {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    drawGrid(ctx);
    drawGridLabels(ctx);
    fillCells(ctx);

    let result = convertToBytes(data);

    printByte(result, byteElement);
    printData(result, dataElement);
}

function fillCells(ctx : CanvasRenderingContext2D): void {
    let cellSize = 18;

    for (let x = 0; x < 24; x++) {
        for (let y = 0; y < 21; y++) {
            ctx.fillStyle = getColor(get(x, y));
            ctx.fillRect(x * ( 2 + cellSize) + 11, y * ( 2 + cellSize) + 11, cellSize, cellSize);
        }
    }
}

function getColor(value: number): string {
    return value == 0 ? '#0000AA' : '#EEEE77';
}

function drawGrid(ctx : CanvasRenderingContext2D): void {
    ctx.lineWidth = 2;

    for (let x = 0; x < 25; x++) {
        ctx.beginPath();
        ctx.moveTo(x * 20 + 10, 10);
        ctx.lineTo(x * 20 + 10, 450);
        ctx.closePath();
        ctx.stroke();
    }

    for (let y = 0; y < 22; y++) {
        ctx.beginPath();
        ctx.moveTo(10, y * 20 + 10);
        ctx.lineTo(510, y * 20 + 10);
        ctx.closePath();
        ctx.stroke();
    }
}

function drawGridLabels(ctx: CanvasRenderingContext2D): void {
    ctx.fillStyle = '#DD8855';
    ctx.font = '12px serif';

    for (let idx = 1; idx <= 21; idx++) {
        ctx.fillText(idx.toString(10), 24 * 20 + 15, idx * 20 + 5);
    }

    for (let idz = 0; idz < 24; idz++) {
        ctx.fillText((idz+1).toString(10), idz * 20 + 15, 22 * 20 + 5);
    }
}

function printData(data: number[], element: HTMLElement): void {
    let text = _.chunk(data, 9).map((r) => {
        return 'DATA ' + _.join(r, ', ')
    });

    element.innerText =  _.join(text, '\n');
}

function printByte(data: number[], element: HTMLElement): void {
    let dataAsHex = data.map((x) => toHexString(x));

    let text = _.chunk(dataAsHex, 15).map((r) => {
        return '!byte ' + _.join(r, ', ')
    });

    element.innerText = _.join(text, '\n');
}

function select(x: number, y: number, selection: PixelSelection): void {
    let coordX = Math.floor(x / 20);
    let coordY = Math.floor(y / 20);

    let index = coordY * 24 + coordX;
    data[index] = selection;

    draw();
}

<commit_msg>Clean code<commit_after>import * as _ from "lodash";
import {getBalloon, getNinja} from "./sample";
import {convertToBytes, toHexString} from "./conversion";

const erase = 0;
const brush = 1;
type PixelSelection = 0 | 1;

let dataElement = document.getElementById('basic-data');
let byteElement = document.getElementById('byte-data');

let canvas : HTMLCanvasElement = <HTMLCanvasElement>document.getElementById('screen');
let ctx : CanvasRenderingContext2D = canvas.getContext('2d');

canvas.onselectstart = function () {return false};

var mousepressed = false;

window.addEventListener('mousedown', () => mousepressed = true);
window.addEventListener('mouseup', () => mousepressed = false);

canvas.addEventListener('mousedown', event => makeSelection(event));
canvas.addEventListener('mousemove', event => {
    if (mousepressed) {
        makeSelection(event);
    }
});


//FIXME: this prevents overflown pixel to be drawn on the other side
const coordFix = (coord: number) => Math.min(Math.max(0, coord - 10), 470);
function makeSelection(event: any) {
    const [x, y] = [coordFix(event.offsetX), coordFix(event.offsetY)];
    if (event.metaKey) {
        select(x, y, erase);
    } else {
        select(x, y, brush);
    }
}

let data = getBalloon();

function get(x: number, y: number) {
    return data[y * 24 + x];
}

function draw(): void {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    drawGrid(ctx);
    drawGridLabels(ctx);
    fillCells(ctx);

    let result = convertToBytes(data);

    printByte(result, byteElement);
    printData(result, dataElement);
}

function fillCells(ctx : CanvasRenderingContext2D): void {
    let cellSize = 18;

    for (let x = 0; x < 24; x++) {
        for (let y = 0; y < 21; y++) {
            ctx.fillStyle = getColor(get(x, y));
            ctx.fillRect(x * ( 2 + cellSize) + 11, y * ( 2 + cellSize) + 11, cellSize, cellSize);
        }
    }
}

function getColor(value: number): string {
    return value == 0 ? '#0000AA' : '#EEEE77';
}

function drawGrid(ctx : CanvasRenderingContext2D): void {
    ctx.lineWidth = 2;

    for (let x = 0; x < 25; x++) {
        ctx.beginPath();
        ctx.moveTo(x * 20 + 10, 10);
        ctx.lineTo(x * 20 + 10, 450);
        ctx.closePath();
        ctx.stroke();
    }

    for (let y = 0; y < 22; y++) {
        ctx.beginPath();
        ctx.moveTo(10, y * 20 + 10);
        ctx.lineTo(510, y * 20 + 10);
        ctx.closePath();
        ctx.stroke();
    }
}

function drawGridLabels(ctx: CanvasRenderingContext2D): void {
    ctx.fillStyle = '#DD8855';
    ctx.font = '12px serif';

    for (let idx = 1; idx <= 21; idx++) {
        ctx.fillText(idx.toString(10), 24 * 20 + 15, idx * 20 + 5);
    }

    for (let idz = 0; idz < 24; idz++) {
        ctx.fillText((idz+1).toString(10), idz * 20 + 15, 22 * 20 + 5);
    }
}

function printData(data: number[], element: HTMLElement): void {
    let text = _.chunk(data, 9).map((r) => {
        return 'DATA ' + _.join(r, ', ')
    });

    element.innerText =  _.join(text, '\n');
}

function printByte(data: number[], element: HTMLElement): void {
    let dataAsHex = data.map((x) => toHexString(x));

    let text = _.chunk(dataAsHex, 15).map((r) => {
        return '!byte ' + _.join(r, ', ')
    });

    element.innerText = _.join(text, '\n');
}

function select(x: number, y: number, selection: PixelSelection): void {
    let coordX = Math.floor(x / 20);
    let coordY = Math.floor(y / 20);

    let index = coordY * 24 + coordX;
    data[index] = selection;

    draw();
}

{'fraction_non_alphanumeric': 0.16392978482446205, 'fraction_numerical': 0.03312570781426954, 'mean_word_length': 3.007373794668179, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 21, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6382608', 'n_tokens_mistral': 2585, 'n_tokens_neox': 2344, 'n_words': 616}