sumorobot-web/assets/js/blockly.js
Marvin Martinson 4e6f7904ba updates
2018-11-12 22:33:26 +02:00

290 lines
9.9 KiB
JavaScript
Executable File

// Blockly workspace
var workspace;
window.addEventListener('load', function() {
// To remember the control_if blockId
var controlBlockId = '';
// Change the if block to be more cheerful
Blockly.Msg.LOGIC_HUE = '#24c74f';
// Remote previous and next statement from control_if block
Blockly.defineBlocksWithJsonArray([
{
"type": "controls_if",
"message0": "%{BKY_CONTROLS_IF_MSG_IF} %1",
"args0": [
{
"type": "input_value",
"name": "IF0",
"check": "Boolean"
}
],
"message1": "%{BKY_CONTROLS_IF_MSG_THEN} %1",
"args1": [
{
"type": "input_statement",
"name": "DO0"
}
],
"colour": "%{BKY_LOGIC_HUE}",
"helpUrl": "%{BKY_CONTROLS_IF_HELPURL}",
"mutator": "controls_if_mutator",
"extensions": ["controls_if_tooltip"]
},
{
"type": "logic_operation",
"message0": "%1 %2 %3",
"args0": [
{
"type": "input_value",
"name": "A",
"check": "Boolean"
},
{
"type": "field_dropdown",
"name": "OP",
"options": [
["%{BKY_LOGIC_OPERATION_AND}", "AND"],
["%{BKY_LOGIC_OPERATION_OR}", "OR"]
]
},
{
"type": "input_value",
"name": "B",
"check": "Boolean"
}
],
"inputsInline": true,
"output": "Boolean",
"colour": "%{BKY_LOGIC_HUE}",
"helpUrl": "%{BKY_LOGIC_OPERATION_HELPURL}",
"extensions": ["logic_op_tooltip"]
}
]);
// Make control_if mutator icon bigger
Blockly.Icon.prototype.renderIcon = function(cursorX) {
if (this.collapseHidden && this.block_.isCollapsed()) {
this.iconGroup_.setAttribute('display', 'none');
return cursorX;
}
this.iconGroup_.setAttribute('display', 'block');
var SIZE = 1.7;
var TOP_MARGIN = 2;
var LEFT_MARGIN = 5;
var width = this.SIZE;
if (this.block_.RTL) {
cursorX -= width;
}
this.iconGroup_.setAttribute('transform',
'translate(' + LEFT_MARGIN + ',' + TOP_MARGIN + ') scale(' + SIZE + ')');
this.computeIconLocation();
if (this.block_.RTL) {
cursorX -= Blockly.BlockSvg.SEP_SPACE_X;
} else {
cursorX += width + Blockly.BlockSvg.SEP_SPACE_X;
}
return cursorX;
};
// When mouse click occures on Blockly workspace
Blockly.utils.isRightButton = function(e) {
var target = e.target;
// When control_if block is in use
if (controlBlockId != '') {
// When the user clicks anywhere outside the mutator and not on the mutator icon
if (!$(target).is('.blocklyBubbleCanvas') && !$(target).parents().is('.blocklyBubbleCanvas')) {
if (!$(target).is('.blocklyIconGroup') && !$(target).parents().is('.blocklyIconGroup')) {
// Hide the mutator
workspace.getBlockById(controlBlockId).mutator.setVisible(false);
}
}
}
// Disable right click on Blockly workspace
return false;
};
Blockly.Blocks['sumorobot_sleep'] = {
init: function() {
this.setColour('#e98017');
this.appendDummyInput()
.appendField(Blockly.Msg.SUMOROBOT_SLEEP)
.appendField(new Blockly.FieldTextInput('1000',
Blockly.FieldNumber.numberValidator), "SLEEP");
this.setPreviousStatement(true);
this.setNextStatement(true);
}
};
Blockly.Blocks['sumorobot_move'] = {
init: function() {
var OPERATORS = [
[Blockly.Msg.SUMOROBOT_STOP, 'STOP'],
[Blockly.Msg.SUMOROBOT_LEFT, 'LEFT'],
[Blockly.Msg.SUMOROBOT_RIGHT, 'RIGHT'],
[Blockly.Msg.SUMOROBOT_SEARCH, 'SEARCH'],
[Blockly.Msg.SUMOROBOT_FORWARD, 'FORWARD'],
[Blockly.Msg.SUMOROBOT_BACKWARD, 'BACKWARD']
];
this.setColour('#d6382d');
var dropdown = new Blockly.FieldDropdown(OPERATORS);
this.appendDummyInput().appendField(dropdown, 'Move');
this.setPreviousStatement(true);
this.setNextStatement(true);
}
};
Blockly.Blocks['sumorobot_opponent'] = {
init: function() {
this.setColour('#0099E6');
this.appendDummyInput().appendField(Blockly.Msg.SUMOROBOT_OPPONENT);
this.setOutput(true, 'Boolean');
}
};
Blockly.Blocks['sumorobot_line'] = {
init: function() {
var OPERATORS = [
[Blockly.Msg.SUMOROBOT_LINE_LEFT, 'LEFT'],
[Blockly.Msg.SUMOROBOT_LINE_MIDDLE, 'MIDDLE'],
[Blockly.Msg.SUMOROBOT_LINE_RIGHT, 'RIGHT']
];
this.setColour('#E6BF00');
var dropdown = new Blockly.FieldDropdown(OPERATORS);
this.appendDummyInput().appendField(dropdown, 'LINE');
this.setOutput(true, 'Boolean');
}
};
Blockly.Python['sumorobot_sleep'] = function(block) {
var code = 'sumorobot.sleep(' + parseFloat(block.getFieldValue("SLEEP")) + ');;' + block.id + '\n';
return code;
};
Blockly.Python['sumorobot_move'] = function(block) {
var code = 'sumorobot.move(' + block.getFieldValue('Move') + ');;' + block.id + '\n';
return code;
};
Blockly.Python['sumorobot_opponent'] = function(block) {
var code = 'sumorobot.is_opponent();;' + block.id;
return [code, Blockly.Python.ORDER_ATOMIC];
};
Blockly.Python['sumorobot_line'] = function(block) {
var code = 'sumorobot.is_line(' + block.getFieldValue('LINE') + ');;' + block.id;
return [code, Blockly.Python.ORDER_ATOMIC];
};
// Inject Blocklyresiz
var blocklyArea = document.getElementById('blocklyArea');
var blocklyDiv = document.getElementById('blocklyDiv');
workspace = Blockly.inject(blocklyDiv, {
media: 'assets/blockly/media/',
scrollbars: true,
trashcan: true,
sounds: true,
zoom: {
controls: true,
startScale: 1.0
},
toolbox: document.getElementById('toolbox')
});
// On Blockly resize
var onresize = function(e) {
// Compute the absolute coordinates and dimensions of blocklyArea.
var element = blocklyArea;
var x = 0;
var y = 0;
do {
x += element.offsetLeft;
y += element.offsetTop;
element = element.offsetParent;
} while (element);
// Position blocklyDiv over blocklyArea
blocklyDiv.style.left = x + 'px';
blocklyDiv.style.top = y + 'px';
blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
// Resize the blockly svg
Blockly.svgResize(workspace);
};
window.addEventListener('resize', onresize, false);
onresize();
// Retrieve the blocks
var code = getLocalStorageItem('sumorobot.blockly');
// When there is code
if (code) {
// Convert it to XML
var xml = Blockly.Xml.textToDom(code);
// Resume the blocks from the XML
Blockly.Xml.domToWorkspace(xml, workspace);
}
// On Blockly code change
function onCodeChanged(event) {
// When the if condition block was created
if (event.type == Blockly.Events.CREATE &&
event.xml.getAttributeNode('type').nodeValue == 'controls_if') {
// Remember the control_if block id
controlBlockId = event.blockId;
// Get the control_if block object
var block = workspace.getBlockById(event.blockId);
// When the control_if block doesn't already have an else
if (block.elseCount_ == 0) {
// Automatically add the else statement input
block.elseCount_ = 1;
block.updateShape_();
}
// When the if condition block was removed
} else if (event.type == Blockly.Events.DELETE &&
event.oldXml.getAttributeNode('type').nodeValue == 'controls_if') {
// Remove the control_if block id
controlBlockId = '';
// Enable the if condition block
workspace.updateToolbox(document.getElementById('toolbox'));
}
// Only process change and move commands
if (event.type != Blockly.Events.CHANGE && event.type != Blockly.Events.MOVE) return;
// Show the code in the ace editor, filter out block IDs
readOnlyCodingEditor.setValue(Blockly.Python.workspaceToCode(workspace).replace(/;;.{20}/g, ''));
readOnlyCodingEditor.clearSelection();
// Save the code to the local storage
var xml = Blockly.Xml.workspaceToDom(workspace);
localStorage.setItem('sumorobot.blockly', Blockly.Xml.domToText(xml));
// When control_if block is used
if (controlBlockId != '') {
// Disable the if condition block
workspace.updateToolbox(document.getElementById('toolbox_no_if'));
}
}
// Add the change listener to Blockly
workspace.addChangeListener(onCodeChanged);
// Set a click listener on the document
$(document).click(function(e) {
// Get the event target
var target = e.target;
// When control_if block is in use
if (controlBlockId != '') {
// When the user clicks anywhere outside the mutator and not on the mutator icon
if (!$(target).is('.blocklyBubbleCanvas') && !$(target).parents().is('.blocklyBubbleCanvas')) {
if (!$(target).is('.blocklyIconGroup') && !$(target).parents().is('.blocklyIconGroup')) {
// Hide the mutator
workspace.getBlockById(controlBlockId).mutator.setVisible(false);
}
}
}
});
});