diff --git a/404.html b/404.html new file mode 100644 index 000000000..8cef781d9 --- /dev/null +++ b/404.html @@ -0,0 +1,33 @@ + + + + + + + 404 Not Found + + + mikuunhappy.jpg +

这是一個不存在的页面

+

对不起，您所访问的页面不存在或者已删除。

+

预计将在约10秒后返回首页。

+

当然，你可以点这里直接返回首页。

+ + + diff --git a/QuestListPage.html b/QuestListPage.html new file mode 100644 index 000000000..b997e469a --- /dev/null +++ b/QuestListPage.html @@ -0,0 +1,21 @@ + + + + + + Document + + + + + + +
+ + + +
+
+
+ + diff --git a/css/index.css b/css/index.css new file mode 100644 index 000000000..5760f3b42 --- /dev/null +++ b/css/index.css @@ -0,0 +1,317 @@ +@font-face { + font-family: "MyFont"; + src: url("../fonts/WenQuanYiBitmapSong16px-Medium.woff2") format("truetype"); +} + +button { + font-family: "MyFont"; +} + +body { + margin: 0; + padding: 0; + overflow: hidden; + width: 100vw; + height: 100vh; + position: absolute; + font-family: "MyFont", sans-serif; +} + +#sidebar { + width: 280px; /* 锁定宽度，方便做平移 */ + height: 100vh; /* 使 sidebar 高度占满整个视口 */ + display: flex; + flex-direction: column; + align-items: center; /* 水平居中 */ + overflow-y: scroll; /* 允许垂直滚动 */ + scrollbar-width: none; /* 对 Firefox 隐藏滚动条 */ + row-gap: 2px; + left: 0px; + position: absolute; +} + +#sidebar::-webkit-scrollbar { + display: none; /* 对 Webkit 浏览器隐藏滚动条 */ +} + +#mainTitle { + width: 100%; + position: sticky; + top: 0px; + background-color: white; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + z-index: 10; + height: 280px; +} + +#logoImg { + margin: auto; + position: absolute; + top: 0px; +} + +#inputDiv { + position: absolute; + width: 277px; + height: 42px; + top: 200px; + border: 1px solid #000; /* 外描边 */ +} + +#search { + width: 230px; + position: absolute; + left: 0px; + height: 40px; + line-height: 40px; + box-sizing: border-box; + font-size: 20px; + border: none; +} +#search:focus { + outline: none; +} + +#btnCloseSp { + position: absolute; + left: 240px; + width: 40px; + height: 40px; + color: #5b2312; + display: none; + opacity: 0; +} + +#versionSelect { + width: 100%; + margin-bottom: 0; + height: 40px !important; + box-sizing: border-box; + position: absolute; + top: 240px; +} + +#questLineList { + width: 100%; + position: absolute; + top: 280px; + background-color: #692612; + overflow-y: scroll; /* 允许垂直滚动 */ + scrollbar-width: none; /* 对 Firefox 隐藏滚动条 */ + row-gap: 2px; + left: 0px; +} + +#questLineList::-webkit-scrollbar { + display: none; /* 对 Webkit 浏览器隐藏滚动条 */ +} + +#toggleSidebar { + position: absolute; + bottom: 5px; + left: 5px; + width: 40px; + height: 40px; + z-index: 4; + color: rgb(0, 0, 0); + opacity: 0.7; +} + +#toggleSidebar:hover { + opacity: 1; +} + +#mainPage { + position: absolute; + left: 280px; + top: 0px; + width: calc(100% - 280px); + height: 100vh; +} +#mainIframe { + width: 100%; + height: 100%; + border: none; +} + +.questButton { + width: 100%; + height: 60px; + position: static; + display: flex; + align-items: center; + color: #ffffff; +} + +.selected { + background-color: #433f39; +} + +.unselected { + background-color: #b89267; +} + +.questIcon { + width: 50px; + height: 50px; + position: relative; + left: 0; +} + +.questText { + font-size: 20px; + position: relative; + left: 10px; + text-align: left; + white-space: nowrap; + overflow: hidden; + max-width: 190px; + text-overflow: ellipsis; +} + +#this_chart { + width: 100vw; + height: 100vh; +} + +#tips { + z-index: 50; + font-size: 30px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + width: 200px; + color: rgb(0, 0, 0); + position: absolute; + right: 0px; + bottom: -70px; + border: 5px solid #692612; + border-radius: 10px; + background-color: #fbf3e0; +} + +#searchPopup { + display: none; + background-color: #f5f0d3; + height: 100%; + width: 100%; + position: absolute; + top: 0; + left: 0; +} + +#questTitle { + position: absolute; + top: 5px; + left: 5px; + font-size: 32px; + padding: 4px 4px; +} + +#questSearchList { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + overflow-y: scroll; + scrollbar-width: none; + + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 自动填充列 */ + grid-gap: 10px; /* 网格间距 */ + overflow-x: hidden; +} + +#questSearchList::-webkit-scrollbar { + display: none; /* 对 Webkit 浏览器隐藏滚动条 */ +} + +.searchItem { + width: 300px; + height: 80px; + border: 5px solid #692612; + border-radius: 10px; + background-color: #fbf3e0; + position: relative; + cursor: pointer; + scale: 0.95; +} + +.searchItem:hover { + transform: scale(1.05); +} + +.searchImg { + width: 70px; + height: 70px; + left: 5px; + top: 5px; + position: absolute; +} + +.searchTitle { + position: absolute; + top: 5px; + left: 80px; + font-size: 24px; + width: 220px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.searchDesc { + position: absolute; + top: 35px; + left: 80px; + font-size: 20px; + width: 220px; + height: 40px; + word-wrap: break-word; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + line-clamp: 2; +} + +#changeLang { + position: absolute; + top: 5px; + right: 5px; + width: 30px; + height: 30px; + cursor: pointer; +} + +#btnShowMsg { + position: absolute; + width: 40px; + height: 40px; + bottom: 5px; + right: 5px; + cursor: pointer; +} + +#loadingMask { + width: 100%; + height: 100%; + background-color: #000000cc; + z-index: 99; + position: absolute; + display: flex; + justify-content: center; + align-items: center; + position: fixed; +} + +.githubLink { + text-decoration: none; + color: inherit; +} diff --git a/css/quest_page.css b/css/quest_page.css new file mode 100644 index 000000000..77c7ced5f --- /dev/null +++ b/css/quest_page.css @@ -0,0 +1,144 @@ +#overlay { + display: none; + justify-content: center; + align-items: center; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 11; +} + +#popup { + flex-direction: column; + display: flex; + transform: scale(0.85); + transform-origin: center center; + padding: 20px; + border: 5px solid #692612; + border-radius: 10px; + background-color: #fbf3e0; + width: 80vw; + height: 80vh; +} + +#leftAndRight { + flex-direction: row; + display: flex; + max-height: 70vh; + height: 100%; +} + +#popupLeft { + /* background-color: red; */ + width: 50%; + padding: 20px; +} + +#popupRight { + /* background: green; */ + width: 50%; + padding: 20px; +} + +.v-line { + border-left: 2px solid gray; + top: 50%; + height: 100%; + margin: 0 1%; +} + +#buttonsBox { + position: absolute; + bottom: 0px; + height: 80px; + left: 40px; +} + +#quest_id { + display: none; + font-size: 26px; +} + +#copyBtn, +#copyIdBtn { + cursor: pointer; + float: left; + text-align: center; + font-size: 24px; + transition: transform 0.1s ease-in-out; + border: 2px solid #692612; + border-radius: 2px; + background-color: #dbd2bb; + margin: 0 5px 0 0; +} + +#copyIdBtn:active, +#copyBtn:active { + transform: scale(1.05); +} + +#screenShot { + position: absolute; + bottom: 10px; + right: 10px; + width: 50px; + height: 50px; + display: none; +} + +#btnClosePop { + width: 40px; + height: 40px; + color: #5b2312; + position: absolute; + top: 5px; + right: 5px; +} + +#popTitle { + text-align: center; + margin: -13px; + font-size: 18px; + position: relative; +} + +div #descBox { + border: 1px solid #692612; + border-width: 3px; + border-radius: 10px; + height: 95%; + overflow-y: auto; + padding-left: 2%; + padding-right: 2%; + margin-bottom: 10px; +} + +div #rewardsBox { + border: 1px solid #692612; + border-width: 3px; + border-radius: 10px; + height: 47.5%; + overflow-y: auto; + margin-bottom: 10px; +} + +#popDesc { + font-size: 22px; + line-height: 30px; + color: rgb(0, 0, 0); + font-weight: normal; + text-decoration: none; + font-style: normal; +} + +#popDesc a { + word-wrap: break-word; +} + +#quest_logo { + margin: 15%; + width: 70%; +} diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 000000000..e57d7df5f Binary files /dev/null and b/favicon.ico differ diff --git a/fonts/WenQuanYiBitmapSong16px-Medium.woff2 b/fonts/WenQuanYiBitmapSong16px-Medium.woff2 new file mode 100644 index 000000000..c52ca3d8c Binary files /dev/null and b/fonts/WenQuanYiBitmapSong16px-Medium.woff2 differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..3a20d25ea --- /dev/null +++ b/index.html @@ -0,0 +1,93 @@ + + + + + + 更好的在线任务书 + + + + + + + + + + + +
+ +
+ + + +
+ +
+ +
+ + + + + + + +
+ + + + + + + + + + +
+ + diff --git a/js/Define.js b/js/Define.js new file mode 100644 index 000000000..d1f59313f --- /dev/null +++ b/js/Define.js @@ -0,0 +1,27 @@ +export var msgAction; +(function (msgAction) { + msgAction["init"] = "init"; + msgAction["ready"] = "ready"; + msgAction["showPopup"] = "showPopup"; + msgAction["resetChart"] = "resetChart"; + msgAction["closeSearchPopup"] = "closeSearchPopup"; + msgAction["showSearchPopup"] = "showSearchPopup"; +})(msgAction || (msgAction = {})); +export var localEnum; +(function (localEnum) { + // /**上次打开的任务页面 */ + // mainIframeUrl = "mainIframeUrl", + /**上次选中的任务下标 */ + localEnum["selectBtnIndex"] = "selectBtnIndex"; + // /**所有的任务数据 */ + // questData = "questData", + // /**任务数据版本 */ + // questDataVersion = "questDataVersion", + /**用户选中的语言 */ + localEnum["language"] = "language"; +})(localEnum || (localEnum = {})); +export var lang; +(function (lang) { + lang["zh"] = "zh"; + lang["en"] = "en"; +})(lang || (lang = {})); diff --git a/js/EeggMgr.js b/js/EeggMgr.js new file mode 100644 index 000000000..8943a4d4f --- /dev/null +++ b/js/EeggMgr.js @@ -0,0 +1,44 @@ +import { Utils } from "./Utils.js"; +export class EeggMgr { + static showEegg() { + if (Math.random() < this.rate) { + if (this.txtIndex == -1) { + Utils.shuffle(this.eeggs.txt); + this.txtIndex = 0; + } + if (this.imgIndex == -1) { + Utils.shuffle(this.eeggs.img); + this.imgIndex = 0; + } + //显示 + if (Math.random() < 0.5) { + console.log(this.eeggs.txt[this.txtIndex]); + this.txtIndex++; + if (this.txtIndex >= this.eeggs.txt.length) { + this.txtIndex = 0; + } + } + else { + console.log(this.eeggs.img[this.imgIndex]); + this.imgIndex++; + if (this.imgIndex >= this.eeggs.img.length) { + this.imgIndex = 0; + } + } + } + } +} +EeggMgr.txtIndex = -1; +EeggMgr.imgIndex = -1; +//一些语录 +//以及一些梗图 +EeggMgr.eeggs = { + txt: [ + "GTNH like a job", + ], + img: [ + "static/eeggs/1.png", + ] +}; +//概率 +EeggMgr.rate = 0.005; diff --git a/js/MainPage.js b/js/MainPage.js new file mode 100644 index 000000000..c75e1efc8 --- /dev/null +++ b/js/MainPage.js @@ -0,0 +1,337 @@ +import { lang, localEnum, msgAction, } from "./Define.js"; +import { EeggMgr } from "./EeggMgr.js"; +import { PopMgr } from "./PopMgr.js"; +import { ProjectConfig } from "./ProjectConfig.js"; +import { ProjectData } from "./ProjectData.js"; +import { TipsMgr } from "./TipsMgr.js"; +import { Utils } from "./Utils.js"; +export class MainPage { + constructor() { + this.questLine = []; + this.buttonList = []; + /**是否展示侧边栏 */ + this.showSidebar = false; + /**所有任务的数据 */ + this.questAllData = {}; + /**标题对应任务数据 */ + this.titleToQuest = {}; + /**任务ID对应任务数据 */ + this.questIdToQuest = {}; + //事件 + this.onGetMessageFromIframe = (event) => { + let data = event.data; + switch (data.action) { + case msgAction.ready: + // this.initMainIframe(); + break; + case msgAction.showPopup: + // 展示任务详情 + let quest = this.questIdToQuest[ProjectData.language][data.data]; + if (quest) { + PopMgr.showPopup(quest); + } + else { + console.warn("任务ID没有对应数据！" + data.data); + } + break; + default: + console.warn("未知的消息", data); + break; + } + }; + this.onKeyDown = (event) => { + if (event.key == "r") { + let data = { action: msgAction.resetChart, data: null }; + this.sendMessageToIframe(data); + } + }; + this.onClickLogo = () => { + EeggMgr.showEegg(); + }; + this.onRightClickLogo = (evt) => { + evt.preventDefault(); //拦截邮件点击 + evt.stopPropagation(); //拦截事件冒泡 + console.warn("右键点击"); + }; + this.toggleSidebar = () => { + this.onClosePop(); + if (!this.showSidebar) { + $("#sidebar").animate({ left: "-280px" }, 500); + $("#mainPage").animate({ + left: "0px", + width: "100%", + }, 500); + this.showSidebar = true; + } + else { + $("#sidebar").animate({ left: "0px" }, 500); + let width = $(window).width() - 280; + $("#mainPage").animate({ + left: "280px", + width: width + "px", + }, 500); + this.showSidebar = false; + } + }; + this.onSearchFocus = () => { + // this.sendMessageToIframe({ action: msgAction.showSearchPopup, data: null }); + }; + this.onSeachInput = () => { + let value = $("#search").val(); + if (value) { + if ($("#btnCloseSp").css("display") == "none") { + $("#btnCloseSp").show(); + $("#btnCloseSp").animate({ opacity: 1 }, 500); + } + let questList = []; + for (let key in this.titleToQuest[ProjectData.language]) { + if (key + .toLocaleUpperCase() + .indexOf(value.toString().toLocaleUpperCase()) != -1) { + let tempQuest = this.titleToQuest[ProjectData.language][key]; + if (tempQuest.title != undefined) { + questList.push(tempQuest); + } + } + } + this.sendMessageToIframe({ + action: msgAction.showSearchPopup, + data: questList, + }); + } + else { + this.onClosePop(); + } + }; + this.onClosePop = () => { + $("#search").val(""); + $("#btnCloseSp").hide(); + $("#btnCloseSp").css("opacity", 0); + this.sendMessageToIframe({ + action: msgAction.closeSearchPopup, + data: null, + }); + }; + this.onSearchBlur = () => { }; + this.onChangeLang = () => { + TipsMgr.showLoading(); + if (ProjectData.language == lang.zh) { + ProjectData.language = lang.en; + } + else { + ProjectData.language = lang.zh; + } + localStorage.setItem(localEnum.language, ProjectData.language); + this.initTitle(); + this.onClosePop(); + this.loadQuestData(); + }; + $(() => { + TipsMgr.showLoading(); + const iframe = $("#mainIframe"); + iframe.on("load", () => { + //iframe加载完成 + this.initLang(); + this.initPage(); + this.addEvent(); + this.loadQuestLine(); + this.showProjectMsg(); + }); + }); + } + showProjectMsg() { + setTimeout(() => { + console.clear(); + console.log(`%c${ProjectConfig.projectName_zh}\n\n%c${ProjectConfig.projectDsc_zh}\n\n%c作者: ${ProjectConfig.projectAuthor}\n\n%c项目地址: ${ProjectConfig.projectUrl}`, "color:#252525; font-size: 30px;", "color:#e12885; font-size: 18px;", "color:#137a7f; font-size: 20px;", "color:#525658; font-size: 16px;"); + }, 300); + } + initPage() { + for (let i = 0; i < ProjectConfig.versionList.length; i++) { + let option = $("