remove grid & add autosave

js/paint.js

@@ -79,7 +79,15 @@ function getId() {
 }
 
 var curVer = 0, maxVer = -1, stopVer = 1000, stopped = false, working = false;
-var maxResult = {};
+var maxResult = {}, maxDate = {}, maxNick = {};
+
+function saveMap() {
+    var map = []
+    for (let i = 0; i < box.length; i++) {
+        map[i] = box[i].style.backgroundColor
+    }
+    maxResult[curVer] = map;
+}
 
 function getMap() {
     if (working) {
@@ -104,9 +112,12 @@ function getMap() {
     console.log('GetMap: currentVersion: ' + curVer)
     if (maxVer >= curVer) {
         console.log('Data loaded from cache')
-        var map = maxResult[curVer].get('data'), date = maxResult[curVer].get('updatedAt')
-        $('#version')[0].title = date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate() + ' ' + date.toString().split(' ')[4];
-        $('#version')[0].innerHTML += maxResult[curVer].get('nickName');
+        var map = maxResult[curVer], date = maxDate[curVer]
+        console.log(maxResult)
+        console.log(maxVer)
+        console.log(curVer)
+        $('#version')[0].title = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.toString().split(' ')[4];
+        $('#version')[0].innerHTML += maxNick[curVer];
         for (let i = 0; i < box.length; i++) {
             box[i].style.backgroundColor = map[i]
         }
@@ -120,13 +131,15 @@ function getMap() {
                 console.log('Data loaded from LeanCloud')
                 var map = result[curVer].get('data'), date = result[curVer].get('updatedAt')
                 console.log(date)
-                $('#version')[0].title = date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate() + ' ' + date.toString().split(' ')[4];
+                $('#version')[0].title = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.toString().split(' ')[4];
                 $('#version')[0].innerHTML += result[curVer].get('nickName');
                 for (let i = 0; i < box.length; i++) {
                     box[i].style.backgroundColor = map[i]
                 }
                 maxVer = Math.min(result.length - 1, curVer + 6)
-                maxResult = result
+                for (let i = curVer; i < result.length ; i++)maxResult[i] = result[i].get('data')
+                for (let i = curVer; i < result.length ; i++)maxDate[i] = result[i].get('updatedAt')
+                for (let i = curVer; i < result.length ; i++)maxNick[i] = result[i].get('nickName')
             } else {
                 console.log('Found no data!')
                 curVer = result.length - 1;
@@ -259,7 +272,6 @@ $(document).ready(function () {
     var draw = document.getElementById('draw')
     draw.draggable = false
 
-    var lineButton = document.getElementById('show-hide-line')
     var colorList = document.getElementById('color-list')
     var resetButton = document.getElementById('reset')
     var zoomButton = document.getElementById('zoom')
@@ -271,10 +283,10 @@ $(document).ready(function () {
         isdown = 1;
     }
     draw.onmouseup = function () {
+        saveMap();
         isdown = 0;
     }
 
-    let showGrid = false
     let zoom = false
     let showTools = false
 
@@ -307,15 +319,6 @@ $(document).ready(function () {
 
     reset();
 
-    lineButton.onclick = function () {
-        if (showGrid) {
-            changeClass(box, 'pixel')
-            showGrid = false
-        } else {
-            changeClass(box, 'pixel-line')
-            showGrid = true
-        }
-    }
     resetButton.onclick = function () {
         reset()
     }
@@ -336,15 +339,15 @@ $(document).ready(function () {
 
     zoomButton.onclick = function () {
         if (zoom == 0) {
-            draw.style.setProperty('transform', 'scale(200%) translate(-' + draw.offsetLeft / 4 + 'px,16px)')
+            $(draw).css('transform', 'scale(200%) translate(-' + draw.offsetLeft / 4 + 'px,16px)')
             zoom = 1
         } else if (zoom == 1) {
-            draw.style.setProperty('transform', 'scale(400%) translate(-' + draw.offsetLeft / 4 + 'px,8px)')
+            $(draw).css('transform', 'scale(400%) translate(-' + draw.offsetLeft / 4 + 'px,8px)')
             zoom = 2
             this.children[0].classList.remove('glyphicon-zoom-in')
             this.children[0].classList.add('glyphicon-zoom-out')
         } else {
-            draw.style.setProperty('transform', '')
+            $(draw).css('transform', '')
             zoom = 0
             this.children[0].classList.remove('glyphicon-zoom-out')
             this.children[0].classList.add('glyphicon-zoom-in')
@@ -370,12 +373,6 @@ $(document).ready(function () {
         colorList.appendChild(colorItem)
     }
 
-    function changeClass(arr, className) {
-        for (let i = 0; i < arr.length; i++) {
-            arr[i].className = className
-        }
-    }
-
     upload.onclick = function () {
         if (curVer >= 3) {
             alert('过于久远，无法上传！')

paint/index.html

@@ -1,7 +1,7 @@
 <head>
     <link rel="manifest" href="/site.webmanifest">
-    <!-- <link async rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
-        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> -->
+    <link async rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
+        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
     <link rel="stylesheet" href="../css/bootstrap.min.css"
         integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
     <link rel="stylesheet" href="../css/style.css">
@@ -13,9 +13,8 @@
         .hd,
         .hdt,
         #now-color,
-        .pixel
-        {
-        transition-duration: 100ms;
+        .pixel {
+            transition-duration: 100ms;
         }
 
         .box {
@@ -118,12 +117,6 @@
             border: 1px solid rgb(211, 211, 211);
         }
 
-        .pixel-line {
-            width: 5px;
-            height: 5px;
-            box-sizing: border-box;
-            border: 0.1px solid rgb(211, 211, 211);
-        }
 
         .pixel {
             width: 5px;
@@ -215,7 +208,7 @@
 </head>
 
 <body>
-    <a class="btn btn-info" href="/" style="text-shadow: rgb(85, 85, 85) 3px 2px 4px;"><span
+    <a class="btn btn-info" href="/"><span
             class="glyphicon glyphicon-home" aria-hidden="true"></span>&nbsp;返回</a>
     <div id="main" style="text-align:center">
         <div id="draw"></div>
@@ -226,17 +219,17 @@
             <div class="box canToggle" id="box-r">
                 <i class="hd blurred"></i>
                 <i class="hdt"></i>
-                <input class="box-text" id="box-r-text" onfocus="this.select()"/>
+                <input class="box-text" id="box-r-text" onfocus="this.select()" />
             </div>
             <div class="box canToggle" id="box-g">
                 <i class="hd blurred"></i>
                 <i class="hdt"></i>
-                <input class="box-text" id="box-g-text" onfocus="this.select()"/>
+                <input class="box-text" id="box-g-text" onfocus="this.select()" />
             </div>
             <div class="box canToggle" id="box-b">
                 <i class="hd blurred"></i>
                 <i class="hdt"></i>
-                <input class="box-text" id="box-b-text" onfocus="this.select()"/>
+                <input class="box-text" id="box-b-text" onfocus="this.select()" />
             </div>
             <ul class="canToggle" id="color-list"></ul>
         </div>
@@ -245,16 +238,12 @@
         <button class="btn btn-default noshadow" id="help"
             onclick="alert('说明：左键绘制，右键擦除。\n键盘AD键或屏幕下方按键可浏览历史版本，鼠标悬停于版本上可查看时间。\n点击上传后，同一设备一天内的编辑将会保存在一个版本中，并对所有人可见。')"><span
                 class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></button>
-        <button class="btn btn-default noshadow" id="zoom"><span class="glyphicon glyphicon-zoom-in"
-                aria-hidden="true"></span></button>
-        <button class="btn btn-warning" id="show-hide-line">
-            <span class="glyphicon glyphicon-th" aria-hidden="true"></span>&nbsp;网格</button>
+        <button class="btn btn-info" id="zoom"><span class="glyphicon glyphicon-zoom-in"
+                aria-hidden="true"></span>&nbsp;缩放</button>
         <button class="btn btn-primary" id="upload"><span class="glyphicon glyphicon-cloud-upload"
                 aria-hidden="true"></span>&nbsp;上传</button>
         <button class="btn btn-primary" id="reset"><span class="glyphicon glyphicon-cloud-download"
                 aria-hidden="true"></span>&nbsp;同步</button>
-        <button class="btn btn-danger" id="clear" onclick="tryClear()"><span class="glyphicon glyphicon-ban-circle"
-                aria-hidden="true"></span>&nbsp;清空</button>
         <a id="lbtn" tabindex="0" class="btn btn-default noshadow" onclick="prevVer()">
             <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"><kbd>A</kbd></span>
         </a>