Improve mobile view. Update README.

hwc0919 · Mar 12, 2020 · 2926b1e · 2926b1e
1 parent c49a2b9
commit 2926b1e
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 1,144 deletions.
diff --git a/README.md b/README.md
@@ -1,21 +1,14 @@
 # TreePlayground
-## Tree Visualization Tool for Learning Data Structure and Algorithm.
+#### Tree Visualization Tool for Learning Data Structure and Algorithm.
 
-Just visit https://hwc0919.github.io/TreePlayground/ and enjoy yourself.
-
-Or download contents in folder 'docs' to run offline.
-
-(My personal server http://192.144.210.149/ may be shutdown shortly)
+## Start | 开始使用
+Just visit https://hwc0919.github.io/TreePlayground/ , or download contents in folder 'docs' to run offline.
 
 Program can run perfectly on Chrome and Firefox. Windows Edge is only functional when exploring online.
 
 V1.4.4 made adaption for mobile devices, but mobile use still not recommended.
 
-可直接访问 https://hwc0919.github.io/TreePlayground/
-
-也可以下载文件夹"docs"中的内容本地运行.
-
-(个人服务器 http://192.144.210.149/ 可能即将关闭)
+可直接访问 https://hwc0919.github.io/TreePlayground/ , 也可以下载文件夹"docs"中的内容本地运行.
 
 Chorme和Firefox浏览器可以正常运行. Edge浏览器可以在线运行.
 
@@ -29,13 +22,13 @@ V1.4.4适配了移动端页面, 但仍不推荐在手机上运行.
 [@baijiangying](https://github.com/baijiangying),
 等同学对调试的帮助和建议
 
-## Overview
+## Overview | 概览
 ![image](https://raw.githubusercontent.com/wiki/hwc0919/TreePlayground/recommend1.png)
 ![image](https://raw.githubusercontent.com/wiki/hwc0919/TreePlayground/recommend2.png)
 ![image](https://raw.githubusercontent.com/wiki/hwc0919/TreePlayground/recommend3.png)
 ![image](https://raw.githubusercontent.com/wiki/hwc0919/TreePlayground/recommend4.png)
 
-## Objective
+## Objective | 目标
 本项目旨在帮助学习数据结构课程搜索树相关章节的同学(在此强烈推荐清华大学邓俊辉老师的数据结构课, 可在[学堂在线](https://next.xuetangx.com/)免费学习).
 
 项目计划建造一个"树游乐场", 包括一般二叉树, BST, AVL, Splay, RedBlack等等...
@@ -45,7 +38,7 @@ V1.4.4适配了移动端页面, 但仍不推荐在手机上运行.
 所有操作都是动态的、实时视觉反馈的.
 
 
-## Some detail
+## Some detail | 一些细节
 本项目使用html5, typescript, vue.js实现, 并用webpack打包. 项目入口为一个html文件, 可直接在本地运行.
 
 为实现动态性, 使用了很多异步代码, 代码的可读性收到一些影响.
@@ -58,7 +51,10 @@ V1.4.4适配了移动端页面, 但仍不推荐在手机上运行.
 
 别忘了给Star哟
 
-## Interesting Samples
+
+## Interesting Samples | 有趣的例子
+Copy and use <i>Build</i> button to build the tree.<br/>
+使用 <i>Build</i> 按钮构建树
 
 #### AVL
 21,12,28,7,17,25,31,4,10,15,18,23,27,30,32,2,6,9,11,14,16,17.5,19,22,24,26,,29,,,,1,3,5,,8,,,,13,14.5,15.5,,17.3,,,,21.5,,,,,,,,0,,,,,,,,12.5
diff --git a/docs/index.html b/docs/index.html
@@ -3,7 +3,13 @@
 
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <noscript>Please enable javascript to use this tool.</noscript>
+    <script>
+        var ratio = window.devicePixelRatio;
+        if (typeof ratio === "number") var scale = 1 / ratio;
+        else var scale = 1;
+        document.write(`<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=${scale<1?0.7:1}">`);
+    </script>
     <meta name="author" content="NitroMelon">
     <meta name="institution" content="Tsinghua University">
     <meta name="git" content="https://github.com/hwc0919/TreePlayground">
@@ -28,7 +34,7 @@
             <button class="btn btn-primary top-toolbar-item" type="button" @click="traversal(3)">层次遍历</button>
             <span id="interval-ranger" class="top-toolbar-item">
                 <span style="margin: 5px">间隔: <label v-text="commonParams.interval + 'ms'">500ms</label></span>
-                <input type="range" min="100" max="1500" value="500" step="100" v-model.number="commonParams.interval">
+                <input type="range" min="0" max="1500" value="500" step="100" v-model.number="commonParams.interval">
             </span>
         </div>
         <!-- Left Toolbar -->
@@ -48,29 +54,32 @@ <h4>Scale: <label v-text="commonParams.treeScale + '%'"></h4>
             <div class="tree-dragging-btn" @mousedown.self="onTreeMouseDown" @touchstart.self.prevent="onTreeMouseDown">
             </div>
             <!-- Top Functional Node -->
-            <top-binnode id="trvl-sequence" :data="topSequence" @top-build="onTopBuild" @top-insert="onTopInsert"
+            <top-binnode id="top-function-node" :data="topSequence" @top-build="onTopBuild" @top-insert="onTopInsert"
                 @top-search="onTopSearch" @top-help="onTopHelp" @top-proper="onTopProper"></top-binnode>
             <div class="left-message" v-text="messages.left">加载中...</div>
             <div class="right-message" v-text="messages.right">Loading...</div>
+
             <!-- Internal Tree Nodes -->
-            <binnode v-for="(node, ind) in structInfo.nodes" :node="node" :key="'node' + ind"
+            <binnode v-for="node, ind in structInfo.nodes" :node="node" :key="`intrNode${ind}`"
                 :class="nodeColorClass(node.color)" @remove-below="onRemoveBelow" @remove-one="onRemoveOne"
                 @intr-update="onIntrUpdate">
             </binnode>
+
             <!-- External Tree Nodes -->
-            <extr-binnode v-for="(node, ind) in structInfo.extrNodes" :node="node" :key="'extNode' + ind"
+            <extr-binnode v-for="node, ind in structInfo.extrNodes" :node="node" :key="`extrNode${ind}`"
                 @extr-insert="onExtrInsert">
             </extr-binnode>
+
             <!-- Internal Tree Edges -->
-            <div class="left-edge" v-for="e in structInfo.edges[0]"
+            <div class="left-edge" v-for="e, ind in structInfo.edges[0]" :key="`intrLeftEdge${ind}`"
                 :style="{'left': e[0]+'px', 'top': e[1]+'px', 'width': e[2]+'px', 'height': e[3]+'px'}"></div>
-            <div class="right-edge" v-for="e in structInfo.edges[1]"
+            <div class="right-edge" v-for="e, ind in structInfo.edges[1]" :key="`intrRightEdge${ind}`"
                 :style="{'left': e[0]+'px', 'top': e[1]+'px', 'width': e[2]+'px', 'height': e[3]+'px'}"></div>
 
             <!-- External Tree Edges -->
-            <div class="left-edge extr-edge" v-for="e in structInfo.extrEdges[0]"
+            <div class="left-edge extr-edge" v-for="e, ind in structInfo.extrEdges[0]" :key="`extrLeftEdge${ind}`"
                 :style="{'left': e[0]+'px', 'top': e[1]+'px', 'width': e[2]+'px', 'height': e[3]+'px'}"></div>
-            <div class="right-edge extr-edge" v-for="e in structInfo.extrEdges[1]"
+            <div class="right-edge extr-edge" v-for="e, ind in structInfo.extrEdges[1]" :key="`extrRightEdge${ind}`"
                 :style="{'left': e[0]+'px', 'top': e[1]+'px', 'width': e[2]+'px', 'height': e[3]+'px'}"></div>
         </div>
     </div>

diff --git a/docs/style.js b/docs/style.js