g
/
g

<!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>