完善回放功能

- 加入回放页面
- 引入gzip压缩和解压

include/game20130526.js

@@ -577,27 +577,141 @@ var isRecording = false;
 function startRecording() {
     isRecording = true;
     console.log('startRecording');
-    window.alert('startRecording');
-    //监听所有按钮的点击事件
+    window.alert('开始录像，录制中的游戏数据会保留在浏览器内，请不要刷新或关闭该页面。');
+    // 监听所有按钮的点击事件
     document.addEventListener('click', recordButtonClick);
-}
   
-function downloadRecordedData() {
-    // 创建一个 Blob 对象，将录制的数据保存为文件
-    var blob = new Blob(recordedData, { type: 'text/html' });
+    var linkElement = document.querySelector('a[onclick="startRecording()"]');
+    if (linkElement) {
+      linkElement.textContent = ">>停止录像";
+      linkElement.setAttribute('onclick', 'stopRecording()');
+    }
+  }
+  
+function stopRecording() {
+    isRecording = false;
 
-    // 创建一个下载链接
-    var downloadLink = document.createElement('a');
-    downloadLink.href = URL.createObjectURL(blob);
-    downloadLink.download = 'recorded_data.html';
+    var linkElement = document.querySelector('a[onclick="stopRecording()"]');
+    if (linkElement) {
+        linkElement.textContent = ">>开始录像";
+        linkElement.setAttribute('onclick', 'startRecording()');
+    }
 
-    // 模拟点击下载链接
+    // 停止监听
+    document.removeEventListener('click', recordButtonClick);
+    downloadRecordedData();
+}
+
+function downloadRecordedData() {
+    var reader = new FileReader();
+    reader.onload = function () {
+        var arrayBuffer = reader.result;
+        var uint8Array = new Uint8Array(arrayBuffer);
+        var gzippedData = pako.gzip(uint8Array);
+        var downloadLink = document.createElement("a");
+        downloadLink.href = URL.createObjectURL(new Blob([gzippedData]));
+        downloadLink.download = "recorded_data.html.gz";
         downloadLink.click();
+    };
+    reader.readAsArrayBuffer(new Blob(recordedData, { type: "text/html" }));
 }
 
 function recordButtonClick(event) {
     // 如果录制状态为 true，则将当前前端的全部静态网页数据保存到数组中
     if (isRecording) {
-      recordedData.push(document.documentElement.outerHTML);
+        recordedData.push(document.documentElement.outerHTML.concat("\n"));
+    }
+}
+
+function selectRecordedFile() {
+    var input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".gz"; 
+
+    input.click();
+
+    // 处理选择的文件
+    input.onchange = function (event) {
+        var file = event.target.files[0]; 
+        console.log("选择的文件:", file);
+
+        displayRecordedData(file);
+    };
+}
+
+// 显示单个页面的内容
+function showPage(pageContent, currentPageIndex) {
+    var recordedDataDiv = document.getElementById('recordedData');
+    recordedDataDiv.innerHTML = pageContent[currentPageIndex];
+
+    var previousPageButton = document.createElement('button');
+    previousPageButton.textContent = '上一页';
+    previousPageButton.onclick = function () {
+        if (currentPageIndex > 0) {
+            currentPageIndex--;
+            showPage(pageContent, currentPageIndex);
+        } else {
+            recordedDataDiv.innerHTML = '已经到达第一页';
+        }
     }
+    var nextPageButton = document.createElement('button');
+    nextPageButton.textContent = '下一页';
+    nextPageButton.onclick = function () {
+        if (currentPageIndex < pageContent.length - 1) {
+            currentPageIndex++;
+            showPage(pageContent, currentPageIndex);
+        } else {
+            recordedDataDiv.innerHTML = '已经到达最后一页';
+        }
+    };
+
+
+    recordedDataDiv.insertBefore(nextPageButton, recordedDataDiv.firstChild);
+    recordedDataDiv.insertBefore(previousPageButton, recordedDataDiv.firstChild);
+}
+
+
+function displayRecordedData(file) {
+    // 检查是否选择了文件
+    if (file) {
+        // 创建一个FileReader对象来读取文件内容
+        var reader = new FileReader();
+        reader.onload = function () {
+            // 将文件内容转换为ArrayBuffer
+            var arrayBuffer = reader.result;
+            // 创建一个Uint8Array来存储ArrayBuffer的数据
+            var uint8Array = new Uint8Array(arrayBuffer);
+
+            // 解压缩文件数据
+            var inflatedData = pako.inflate(uint8Array, { to: 'string' });
+            // 将解压缩后的数据按页进行切分
+            var pages = inflatedData.split('\n<html>');
+
+            // 逐页展示记录的内容
+            var recordedDataDiv = document.getElementById('recordedData');
+            recordedDataDiv.innerHTML = ''; // 清空之前的内容
+
+            // 创建一个包含每页内容的数组
+            var pageContent = [];
+            for (var i = 0; i < pages.length; i++) {
+                pageContent.push(pages[i]);
             }
+
+            // 显示第一页的内容
+            showPage(pageContent, 0);
+        };
+        reader.readAsArrayBuffer(file);
+    } else { // 如果没有选择文件，则显示选择文件的提示消息 
+        var noticeDiv = document.getElementById('notice'); noticeDiv.textContent = '请先选择一个录像文件';
+    }
+}
+
+window.onbeforeunload = function () {
+    if (isRecording) {
+        window.alert('你正在录制游戏，之后将会自动下载录制数据。');
+        downloadRecordedData();
+    }
+};
+  
+  
+  

record.php

+<?php
+
+define('CURSCRIPT', 'record');
+
+require './include/common.inc.php';
+
+include template('record');
+
+?>
+

templates/default/header.htm

@@ -11,6 +11,7 @@
 <script type="text/javascript" src="include/common.js"></script>
 <script type="text/javascript" src="include/game20130526.js"></script>
 <script type="text/javascript" src="include/json.js"></script>
+<script type="text/javascript" src="include/pako.js"></script>
 <!--{if (CURSCRIPT == 'game' && $pls=='1')}-->
   <style>
   body {background-image: url("../../img/location/1.jpg");background-position: center;}
@@ -205,6 +206,8 @@
 </div>
 </a>
 </span>
+<a href="javascript:void(0)" onclick="startRecording()">>>开始录像</a>
+<a href="record.php">>>回放录像</a>
 <a href="admin.php">>>{lang admin}</a>
 <a href="https://bbs.brdts.online/" target="_blank">>>{lang report}</a>
 <a href="https://bbs.brdts.online/?thread-2.htm" target="_blank">>>{lang donate}</a>

templates/default/record.htm

+{template header}
+
+<div class="subtitle">回放录像</div>
+<div id="notice"></div>
+<center>
+  <button onclick="selectRecordedFile()">选择录像文件</button>
+</center>
+
+<div id="recordedData"></div>
+
+{template footer}