Merge pull request #171 from clean-master/feature/recording

增加录像功能

Merge pull request #171 from clean-master/feature/recording
增加录像功能
ea84cc46 · Nemo Ma · GitHub · e2c06f2a · 0f924095 · ea84cc46
Commit ea84cc46 authored Jul 12, 2023 by Nemo Ma Committed by GitHub Jul 12, 2023
6 changed files
--- a/include/game20130526.js
+++ b/include/game20130526.js
@@ -567,6 +567,151 @@ function skill_unacquired_mouseout(e)
 		if (child.className == 'skill_unacquired_hint_transparent') 
 		{
 			child.className = 'skill_unacquired_hint';
-		}
+    	}
 	}
 }
+
+//录制处理
+var recordedData = [];
+var isRecording = false;
+function startRecording() {
+    isRecording = true;
+    console.log('startRecording');
+    window.alert('开始录像，录制中的游戏数据会保留在浏览器内，请不要刷新或关闭该页面。');
+    // 监听所有按钮的点击事件
+    document.addEventListener('click', recordButtonClick);
+  
+    var linkElement = document.querySelector('a[onclick="startRecording()"]');
+    if (linkElement) {
+      linkElement.textContent = ">>停止录像";
+      linkElement.setAttribute('onclick', 'stopRecording()');
+    }
+  }
+  
+function stopRecording() {
+    isRecording = false;
+
+    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.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();
+    }
+};
+  
+  
+  
--- a/include/pako.js
+++ b/include/pako.js
--- a/record.php
+++ b/record.php
+<?php
+
+define('CURSCRIPT', 'record');
+
+require './include/common.inc.php';
+
+include template('record');
+
+?>
+
--- a/templates/default/header.htm
+++ b/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>

--- a/templates/default/record.htm
+++ b/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}
--- a/templates/default/sp_terminal.htm
+++ b/templates/default/sp_terminal.htm
@@ -38,6 +38,16 @@
                    <span class="eicon" onmousedown="changeVolume(0.05);">⏫</span>
                </td>
            </tr>
+            <!-- 录制按钮 -->
+            <tr height="24">
+                <TD colspan="2" class=b1>录制与回放</TD>
+            </tr>
+            <tr class="map" height="32">
+                <td colspan="2">
+                    <button onclick="startRecording(); return false;">开始录制</button>
+                    <button onclick="downloadRecordedData()">下载录制文件</button>
+                </td>
+            </tr>
        </table>
        <!-- 战场控制指令 -->
        <!--{if !isset($clbpara['console'])}-->