corrade-nucleus-nucleons – Rev 3
?pathlinks?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="Corrade Nucleon">
<meta name="author" content="Wizardry and Steamworks">
<link rel="icon" href="favicon.ico">
<title>Corrade Nucleus - LSL Scripting Environment</title>
<!-- Bootstrap core CSS -->
<link href="/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Corrade Nucleus Fonts -->
<link href="/css/nucleus/fonts.css" rel="stylesheet" type="text/css">
<!-- Customized Nucleus style. -->
<link href="/css/nucleus/nucleus.css" rel="stylesheet" type="text/css">
<!-- Script Kiddie style. -->
<link href="/script-kiddie/css/style.css" rel="stylesheet" type="text/css">
<!-- Bootstrap Toggle -->
<link href="/script-kiddie/bower_components/bootstrap-toggle/css/bootstrap-toggle.min.css" rel="stylesheet" type="text/css">
</script>
</head>
<body>
<!-- Dialog Modal -->
<div id="popup" class="modal fade bs-example-modal-lg" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h1 id="title" class="modal-title"></h1>
</div>
<div id="content" class="modal-body">
<div class="progress">
<div id="progressbar" class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
0%
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="jumbotron">
<h1>Corrade Script Kiddie</h1>
<p class="lead">Script Kiddie is an LSL editor using Corrade as a backend for developing scripts.</p>
<img src="script-kiddie/img/script-kiddie.png"></div>
<!-- <div id="drag-1" class="draggable">
<p> You can drag one element </p>
</div> -->
<div id="editor-panel" class="panel panel-default draggable movable">
<div class="panel-heading">
<form id="script-tools" class="form-inline" data-toggle="validator" onSubmit="event.preventDefault();">
<div class="input-group">
<span class="input-group-btn">
<button id="compile-script" class="btn btn-default check-image checkButton" type="button" title="Compile script.">Compile</button>
<button id="tidy-script" class="btn btn-default" type="button" title="Tidy source-code.">Cleanup</button>
</span>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-btn">
<input id="store-script" type="checkbox" data-toggle="toggle" data-on="Store" data-off="No Store" data-onstyle="success" disabled="disabled">
</span>
<input id="script-name" type="text" class="form-control" placeholder="Script Name" aria-describedby="basic-addon1" required>
<span class="input-group-addon">-</span>
<input id="script-UUID" type="text" class="form-control" aria-describedby="basic-addon2" size="36" readonly>
</div>
</div>
</form>
</div>
<div class="panel-body" id="editorpanel">
<div id="editor" style="height: 500px;">default
{
state_entry()
{
llSay(0, "Hello, Avatar!");
}
touch_start(integer total_number)
{
llSay(0, "Touched.");
}
}
</div>
</div>
</div>
<div id="error-panel" class="panel panel-default draggable movable">
<div class="panel-heading">
<p>Compilation Errors</p>
</div>
<div class="panel-body" id="errorpanel">
<div id="errors">
<textarea id="message" class="form-control" rows="5" style="min-width: 100%; max-width: 100%; font-family: monospace; display: none;" readonly></textarea>
</div>
</div>
</div>
</div> <!-- /container -->
<footer class="footer">
<p>© 2017 Wizardry and Steamworks</p>
</footer>
<!-- jQuery -->
<script src="/bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
<!-- Bootstrap Javascript -->
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
<!-- Bootstrap Validator -->
<script src="/script-kiddie/bower_components/bootstrap-validator/dist/validator.min.js" type="text/javascript"></script>
<!-- Bootstrap Toggle -->
<script src="/script-kiddie/bower_components/bootstrap-toggle/js/bootstrap-toggle.min.js" type="text/javascript"></script>
<!-- ACE -->
<script type="text/javascript" src="/script-kiddie/bower_components/ace-builds/src-min-noconflict/ace.js"></script>
<script type="text/javascript" src="/script-kiddie/bower_components/ace-builds/src-min-noconflict/ext-language_tools.js"></script>
<!-- Beautify.JS -->
<script type="text/javascript" src="/script-kiddie/bower_components/js-beautify/js/lib/beautify.js"></script>
<!-- Velocity -->
<script type="text/javascript" src="/script-kiddie/bower_components/velocity/velocity.min.js"></script>
<!-- Interact JS -->
<script type="text/javascript" src="/script-kiddie/bower_components/interactjs/dist/interact.min.js"></script>
<!-- CryptoJS -->
<script src="/bower_components/cryptojslib/components/core-min.js" type="text/javascript"></script>
<script src="/bower_components/cryptojslib/components/enc-base64-min.js" type="text/javascript"></script>
<!-- Wizardry and Steamworks JavaScript Includes -->
<script src="/js/was/csv.js" type="text/javascript"></script>
<script src="/js/was/jquery/arrays.js" type="text/javascript"></script>
<script>
$(document).ready(() => {
// Auto-complete.
ace.require("ace/ext/language_tools");
// Create the editor.
var editor = ace.edit("editor");
editor.setTheme("ace/theme/twilight");
editor.getSession().setMode("ace/mode/lsl");
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: false,
enableLiveAutocompletion: true
});
// Get the script from the storage.
var storeScriptText = localStorage.getItem("nucleus-script-kiddie.lsl");
if (typeof value == "string")
editor.getSession().setValue(storeScriptText);
function compile(lsl) {
// Set the editor to read-only.
editor.setReadOnly(true);
// Set the button image.
$('#compile-script').removeClass("check-image");
$('#compile-script').removeClass("checkButton");
$('#compile-script').removeClass("cross-image");
$('#compile-script').removeClass("crossButton");
$('#compile-script').addClass("activity-image");
$('#compile-script').addClass("activityButton");
$.ajax({
type: 'POST',
url: '/',
data: {
command: 'compilescript',
data: lsl
},
dataType: 'json'
}).done(function(response) {
// Set the editor to read-enabled.
editor.setReadOnly(false);
if(response.success === "True") {
// Set the button image.
$('#compile-script').removeClass("activity-image");
$('#compile-script').removeClass("activityButton");
$('#compile-script').addClass("check-image");
$('#compile-script').addClass("checkButton");
$("#message").velocity("slideUp", {
duration: 1000
});
return;
}
// Move panel to top.
$('#error-panel').css('z-index', getTopWindowIndex() + 1);
$('#error-panel').css('position', 'relative');
// Set the button image.
$('#compile-script').removeClass("activity-image");
$('#compile-script').removeClass("activityButton");
$('#compile-script').addClass("cross-image");
$('#compile-script').addClass("crossButton");
$("#message").velocity("slideDown", {
duration: 1000
});
$('#message').val(wasCSVToArray(response.data).join(''));
});
}
function store(lsl) {
$.ajax({
type: 'POST',
url: '/',
data: {
command: 'upload',
type: 'LSLText',
item: $('#script-UUID').val(),
name: $('#script-name').val(),
data: CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(lsl))
},
dataType: 'json'
}).done(function(response) {
if(response.success === "True") {
var data = wasCSVToArray(response.data);
var UUID = data[data.indexOf('item') + 1];
// Set the inventory UUID of the saved script.
$('#script-UUID').val(UUID);
localStorage.setItem('nucleus-script-kiddie-script-UUID', UUID);
return;
}
});
}
// Add compiling with Ctrl-S
editor.commands.addCommand({
name: 'Compile',
bindKey: {
win: 'Ctrl-S',
mac: 'Command-S'
},
exec: editor => {
var data = editor.getSession().getValue();
compile(data);
if($('#store-script').prop('checked') === true)
store(data);
},
readOnly: false // false if this command should not apply in readOnly mode
});
// Add click listener for compile button.
$('#compile-script').on('click', function (e) {
if($('#compile-script').hasClass("activity-image"))
return;
var data = editor.getSession().getValue();
compile(data);
if($('#store-script').prop('checked') === true)
store(data);
});
// Add click listener for tidy button.
$('#tidy-script').on('click', function (e) {
if($('#compile-script').hasClass("activity-image"))
return;
// Code cleanup parameters.
editor.setValue(
js_beautify(
editor.getSession().getValue(),
{
"indent_size": 4,
"indent_char": " ",
"indent_with_tabs": false,
"eol": "\n",
"end_with_newline": true,
"indent_level": 0,
"preserve_newlines": true,
"max_preserve_newlines": 10,
"space_in_paren": false,
"space_in_empty_paren": false,
"jslint_happy": false,
"space_after_anon_function": false,
"brace_style": "expand",
"break_chained_methods": false,
"keep_array_indentation": false,
"unescape_strings": false,
"wrap_line_length": 0,
"e4x": false,
"comma_first": false,
"operator_position": "before-newline"
}
)
);
});
// Save script on change.
editor.getSession().on('change', function(e) {
localStorage.setItem("nucleus-script-kiddie.lsl", editor.getValue());
});
// Move windows to top on click.
$('.draggable').click(function() {
$(this).css('z-index', getTopWindowIndex() + 1);
});
// target elements with the "draggable" class
interact('.draggable')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
// Let the user move the windows freely.
//restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
onmove: dragMoveListener,
onend: function (event) {
event.target.style.opacity = 1;
},
onstart: function(event) {
// Move windows to top on drag.
event.target.style.zIndex = getTopWindowIndex() + 1;
event.target.style.opacity = 0.5;
}
})
.allowFrom('.panel-heading');
function getTopWindowIndex() {
return Math.max.apply(null,
$.map($('.draggable'), function(e, n) {
if ($(e).css('position') != 'static')
return parseInt($(e).css('z-index')) || 1;
})
);
}
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
// this is used later in the resizing and gesture demos
window.dragMoveListener = dragMoveListener;
// Get the item name from the storage.
var storeScriptUUID = localStorage.getItem('nucleus-script-kiddie-script-UUID');
if (typeof storeScriptUUID == "string")
$('#script-UUID').val(storeScriptUUID);
// Get the item name from the storage.
var storeScriptName = localStorage.getItem('nucleus-script-kiddie-script-name');
if (typeof storeScriptName == "string")
$('#script-name').val(storeScriptName);
// Store script name on modification.
var scriptNameTimerID;
$('#script-name').on('input',function(e){
var value = $(this).val();
if($(this).data('lastval')!= value){
$(this).data('lastval',value);
clearTimeout(scriptNameTimerID);
scriptNameTimerID = setTimeout(function() {
localStorage.setItem('nucleus-script-kiddie-script-name', value);
},500);
};
});
// Enable storing of script only if the form validates.
$('#script-tools').on('validated.bs.validator', function (e) {
if($('#script-tools').has('.has-error').length !== 0) {
$('#store-script').bootstrapToggle('off');
$('#store-script').bootstrapToggle('disable');
return;
}
$('#store-script').bootstrapToggle('enable');
});
});
</script>
</body>
</html>