初步调整读取链接的提示元素结构

This commit is contained in:
枫谷剑仙 2023-01-12 18:59:26 +08:00
parent ee31326c24
commit db047c84d4
16 changed files with 194 additions and 110 deletions

View File

@ -574,7 +574,7 @@ label[for="box-have"]::after
content: "Generate QR code:";
}
.formation-from-string::before
.formation-link-from-string>a::before
{
content: "A formation link read from string";
}

View File

@ -537,7 +537,7 @@ label[for="box-have"]::after
content: "QRコードを生成します:";
}
.formation-from-string::before
.formation-link-from-string>a::before
{
content: "文字列から読み取られた列リンク";
}

View File

@ -3,7 +3,22 @@
addition_display: "追加の表示",
title_blank: "入力タイトル",
detail_blank: "入力詳細",
force_reload_data: "データの強制更新",
request_input: tp`${'info'}を入力してください`,
link_read_message: {
success: tp`発見 ${'type'} 形式.`,
type: {
1: "PADDF",
2: "PDC",
3: "PADDB",
},
error: {
1: "サポートされていない形式。" ,
2: "チームデータがありません" ,
3: "間違った JSON 形式です。" ,
4: "間違った URL 形式です。 ",
}
},
sort_name:{
sort_none: "いいえ",
sort_id: "カード ID",
@ -24,7 +39,6 @@
sort_rcvMax120_awoken: "最大回復 (+覚醒)",
sort_abilityIndex_awoken: "最大加重能力指数 (+覚醒)",
},
force_reload_data: "データの強制更新",
}
deepMerge(localTranslating, _localTranslating);
localisation(localTranslating);

View File

@ -518,7 +518,7 @@ label[for="have-8-latent-slot"]::after
content: "QR 코드 생성:";
}
.formation-from-string::before
.formation-link-from-string>a::before
{
content: "문자열에서 읽은 팀 링크입니다";
}

View File

@ -3,7 +3,22 @@
addition_display: "추가 표시입니다",
title_blank: "입력 제목",
detail_blank: "입력 내용",
force_reload_data: "데이터 강제 새로 고침",
request_input: tp`${'info'}를 입력하십시오`,
link_read_message: {
success: tp`검색 ${'type'} 형식입니다. `,
type: {
1: "PADDF",
2: "PDC",
3: "PADDB",
},
error: {
1: "지원되지 않는 형식입니다." ,
2: "팀 데이터가 없습니다." ,
3: "잘못된 JSON 형식입니다." ,
4: "잘못된 URL 형식입니다." ,
}
},
sort_name:{
sort_none: "없음",
sort_id: "카드 ID",
@ -24,7 +39,6 @@
sort_rcvMax120_awoken: "최대 회복 (+각성)",
sort_abilityIndex_awoken: "최대 가중 능력 지수 (+각성)",
},
force_reload_data: "데이터 강제 새로 고침",
}
deepMerge(localTranslating, _localTranslating);
localisation(localTranslating);

View File

@ -528,7 +528,13 @@ label[for="box-have"]::after
content: "生成二維碼:";
}
.formation-from-string::before
.read-qr-box .result-code::before {
content: "代碼 ";
}
.read-qr-box .result-code.error::before {
content: "錯誤 ";
}
.formation-link-from-string>a::before
{
content: "從字串中讀取的隊伍連結";
}

View File

