将帮助转为网页形式

This commit is contained in:
枫谷剑仙 2021-09-07 00:45:50 +08:00
parent ba281a3a0e
commit 6be322f24d
32 changed files with 176 additions and 104 deletions

View File

@ -10,12 +10,12 @@ This tool can help you easily create and share Swipe Formation or Solo Formation
| **单人 \| Solo** | **2人协力 \| 2P** |
| :---: | :---: |
| ![单人界面预览](document/preview-capture-1p.png) | ![2人协力界面预览](document/preview-capture-2p.png) |
| ![单人界面预览](doc/images/preview-capture-1p.png) | ![2人协力界面预览](doc/images/preview-capture-2p.png) |
| **3人协力 \| 3P** | **手机 \| Mobile** |
| ![3人协力界面预览](document/preview-capture-3p.png) | ![手机端预览](document/preview-mobile.jpg) |
| ![3人协力界面预览](doc/images/preview-capture-3p.png) | ![手机端预览](doc/images/preview-mobile.jpg) |
# 如何使用 | HOW TO USE
推荐[![](https://www.mozilla.org/media/img/firefox/favicon.ico)火狐浏览器](https://www.mozilla.org/firefox/new/) | [![](https://www.mozilla.org/media/img/firefox/favicon.ico)Firefox](https://www.mozilla.org/firefox/new/) is recommended
推荐[![][firefox]火狐浏览器](https://www.mozilla.org/firefox/new/) | [![][firefox]Firefox](https://www.mozilla.org/firefox/new/) is recommended
## 快速使用在线版(推荐) | Online Quick Start (Recommended)
* <https://mapaler.github.io/PADDashFormation/> (Github Pages)
* <https://mapaler.com/PADDashFormation/> (我自己的镜像 | my own mirror)
@ -34,8 +34,6 @@ Firefox 68.0 or above need setting the `privacy.file_unique_origin` to `false` i
* Chrome需要添加`--allow-file-access-from-files`启动参数。
Chrome browser need start with the additional argument `--allow-file-access-from-files`.
# [帮助和提示 | Help and Tips](help.md)
# 翻译我 | Translate me
## 目前支持的语言 | Languages currently supported
1. 中文(简体)
@ -115,3 +113,5 @@ Please refer to existing files.
* [Font Awesome Free](https://github.com/FortAwesome/Font-Awesome) //Font Icon
* [Zpix (最像素)](//github.com/SolidZORO/zpix-pixel-font) //Pixel Font
* [font-spider](//github.com/aui/font-spider) //Compression Font file
[firefox]: https://www.mozilla.org/media/img/firefox/favicon.ico

View File

Before

Width:  |  Height:  |  Size: 128 KiB

After

Width:  |  Height:  |  Size: 128 KiB

View File

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

View File

Before

Width:  |  Height:  |  Size: 97 KiB

After

Width:  |  Height:  |  Size: 97 KiB

View File

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 45 KiB

View File

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

View File

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

View File

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

View File

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 35 KiB

View File

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 47 KiB

View File

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 42 KiB

View File

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 33 KiB

View File

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View File

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 37 KiB

View File

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 4.5 KiB

View File

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View File

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

View File

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 72 KiB

View File

Before

Width:  |  Height:  |  Size: 100 KiB

After

Width:  |  Height:  |  Size: 100 KiB

View File

Before

Width:  |  Height:  |  Size: 107 KiB

After

Width:  |  Height:  |  Size: 107 KiB

View File

Before

Width:  |  Height:  |  Size: 141 KiB

After

Width:  |  Height:  |  Size: 141 KiB

View File

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 49 KiB

View File

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

View File

Before

Width:  |  Height:  |  Size: 126 KiB

After

Width:  |  Height:  |  Size: 126 KiB

View File

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

View File

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 46 KiB

167
doc/index.html Normal file
View File

@ -0,0 +1,167 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>智龙急速阵型帮助</title>
<link rel="shortcut icon" href="images/icon.png" type="image/x-png" />
<meta name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
code {
padding: .2em .4em;
margin: 0;
font-size: 85%;
background-color: rgba(175, 184, 193, 0.2);
border-radius: 6px;
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
}
ul>li {
margin-bottom: 5px;
}
</style>
</head>
<body>
<h1>智龙迷城队伍图制作工具使用技巧<br>Tips of <em>Puzzle &amp; Dragons Formation Maker</em></h1>
<h2>目录 | Index</h2>
<ul class="index">
<li><a href="#share">分享队伍 | Share your team</a></li>
<li><a href="#editing-tips">队伍编辑技巧 | Convenient tips for edit</a></li>
<li><a href="#search-cards">搜索图鉴 | Search cards</a></li>
<li><a href="#advanced-of-text-detail">文字说明的高级功能 | Advanced of the description</a></li>
<li><a href="#others">其他 | Others</a></li>
<li><a href="#report-bug">报告BUG | Report BUG</a></li>
<li><a href="#program-source">程序源代码 | Program Source</a></li>
</ul>
<h2 id="share">分享 | Share</h2>
<h3>通过网址分享和收藏队伍 | Share and collect teams by URL</h3>
<p>直接复制网址即可分享组队或自己添加收藏夹保存。<br>
Copy the URL directly to share the Formation, or add a Bookmark to collect.<br>
<img src="images/tips-share.png" alt="分享组队"><br>
为了更方便的分享,你可以使用任意第三方<em>短网址服务</em>进一步缩短网址。<br>
For easier sharing, you can further shorten your URL using any third-party <em>Short URL Service</em>. Like, <a
href="https://bitly.com/">bitly</a>.
</p>
<h3>二维码分享 | Share by QR Code</h3>
<p>可以使用摄像头读取队伍二维码<br>
You can use the camera to read the Formation QR code<br>
<img src="images/tips-qr-read.webp" alt="使用摄像头读取二维码"><br>
读取到的队伍会显示为链接<br>
The read Formation appears as a link<br>
<img src="images/tips-qr-read-found.png" alt="成功读取到二维码"><br>
目前可以读取 | Currently can read:
</p>
<ol>
<li>本程序自有格式的二维码<br>
This program's own format QR code<br>
<img src="images/tips-qr-pdf.png" alt="PDF二维码">
</li>
<li>本程序网址链接的二维码<br>
QR code of this program's URL<br>
<img src="images/tips-qr-url.png" alt="URL二维码">
</li>
<li>PDC 的二维码<br>
PDC format QR code<br>
<img src="images/tips-qr-pdc.webp" alt="PDC二维码">
</li>
</ol>
<h2 id="editing-tips">编辑技巧 | Editing tips</h2>
<ul>
<li>使用<strong>后退</strong>即可撤销上一次修改,需要重做则使用前进。<br>
Use <strong>Back</strong> to undo the last edit, redo with Forward.<br>
<img src="images/tips-undo.png" alt="撤銷修改">
</li>
<li><strong>拖拽</strong>卡片头像即可快速交换位置,也支持手机触屏。<br>
<strong>Drag</strong> card avatars to quickly swap member's positions, also supports mobile touch
screen.<br>
<img src="images/tips-interchangeCard.png" alt="切换位置"><br>
使用顶部的开关可以切换到复制模式<br>
Use the switch at the top can switch to copy mode.
</li>
<li>如果你希望使用技能切换队长使用切换按钮。这样可以保留原始队长强调边框和76版面图标。<br>
If you want switch leader by skill, use the switch button. This preserves the original leader accent border,
and the 76 board icon.<br>
<img src="images/tips-switch-leader.png" alt="切换位置">
</li>
<li>使用<code>Ctrl + ←/→</code>,或小键盘上的<code>←/→</code>(需关闭<code>NumLock</code>)可以快速切换变身。<br>
You can using <code>Ctrl + ←/→</code> or <code>←/→</code> on keypad (turn <code>NumLock</code> off) to
quickly change Henshin.<br>
<img src="images/tips-arrow-change-henshin.png" alt="按键切换变身"><br>
<img src="images/tips-arrow-close-numlock.webp" alt="关闭小键盘">
</li>
</ul>
<h2 id="search-cards">搜索图鉴 | Search cards</h2>
<ul>
<li>可以在编辑界面的怪物ID输入<strong>怪物名称</strong><strong>标签</strong>来搜索卡片。<br>
You can search for card by entering the <strong>Monster Name</strong> or <strong>Tags</strong> in the
monster ID of the editing interface.<br>
<img src="images/tips-search-name.png" alt="搜索怪物名称">
</li>
<li>点击<strong>技能名称</strong>,可搜索相同主动技能宠物<br>
Click on <strong>Skill Name</strong> to search for the same active skills Cards.<br>
<img src="images/tips-search-skills.png" alt="搜索怪物主动技能">
</li>
<li>点击<strong>系列ID</strong><strong>标签</strong>,可搜索该系列<br>
Click the <strong>Series ID</strong> or <strong>Tags</strong> to search for series.<br>
<img src="images/tips-search-series.webp" alt="搜索怪物系列">
</li>
<li>复制本版本游戏数据的<strong>标签</strong>,可在游戏中搜索系列名称<br>
Copy the <strong>Tag</strong> of this version of the game data can search for the series in the game.<br>
<img src="images/tips-search-TagInGame.png" alt="在游戏中搜索怪物系列">
</li>
<li>点击编辑界面的卡片头像可以跳转到攻略网站。<br>
Click on the card avatar in the editing interface to jump to the Guide.<br>
<img src="images/tips-guide.png" alt="攻略网站"><br>
在队伍界面和搜索结果的怪物头像上,点击鼠标中键也可以跳转到攻略网站。在手机上则是长按怪物头像然后选择在新标签页打开。<br>
Or click the middle mouse button on the monster avatar of the formation interface and search results to jump
to the Guide. On your phone, you're long-pressing the monster avatar and then selecting to open it in a new
tab.<br>
<img src="images/tips-guide2.png" alt="攻略网站2">
</li>
</ul>
<h2 id="advanced-of-text-detail">文字的高级功能 | Advanced of text detail</h2>
<ul>
<li><code>%{m怪物ID}</code>可以显示怪物头像。<br>
<code>%{m[Monster ID]}</code> can display the monster avatar.<br>
<img src="images/tips-advanced-card.png" alt="怪物头像">
</li>
<li>队伍标题与队伍说明可以使用<code>^16进制颜色代码^内容^p</code>来改变内容颜色;<br>
Formation Title and Detail can use the <code>^[Hex Color Code]^Content^p</code> to change the color of the
Content.<br>
<img src="images/tips-advanced-color.png" alt="文字颜色"><br>
</li>
</ul>
<h2 id="others">其他 | Others</h2>
<ul>
<li>点击语音觉醒可以试听技能语音。<br>
Click Voice Awakening to try out skill voice.<br>
<img src="images/tips-voice.png" alt="语音觉醒">
</li>
<li>2人只显示部分共用的觉醒的统计不包括超觉醒单人和三人则全部显示。<br>
The 2P Multi Games Mode shows only several common awoken statistics (excluding super-awakening), but the
Solo and 3P Mode shows all.</li>
<li>内建的截图按钮依靠 <a
href="https://github.com/niklasvh/html2canvas/">html2canvas</a>,会有一些绘制错误,浏览器的截图扩展能够更加还原显示的真实样子。<br>
Built-in screenshot button relies on <a href="https://github.com/niklasvh/html2canvas/">html2canvas</a>,
there will be some drawing errors, browser screenshot extension can be more restore the real appearance of
the display.</li>
<li>如果你只是希望将本程序当作简单图鉴使用,可以在参数里加上<code>guide=1</code>,如<code>https://mapaler.gitee.io/paddashformation/solo.html?guide=1</code>。图鉴模式下进入网页时,会直接打开怪物修改界面,并且背景不透明。<br>
If you just want to use this program as a simple guide, you can add <code>guide=1</code> to the parameters,
such as <code>https://mapaler.github.io/PADDashFormation/solo.html?guide=1</code>. When you enter the page
in guide mode, the monster modification interface opens directly and the background is opaque.</li>
</ul>
<h2 id="report-bug">报告BUG | Report BUG</h2>
<p>如果发现 BUG请先按 Ctrl+F5 强制刷新,并点击数据更新时间按钮强制更新数据。如仍存在问题可以在 <a
href="https://github.com/Mapaler/PADDashFormation/issues">Issues</a> 报告。<br>
If a BUG is found, first test again after force refresh by Ctrl-F5, then click the Data Update Time button to
force update the data. If there is still a problem, you can report it at the <a
href="https://github.com/Mapaler/PADDashFormation/issues">Issues</a>.</p>
<h2 id="program-source">程序源代码 | Program Source</h2>
<p>你可以在 <a href="https://github.com/Mapaler/PADDashFormation/">GitHub</a> 找到源代码。<br>
You can find the source code at <a href="https://github.com/Mapaler/PADDashFormation/">GitHub</a>.</p>
</body>
</html>

94
help.md
View File

@ -1,94 +0,0 @@
智龙迷城队伍图制作工具使用技巧<br>Tips of *Puzzle & Dragons Formation Maker*
======
## 目录 | Index
* [分享队伍 | Share your team](#分享--share)
* [队伍编辑技巧 | Convenient tips for edit](#编辑技巧--editing-tips)
* [搜索图鉴 | Search cards](#搜索图鉴--search-cards)
* [文字说明的高级功能 | Advanced of the description](#文字的高级功能--advanced-of-text-detail)
* [其他 | Others](#其他--others)
* [报告BUG | Report BUG](#报告bug--report-bug)
## 分享 | Share
### 通过网址分享和收藏队伍 | Share and collect teams by URL
直接复制网址即可分享组队或自己添加收藏夹保存。
Copy the URL directly to share the Formation, or add a Bookmark to collect.
![分享组队](document/tips-share.png)
为了更方便的分享,你可以使用任意第三方*短网址服务*进一步缩短网址。
For easier sharing, you can further shorten your URL using any third-party *Short URL Service*. Like, [bitly](https://bitly.com/).
### 二维码分享 | Share by QR Code
可以使用摄像头读取队伍二维码
You can use the camera to read the Formation QR code
![使用摄像头读取二维码](document/tips-qr-read.webp)
读取到的队伍会显示为链接
The read Formation appears as a link
![成功读取到二维码](document/tips-qr-read-found.png)
目前可以读取 | Currently can read:
1. 本程序自有格式的二维码
This program's own format QR code
![PDF二维码](document/tips-qr-pdf.png)
1. 本程序网址链接的二维码
QR code of this program's URL
![URL二维码](document/tips-qr-url.png)
1. PDC 的二维码
PDC format QR code
![PDC二维码](document/tips-qr-pdc.webp)
## 编辑技巧 | Editing tips
* 使用**后退**即可撤销上一次修改,需要重做则使用前进。
Use **Back** to undo the last edit, redo with Forward.
![撤銷修改](document/tips-undo.png)
* **拖拽**卡片头像即可快速交换位置,也支持手机触屏。
**Drag** card avatars to quickly swap member's positions, also supports mobile touch screen.
![切换位置](document/tips-interchangeCard.png)
使用顶部的开关可以切换到复制模式
Use the switch at the top can switch to copy mode.
* 如果你希望使用技能切换队长使用切换按钮。这样可以保留原始队长强调边框和76版面图标。
If you want switch leader by skill, use the switch button. This preserves the original leader accent border, and the 76 board icon.
![切换位置](document/tips-switch-leader.png)
* 使用`Ctrl + ←/→`,或小键盘上的`←/→`(需关闭`NumLock`)可以快速切换变身。
You can using `Ctrl + ←/→` or `←/→` on keypad (turn `NumLock` off) to quickly change Henshin.
![按键切换变身](document/tips-arrow-change-henshin.png)
![关闭小键盘](document/tips-arrow-close-numlock.webp)
## 搜索图鉴 | Search cards
* 可以在编辑界面的怪物ID输入**怪物名称**或**标签**来搜索卡片。
You can search for card by entering the **Monster Name** or **Tags** in the monster ID of the editing interface.
![搜索怪物名称](document/tips-search-name.png)
* 点击**技能名称**,可搜索相同主动技能宠物
Click on **Skill Name** to search for the same active skills Cards.
![搜索怪物主动技能](document/tips-search-skills.png)
* 点击**系列ID**或**标签**,可搜索该系列
Click the **Series ID** or **Tags** to search for series.
![搜索怪物系列](document/tips-search-series.webp)
* 复制本版本游戏数据的**标签**,可在游戏中搜索系列名称
Copy the **Tag** of this version of the game data can search for the series in the game.
![在游戏中搜索怪物系列](document/tips-search-TagInGame.png)
* 点击编辑界面的卡片头像可以跳转到攻略网站。
Click on the card avatar in the editing interface to jump to the Guide.
![攻略网站](document/tips-guide.png)
在队伍界面和搜索结果的怪物头像上,点击鼠标中键也可以跳转到攻略网站。在手机上则是长按怪物头像然后选择在新标签页打开。
Or click the middle mouse button on the monster avatar of the formation interface and search results to jump to the Guide. On your phone, you're long-pressing the monster avatar and then selecting to open it in a new tab.
![攻略网站2](document/tips-guide2.png)
## 文字的高级功能 | Advanced of text detail
* 队伍标题与队伍说明可以使用`^16进制颜色代码^内容^p`来改变内容颜色;
Formation Title and Detail can use the `^[Hex Color Code]^Content^p` to change the color of the Content.
![文字颜色](document/tips-advanced-color.png)
`%{m怪物ID}`可以显示怪物头像。
`%{m[Monster ID]}` can display the monster avatar.
![怪物头像](document/tips-advanced-card.png)
## 其他 | Others
* 点击语音觉醒可以试听技能语音。
Click Voice Awakening to try out skill voice.
![语音觉醒](document/tips-voice.png)
* 2人只显示部分共用的觉醒的统计不包括超觉醒单人和三人则全部显示。
The 2P Multi Games Mode shows only several common awoken statistics (excluding super-awakening), but the Solo and 3P Mode shows all.
* 内建的截图按钮依靠 [html2canvas](https://github.com/niklasvh/html2canvas/),会有一些绘制错误,浏览器的截图扩展能够更加还原显示的真实样子。
Built-in screenshot button relies on [html2canvas](https://github.com/niklasvh/html2canvas/), there will be some drawing errors, browser screenshot extension can be more restore the real appearance of the display.
* 如果你只是希望将本程序当作简单图鉴使用,可以在参数里加上`guide=1`,如`https://mapaler.gitee.io/paddashformation/solo.html?guide=1`。图鉴模式下进入网页时,会直接打开怪物修改界面,并且背景不透明。
If you just want to use this program as a simple guide, you can add `guide=1` to the parameters, such as `https://mapaler.github.io/PADDashFormation/solo.html?guide=1`. When you enter the page in guide mode, the monster modification interface opens directly and the background is opaque.
## 报告BUG | Report BUG
如果发现 BUG请先按 Ctrl+F5 强制刷新,并点击数据更新时间按钮强制更新数据。如仍存在问题可以在 [Issues](//github.com/Mapaler/PADDashFormation/issues) 报告。
If a BUG is found, first test again after force refresh by Ctrl-F5, then click the Data Update Time button to force update the data. If there is still a problem, you can report it at the [Issues](//github.com/Mapaler/PADDashFormation/issues).

View File

@ -4,7 +4,6 @@
<meta charset="utf-8">
<title>智龙急速阵型</title>
<link rel="shortcut icon" href="images/icon.png" type="image/x-png" />
<link rel="manifest" href="manifest.json">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="style-monsterimages.css" rel="stylesheet" type="text/css">

View File

@ -67,7 +67,7 @@ var formation = new Formation(teamsCount,5);
<button class="btn-capture" onclick="capture();"></button>
<a class="down-capture display-none" target="_blank"></a>
<button class="btn-player-data"></button>
<a class="help-link" target="_blank" href="https://github.com/Mapaler/PADDashFormation/blob/master/help.md"></a>
<a class="help-link" target="_blank" href="doc/index.html"></a>
</div>
<div>
<input type="checkbox" class="config-checkbox-ipt" name="btn-show-mon-skill-cd" id="btn-show-mon-skill-cd"><label class="config-checkbox-lbl btn-show-mon-skill-cd-lbl" for="btn-show-mon-skill-cd"><div class="config-checkbox-lbl-cicle"></div></label>

View File

@ -47,7 +47,7 @@ var formation = new Formation(teamsCount,6);
<button class="btn-capture" onclick="capture();"></button>
<a class="down-capture display-none" target="_blank"></a>
<button class="btn-player-data"></button>
<a class="help-link" target="_blank" href="https://github.com/Mapaler/PADDashFormation/blob/master/help.md"></a>
<a class="help-link" target="_blank" href="doc/index.html"></a>
</div>
<div>
<input type="checkbox" class="config-checkbox-ipt" name="btn-show-mon-skill-cd" id="btn-show-mon-skill-cd"><label class="config-checkbox-lbl btn-show-mon-skill-cd-lbl" for="btn-show-mon-skill-cd"><div class="config-checkbox-lbl-cicle"></div></label>

View File

@ -61,7 +61,7 @@ var formation = new Formation(teamsCount,6);
<button class="btn-capture" onclick="capture();"></button>
<a class="down-capture display-none" target="_blank"></a>
<button class="btn-player-data"></button>
<a class="help-link" target="_blank" href="https://github.com/Mapaler/PADDashFormation/blob/master/help.md"></a>
<a class="help-link" target="_blank" href="doc/index.html"></a>
</div>
<div>
<input type="checkbox" class="config-checkbox-ipt" name="btn-show-mon-skill-cd" id="btn-show-mon-skill-cd"><label class="config-checkbox-lbl btn-show-mon-skill-cd-lbl" for="btn-show-mon-skill-cd"><div class="config-checkbox-lbl-cicle"></div></label>