<commit_before><html>
<head>
<title>Gameutils.js: Using the CanvasUI/CanvasUIElement classes</title>
<link rel="stylesheet" type="text/css" href="assets/default.css">
<script src="../util2d.js"></script>
<script src="../canvasui.js"></script>
<script>
'use strict';

var ctx;
var tester;

CanvasUI.defaultFont = 'monospace';

var Tester = function(canvas) {
    this.time = 0;
    this.ui = new CanvasUI({
        element: canvas,
        getCanvasPositionFromEvent: function(event) {
            return {x: event.clientX - canvas.getBoundingClientRect().left,
                    y: event.clientY - canvas.getBoundingClientRect().top};
        }
    });

    var button = new CanvasUIElement({
        centerX: 100,
        centerY: 100,
        width: 120,
        height: 70,
        label: 'Button',
        clickCallback: function() { console.log('clicked!') }
    });
    this.ui.addElement(button);

    var label = new CanvasUIElement({
        centerX: 200,
        centerY: 200,
        label: 'Label'
    });
    this.ui.addElement(label);
    
    var customButton = new CanvasUIElement({
        centerX: 300,
        centerY: 100,
        width: 120,
        height: 70,
        label: 'Custom button',
        clickCallback: function() { console.log('custom clicked!') },
        renderFunc: function(ctx, button, cursorOn, pressedExtent) {
            ctx.beginPath();
            ctx.arc(button.visualX(), button.visualY(), 50, 0, Math.PI * 2);
            ctx.globalAlpha = 1.0;
            ctx.fillStyle = '#fa4';
            ctx.fill();
            ctx.lineWidth = 10 * (1 + pressedExtent);
            ctx.strokeStyle = 'white';
            ctx.stroke();
            ctx.textAlign = 'center';
            ctx.fillStyle = 'black';
            ctx.fillText('DRAG ME', button.visualX(), button.visualY() + 6);
        },
        draggable: true
    });
    this.ui.addElement(customButton);
};

Tester.prototype.update = function() {
    var deltaTime = 1 / 60; // Assume 60 fps... bad example :P
    this.time += deltaTime;
    this.ui.update(deltaTime);

    ctx.fillStyle = '#579';
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    
    this.ui.render(ctx);
};

var frame = function() {
    tester.update();
    requestAnimationFrame(frame);
};

var start = function() {
    var canvas = document.createElement('canvas');
    canvas.width = 400;
    canvas.height = 300;
    tester = new Tester(canvas);
    ctx = canvas.getContext('2d');
    document.body.appendChild(canvas);
    frame();
};<commit_msg>Add dragging to example<commit_after><html>
<head>
<title>Gameutils.js: Using the CanvasUI/CanvasUIElement classes</title>
<link rel="stylesheet" type="text/css" href="assets/default.css">
<script src="../util2d.js"></script>
<script src="../canvasui.js"></script>
<script>
'use strict';

var ctx;
var tester;

CanvasUI.defaultFont = 'monospace';

var Tester = function(canvas) {
    this.time = 0;
    this.ui = new CanvasUI({
        element: canvas,
        getCanvasPositionFromEvent: function(event) {
            return {x: event.clientX - canvas.getBoundingClientRect().left,
                    y: event.clientY - canvas.getBoundingClientRect().top};
        }
    });

    var button = new CanvasUIElement({
        centerX: 100,
        centerY: 100,
        width: 120,
        height: 70,
        label: 'Button',
        clickCallback: function() { console.log('clicked!') },
        dragTargetCallback: function(draggedObject) {
            console.log('dragged to button: ' + draggedObject);
        }
    });
    this.ui.addElement(button);

    var label = new CanvasUIElement({
        centerX: 200,
        centerY: 200,
        label: 'Label'
    });
    this.ui.addElement(label);
    
    var customButton = new CanvasUIElement({
        centerX: 300,
        centerY: 100,
        width: 120,
        height: 70,
        label: 'Custom button',
        clickCallback: function() { console.log('custom clicked!') },
        renderFunc: function(ctx, button, cursorOn, pressedExtent) {
            ctx.beginPath();
            ctx.arc(button.visualX(), button.visualY(), 50, 0, Math.PI * 2);
            ctx.globalAlpha = 1.0;
            ctx.fillStyle = '#fa4';
            ctx.fill();
            ctx.lineWidth = 10 * (1 + pressedExtent);
            ctx.strokeStyle = 'white';
            ctx.stroke();
            ctx.textAlign = 'center';
            ctx.fillStyle = 'black';
            ctx.fillText('DRAG ME', button.visualX(), button.visualY() + 6);
        },
        draggable: true,
        draggedObjectFunc: function() { return 'dragged object X'; }
    });
    this.ui.addElement(customButton);
};

Tester.prototype.update = function() {
    var deltaTime = 1 / 60; // Assume 60 fps... bad example :P
    this.time += deltaTime;
    this.ui.update(deltaTime);

    ctx.fillStyle = '#579';
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    
    this.ui.render(ctx);
};

var frame = function() {
    tester.update();
    requestAnimationFrame(frame);
};

var start = function() {
    var canvas = document.createElement('canvas');
    canvas.width = 400;
    canvas.height = 300;
    tester = new Tester(canvas);
    ctx = canvas.getContext('2d');
    document.body.appendChild(canvas);
    frame();
};
{'fraction_non_alphanumeric': 0.14685314685314685, 'fraction_numerical': 0.021924021924021923, 'mean_word_length': 2.3557387444514903, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 23, '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': '3062355', 'n_tokens_mistral': 1723, 'n_tokens_neox': 1604, 'n_words': 357}