@ -2,7 +2,21 @@
webpage_title: `龍族拼圖${teamsCount}人隊伍圖製作`,
title_blank: "輸入隊伍標題",
detail_blank: "輸入説明",
force_reload_data: "強制刷新數據",
request_input: tp`請輸入${'info'}`,
link_read_message: {
success: tp`發現 ${'type'} 格式。`,
type: {
"1": "智龍急速陣型",
"2": "PDC",
"3": "PADDB",
},
error: {
1: "No formation data.",
2: "The illegal JSON format.",
3: "The illegal URL format.",
}
},
sort_name:{
sort_none: "無",
sort_id: "怪物ID",
@ -23,7 +37,6 @@
sort_rcvMax120_awoken: "最大回復(+覺醒)",
sort_abilityIndex_awoken: "最大加權能力指數(+覺醒)",
},
force_reload_data: "強制刷新數據",
skill_parse: {
skill: {
error: tp`😫技能解析發生錯誤,請將角色 ID 反饋給開發者。`,

View File

@ -526,7 +526,13 @@ label[for="box-have"]::after
content: "生成二维码:";
}
.formation-from-string::before
.read-qr-box .result-code::before {
content: "代码 ";
}
.read-qr-box .result-code.error::before {
content: "错误 ";
}
.formation-link-from-string>a::before
{
content: "从字符串中读取的队伍链接";
}

View File

@ -2,7 +2,22 @@
webpage_title: `智龙迷城${teamsCount}人队伍图制作`,
title_blank: "输入队伍标题",
detail_blank: "输入说明",
force_reload_data: "强制刷新数据",
request_input: tp`请输入${'info'}`,
link_read_message: {
success: tp`发现 ${'type'} 格式。`,
type: {
"1": "智龙急速阵型",
"2": "PDC",
"3": "PADDB",
},
error: {
1: "不支持的格式。",
2: "无队伍数据。",
3: "错误的 JSON 格式。",
4: "错误的 网址 格式。",
}
},
sort_name:{
sort_none: "无",
sort_id: "怪物ID",
@ -23,7 +38,6 @@
sort_rcvMax120_awoken: "最大回复(+觉醒)",
sort_abilityIndex_awoken: "最大加权能力指数(+觉醒)",
},
force_reload_data: "强制刷新数据",
skill_parse: {
skill: {
error: tp`😫技能解析发生错误,请将角色 ID 反馈给开发者。`,

View File

@ -1336,7 +1336,10 @@ var formation = new Formation(teamsCount,5);
<button class="read-qr-file brown-button"><!--读文件--></button>
<input type="file" accept="image/*" class="file-select display-none">
</div>
<div class="info"></div>
<div class="info">
<span class="result-code"></span><span class="result-message"></span>
<div class="formation-link-from-string"><a></a></div>
</div>
<div class="video-box display-none">
<div><label for="sourceSelect"><!--视频源选择--></label><select id="sourceSelect"></select></div>
<video id="video" width="500" height="500"></video>

View File

@ -17,7 +17,22 @@ let localTranslating = {
addition_display: "💬",
title_blank: "Input Formation Title",
detail_blank: "Input Detail",
force_reload_data: `Force refresh data`,
request_input: tp`Please Input ${'info'}`,
link_read_message: {
success: tp`Find the ${'type'} format.`,
type: {
1: "PADDF",
2: "PDC",
3: "PADDB",
},
error: {
1: "Unsupported format.",
2: "No formation data.",
3: "The illegal JSON format.",
4: "The illegal URL format.",
}
},
sort_name:{
sort_none: "Nope",
sort_id: "Cards Id",
@ -37,7 +52,6 @@ let localTranslating = {
sort_rcvMax120_awoken: "Max RCV (+Awoken)",
sort_abilityIndex_awoken: "Maximum Weighted Ability Index (+Awakening)",
},
force_reload_data: `Force refresh data`,
skill_parse: {
skill: {
error: tp`😫An error occurred in skill parsing, please feedback the Card ID to the developer.`,

144
script.js
View File

@ -1462,30 +1462,32 @@ function ObjToUrl(obj)
//解析从QR图里获取的字符串
function inputFromQrString(string)
{
const re = {code: 0, message: null};
console.log(string);
const re = {type: 0, error: 0};
//code 1~99 为各种编码
if (string[0] === "{" && string[string.length-1] === "}")
{
{ //生成的二维码
console.log(string);
try{
let jo = JSON.parse(string);
if (jo.d && typeof jo.d == "object")
{
re.code = 1;
re.message = "发现队伍数据 | Formation data founded";
re.type = 1;
//re.message = "发现队伍数据 | Formation data founded";
re.url = ObjToUrl(jo);
}else
{
re.code = 100;
re.message = "无队伍数据 | No formation data";
re.error = 2;
//re.message = "无队伍数据 | No formation data";
}
}catch(e)
{
re.code = 111;
re.message = "错误的 JSON 格式 | The illegal JSON format";
re.error = 3;
//re.message = "错误的 JSON 格式 | The illegal JSON format";
}
}
else if (/^(https?|file):\/\//i.test(string))
{
{ //网址二维码
let url = new URL(string);
if (url.searchParams.get('d'))
{
@ -1494,32 +1496,34 @@ function inputFromQrString(string)
d: JSON.parse(url.searchParams.get('d')),
s: url.searchParams.get('s'),
}
re.code = 1;
re.message = "发现队伍数据 | Formation data founded";
re.type = 1;
//re.message = "发现队伍数据 | Formation data founded";
re.url = ObjToUrl(jo);
}catch(e)
{
re.code = 112;
re.message = "错误的 网址 格式 | The illegal URL format";
} catch(e) {
re.error = 4;
//re.message = "错误的 网址 格式 | The illegal URL format";
}
}
else
{
re.code = 100;
re.message = "无队伍数据 | No formation data";
else if(/^https?:\/\/paddb\.net\/team\/[a-f0-9]+/i.test(string)) {
re.type = 3;
//re.message = "发现 PADDB 网址 | PADDB URL found";
}
else {
re.error = 2;
//re.message = "无队伍数据 | No formation data";
}
}
else if(/^\d[\d\-\w,\]}]+}/.test(string))
{ //PDC
re.code = 2;
re.message = "发现 PDC 格式 | PDC format found";
re.type = 2;
//re.message = "发现 PDC 格式 | PDC format found";
const newFotmation = pdcFotmationToPdfFotmation(string);
re.url = ObjToUrl(newFotmation.getPdfQrObj(false));
}
else
{
re.code = 110;
re.message = "不支持的格式 | Unsupported format";
re.error = 1;
//re.message = "不支持的格式 | Unsupported format";
}
return re;
}
@ -1760,13 +1764,13 @@ function initialize() {
qrCodeFrame.show();
};
qrCodeFrame.initialize = function(){
const saveBox = this.content.saveBox;
const readBox = this.content.readBox;
readBox.info.textContent = "";
const qrSaveBox = this.content.saveBox;
const qrReadBox = this.content.readBox;
qrReadBox.info.show('');
readBox.videoBox.classList.add(className_displayNone);
qrReadBox.videoBox.classList.add(className_displayNone);
let qrTypeRadio = saveBox.qrDataType.find(radio=>radio.checked);
let qrTypeRadio = qrSaveBox.qrDataType.find(radio=>radio.checked);
if (qrTypeRadio) qrTypeRadio.onclick(); //打开二维码窗口就先产生二维码
};
qrCodeFrame.hide = function(){qrcodeReader.reset();};
@ -1779,25 +1783,39 @@ function initialize() {
qrReadBox.readQrFile = qrReadBox.querySelector(".read-qr-file");
qrReadBox.filePicker = qrReadBox.querySelector(".file-select");
qrReadBox.info = qrReadBox.querySelector(".info");
qrReadBox.info.code = qrReadBox.info.querySelector(".result-code");
qrReadBox.info.message = qrReadBox.info.querySelector(".result-message");
qrReadBox.info.newLink = qrReadBox.info.querySelector(".formation-link-from-string>a");
qrReadBox.video = qrReadBox.querySelector("#video");
qrReadBox.videoBox = qrReadBox.querySelector(".video-box");
qrReadBox.sourceSelect = qrReadBox.querySelector("#sourceSelect");
qrReadBox.qrStr = qrReadBox.querySelector(".string-input");
qrReadBox.info.show = function(message, code = 0, error = false, url="") {
qrReadBox.info.message.innerHTML = '';
qrReadBox.info.message.append(message);
qrReadBox.info.code.textContent = code;
qrReadBox.info.code.classList.toggle(className_displayNone, code===0);
qrReadBox.info.code.classList.toggle("error", error);
qrReadBox.info.newLink.classList.toggle(className_displayNone, url.length===0);
qrReadBox.info.newLink.href = url;
}
qrReadBox.readString.onclick = function()
{
let inputResult = inputFromQrString(qrReadBox.qrStr.value);
if (inputResult.code < 100)
{
qrReadBox.info.textContent = 'Code ' + inputResult.code + ':' + inputResult.message;
const newLink = document.createElement("a");
newLink.className = "formation-from-string";
newLink.href = inputResult.url;
newLink.target = "_blank";
qrReadBox.info.appendChild(newLink);
}else
{
qrReadBox.info.textContent = 'Code ' + inputResult.code + ':' + inputResult.message;
let lrm = localTranslating.link_read_message;
let message;
if (inputResult.type) {
message = lrm.success({type: lrm.type[inputResult.type]});
} else {
message = lrm.error[inputResult.error];
}
qrReadBox.info.show(
message,
inputResult.type || inputResult.error,
Boolean(inputResult.error),
inputResult.url
)
}
qrSaveBox.qrImage = qrSaveBox.querySelector(".qr-code-image");
@ -1890,49 +1908,15 @@ function initialize() {
console.error(err);
if (err) {
if (err instanceof ZXing.NotFoundException) {
qrReadBox.info.textContent = 'No QR code found.';
// console.debug('Try crop PDC original QR');
// let cropLeft = 0, cropTop = 0, cropWidth = 300, cropHeight = 300, //裁剪尺寸
// scale = 3, //放大倍率
// extraLeft = 100, extraTop = 100, extraRight = 100, extraBottom = 100; //额外增加的宽度
// let cavans = document.createElement("canvas");
// cavans.width = cropWidth * scale + extraLeft + extraRight;
// cavans.height = cropHeight * scale + extraTop + extraBottom;
// let ctx = cavans.getContext('2d');
// ctx.fillStyle="white";
// ctx.fillRect(0, 0, cavans.width, cavans.height);
// ctx.drawImage(img, cropLeft, cropTop, cropWidth, cropHeight, extraLeft, extraTop, cropWidth * scale, cropHeight * scale);
// //qrReadBox.appendChild(cavans);
// qrcodeReader.decodeFromImageUrl(cavans.toDataURL()).then((result2) => {
// console.debug('Found QR code!', result2);
// qrReadBox.qrStr.value = result2.text;
// qrReadBox.readString.onclick();
// }).catch((err2) => {
// console.error(err2);
// if (err2) {
// if (err2 instanceof ZXing.NotFoundException) {
// qrReadBox.info.textContent = 'No QR code found.';
// }
// if (err2 instanceof ZXing.ChecksumException) {
// qrReadBox.info.textContent = 'A code was found, but it\'s read value was not valid.';
// }
// if (err2 instanceof ZXing.FormatException) {
// qrReadBox.info.textContent = 'A code was found, but it was in a invalid format.';
// }
// }
// });
qrReadBox.info.show('No QR code found.');
}
if (err instanceof ZXing.ChecksumException) {
qrReadBox.info.textContent = 'A code was found, but it\'s read value was not valid.';
qrReadBox.info.show('A code was found, but it\'s read value was not valid.');
}
if (err instanceof ZXing.FormatException) {
qrReadBox.info.textContent = 'A code was found, but it was in a invalid format.';
qrReadBox.info.show('A code was found, but it was in a invalid format.');
}
}
});
@ -1964,15 +1948,15 @@ function initialize() {
if (err) {
if (err instanceof ZXing.NotFoundException) {
console.debug('No QR code found.')
console.debug('No QR code found.')
}
if (err instanceof ZXing.ChecksumException) {
console.debug('A code was found, but it\'s read value was not valid.')
console.debug('A code was found, but it\'s read value was not valid.')
}
if (err instanceof ZXing.FormatException) {
console.debug('A code was found, but it was in a invalid format.')
console.debug('A code was found, but it was in a invalid format.')
}
}
});
@ -2011,7 +1995,7 @@ function initialize() {
{
qrcodeReader.reset();
qrReadBox.videoBox.classList.add(className_displayNone);
qrReadBox.info.textContent = "";
qrReadBox.info.show('');
}else
{

View File

@ -8051,7 +8051,7 @@ const cachesMap = new Map([
],
[
"multi.html",
"7a8c2f2cdd08036c0b18d0fd82ca5213"
"2a9044e1ed123093a4b70d0b07164662"
],
[
"script-custom_elements.js",
@ -8059,7 +8059,7 @@ const cachesMap = new Map([
],
[
"script-json_data.js",
"cbc8a5c4829cb92fb5d1d58acafb2de5"
"258b3e94b42b220da59305f70dd8920d"
],
[
"script-skill-parser.js",
@ -8071,11 +8071,11 @@ const cachesMap = new Map([
],
[
"script.js",
"78a0521d1e288053f00e4551adb05ec7"
"7e691cad4b7b2a710e4130a44e8749a6"
],
[
"solo.html",
"9a82c31d52533ebc37f1a04e5753fb63"
"9525defd39f2d93ab421200bb38638ac"
],
[
"style-monsterimages.css",
@ -8083,7 +8083,7 @@ const cachesMap = new Map([
],
[
"style.css",
"f10faaee49b6b30d3869e648111d5823"
"f11cfc4fb3d9757ca12f73845048e61a"
],
[
"temp.js",
@ -8091,11 +8091,11 @@ const cachesMap = new Map([
],
[
"triple.html",
"a5deb7b8a7a1c2a9e077e079fb18271c"
"fe7bb80b2f946a477a12b446ab265c5a"
],
[
"languages/en.css",
"dcb34cceaac4619cba3cf18223b2e107"
"a81b75df76c97c6d07e279c9471d7f42"
],
[
"languages/en.js",
@ -8103,19 +8103,19 @@ const cachesMap = new Map([
],
[
"languages/ja.css",
"d8906770c2dae573aca31c74db035a07"
"c37d6381c0d2a7b26bfe8ab695c4a7bc"
],
[
"languages/ja.js",
"17f837f31da46113606f8acb7d863dba"
"763894608375030a3596927f9cae6753"
],
[
"languages/ko.css",
"056bbecb3193dab6d55f0e99fcfdc7af"
"3155f19e216d42d3ac114e126392cfd8"
],
[
"languages/ko.js",
"9c016e79d84c2c008d6e5a4b2a16d885"
"1256cbdc3d696a57f60e2586142d6dac"
],
[
"languages/language-list.js",
@ -8131,19 +8131,19 @@ const cachesMap = new Map([
],
[
"languages/zh-TW.css",
"a643b0b9d040a9553240b0b9c72c1f68"
"0d7584c238d91463daace4d0c0c4aa57"
],
[
"languages/zh-TW.js",
"b97067d6ff6412a2ace98f8aa425dc08"
"50c0fc87d11998c3df71e9abc5bbc1da"
],
[
"languages/zh.css",
"e5c3d7d1c2bc7268a88566ec4fa663d9"
"509b89a6de160b5bcdab42d66eac5021"
],
[
"languages/zh.js",
"c7d9f3adbcaf1d71bb8326ea2b33f0af"
"7ca07cb61affa6dd16fa92e226315e17"
],
[
"images/attrs.png",

View File

@ -1178,7 +1178,10 @@ var formation = new Formation(teamsCount,6);
<button class="read-qr-file brown-button"><!--读文件--></button>
<input type="file" accept="image/*" class="file-select display-none">
</div>
<div class="info"></div>
<div class="info">
<span class="result-code"></span><span class="result-message"></span>
<div class="formation-link-from-string"><a></a></div>
</div>
<div class="video-box display-none">
<div><label for="sourceSelect"><!--视频源选择--></label><select id="sourceSelect"></select></div>
<video id="video" width="500" height="500"></video>

View File

@ -3356,11 +3356,21 @@ table .orb-icon
font-size: 20px;
padding: 5px;
}
.formation-from-string
.formation-link-from-string
{
font-size: 1.5em;
display: block;
}
.read-qr-box .result-code::before {
content: "Code ";
}
.read-qr-box .result-code.error::before {
content: "Error ";
color: red;
}
.read-qr-box .result-code::after {
content: ":";
}
.qr-code-image
{
background-color: white;

View File

@ -2238,7 +2238,10 @@ var formation = new Formation(teamsCount,6);
<button class="read-qr-file brown-button"><!--读文件--></button>
<input type="file" accept="image/*" class="file-select display-none">
</div>
<div class="info"></div>
<div class="info">
<span class="result-code"></span><span class="result-message"></span>
<div class="formation-link-from-string"><a></a></div>
</div>
<div class="video-box display-none">
<div><label for="sourceSelect"><!--视频源选择--></label><select id="sourceSelect"></select></div>
<video id="video" width="500" height="500"></video>