You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
150 lines
5.2 KiB
150 lines
5.2 KiB
<!DOCTYPE html>
|
|
<html ng-app="myApp">
|
|
<head>
|
|
<style type="text/css">
|
|
body{
|
|
margin: 8px;
|
|
background: gray;
|
|
}
|
|
|
|
#menu{
|
|
width: 100px;
|
|
margin-top: 28px;
|
|
text-align: center;
|
|
}
|
|
|
|
#board{
|
|
cursor: crosshair;
|
|
}
|
|
|
|
div.pixel{
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
div.pixel:hover{
|
|
opacity: .5;
|
|
}
|
|
</style>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
|
|
<script src="js/filesaver.js"></script>
|
|
<script type="text/javascript">
|
|
|
|
var decodeBase64 = function(s) {
|
|
var e={},i,b=0,c,x,l=0,a,r='',w=String.fromCharCode,L=s.length;
|
|
var A="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
|
|
for(i=0;i<64;i++){e[A.charAt(i)]=i;}
|
|
for(x=0;x<L;x++){
|
|
c=e[s.charAt(x)];b=(b<<6)+c;l+=6;
|
|
while(l>=8){((a=(b>>>(l-=8))&0xff)||(x<(L-2)))&&(r+=w(a));}
|
|
}
|
|
return r;
|
|
};
|
|
var app = angular.module("myApp", []);
|
|
|
|
app.directive('appFilereader', function($q) {
|
|
var slice = Array.prototype.slice;
|
|
|
|
return {
|
|
restrict: 'A',
|
|
require: '?ngModel',
|
|
link: function(scope, element, attrs, ngModel) {
|
|
if (!ngModel) return;
|
|
|
|
ngModel.$render = function() {};
|
|
|
|
element.bind('change', function(e) {
|
|
var element = e.target;
|
|
|
|
$q.all(slice.call(element.files, 0).map(readFile))
|
|
.then(function(values) {
|
|
if (element.multiple) ngModel.$setViewValue(values);
|
|
else ngModel.$setViewValue(values.length ? values[0] : null);
|
|
});
|
|
|
|
function readFile(file) {
|
|
var deferred = $q.defer();
|
|
|
|
var reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
deferred.resolve(e.target.result);
|
|
};
|
|
reader.onerror = function(e) {
|
|
deferred.reject(e);
|
|
};
|
|
reader.readAsDataURL(file);
|
|
|
|
return deferred.promise;
|
|
}
|
|
|
|
}); //change
|
|
|
|
} //link
|
|
}; //return
|
|
})
|
|
|
|
app.controller("myCtrl", function($scope) {
|
|
$scope.size = 4;
|
|
$scope.pixels= [];
|
|
$scope.click = false;
|
|
$scope.color = "#000"
|
|
var max = { x: 100, y: 100};
|
|
var id = 1;
|
|
|
|
for(var i = 1; i<max.y; i++){
|
|
for(var j = 1; j<max.x; j++){
|
|
$scope.pixels.push({id: id,position:{x: j, y: i}, color: '#fff'});
|
|
id++;
|
|
}
|
|
}
|
|
|
|
$scope.painter = function(pixel){
|
|
if($scope.click){
|
|
pixel.color = $scope.color;
|
|
}
|
|
};
|
|
|
|
$scope.export = function(){
|
|
var text = JSON.stringify($scope.pixels);
|
|
var element = document.createElement('a');
|
|
element.setAttribute('href', 'data:json/plain;charset=utf-8,' + encodeURIComponent(text));
|
|
element.setAttribute('download', 'painter.jgf');
|
|
|
|
element.style.display = 'none';
|
|
document.body.appendChild(element);
|
|
|
|
element.click();
|
|
|
|
document.body.removeChild(element);
|
|
};
|
|
|
|
$scope.import = function(file){
|
|
$scope.pixels = angular.fromJson(decodeBase64(file.split(',')[1]));
|
|
};
|
|
|
|
});
|
|
</script>
|
|
</head>
|
|
<body ng-controller="myCtrl">
|
|
<div id="menu">
|
|
<input type="color" ng-model="color"/>
|
|
<button ng-click="export()">
|
|
Exportar
|
|
</button>
|
|
<input type="file" ng-model="file" accept=".jgf" app-filereader ng-change="import(file)"/>
|
|
</div>
|
|
<div id="board" ng-mousedown="click = true;" ng-mouseup="click = false">
|
|
<div ng-repeat="pixel in pixels"
|
|
ng-mouseover="painter(pixel)"
|
|
class="pixel"
|
|
style="
|
|
left: {{(pixel.position.x * size) + 120 }}px;
|
|
top: {{(pixel.position.y * size) + 20}}px;
|
|
background: {{pixel.color}};
|
|
width: {{size}}px;
|
|
height: {{size}}px;"
|
|
>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|