☰

Thief-Book in Browser

浏览器版 Thief-Book 摸鱼神器

目前为 2020-12-07 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         Thief-Book in Browser
  3. // @namespace    https://github.com/chocovon/thiefbook-js
  4. // @version      0.2
  5. // @description  浏览器版 Thief-Book 摸鱼神器
  6. // @author       chocovon
  7. // @match       http*://*/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     (function() {
  15.         let text = '按，。键翻页\n-键退出/恢复显示\nGood Luck!'
  16.         let lines = [];
  17.         let lineLength = 10;
  18.         let pointer = 0;
  19.         let keyNextLine = 'Period';
  20.         let keyPreLine = 'Comma';
  21.         let keyHide = 'Minus';
  22.         let hide = false;
  23.         let progress = 0;
  24.  
  25.         document.head.innerHTML +=
  26.             '<style>\n' +
  27.             '        .thief-book-line-box {\n' +
  28.             '            position: fixed;\n' +
  29.             '            left: 0;\n' +
  30.             '            bottom: 0;\n' +
  31.             '        }\n' +
  32.             '        .thief-book-line {\n' +
  33.             '            font-size: 10px;\n' +
  34.             '            text-align:left;\n' +
  35.             '            background-color: rgb(222,225,230);\n' +
  36.             '            height: 23px;\n' +
  37.             '            line-height: 23px;\n' +
  38.             '            border-radius: 4px;\n' +
  39.             '            padding-left: 5px;\n' +
  40.             '            padding-right: 5px;\n' +
  41.             '        }\n' +
  42.             '        .thief-book-mouse-area {\n' +
  43.             '            position: fixed;\n' +
  44.             '            left: 0;\n' +
  45.             '            bottom: 0;\n' +
  46.             '            z-index: 99999;\n' +
  47.             '            height: 70px;\n' +
  48.             '            width:500px;\n' +
  49.             '            margin: 1px;\n' +
  50.             '        }\n' +
  51.             '        .thief-book-mouse-area:hover .thief-book-settings-area {\n' +
  52.             '            opacity: 1 !important;\n' +
  53.             '        }\n' +
  54.             '        .thief-book-settings-area {\n' +
  55.             '            position: fixed;\n' +
  56.             '            left: 60px;\n' +
  57.             '            bottom: 30px;\n' +
  58.             '            display: flex;\n' +
  59.             '            transition: 0.3s;\n' +
  60.             '        }\n' +
  61.             '        .thief-book-semi-hide {\n' +
  62.             '            opacity: 0;\n' +
  63.             '        }\n' +
  64.             '        .thief-book-icon {\n' +
  65.             '            cursor: default;\n' +
  66.             '            font-size: 30px;\n' +
  67.             '            transition: 0.3s;\n' +
  68.             '        }\n' +
  69.             '        .thief-book-slider {\n' +
  70.             '            height: 13px;\n' +
  71.             '            width: 100px;\n' +
  72.             '        }\n' +
  73.             '        .thief-book-hide {\n' +
  74.             '            display: none;\n' +
  75.             '        }\n' +
  76.             '    </style>';
  77.  
  78.         document.body.innerHTML +=
  79.             '<div id="thief-book-leftCorner" class="thief-book-mouse-area">\n' +
  80.             '    <div id="thief-book-settings" class="thief-book-settings-area">\n' +
  81.             '        <label class="thief-book-icon">&#128193;\n' +
  82.             '            <input type="file" id="thief-book-selectFile" style="display:none">\n' +
  83.             '        </label>\n' +
  84.             '        <label>\n' +
  85.             '            <input id="thief-book-progressSlider" class="thief-book-slider" style="width:500px" type="range" min="0" max="2" value="0">\n' +
  86.             '        </label>\n' +
  87.             '        <label>\n' +
  88.             '            <input id="thief-book-lineLengthSlider" class="thief-book-slider" type="range" min="5" max="70" value="20">\n' +
  89.             '        </label>\n' +
  90.             '    </div>\n' +
  91.             '    <div id="thief-book-lineBox" class="thief-book-line-box"></div>\n' +
  92.             '</div>';
  93.  
  94.         parseText(false);
  95.  
  96.         document.getElementById('thief-book-selectFile')
  97.             .addEventListener('change', function(){
  98.             let fr=new FileReader();
  99.             fr.onload=function(){
  100.                 text = fr.result;
  101.                 parseText(false);
  102.             }
  103.             fr.readAsText(this.files[0]);
  104.             document.getElementById('thief-book-settings').classList.add('thief-book-semi-hide');
  105.         })
  106.         document.getElementById('thief-book-progressSlider')
  107.             .addEventListener('input', function(){
  108.             pointer = parseInt(this.value);
  109.             printLine(true);
  110.         })
  111.         document.getElementById('thief-book-progressSlider')
  112.             .addEventListener('mouseup', function(){
  113.             printLine();
  114.         })
  115.         document.getElementById('thief-book-lineLengthSlider')
  116.             .addEventListener('input', function(){
  117.             lineLength = parseInt(this.value);
  118.             parseText(true)
  119.         })
  120.         window.addEventListener('keydown', function(e) {
  121.             if (e.code === keyNextLine) {
  122.                 nextLine();
  123.             } else if (e.code === keyPreLine) {
  124.                 preLine();
  125.             } else if (e.code === keyHide) {
  126.                 onOff()
  127.             }
  128.         });
  129.  
  130.  
  131.         function parseText(keepProgress) {
  132.             lines = parseLines(text);
  133.             if (keepProgress) {
  134.                 pointer = Math.round(progress * (lines.length - 1));
  135.             } else {
  136.                 pointer = 0;
  137.                 progress = 0;
  138.             }
  139.             let slider = document.getElementById('thief-book-progressSlider')
  140.             slider.min = 0;
  141.             slider.max = lines.length - 1;
  142.             printLine();
  143.         }
  144.  
  145.         function parseLines(text) {
  146.             let i = 0,j = 0;
  147.             let lines = [];
  148.             while (j < text.length) {
  149.                 if (j - i > lineLength || text[j] === '\n') {
  150.                     lines.push(text.slice(i, j+1))
  151.                     i = ++j;
  152.                     continue;
  153.                 }
  154.                 j++;
  155.             }
  156.             if (j > i) {
  157.                 lines.push(text.slice(i, j))
  158.             }
  159.             return lines;
  160.         }
  161.  
  162.         function nextLine() {
  163.             if (pointer < lines.length - 1) {
  164.                 pointer++;
  165.             }
  166.             printLine()
  167.         }
  168.         function preLine() {
  169.             if (pointer > 0) {
  170.                 pointer--;
  171.             }
  172.             printLine();
  173.         }
  174.         function onOff() {
  175.             hide = !hide;
  176.             printLine();
  177.         }
  178.  
  179.         function printLine(multiLine) {
  180.             if (hide) {
  181.                 document.getElementById('thief-book-leftCorner').classList.add('thief-book-hide');
  182.             } else {
  183.                 document.getElementById('thief-book-leftCorner').classList.remove('thief-book-hide');
  184.             }
  185.  
  186.             document.getElementById('thief-book-lineBox').innerHTML = ''
  187.  
  188.             if (multiLine) {
  189.                 let i = pointer - 20;
  190.                 while (i < pointer) {
  191.                     if (i < 0) {
  192.                         i++;
  193.                         continue;
  194.                     }
  195.                     createLine(i);
  196.                     i++;
  197.                 }
  198.             }
  199.             createLine(pointer);
  200.  
  201.             document.getElementById('thief-book-progressSlider').value = pointer;
  202.  
  203.             function createLine(i) {
  204.                 let newLine = document.createElement('div');
  205.                 newLine.classList.add('thief-book-line');
  206.                 let line = lines[i];
  207.                 if (line.length < lineLength) {
  208.                     line += '　'.repeat(lineLength - line.length);
  209.                 }
  210.                 newLine.innerText = calProgress() + '  ' + line;
  211.                 document.getElementById('thief-book-lineBox').append(newLine);
  212.             }
  213.         }
  214.  
  215.         function calProgress() {
  216.             progress = pointer / (lines.length - 1);
  217.             return pointer === lines.length - 1 ? '100.00%' :
  218.             ('000' + ((100 * progress).toFixed(2))).slice(-5) + '%';
  219.         }
  220.     })();
  221. })();