From 06af0fd63a5a2da4da85f01d589fc66934c0c2ca Mon Sep 17 00:00:00 2001 From: Mahiru Date: Mon, 19 Jan 2026 21:18:31 +0800 Subject: [PATCH] add all components to template --- .../game/template/UI/Backlog/backlog.scss | 220 ++++++++++++++ .../bottomControlPanel.scss | 128 ++++++++ .../bottomControlPanelFilm.scss | 54 ++++ .../game/template/UI/DevPanel/devPanel.scss | 22 ++ .../public/game/template/UI/Extra/extra.scss | 279 ++++++++++++++++++ .../UI/GlobalDialog/globalDialog.scss | 85 ++++++ .../public/game/template/UI/Logo/logo.scss | 63 ++++ .../public/game/template/UI/Menu/about.scss | 46 +++ .../public/game/template/UI/Menu/menu.scss | 24 ++ .../game/template/UI/Menu/menuPanel.scss | 51 ++++ .../game/template/UI/Menu/normalButton.scss | 23 ++ .../game/template/UI/Menu/normalOption.scss | 64 ++++ .../public/game/template/UI/Menu/options.scss | 140 +++++++++ .../game/template/UI/Menu/saveAndLoad.scss | 267 +++++++++++++++++ .../public/game/template/UI/Menu/slider.scss | 106 +++++++ .../game/template/UI/Menu/textPreview.scss | 12 + .../UI/PanicOverlay/panicOverlay.scss | 9 + .../coreInitialFunction/templateLoader.ts | 17 ++ packages/webgal/src/UI/Backlog/Backlog.tsx | 38 ++- .../BottomControlPanel/BottomControlPanel.tsx | 170 +++++++---- .../BottomControlPanelFilm.tsx | 38 +-- packages/webgal/src/UI/DevPanel/DevPanel.tsx | 6 +- packages/webgal/src/UI/Extra/Extra.tsx | 12 +- packages/webgal/src/UI/Extra/ExtraBgm.tsx | 26 +- packages/webgal/src/UI/Extra/ExtraCg.tsx | 14 +- .../webgal/src/UI/Extra/ExtraCgElement.tsx | 8 +- .../src/UI/GlobalDialog/GlobalDialog.tsx | 55 +++- packages/webgal/src/UI/Logo/Logo.tsx | 10 +- packages/webgal/src/UI/Menu/Menu.tsx | 6 +- .../src/UI/Menu/MenuPanel/MenuPanel.tsx | 19 +- .../src/UI/Menu/MenuPanel/MenuPanelButton.tsx | 6 +- .../src/UI/Menu/Options/Display/Display.tsx | 4 +- .../src/UI/Menu/Options/NormalButton.tsx | 6 +- .../src/UI/Menu/Options/NormalOption.tsx | 8 +- .../src/UI/Menu/Options/OptionSlider.tsx | 6 +- .../webgal/src/UI/Menu/Options/Options.tsx | 22 +- .../src/UI/Menu/Options/Sound/Sound.tsx | 4 +- .../src/UI/Menu/Options/System/About.tsx | 26 +- .../src/UI/Menu/Options/System/System.tsx | 6 +- .../Menu/Options/TextPreview/TextPreview.tsx | 6 +- .../src/UI/Menu/SaveAndLoad/Load/Load.tsx | 60 ++-- .../src/UI/Menu/SaveAndLoad/Save/Save.tsx | 53 ++-- .../src/UI/PanicOverlay/PanicOverlay.tsx | 6 +- .../PanicOverlay/PanicYoozle/PanicYoozle.tsx | 10 +- 44 files changed, 2025 insertions(+), 210 deletions(-) create mode 100644 packages/webgal/public/game/template/UI/Backlog/backlog.scss create mode 100644 packages/webgal/public/game/template/UI/BottomControlPanel/bottomControlPanel.scss create mode 100644 packages/webgal/public/game/template/UI/BottomControlPanel/bottomControlPanelFilm.scss create mode 100644 packages/webgal/public/game/template/UI/DevPanel/devPanel.scss create mode 100644 packages/webgal/public/game/template/UI/Extra/extra.scss create mode 100644 packages/webgal/public/game/template/UI/GlobalDialog/globalDialog.scss create mode 100644 packages/webgal/public/game/template/UI/Logo/logo.scss create mode 100644 packages/webgal/public/game/template/UI/Menu/about.scss create mode 100644 packages/webgal/public/game/template/UI/Menu/menu.scss create mode 100644 packages/webgal/public/game/template/UI/Menu/menuPanel.scss create mode 100644 packages/webgal/public/game/template/UI/Menu/normalButton.scss create mode 100644 packages/webgal/public/game/template/UI/Menu/normalOption.scss create mode 100644 packages/webgal/public/game/template/UI/Menu/options.scss create mode 100644 packages/webgal/public/game/template/UI/Menu/saveAndLoad.scss create mode 100644 packages/webgal/public/game/template/UI/Menu/slider.scss create mode 100644 packages/webgal/public/game/template/UI/Menu/textPreview.scss create mode 100644 packages/webgal/public/game/template/UI/PanicOverlay/panicOverlay.scss diff --git a/packages/webgal/public/game/template/UI/Backlog/backlog.scss b/packages/webgal/public/game/template/UI/Backlog/backlog.scss new file mode 100644 index 000000000..7d3f9a6dd --- /dev/null +++ b/packages/webgal/public/game/template/UI/Backlog/backlog.scss @@ -0,0 +1,220 @@ +.Backlog_main { + font-family: "思源宋体", serif; + position: absolute; + top: 0; + width: 100%; + height: 100%; + z-index: 10; + background: rgba(0, 0, 0, 0.7); + padding: 2em 0 2em 0; + animation: backlog_soft_in 0.7s ease-out forwards; + box-sizing: border-box; +} + +.Backlog_main_out { + font-family: "思源宋体", serif; + position: absolute; + top: 0; + width: 100%; + height: 100%; + z-index: 10; + background: rgba(0, 0, 0, 0.7); + padding: 2em 0 2em 0; + animation: backlog_soft_out 0.7s ease-out forwards; + box-sizing: border-box; +} + +// 把z-index置为负数 不然会挡住点击层 +.Backlog_main_out_IndexHide { + z-index: -10; +} + +// 暂时禁用滚动 +.Backlog_main_DisableScroll { + overflow: hidden !important; +} + + +.backlog_top { + padding: 0 0 0 1em; + display: flex; + height: 10%; +} + +.backlog_top_icon { + padding: 0.6em 0.6em 0 0.6em; + border-radius: 1000px; + transform: translate(0, -13px); + cursor: pointer; +} + +.backlog_top_icon:hover { + background: rgba(255, 255, 255, 0.25); + animation: backlog_icon_softin 0.25s ease-out forwards; +} + +@keyframes backlog_icon_softin { + 0% { + background: rgba(255, 255, 255, 0); + } + 100% { + background: rgba(255, 255, 255, 0.25); + } +} + + +.backlog_title { + height: 100%; + line-height: 100%; + font-size: 360%; + font-weight: bold; + color: transparent; + background: linear-gradient(150deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 35%, rgba(165, 212, 228, 1) 100%); + -webkit-background-clip: text; +} + +.backlog_content { + position: absolute; + height: 80%; + padding: 1em 10em 1em 10em; + overflow: auto; + display: flex; + flex-flow: column-reverse; + font-weight: normal; + width: 100%; + box-sizing: border-box; +} + + +.backlog_item { + display: flex; + color: white; + font-size: 165%; + opacity: 0; + animation: backlog_item_in 0.5s ease-out forwards; + margin: 1.25em 0 0 0; + width: 100%; +} + +.backlog_item_out { + display: flex; + color: white; + font-size: 165%; + opacity: 0; + animation: backlog_item_out 0.5s ease-out forwards; + margin: 1.25em 0 0 0; + width: 100%; +} + +.backlog_func_area { + display: flex; + flex-flow: row; + align-items: flex-start; + width: 30%; + max-width: 30%; + min-width: 30%; +} + +.backlog_item_content_name { + font-weight: bold; + color: transparent; + //background: linear-gradient(150deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 55%, rgb(210, 243, 255) 100%); + background: linear-gradient(150deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 35%, rgba(165, 212, 228, 1) 100%); + -webkit-background-clip: text; + //width: 20%; + margin: 0 0 0 auto; + overflow-wrap: break-word; + box-sizing: border-box; + //background: rgba(255, 255, 255, 0.175); + border-radius: 7px; + padding: 0.2em 0.5em 0.2em 0.5em; + font-size: 115%; + width: 50%; + text-align: left; + //font-family: WebgalUI, serif; + letter-spacing: 0.1em; +} + +.backlog_item_content { + //display: flex; + font-size: 115%; + width: 82.5%; + box-sizing: border-box; + padding: 0.2em 0 0 1em; + //font-family: WebgalUI, serif; + letter-spacing: 0.05em; +} + +.backlog_item_button_list { + display: flex; + //padding: 0 2em 0 0.3em; + flex-flow: row; + align-items: flex-start; + margin: 0.35em 0 0 0; +} + +.backlog_item_button_element { + cursor: pointer; + padding: 0.01em 0.75em 0 0.75em; + margin: 0 0 0 0.5em; + background: rgba(255, 255, 255, 0.075); + border-radius: 7px; + display: flex; + //border: 1px solid rgba(255, 255, 255, 0.15); + //box-shadow: 0 0 15px rgba(255, 255, 255, 0.25); +} + +.backlog_item_button_element:hover { + background: rgba(255, 255, 255, 0.25); + //border: 1px solid rgba(255, 255, 255, 0); + //box-shadow: 0 0 15px rgba(255, 255, 255, 0.3); +} + + +.backlog_item_content_text { + //width: 80%; + box-sizing: border-box; +} + + +@keyframes backlog_soft_in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes backlog_soft_out { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +@keyframes backlog_item_in { + 0% { + opacity: 0; + transform: scale(1.05, 1.05) translate(-15px, 10px) rotateX(-5deg) rotateY(-5deg); + //background-color: rgba(255, 255, 255, 0.2); + } + 100% { + opacity: 1; + transform: scale(1, 1) translate(0, 0); + } +} + +@keyframes backlog_item_out { + 0% { + opacity: 1; + transform: scale(1, 1) translate(0, 0); + } + 100% { + opacity: 0; + transform: scale(1.05, 1.05) translate(-15px, 10px) rotateX(-5deg) rotateY(-5deg); + background-color: rgba(255, 255, 255, 0.2); + } +} diff --git a/packages/webgal/public/game/template/UI/BottomControlPanel/bottomControlPanel.scss b/packages/webgal/public/game/template/UI/BottomControlPanel/bottomControlPanel.scss new file mode 100644 index 000000000..c9c63aeba --- /dev/null +++ b/packages/webgal/public/game/template/UI/BottomControlPanel/bottomControlPanel.scss @@ -0,0 +1,128 @@ +//.ToCenter { +// display: flex; +// justify-content: center; +// position: absolute; +// bottom: 0; +// left: 0; +// width: 100%; +// z-index: 9; +//} + +.main { + //border-bottom: 2px solid rgba(255,255,255,0.25); + position: absolute; + bottom: 20px; + //will-change: z-index; + z-index: 9; + display: flex; + //background-image: linear-gradient(rgba(245, 247, 250, 0.7) 0%, rgba(195, 207, 226, 0.7) 100%); + flex-flow: row; + justify-content: center; + align-items: center; + //width: 100%; + height: 70px; + right: 20px; + border-radius: 35px; + //backdrop-filter: blur(5px); + padding: 0.15em 1.75em 0.15em 1.75em; + //background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 100%); + //border-radius: 10px; + font-size: 80%; +} + +.button { + position: relative; + top: 2px; + padding: 0 0 0 0; + filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 1)); +} + +.button_text { + position: relative; + bottom: 8px; + color: white; + text-shadow: 1px 1px 5px rgba(0, 0, 0, 1); + padding-left: 3px; +} + +.button_on { + height: 100%; + display: inline-block; + font-size: 150%; + padding: 0.25em 0.3em 0 0.15em; + transition: background-color 0.5s; + background: rgba(255, 255, 255, 0.3); + border-radius: 4px; + margin: 0 0.1em 0 0.1em; +} + +.singleButton { + //border-bottom: 1px solid rgba(255, 255, 255, 0.5); + height: 100%; + display: inline-block; + color: white; + font-size: 150%; + padding: 0.3em 0.3em 0 0.15em; + transition: background-color 0.5s; + cursor: pointer; + border-radius: 4px; + margin: 0 0.1em 0 0.1em; + position: relative; +} + +.singleButton:hover, .singleButton_active { + background-color: rgba(255, 255, 255, 0.3); +} + +.fastSlPreview { + position: absolute; + top: -250px; + right: 0; + background: linear-gradient(315deg, rgba(253, 251, 251, 0.9) 0%, rgba(235, 237, 238, 0.85) 100%); + width: 900px; + height: 230px; + color: #005caf; + border-radius: 5px; + display: none; + animation: fastSlEnter 0.33s; + transition: opacity 0.33s; +} + +.fastsave:hover .fastSPreview { + display: block; +} + +.fastload:hover .fastLPreview { + display: block; +} + +@keyframes fastSlEnter { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +.slPreviewMain { + padding: 0.5em 0.5em 0.5em 0.5em; + display: flex; + box-sizing: border-box; + height: 100%; + width: 100%; +} + +.imgContainer { + display: flex; + overflow: hidden; + border-radius: 5px; + //outline: 4px solid #005caf; + flex-shrink: 0; + height: 100%; +} + +.textContainer { + overflow: hidden; + padding: 0 0 0 0.5em; +} diff --git a/packages/webgal/public/game/template/UI/BottomControlPanel/bottomControlPanelFilm.scss b/packages/webgal/public/game/template/UI/BottomControlPanel/bottomControlPanelFilm.scss new file mode 100644 index 000000000..541765e54 --- /dev/null +++ b/packages/webgal/public/game/template/UI/BottomControlPanel/bottomControlPanelFilm.scss @@ -0,0 +1,54 @@ +.tag { + position: absolute; + top: 2.5%; + left: 2.5%; + color: white; + z-index: 10; + padding: 10px 10px 5px 10px; + border-radius: 100px; + transition: background-color 0.33s; +} + +.tag:hover { + background-color: rgba(255, 255, 255, 0.5); +} + +.container { + color: white; + position: absolute; + top: 0; + width: 100%; + height: 100%; + display: flex; + flex-flow: column; + background-color: rgba(0, 0, 0, 0.7); + z-index: 9; + padding: 7em 5em 5em 10em; + opacity: 0; + animation: showContainer 1s forwards; + transition: background-color 0.33s; +} + +.singleButton { + padding: 0.5em 0 0.5em 0; +} + +.button_text { + font-family: "思源宋体", serif; + font-size: 250%; + letter-spacing: 0.07em; + transition: text-shadow 0.33s; +} + +.button_text:hover { + text-shadow: 0 0 15px rgba(255, 255, 255, 1); +} + +@keyframes showContainer { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} diff --git a/packages/webgal/public/game/template/UI/DevPanel/devPanel.scss b/packages/webgal/public/game/template/UI/DevPanel/devPanel.scss new file mode 100644 index 000000000..a5fa4d350 --- /dev/null +++ b/packages/webgal/public/game/template/UI/DevPanel/devPanel.scss @@ -0,0 +1,22 @@ +.devPanelMain { + font-size: 150%; + position: absolute; + right: 0; + top: 0; + bottom: 0; + width: 35%; + background: rgba(255, 255, 255, 0.75); + z-index: 99; + overflow: auto; +} + +.devPanelOpener { + position: absolute; + right: 5px; + top: 5px; + background: rgba(255, 255, 255, 0.75); + z-index: 100; + padding: 3px 7px 3px 7px; + border-radius: 4px; + cursor: pointer; +} diff --git a/packages/webgal/public/game/template/UI/Extra/extra.scss b/packages/webgal/public/game/template/UI/Extra/extra.scss new file mode 100644 index 000000000..1004f06ab --- /dev/null +++ b/packages/webgal/public/game/template/UI/Extra/extra.scss @@ -0,0 +1,279 @@ +.extra { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 14; + background-image: linear-gradient(135deg, #93a5cf 0%, #e4efe9 100%);; + padding: 2em 2em 2em 2em; + box-sizing: border-box; +} + +.extra_top { + padding: 0 0 0 0; + display: flex; + height: 10%; +} + +.extra_top_icon { + padding: 0.6em 0.6em 0 0.6em; + border-radius: 1000px; + transform: translate(0, -13px); + cursor: pointer; +} + +.extra_top_icon:hover { + background: rgba(255, 255, 255, 0.25); + animation: extra_icon_softin 0.25s ease-out forwards; +} + +@keyframes extra_icon_softin { + 0% { + background: rgba(255, 255, 255, 0); + } + 100% { + background: rgba(0, 0, 0, 0.25); + } +} + + +.extra_title { + font-family: "思源宋体", serif; + height: 100%; + line-height: 100%; + font-size: 325%; + font-weight: bold; + color: transparent; + background: linear-gradient(150deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 75%, #51A8DD 100%); + -webkit-background-clip: text; +} + +.mainContainer { + box-sizing: border-box; + padding: 0 2em 0 2em; + display: flex; + height: 92%; + flex-flow: column; +} + +.bgmContainer { + left: 50px; + right: 50px; + bottom: 30px; + position: absolute; + overflow: auto; + //width: 100%; + //height: 70%; + box-sizing: border-box; + display: flex; + flex-flow: column-reverse; + align-content: center; + background-image: linear-gradient(315deg, rgba(163, 189, 237, 0.95) 0%, rgba(105, 145, 199, 0.95) 100%); + padding: 1em 2em 1em 2em; + border-radius: 4px; + transition: max-height 0.5s; + z-index: 2; +} + +.bgmListContainer { + z-index: 2; + bottom: 0; + //overflow: hidden; + width: 100%; + box-sizing: border-box; + display: flex; + flex: 1; + flex-flow: row; + justify-content: flex-start; + align-items: flex-start; + margin: 0 0 15px 0; + flex-wrap: wrap; + overflow: auto; +} + +.bgmPlayerMain { + display: flex; +} + +.bgmControlButton { + padding: 0.6em 1.2em 0.2em 1.2em; + margin: 0 5px 0 5px; + box-sizing: border-box; + border-radius: 4px; + border: 1px solid rgba(255, 255, 255, 0.5); + cursor: pointer; + transition: background-color 0.33s, color 0.33s; + flex-shrink: 0; +} + +.bgmControlButton:hover { + box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.35); +} + +.bgmName { + color: rgba(255, 255, 255, 0.8); + font-family: "思源宋体", serif; + font-size: 155%; + margin: 5px 5px 0 15px; + overflow: hidden; +} + +.bgmElement { + font-family: "思源宋体", serif; + padding: 0.5em 1em 0.5em 1em; + overflow: hidden; + background-color: rgba(0, 0, 0, 0.1); + border-radius: 5px; + color: white; + font-size: 125%; + margin: 0.5em 1em 0.5em 0.5em; + transition: background-color 1s, color 1s; + opacity: 1; + //animation: bgmElement_In 0.5s forwards ease-out; + cursor: pointer; + width: 28%; + flex-shrink: 0; +} + +@keyframes bgmElement_In { + 0% { + opacity: 0.95; + //transform: translate(-50px, 0); + } + 100% { + opacity: 1; + } +} + +.bgmElement:hover { + background-color: rgba(255, 255, 255, 0.65); + color: #666; + transition: background-color 0.5s, color 0.5s; +} + +.bgmElement_active { + background-color: rgba(255, 255, 255, 0.85) !important; + color: #666; +} + +.cgMain { + width: 100%; + height: 88%; +} + +.cgContainer { + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + align-items: flex-start; + align-content: flex-start; + height: 90%; + box-sizing: border-box; + padding: 4em 0 0 2em; +} + +.cgElement { + width: 22.5%; + height: 37.5%; + background-color: rgba(255, 255, 255, 0.75); + box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.35); + box-sizing: border-box; + padding: 0.75em 0.75em 0.75em 0.75em; + opacity: 0; + margin: 1em 1em 1em 1em; + animation-delay: 100ms; + z-index: 1; + position: relative; + cursor: pointer; +} + +.cgShowDiv { + height: 8%; + width: 100%; + display: flex; + flex-flow: row; + justify-content: center; + align-items: flex-end; +} + +.cgShowDivWarpper { + display: flex; + flex-flow: row; + justify-content: center; + align-items: flex-end; + //background: rgba(255, 255, 255, 0.35); + border-radius: 7px; + padding: 12px 15px; +} + +.cgNav { + font-size: 170%; + background-color: rgba(255,255,255,0.5); + color: #666; + padding: 0.12em 1em 0.12em 1em; + margin: 0 0.25em 0 0.25em; + //width: 20px; + text-align: center; + cursor: pointer; + transition: background-color 0.5s, color 0.5s, font-weight 0.5s; + border-radius: 7px; +} + +.cgNav:first-child { + margin-left: 0; +} + +.cgNav:last-child { + margin-right: 0; +} + +.cgNav_active { + background-color: rgba(255,255,255,0.7) !important; + color: #005CAF; +} + +.cgNav:hover { + color: #005CAF; + background-color: rgba(255,255,255,0.6); +} + + +.showFullContainer { + z-index: 13; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.1); + display: flex; + justify-content: center; + align-items: center; +} + +.showFullCgMain { + cursor: pointer; + width: 80%; + height: 80%; + box-sizing: border-box; + padding: 2em 2em 2em 2em; + background: rgba(255, 255, 255, 0.95); + animation: fullCgIn 0.5s ease-out forwards; + opacity: 0; +} + +$initialTransform: scale(1.05, 1.05) translate(-25px, -50px) rotateX(-10deg) rotateY(10deg); +$endTransform: scale(1, 1) translate3d(0, 0, 0); + +@keyframes fullCgIn { + 0% { + opacity: 0; + transform: $initialTransform; + } + 100% { + opacity: 1; + transform: $endTransform; + } +} diff --git a/packages/webgal/public/game/template/UI/GlobalDialog/globalDialog.scss b/packages/webgal/public/game/template/UI/GlobalDialog/globalDialog.scss new file mode 100644 index 000000000..206d4c785 --- /dev/null +++ b/packages/webgal/public/game/template/UI/GlobalDialog/globalDialog.scss @@ -0,0 +1,85 @@ +.GlobalDialog_main { + height: 100%; + width: 100%; + position: absolute; + z-index: 20; + background: rgba(15, 37, 64, 0.39); + color: white; + opacity: 0.5; + animation: showGlobalDialog 0.33s forwards; + display: flex; + justify-content: center; + align-items: center; + //font-family: "WebgalUI", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-family: "思源宋体", serif; +} + +.glabalDialog_container_inner { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-flow: column; + background: linear-gradient(to right, + rgba(0, 92, 175, 0) 0%, + rgba(0, 92, 175, 0.5) 33%, + rgba(0, 92, 175, 0.85) 50%, + rgba(0, 92, 175, 0.5) 66%, + rgba(0, 92, 175, 0) 100% + ); + padding: 1em 5em 1.5em 5em; +} + +.glabalDialog_container { + height: 20%; + width: 100%; + border-top: 4px solid; + border-bottom: 4px solid; + border-image: linear-gradient(to right, + rgba(255, 255, 255, 0.05) 0%, + rgba(255, 255, 255, 0.85) 33%, + rgba(255, 255, 255, 1) 50%, + rgba(255, 255, 255, 0.85) 66%, + rgba(255, 255, 255, 0.05) 100% + ) 1; + //padding: 1px 1px 1px 1px; +} + +.title { + font-size: 300%; + text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); +} + +.button_list { + display: flex; + margin: auto 0 0 0; +} + +.button { + font-size: 200%; + padding: 0.15em 1em 0.15em 1em; + margin: 0.2em 1em 0.2em 1em; + cursor: pointer; + transition: background-color 0.33s, color 0.33s, font-weight 0.33s, transform 0.33s; + text-shadow: 0 0 10px rgba(255, 255, 255, 1); + border-radius: 5px; + //background: rgba(0, 0, 0, 0.05); +} + +.button:hover { + font-weight: bold; + color: #005caf; + transform: scale(1.1, 1.1); + text-shadow: 0 0 15px rgba(0, 0, 0, 0); + background: rgba(255, 255, 255, 0.85); +} + +@keyframes showGlobalDialog { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} diff --git a/packages/webgal/public/game/template/UI/Logo/logo.scss b/packages/webgal/public/game/template/UI/Logo/logo.scss new file mode 100644 index 000000000..2e66c2fd1 --- /dev/null +++ b/packages/webgal/public/game/template/UI/Logo/logo.scss @@ -0,0 +1,63 @@ +.Logo_main { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + animation: change-img-anim 5s forwards; + background-size: cover; + z-index: 14; +} +@keyframes change-img-anim { + 0%{ + opacity: 0; + } + 35%{ + opacity: 1; + } + 65%{ + opacity: 1; + } + 99%{ + opacity: 0; + } + 100%{ + opacity: 0; + display: none; + } +} +.Logo_Back { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + right: 0; + opacity: 1; + bottom: 0; + background-size: cover; + z-index: 14; + background: white; +} + +.animationActive{ + animation: fadeout 5s forwards; +} + +@keyframes fadeout { + 0%{ + opacity: 1; + } + 65%{ + opacity: 1; + } + 99%{ + opacity: 0; + } + 100%{ + opacity: 0; + display: none; + } +} diff --git a/packages/webgal/public/game/template/UI/Menu/about.scss b/packages/webgal/public/game/template/UI/Menu/about.scss new file mode 100644 index 000000000..7cdee3bc9 --- /dev/null +++ b/packages/webgal/public/game/template/UI/Menu/about.scss @@ -0,0 +1,46 @@ +.backButton{ + display: flex; + justify-content: center; + align-items: center; + width: 50px; + height: 50px; + background: rgba(0,0,0,0.1); + border-radius: 4px; + cursor: pointer; +} + +.backButton:hover{ + background: rgba(0,0,0,0.2); +} + +.about{ + padding: 10px 0 0 0; +} + +.icon{ + display: inline-flex; +} + +.title{ + color: transparent; + background: linear-gradient(to left, #227D51, rgba(81, 110, 65, 1)); + -webkit-background-clip: text; + font-size: 200%; + //border-bottom: 2px solid rgba(81, 110, 65, 0.9); + padding: 0.15em 0.5em 0.15em 0.1em; + font-weight: bold; + margin-top: 20px; +} + +.text{ + color: rgba(81, 110, 65, 1); + padding: 0 0 0 10px; + font-size: 135%; + a{ + color: rgba(81, 110, 65, 1); + } +} + +.contributor{ + padding: 0 10px 0 0; +} diff --git a/packages/webgal/public/game/template/UI/Menu/menu.scss b/packages/webgal/public/game/template/UI/Menu/menu.scss new file mode 100644 index 000000000..143af6a87 --- /dev/null +++ b/packages/webgal/public/game/template/UI/Menu/menu.scss @@ -0,0 +1,24 @@ +.Menu_main { + width: 100%; + height: 100%; + position: absolute; + z-index: 16; + //backdrop-filter: blur(1px); + animation: Menu_ShowSoftly 0.5s forwards; + background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%); +} + +.Menu_TagContent { + width: 100%; + height: 90%; +} + + +@keyframes Menu_ShowSoftly { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} diff --git a/packages/webgal/public/game/template/UI/Menu/menuPanel.scss b/packages/webgal/public/game/template/UI/Menu/menuPanel.scss new file mode 100644 index 000000000..fc879cbc0 --- /dev/null +++ b/packages/webgal/public/game/template/UI/Menu/menuPanel.scss @@ -0,0 +1,51 @@ +.MenuPanel_main { + width: 100%; + height: 10%; + display: flex; + justify-content: center; + align-items: center; + //background-color: rgba(255, 255, 255, 1); + //box-shadow: 0 0 45px 15px rgba(0, 0, 0, 0.05); + padding: 0 55px; +} + +.MenuPanel_button { + padding: 0.25em 15px 0 15px; + margin-right: 15px; + display: flex; + justify-content: center; + font-size: 200%; + text-align: center; + //font-weight: bold; + border-radius: 6px; + //width: 20%; + min-width: 12.5%; + cursor: pointer; + color: rgba(123,144,169, 1); + background: rgba(0, 0, 0, 0); + overflow: hidden; + //border-right: 1.5px solid rgba(0, 0, 0, 0.15); + transition: text-shadow 0.7s, background-color 0.7s; +} + +.MenuPanel_button:last-child{ + margin-right: 0; +} + +.MenuPanel_button:hover { + background-color: rgba(245, 246, 247, 0.15); +} + +.MenuPanel_button:last-child { + border-right: none; +} + +.MenuPanel_button_icon { + transform: translate(0, 0.125em); + padding: 0 0.15em 0 0; + margin: 0 0.15em 0 0; +} + +.MenuPanel_button_hl{ + background-color: rgba(245, 246, 247, 0.35) !important; +} diff --git a/packages/webgal/public/game/template/UI/Menu/normalButton.scss b/packages/webgal/public/game/template/UI/Menu/normalButton.scss new file mode 100644 index 000000000..2f48b267e --- /dev/null +++ b/packages/webgal/public/game/template/UI/Menu/normalButton.scss @@ -0,0 +1,23 @@ +.NormalButton { + font-size: 150%; + box-sizing: border-box; + padding: 0.2em 1em 0.2em 1em; + background-color: rgba(50, 50, 50, 0.05); + margin: 0 0.4em 0 0; + color: rgba(160, 170, 160, 1); + cursor: pointer; + border-bottom: 2px solid transparent; +} + +.NormalButton:hover { + border-bottom: 2px solid rgba(81, 110, 65, 0.9); + color: rgba(81, 110, 65, 0.9); + font-weight: bold; +} + +.NormalButtonChecked { + background-color: rgba(81, 110, 65, 0.15); + border-bottom: 2px solid rgba(81, 110, 65, 0.9); + color: rgba(81, 110, 65, 0.9); + font-weight: bold; +} diff --git a/packages/webgal/public/game/template/UI/Menu/normalOption.scss b/packages/webgal/public/game/template/UI/Menu/normalOption.scss new file mode 100644 index 000000000..8f368f6fc --- /dev/null +++ b/packages/webgal/public/game/template/UI/Menu/normalOption.scss @@ -0,0 +1,64 @@ +.NormalOption { + margin: 0.2em 1em 0.2em 1em; + padding: 0.2em 0.2em 0.2em 0.2em; + display: flex; + flex-flow: column; + align-items: flex-start; + animation: Elements_in ease-out 0.7s forwards; +} + +.NormalOption_title { + //color: rgba(81, 110, 65, 0.9); + color: transparent; + background: linear-gradient(to left, #227D51, rgba(81, 110, 65, 1)); + -webkit-background-clip: text; + font-size: 200%; + //border-bottom: 2px solid rgba(81, 110, 65, 0.9); + padding: 0.15em 0.5em 0.15em 0.1em; + font-weight: bold; +} + +.NormalOption_title_bef { + font-weight: bold; + font-size: 200%; + content: attr(data-text); + position: absolute; + -webkit-text-stroke: 3px rgba(0, 0, 0, 1); + z-index: -1; + padding: 0.15em 0.5em 0.15em 0.1em; +} + +.NormalOption_title_sd { + font-weight: bold; + color: rgba(0, 0, 0, 0); + font-size: 200%; + position: absolute; + z-index: -1; + padding: 0.15em 0.5em 0.15em 0.1em; + text-shadow: 0.04em 0.04em rgba(81, 110, 65, 0.9), + 0.05em 0.05em rgba(81, 110, 65, 0.9), + 0.06em 0.06em rgba(81, 110, 65, 0.9), + 0.07em 0.07em rgba(81, 110, 65, 0.9), + 0.08em 0.08em rgba(81, 110, 65, 0.9), + 0.09em 0.09em rgba(81, 110, 65, 0.9), + 0.10em 0.10em rgba(81, 110, 65, 0.9); + //0.11em 0.11em rgba(81, 110, 65, 0.9), + //0.12em 0.12em rgba(81, 110, 65, 0.9); +} + +.NormalOption_buttonList { + padding: 0.5em 0 0.5em 0; + display: flex; +} + +@keyframes Elements_in { + 0% { + opacity: 0; + transform: scale(1.03, 1.03) translate(-25px, -20px); + } + + 100% { + opacity: 1; + transform: scale(1, 1) translate(0, 0); + } +} \ No newline at end of file diff --git a/packages/webgal/public/game/template/UI/Menu/options.scss b/packages/webgal/public/game/template/UI/Menu/options.scss new file mode 100644 index 000000000..b4a3ef4ba --- /dev/null +++ b/packages/webgal/public/game/template/UI/Menu/options.scss @@ -0,0 +1,140 @@ +.Options_main { + position: absolute; + cursor: default; + height: 90%; + width: 100%; + //background: rgba(255, 255, 255, 0.65); +} + +.Options_top { + height: 15%; + width: 100%; + display: flex; + align-items: flex-start; +} + +.Options_title { + font-family: "思源宋体", serif; + letter-spacing: 0.1em; + font-size: 225%; + margin: 0.5em 0 0.5em 0; + padding: 0.2em 2em 0.2em 1.1em; + box-sizing: border-box; + //background-color: rgba(255, 255, 255, 0.99); + //border-right: .2em solid rgba(81, 110, 65, 0.9); + //box-shadow: .1em .1em .8em .2em rgba(0, 0, 0, 0.07); +} + +.Option_title_text { + font-size: 165%; + font-weight: bold; + color: transparent; + background: linear-gradient(to left, #227D51, rgba(81, 110, 65, 1)); + -webkit-background-clip: text; + animation: Elements_in ease-out 0.7s forwards; +} + +.Option_title_text_shadow { + position: absolute; + color: rgba(0, 0, 0, 0); + -webkit-text-stroke: 3px rgba(0, 0, 0, 1); + z-index: -1; +} + +.Option_title_text_ts { + position: absolute; + color: rgba(0, 0, 0, 0); + text-shadow: 0.04em 0.04em rgba(81, 110, 65, 0.9), + 0.05em 0.05em rgba(81, 110, 65, 0.9), + 0.06em 0.06em rgba(81, 110, 65, 0.9), + 0.07em 0.07em rgba(81, 110, 65, 0.9); + //0.08em 0.08em rgba(81, 110, 65, 0.9), + //0.09em 0.09em rgba(81, 110, 65, 0.9), + //0.10em 0.10em rgba(81, 110, 65, 0.9), + //0.11em 0.11em rgba(81, 110, 65, 0.9), + //0.12em 0.12em rgba(81, 110, 65, 0.9); + z-index: -1; +} + +.Options_main_content { + display: flex; + flex: 1; + padding: 0 0 0 3em; + overflow: auto; +} + +.Options_main_content_half { + width: 95%; + display: flex; + flex-flow: row; + align-items: flex-start; + align-content: flex-start; + flex-wrap: wrap; + padding: 0 1em 0 1em; + position: relative; +} + +.About_title_text { + margin: 0.2em 1em 0.2em 1em; + padding: 0.2em 0.2em 0.2em 0.2em; + //width: 100%; + position: absolute; + top: 10px; + right: 10px; + animation: Elements_in ease-out 0.7s forwards; + cursor: pointer; +} + +.About_text { + font-weight: bold; + color: transparent; + background: linear-gradient(to left, rgba(34, 125, 81, 0.65), rgba(81, 110, 65, 0.65)); + -webkit-background-clip: text; + font-size: 135%; + text-decoration: underline; + +} + +@keyframes Elements_in { + 0% { + opacity: 0; + transform: scale(1.03, 1.03) translate(-25px, -20px); + } + + 100% { + opacity: 1; + transform: scale(1, 1) translate(0, 0); + } +} + +.Options_page_container { + height: 85%; + display: flex; + padding: 1em 3.75em 1em 3.75em; +} + +.Options_button_list { + animation: Elements_in ease-out 0.7s forwards; +} + +.Options_page_button { + font-family: "思源宋体", serif; + font-size: 300%; + font-weight: bold; + color: transparent; + background: linear-gradient(to left, #227D51, rgba(81, 110, 65, 1)); + opacity: 0.35; + -webkit-background-clip: text; + transition: color 0.33s, background-image 0.33s, opacity 0.33s; + cursor: pointer; +} + +.Options_page_button_active { + background-image: linear-gradient(to left, #227D51, rgba(81, 110, 65, 1)); + -webkit-background-clip: text; + opacity: 1; +} + +.Options_page_button:hover { + opacity: 1; +} diff --git a/packages/webgal/public/game/template/UI/Menu/saveAndLoad.scss b/packages/webgal/public/game/template/UI/Menu/saveAndLoad.scss new file mode 100644 index 000000000..a0f623ed2 --- /dev/null +++ b/packages/webgal/public/game/template/UI/Menu/saveAndLoad.scss @@ -0,0 +1,267 @@ +.Save_Load_main { + height: 90%; + width: 100%; + position: absolute; + cursor: default; +} + +.Save_Load_top { + height: 10%; + width: 100%; + display: flex; + //background-color: rgba(255, 255, 255, 1); + //box-shadow: 0 0 1.5em 0.1em rgba(0, 0, 0, 0.05); + animation: Elements_in ease-out 1s forwards; + //border-bottom: 1px solid rgba(0, 0, 0, 0.1); + justify-content: center; +} + +.Save_Load_title { + font-family: "思源宋体", serif; + letter-spacing: 0.1em; + width: auto; + font-size: 500%; + min-width: 350px; + //margin: 0 0 0 0.8em; + //padding: 0 0.8em 0 0.8em; + box-sizing: border-box; + //border-bottom: 4px solid #77428D; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + left: 20px; + top:0; + z-index: -1; + opacity: 0.2; + transform: translateY(-10px); +} + +.Save_title_text { + font-weight: bold; + color: transparent; + background: linear-gradient(135deg, #77428D 0%, #B28FCE 100%); + text-shadow: 2px 2px 15px rgba(255, 255, 255, 0.5); + -webkit-background-clip: text; +} + + +.Load_title_text { + font-weight: bold; + color: transparent; + background: linear-gradient(135deg, #005CAF 0%, #2EA9DF 100%); + text-shadow: 2px 2px 15px rgba(255, 255, 255, 0.5); + -webkit-background-clip: text; +} + +.Save_Load_top_buttonList { + height: 100%; + display: flex; + //padding: 0 0 0 2em; +} + +.Save_Load_top_button { + cursor: pointer; + font-size: 200%; + width: 2.05em; + text-align: center; + color: rgba(0, 0, 0, 0.5); + box-sizing: border-box; + display: flex; + align-items: center; + border-bottom: 4px solid rgba(0, 0, 0, 0); + transition: background-color 0.7s, border-bottom-width 0.7s; +} + +.Save_Load_top_button_text { + text-align: center; + width: 100%; + padding: 0 0 3px 0; + border-left: 2px solid rgba(0, 0, 0, 0.1); +} + +.Save_Load_top_button:first-child > div { + border-left: 2px solid rgba(0, 0, 0, 0); +} + +.Save_Load_top_button_on { + font-weight: bold; + border-bottom: 4px solid #77428D; + color: #77428D; + background-color: rgba(119, 66, 141, 0.05); +} + +.Save_Load_top_button:hover { + color: #77428D; + font-weight: bold; + border-bottom: 4px solid #77428D; +} + +.Load_top_button_on { + font-weight: bold; + border-bottom: 5px solid #005CAF; + color: #005CAF; + background-color: rgba(0, 92, 175, 0.1); +} + +.Load_top_button:hover { + color: #005CAF; + font-weight: bold; + border-bottom: 5px solid #005CAF; +} + +.Save_Load_content { + height: 90%; + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: center; +} + +.Save_Load_content_element { + //background: linear-gradient(-45deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.5) 100%); + background: linear-gradient(-45deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.075)); + overflow: hidden; + //border: 1px solid rgba(255, 255, 255, 1); + width: 17.5%; + height: 45%; + //box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); + animation: Elements_in 1s ease-out forwards, Elements_in_transform 1s ease-out; + opacity: 0; + border-radius: 4px; + transition: transform 0.25s, box-shadow 0.25s; + cursor: pointer; +} + +.Save_Load_content_element:hover { + //box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.1); + transform: scale(1.05, 1.05) translate(-0.2em, -0.2em); +} + + +.Save_Load_content_element_top { + font-family: "思源宋体", serif; + width: 100%; + height: 12%; + display: flex; +} + +.Save_Load_content_element_top_index { + color: rgba(255, 255, 255, 1); + text-align: center; + font-size: 155%; + height: 100%; + width: 20%; + background-color: #B28FCE; +} + +.Load_content_elememt_top_index { + background-color: #51A8DD; +} + +.Save_Load_content_element_top_date { + padding: 0.425em 0 0 0.5em; + background-color: #77428D; + color: rgba(255, 255, 255, 1); + font-size: 115%; + height: 100%; + width: 80%; + font-family: WebgalUI, serif; + letter-spacing: 0.1em; +} + +.Load_content_element_top_date { + background-color: #005CAF; +} + +.Save_Load_content_text { + font-family: "WebgalUI", sans-serif; + letter-spacing: 0.05em; + color: #373C38; + background: linear-gradient(-45deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 1) 100%); + //background: rgba(255,255,255,1); + font-size: 120%; + height: 40%; + width: 100%; + //box-sizing: border-box; + display: flex; + flex-flow: column; + justify-content: flex-start; + align-items: flex-start; +} + +.Save_Load_content_text_padding { + padding: 0.2em 0.75em 0.2em 0.75em; +} + +.Save_Load_content_speaker { + box-sizing: border-box; + //margin: 0.35em 0 0 0; + //background: rgba(0, 0, 0, 0.04); + font-weight: bold; + color: #77428D; + padding: 0.35em 0.8em 0.25em 0.8em; + width: 100%; + //border-radius: 4px; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} + +.Load_content_speaker { + color: #005caf; +} + + +.Load_content_text { + background-color: rgba(0, 92, 175, 0.75); +} + +.Save_Load_content_miniRen { + width: 100%; + height: 48%; + position: relative; + background-size: cover; +} + +.Save_Load_content_miniRen_bg { + background-size: cover; + height: 100%; + width: 100%; + background-position: center; +} + +.Save_Load_content_miniRen_figure { + height: 100%; + max-height: 100%; + max-width: 100%; + position: absolute; + bottom: 0; +} + +.Save_Load_content_miniRen_figLeft { + bottom: 0; + left: 0; +} + +.Save_Load_content_miniRen_figRight { + bottom: 0; + right: 0; +} + +@keyframes Elements_in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes Elements_in_transform { + 0% { + transform: scale(1.05, 1.05) translate(-25px, -20px) rotateY(15deg) rotateX(-15deg); + } + 100% { + transform: scale(1, 1) translate(0, 0); + } +} diff --git a/packages/webgal/public/game/template/UI/Menu/slider.scss b/packages/webgal/public/game/template/UI/Menu/slider.scss new file mode 100644 index 000000000..826e83119 --- /dev/null +++ b/packages/webgal/public/game/template/UI/Menu/slider.scss @@ -0,0 +1,106 @@ +input[type=range] { + -webkit-appearance: none; /* 去掉底部的 track 默认样式，就是整个灰条 */ + width: 500px; /* Firefox 需要指定明确的宽度 */ + height: 50px; + background: transparent; /* 否则在 Chrome 中是白色背景 */ + font-size: 100%; +} + +/* 去掉 webkit 内核 滑块 的样式 */ +input[type=range]::-webkit-slider-thumb { + -webkit-appearance: none; +} + +input[type=range]:focus { + outline: none; /* 去除获取焦点时蓝色的外边框，你也可以自己定制其他你想要的效果 */ +} + +/*以下是自定义样式*/ + +/*滑块样式*/ +input[type=range]::-webkit-slider-thumb { + -webkit-appearance: none; + /*border: 1px solid #000000;*/ + height: 375%; + width: 7.2%; + border-radius: 5em; + background: #ffffff; + cursor: pointer; + margin-top: -14px; /* 在 Chrome 中你需要给定一个明确的 margin，但是在 Firefox 和 IE 中这个是固定的 */ + box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* 添加一条炫酷的效果为你的 thumb */ +} + +/*轨道样式*/ +input[type=range]::-webkit-slider-runnable-track { + width: 100%; + height: 20%; + cursor: pointer; + box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.3); + background: rgba(81, 110, 65, 0.9); + border-radius: 2em; +} + +input[type=range]:focus::-webkit-slider-runnable-track { + background: rgba(81, 110, 65, 0.9); +} + +/* Firefox 同上 */ +input[type=range]::-moz-range-thumb { + height: 36px; + width: 7.2%; + border-radius: 5em; + background: #ffffff; + cursor: pointer; + /*margin-top: -14px; !* 在 Chrome 中你需要给定一个明确的 margin，但是在 Firefox 和 IE 中这个是固定的 *!*/ + box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* 添加一条炫酷的效果为你的 thumb */ +} + +input[type=range]::-moz-range-track { + width: 100%; + height: 20%; + cursor: pointer; + box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.3); + background: rgba(81, 110, 65, 0.9); + border-radius: 2em; +} + +.Option_WebGAL_slider { + position: relative; +} + +.bubble { + position: absolute; + bottom: calc(100% + 10px); + transform: translateX(-50%); + background: rgba(0, 0, 0, 0.85); + color: white; + padding: 6px 12px; + border-radius: 6px; + font-weight: bold; + white-space: nowrap; + pointer-events: none; + opacity: 0; + animation: bubbleFadeIn 0.2s ease-out forwards; +} + +.bubble::after { + content: ''; + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + border-width: 6px; + border-style: solid; + border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent; +} + +@keyframes bubbleFadeIn { + from { + opacity: 0; + transform: translateX(-50%) translateY(4px); + } + to { + opacity: 1; + transform: translateX(-50%) translateY(0); + } +} diff --git a/packages/webgal/public/game/template/UI/Menu/textPreview.scss b/packages/webgal/public/game/template/UI/Menu/textPreview.scss new file mode 100644 index 000000000..420b3bd6d --- /dev/null +++ b/packages/webgal/public/game/template/UI/Menu/textPreview.scss @@ -0,0 +1,12 @@ +.textPreviewMain { + z-index: 1; + padding: 1em; + min-height: 480px; + width: 100%; +} + +.textbox { + width: 100%; + height: 100%; + position: relative; +} \ No newline at end of file diff --git a/packages/webgal/public/game/template/UI/PanicOverlay/panicOverlay.scss b/packages/webgal/public/game/template/UI/PanicOverlay/panicOverlay.scss new file mode 100644 index 000000000..7619d39d1 --- /dev/null +++ b/packages/webgal/public/game/template/UI/PanicOverlay/panicOverlay.scss @@ -0,0 +1,9 @@ +.panic_overlay_main { + margin: 0; + position: fixed; + //display: none; + width: 100%; + height: 100%; + background-color: white; + z-index: 256; +} diff --git a/packages/webgal/src/Core/util/coreInitialFunction/templateLoader.ts b/packages/webgal/src/Core/util/coreInitialFunction/templateLoader.ts index 3e43745bf..c3ee1cf5e 100644 --- a/packages/webgal/src/Core/util/coreInitialFunction/templateLoader.ts +++ b/packages/webgal/src/Core/util/coreInitialFunction/templateLoader.ts @@ -87,6 +87,23 @@ async function loadStyleFiles() { { ui: 'title', path: 'UI/Title/title.scss' }, { ui: 'textbox', path: 'Stage/TextBox/textbox.scss' }, { ui: 'choose', path: 'Stage/Choose/choose.scss' }, + { ui: 'backlog', path: 'UI/Backlog/backlog.scss' }, + { ui: 'bottomControlPanel', path: 'UI/BottomControlPanel/bottomControlPanel.scss' }, + { ui: 'bottomControlPanelFilm', path: 'UI/BottomControlPanel/bottomControlPanelFilm.scss' }, + { ui: 'devPanel', path: 'UI/DevPanel/devPanel.scss' }, + { ui: 'extra', path: 'UI/Extra/extra.scss' }, + { ui: 'globalDialog', path: 'UI/GlobalDialog/globalDialog.scss' }, + { ui: 'logo', path: 'UI/Logo/logo.scss' }, + { ui: 'menu', path: 'UI/Menu/menu.scss' }, + { ui: 'menuPanel', path: 'UI/Menu/menuPanel.scss' }, + { ui: 'menuSaveAndLoad', path: 'UI/Menu/saveAndLoad.scss' }, + { ui: 'menuOptions', path: 'UI/Menu/options.scss' }, + { ui: 'menuNormalButton', path: 'UI/Menu/normalButton.scss' }, + { ui: 'menuNormalOption', path: 'UI/Menu/normalOption.scss' }, + { ui: 'menuTextPreview', path: 'UI/Menu/textPreview.scss' }, + { ui: 'menuAbout', path: 'UI/Menu/about.scss' }, + { ui: 'menuSlider', path: 'UI/Menu/slider.scss' }, + { ui: 'panicOverlay', path: 'UI/PanicOverlay/panicOverlay.scss' }, ]; await Promise.all( diff --git a/packages/webgal/src/UI/Backlog/Backlog.tsx b/packages/webgal/src/UI/Backlog/Backlog.tsx index 878f79f20..fbe966a8c 100644 --- a/packages/webgal/src/UI/Backlog/Backlog.tsx +++ b/packages/webgal/src/UI/Backlog/Backlog.tsx @@ -10,11 +10,13 @@ import useTrans from '@/hooks/useTrans'; import { compileSentence, EnhancedNode } from '@/Stage/TextBox/TextBox'; import useSoundEffect from '@/hooks/useSoundEffect'; import { WebGAL } from '@/Core/WebGAL'; +import useApplyStyle from '@/hooks/useApplyStyle'; export const Backlog = () => { const t = useTrans('gaming.'); // logger.info('Backlog render'); const { playSeEnter, playSeClick } = useSoundEffect(); + const applyStyle = useApplyStyle('backlog'); const GUIStore = useSelector((state: RootState) => state.GUI); const isBacklogOpen = GUIStore.showBacklog; const dispatch = useDispatch(); @@ -104,13 +106,13 @@ export const Backlog = () => { }); const singleBacklogView = (
-
-
+
+
{ playSeClick(); @@ -119,7 +121,7 @@ export const Backlog = () => { e.stopPropagation(); }} onMouseEnter={playSeEnter} - className={styles.backlog_item_button_element} + className={applyStyle('backlog_item_button_element', styles.backlog_item_button_element)} >
@@ -140,16 +142,20 @@ export const Backlog = () => { } }} onMouseEnter={playSeEnter} - className={styles.backlog_item_button_element} + className={applyStyle('backlog_item_button_element', styles.backlog_item_button_element)} >
) : null}
-
{nameElementList}
+
+ {nameElementList} +
-
- {showTextElementList} +
+ + {showTextElementList} +
@@ -198,13 +204,13 @@ export const Backlog = () => { // ${indexHide ? styles.Backlog_main_out_IndexHide : ''}
-
+
{ playSeClick(); dispatch(setVisibility({ component: 'showBacklog', visibility: false })); @@ -217,7 +223,7 @@ export const Backlog = () => { strokeWidth={3} />
{ logger.info('Rua! Testing'); }} @@ -226,7 +232,11 @@ export const Backlog = () => {
{GUIStore.showBacklog && ( -
+
{backlogList}
)} diff --git a/packages/webgal/src/UI/BottomControlPanel/BottomControlPanel.tsx b/packages/webgal/src/UI/BottomControlPanel/BottomControlPanel.tsx index d2df8848e..75798f25c 100644 --- a/packages/webgal/src/UI/BottomControlPanel/BottomControlPanel.tsx +++ b/packages/webgal/src/UI/BottomControlPanel/BottomControlPanel.tsx @@ -29,17 +29,22 @@ import { SettingTwo, Unlock, } from '@icon-park/react'; +import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useDispatch, useSelector } from 'react-redux'; import styles from './bottomControlPanel.module.scss'; +import useApplyStyle from '@/hooks/useApplyStyle'; export const BottomControlPanel = () => { const t = useTrans('gaming.'); const strokeWidth = 2.5; const { i18n } = useTranslation(); const { playSeEnter, playSeClick, playSeDialogOpen } = useSoundEffect(); + const applyStyle = useApplyStyle('bottomControlPanel'); const lang = i18n.language; const isFr = lang === 'fr'; + const [showFastSavePreview, setShowFastSavePreview] = useState(false); + const [showFastLoadPreview, setShowFastLoadPreview] = useState(false); let size = 42; let fontSize = '150%'; if (isFr) { @@ -66,11 +71,11 @@ export const BottomControlPanel = () => { if (saveData[0]) { const data = saveData[0]; fastSlPreview = ( -
-
+
+
q-save-preview image
-
+
{easyCompile(data.nowStageState.showName)}
{easyCompile(data.nowStageState.showText)}
@@ -82,10 +87,13 @@ export const BottomControlPanel = () => { //
<> {GUIStore.showTextBox && stageState.enableFilm === '' && ( -
+
{GUIStore.showTextBox && ( { setComponentVisibility('showTextBox', false); @@ -94,18 +102,18 @@ export const BottomControlPanel = () => { onMouseEnter={playSeEnter} > - {t('buttons.hide')} + {t('buttons.hide')} )} {!GUIStore.showTextBox && ( { setComponentVisibility('showTextBox', true); @@ -114,17 +122,17 @@ export const BottomControlPanel = () => { onMouseEnter={playSeEnter} > - {t('buttons.show')} + {t('buttons.show')} )} { setComponentVisibility('showBacklog', true); @@ -134,16 +142,16 @@ export const BottomControlPanel = () => { onMouseEnter={playSeEnter} > - {t('buttons.backlog')} + {t('buttons.backlog')} { let VocalControl: any = document.getElementById('currentVocal'); @@ -157,17 +165,17 @@ export const BottomControlPanel = () => { onMouseEnter={playSeEnter} > - {t('buttons.replay')} + {t('buttons.replay')} { switchAuto(); @@ -175,12 +183,18 @@ export const BottomControlPanel = () => { }} onMouseEnter={playSeEnter} > - - {t('buttons.auto')} + + {t('buttons.auto')} { switchFast(); @@ -189,48 +203,78 @@ export const BottomControlPanel = () => { onMouseEnter={playSeEnter} > - {t('buttons.forward')} + {t('buttons.forward')} { saveGame(0); playSeClick(); }} - onMouseEnter={playSeEnter} + onMouseEnter={() => { + setShowFastSavePreview(true); + setShowFastLoadPreview(false); + playSeEnter(); + }} + onMouseLeave={() => { + setShowFastSavePreview(false); + }} > - {t('buttons.quicklySave')} -
{fastSlPreview}
+ {t('buttons.quicklySave')} +
+ {fastSlPreview} +
{ loadGame(0); playSeClick(); }} - onMouseEnter={playSeEnter} + onMouseEnter={() => { + setShowFastLoadPreview(true); + setShowFastSavePreview(false); + playSeEnter(); + }} + onMouseLeave={() => { + setShowFastLoadPreview(false); + }} > - - {t('buttons.quicklyLoad')} -
{fastSlPreview}
+ + {t('buttons.quicklyLoad')} +
+ {fastSlPreview} +
{ setMenuPanel(MenuPanelTag.Save); @@ -239,11 +283,17 @@ export const BottomControlPanel = () => { }} onMouseEnter={playSeEnter} > - - {t('buttons.save')} + + {t('buttons.save')} { setMenuPanel(MenuPanelTag.Load); @@ -253,16 +303,16 @@ export const BottomControlPanel = () => { onMouseEnter={playSeEnter} > - {t('buttons.load')} + {t('buttons.load')} { setMenuPanel(MenuPanelTag.Option); @@ -272,16 +322,16 @@ export const BottomControlPanel = () => { onMouseEnter={playSeEnter} > - {t('buttons.options')} + {t('buttons.options')} { playSeDialogOpen(); @@ -297,19 +347,25 @@ export const BottomControlPanel = () => { }} onMouseEnter={playSeEnter} > - - {t('buttons.title')} + + {t('buttons.title')} {isFullscreenSupport && ( {!isFullScreen && ( { )} {isFullScreen && ( )} - {t('buttons.fullscreen')} + {t('buttons.fullscreen')} )} { switchControls(); @@ -338,9 +394,21 @@ export const BottomControlPanel = () => { onMouseEnter={playSeEnter} > {GUIStore.showControls ? ( - + ) : ( - + )}
diff --git a/packages/webgal/src/UI/BottomControlPanel/BottomControlPanelFilm.tsx b/packages/webgal/src/UI/BottomControlPanel/BottomControlPanelFilm.tsx index b6ed7b2e4..444f7f2e1 100644 --- a/packages/webgal/src/UI/BottomControlPanel/BottomControlPanelFilm.tsx +++ b/packages/webgal/src/UI/BottomControlPanel/BottomControlPanelFilm.tsx @@ -8,10 +8,12 @@ import { componentsVisibility, MenuPanelTag } from '@/store/guiInterface'; import { backToTitle } from '@/Core/controller/gamePlay/backToTitle'; import { useValue } from '@/hooks/useValue'; import { HamburgerButton } from '@icon-park/react'; +import useApplyStyle from '@/hooks/useApplyStyle'; export const BottomControlPanelFilm = () => { const showPanel = useValue(false); const stageState = useSelector((state: RootState) => state.stage); + const applyStyle = useApplyStyle('bottomControlPanelFilm'); const dispatch = useDispatch(); const setComponentVisibility = (component: keyof componentsVisibility, visibility: boolean) => { dispatch(setVisibility({ component, visibility })); @@ -24,7 +26,7 @@ export const BottomControlPanelFilm = () => { {stageState.enableFilm !== '' && ( <>
{ showPanel.set(!showPanel.value); }} @@ -32,19 +34,19 @@ export const BottomControlPanelFilm = () => {
{showPanel.value && ( -
+
{ setComponentVisibility('showBacklog', true); setComponentVisibility('showTextBox', false); showPanel.set(!showPanel.value); }} > - 剧情回想 / BACKLOG + 剧情回想 / BACKLOG { showPanel.set(!showPanel.value); let VocalControl: any = document.getElementById('currentVocal'); @@ -55,66 +57,66 @@ export const BottomControlPanelFilm = () => { } }} > - 重播语音 / REPLAY VOICE + 重播语音 / REPLAY VOICE { switchAuto(); showPanel.set(!showPanel.value); }} > - 自动模式 / AUTO + 自动模式 / AUTO { switchFast(); showPanel.set(!showPanel.value); }} > - 快进 / FAST + 快进 / FAST { showPanel.set(!showPanel.value); setMenuPanel(MenuPanelTag.Save); setComponentVisibility('showMenuPanel', true); }} > - 存档 / SAVE + 存档 / SAVE { showPanel.set(!showPanel.value); setMenuPanel(MenuPanelTag.Load); setComponentVisibility('showMenuPanel', true); }} > - 读档 / LOAD + 读档 / LOAD { showPanel.set(!showPanel.value); setMenuPanel(MenuPanelTag.Option); setComponentVisibility('showMenuPanel', true); }} > - 选项 / OPTIONS + 选项 / OPTIONS { showPanel.set(!showPanel.value); backToTitle(); }} > - 标题 / TITLE + 标题 / TITLE
)} diff --git a/packages/webgal/src/UI/DevPanel/DevPanel.tsx b/packages/webgal/src/UI/DevPanel/DevPanel.tsx index 2fbb702a1..3520930ef 100644 --- a/packages/webgal/src/UI/DevPanel/DevPanel.tsx +++ b/packages/webgal/src/UI/DevPanel/DevPanel.tsx @@ -7,6 +7,7 @@ import { RootState } from '@/store/store'; import { useTranslation } from 'react-i18next'; import { WebGAL } from '@/Core/WebGAL'; +import useApplyStyle from '@/hooks/useApplyStyle'; export default function DevPanel() { // 控制显隐 @@ -25,6 +26,7 @@ export default function DevPanel() { const isShow = isShowDevPanel(); const { t, i18n } = useTranslation(); + const applyStyle = useApplyStyle('devPanel'); const devMainArea = ( <> @@ -38,7 +40,7 @@ export default function DevPanel() { return ( <> {isShow && isOpenDevPanel.value && ( -
+
isOpenDevPanel.set(false)} @@ -52,7 +54,7 @@ export default function DevPanel() {
)} {!isOpenDevPanel.value && isShow && ( -
isOpenDevPanel.set(true)} className={styles.devPanelOpener}> +
isOpenDevPanel.set(true)} className={applyStyle('devPanelOpener', styles.devPanelOpener)}> Open Dev Panel
)} diff --git a/packages/webgal/src/UI/Extra/Extra.tsx b/packages/webgal/src/UI/Extra/Extra.tsx index 8a544eb3b..2f384293a 100644 --- a/packages/webgal/src/UI/Extra/Extra.tsx +++ b/packages/webgal/src/UI/Extra/Extra.tsx @@ -7,20 +7,22 @@ import { ExtraBgm } from '@/UI/Extra/ExtraBgm'; import { ExtraCg } from './ExtraCg'; import useTrans from '@/hooks/useTrans'; import useSoundEffect from '@/hooks/useSoundEffect'; +import useApplyStyle from '@/hooks/useApplyStyle'; export function Extra() { const { playSeClick } = useSoundEffect(); const showExtra = useSelector((state: RootState) => state.GUI.showExtra); const dispatch = useDispatch(); + const applyStyle = useApplyStyle('extra'); const t = useTrans('extra.'); return ( <> {showExtra && ( -
-
+
+
{ dispatch(setVisibility({ component: 'showExtra', visibility: false })); playSeClick(); @@ -31,9 +33,9 @@ export function Extra() { fill="#fff" strokeWidth={3} /> -
{t('title')}
+
{t('title')}
-
+
diff --git a/packages/webgal/src/UI/Extra/ExtraBgm.tsx b/packages/webgal/src/UI/Extra/ExtraBgm.tsx index 7c9bba9b2..8afb28f10 100644 --- a/packages/webgal/src/UI/Extra/ExtraBgm.tsx +++ b/packages/webgal/src/UI/Extra/ExtraBgm.tsx @@ -7,9 +7,11 @@ import { setStage } from '@/store/stageReducer'; import { GoEnd, GoStart, MusicList, PlayOne, SquareSmall } from '@icon-park/react'; import useSoundEffect from '@/hooks/useSoundEffect'; import { setGuiAsset } from '@/store/GUIReducer'; +import useApplyStyle from '@/hooks/useApplyStyle'; export function ExtraBgm() { const { playSeClick, playSeEnter } = useSoundEffect(); + const applyStyle = useApplyStyle('extra'); // 检查当前正在播放的bgm是否在bgm列表内 const currentBgmSrc = useSelector((state: RootState) => state.GUI.titleBgm); const extraState = useSelector((state: RootState) => state.userData.appreciationData); @@ -40,9 +42,9 @@ export function ExtraBgm() { } const showBgmList = extraState.bgm.map((e, i) => { - let className = styles.bgmElement; + let className = applyStyle('bgmElement', styles.bgmElement); if (e.name === currentPlayingBgmName.value) { - className = className + ' ' + styles.bgmElement_active; + className = className + ' ' + applyStyle('bgmElement_active', styles.bgmElement_active); } return (
-
+
+
{ playSeClick(); @@ -81,7 +83,7 @@ export function ExtraBgm() { } }} onMouseEnter={playSeEnter} - className={styles.bgmControlButton} + className={applyStyle('bgmControlButton', styles.bgmControlButton)} >
@@ -92,7 +94,7 @@ export function ExtraBgm() { bgmControl?.play().then(); }} onMouseEnter={playSeEnter} - className={styles.bgmControlButton} + className={applyStyle('bgmControlButton', styles.bgmControlButton)} >
@@ -106,7 +108,7 @@ export function ExtraBgm() { } }} onMouseEnter={playSeEnter} - className={styles.bgmControlButton} + className={applyStyle('bgmControlButton', styles.bgmControlButton)} >
@@ -117,24 +119,26 @@ export function ExtraBgm() { bgmControl.pause(); }} onMouseEnter={playSeEnter} - className={styles.bgmControlButton} + className={applyStyle('bgmControlButton', styles.bgmControlButton)} >
-
{foundCurrentBgmName}
+
{foundCurrentBgmName}
{ playSeClick(); isShowBgmList.set(!isShowBgmList.value); }} onMouseEnter={playSeEnter} - className={styles.bgmControlButton} + className={applyStyle('bgmControlButton', styles.bgmControlButton)} style={{ marginLeft: 'auto' }} >
- {isShowBgmList.value &&
{showBgmList}
} + {isShowBgmList.value && ( +
{showBgmList}
+ )}
); } diff --git a/packages/webgal/src/UI/Extra/ExtraCg.tsx b/packages/webgal/src/UI/Extra/ExtraCg.tsx index 8f610ebc7..13966ad7d 100644 --- a/packages/webgal/src/UI/Extra/ExtraCg.tsx +++ b/packages/webgal/src/UI/Extra/ExtraCg.tsx @@ -6,6 +6,7 @@ import { useValue } from '@/hooks/useValue'; import './extraCG_animation_List.scss'; import { ExtraCgElement } from '@/UI/Extra/ExtraCgElement'; import useSoundEffect from '@/hooks/useSoundEffect'; +import useApplyStyle from '@/hooks/useApplyStyle'; export function ExtraCg() { const cgPerPage = 8; @@ -14,6 +15,7 @@ export function ExtraCg() { // const pageNumber = 10; const currentPage = useValue(1); const { playSeEnter, playSeClick } = useSoundEffect(); + const applyStyle = useApplyStyle('extra'); // 开始生成立绘鉴赏的图片 const showCgList = []; @@ -40,9 +42,9 @@ export function ExtraCg() { // 生成cg鉴赏的导航 const showNav = []; for (let i = 1; i <= pageNumber; i++) { - let className = styles.cgNav; + let className = applyStyle('cgNav', styles.cgNav); if (currentPage.value === i) { - className = className + ' ' + styles.cgNav_active; + className = className + ' ' + applyStyle('cgNav_active', styles.cgNav_active); } const temp = (
-
-
{showNav}
+
+
+
{showNav}
-
{showCgList}
+
{showCgList}
); } diff --git a/packages/webgal/src/UI/Extra/ExtraCgElement.tsx b/packages/webgal/src/UI/Extra/ExtraCgElement.tsx index 63a36287c..17751aacd 100644 --- a/packages/webgal/src/UI/Extra/ExtraCgElement.tsx +++ b/packages/webgal/src/UI/Extra/ExtraCgElement.tsx @@ -2,6 +2,7 @@ import { useValue } from '@/hooks/useValue'; import styles from '@/UI/Extra/extra.module.scss'; import React, { useMemo } from 'react'; import useSoundEffect from '@/hooks/useSoundEffect'; +import useApplyStyle from '@/hooks/useApplyStyle'; interface IProps { name: string; @@ -13,6 +14,7 @@ interface IProps { export function ExtraCgElement(props: IProps) { const showFull = useValue(false); const { playSeEnter, playSeClick } = useSoundEffect(); + const applyStyle = useApplyStyle('extra'); // Determine if the resource is a video based on file extension const isVideo = useMemo(() => { @@ -79,10 +81,10 @@ export function ExtraCgElement(props: IProps) { showFull.set(!showFull.value); playSeClick(); }} - className={styles.showFullContainer} + className={applyStyle('showFullContainer', styles.showFullContainer)} onMouseEnter={playSeEnter} > -
{renderMedia(true)}
+
{renderMedia(true)}
)}
{renderMedia(false)}
diff --git a/packages/webgal/src/UI/GlobalDialog/GlobalDialog.tsx b/packages/webgal/src/UI/GlobalDialog/GlobalDialog.tsx index baaf12ac7..931b5b125 100644 --- a/packages/webgal/src/UI/GlobalDialog/GlobalDialog.tsx +++ b/packages/webgal/src/UI/GlobalDialog/GlobalDialog.tsx @@ -4,6 +4,7 @@ import { useSelector } from 'react-redux'; import { RootState, webgalStore } from '@/store/store'; import { setVisibility } from '@/store/GUIReducer'; import { useSEByWebgalStore } from '@/hooks/useSoundEffect'; +import useApplyStyle from '@/hooks/useApplyStyle'; export default function GlobalDialog() { const isGlobalDialogShow = useSelector((state: RootState) => state.GUI.showGlobalDialog); @@ -18,8 +19,38 @@ interface IShowGlobalDialogProps { rightFunc: Function; } +interface IGlobalDialogContentProps { + title: string; + leftText: string; + rightText: string; + onLeft: () => void; + onRight: () => void; +} + +function GlobalDialogContent(props: IGlobalDialogContentProps) { + const applyStyle = useApplyStyle('globalDialog'); + const { playSeEnter } = useSEByWebgalStore(); + return ( +
+
+
+
{props.title}
+
+
+ {props.leftText} +
+
+ {props.rightText} +
+
+
+
+
+ ); +} + export function showGlogalDialog(props: IShowGlobalDialogProps) { - const { playSeClick, playSeEnter } = useSEByWebgalStore(); + const { playSeClick } = useSEByWebgalStore(); webgalStore.dispatch(setVisibility({ component: 'showGlobalDialog', visibility: true })); const handleLeft = () => { playSeClick(); @@ -32,21 +63,13 @@ export function showGlogalDialog(props: IShowGlobalDialogProps) { hideGlobalDialog(); }; const renderElement = ( -
-
-
-
{props.title}
-
-
- {props.leftText} -
-
- {props.rightText} -
-
-
-
-
+ ); setTimeout(() => { // eslint-disable-next-line react/no-deprecated diff --git a/packages/webgal/src/UI/Logo/Logo.tsx b/packages/webgal/src/UI/Logo/Logo.tsx index a1b3eb6b8..c8f13bba8 100644 --- a/packages/webgal/src/UI/Logo/Logo.tsx +++ b/packages/webgal/src/UI/Logo/Logo.tsx @@ -3,6 +3,7 @@ import styles from './logo.module.scss'; import { useSelector } from 'react-redux'; import { RootState } from '@/store/store'; import { useValue } from '@/hooks/useValue'; +import useApplyStyle from '@/hooks/useApplyStyle'; /** * 标识 @@ -12,6 +13,7 @@ const Logo: FC = () => { const GUIState = useSelector((state: RootState) => state.GUI); const logoImage = GUIState.logoImage; const isEnterGame = GUIState.isEnterGame; + const applyStyle = useApplyStyle('logo'); const currentLogoIndex = useValue(-1); const currentTimeOutId = useValue(-1); const animationDuration = 5000; @@ -43,7 +45,11 @@ const Logo: FC = () => {
{ )} {currentLogoUrl !== '' && (
{ const GUIState = useSelector((state: RootState) => state.GUI); + const applyStyle = useApplyStyle('menu'); let currentTag; // let menuBgColor = 'linear-gradient(135deg, rgba(253,251,251,0.95) 0%, rgba(235,237,238,1) 100%)'; switch (GUIState.currentMenuTag) { @@ -33,8 +35,8 @@ const Menu: FC = () => { return ( <> {GUIState.showMenuPanel && ( -
-
{currentTag}
+
+
{currentTag}
)} diff --git a/packages/webgal/src/UI/Menu/MenuPanel/MenuPanel.tsx b/packages/webgal/src/UI/Menu/MenuPanel/MenuPanel.tsx index 85e1100d6..34ae1feb8 100644 --- a/packages/webgal/src/UI/Menu/MenuPanel/MenuPanel.tsx +++ b/packages/webgal/src/UI/Menu/MenuPanel/MenuPanel.tsx @@ -9,6 +9,7 @@ import { backToTitle } from '@/Core/controller/gamePlay/backToTitle'; import useTrans from '@/hooks/useTrans'; import useSoundEffect from '@/hooks/useSoundEffect'; import { showGlogalDialog } from '@/UI/GlobalDialog/GlobalDialog'; +import useApplyStyle from '@/hooks/useApplyStyle'; /** * Menu页的底栏 @@ -19,12 +20,22 @@ export const MenuPanel = () => { const t = useTrans('menu.'); const { playSeClick, playSeDialogOpen, playSePageChange } = useSoundEffect(); + const applyStyle = useApplyStyle('menuPanel'); const GUIState = useSelector((state: RootState) => state.GUI); const dispatch = useDispatch(); // 设置Menu按钮的高亮 - const SaveTagOn = GUIState.currentMenuTag === MenuPanelTag.Save ? ` ${styles.MenuPanel_button_hl}` : ``; - const LoadTagOn = GUIState.currentMenuTag === MenuPanelTag.Load ? ` ${styles.MenuPanel_button_hl}` : ``; - const OptionTagOn = GUIState.currentMenuTag === MenuPanelTag.Option ? ` ${styles.MenuPanel_button_hl}` : ``; + const SaveTagOn = + GUIState.currentMenuTag === MenuPanelTag.Save + ? ` ${applyStyle('MenuPanel_button_hl', styles.MenuPanel_button_hl)}` + : ``; + const LoadTagOn = + GUIState.currentMenuTag === MenuPanelTag.Load + ? ` ${applyStyle('MenuPanel_button_hl', styles.MenuPanel_button_hl)}` + : ``; + const OptionTagOn = + GUIState.currentMenuTag === MenuPanelTag.Option + ? ` ${applyStyle('MenuPanel_button_hl', styles.MenuPanel_button_hl)}` + : ``; // 设置Menu按钮的颜色 const SaveTagColor = GUIState.currentMenuTag === MenuPanelTag.Save ? `rgba(74, 34, 93, 0.9)` : `rgba(123,144,169,1)`; @@ -40,7 +51,7 @@ export const MenuPanel = () => { GUIState.currentMenuTag === MenuPanelTag.Option ? `rgba(81, 110, 65, 0.9)` : `rgba(123,144,169,1)`; return ( -
+
{ const { playSePageChange, playSeEnter } = useSoundEffect(); - let buttonClassName = styles.MenuPanel_button; + const applyStyle = useApplyStyle('menuPanel'); + let buttonClassName = applyStyle('MenuPanel_button', styles.MenuPanel_button); if (props.hasOwnProperty('buttonOnClassName')) { buttonClassName = buttonClassName + props.buttonOnClassName; } @@ -24,7 +26,7 @@ export const MenuPanelButton = (props: IMenuPanel) => { onMouseEnter={playSeEnter} style={{ ...props.style, color: props.tagColor }} > -
+
{props.tagName} diff --git a/packages/webgal/src/UI/Menu/Options/Display/Display.tsx b/packages/webgal/src/UI/Menu/Options/Display/Display.tsx index c11314c29..8c415ee41 100644 --- a/packages/webgal/src/UI/Menu/Options/Display/Display.tsx +++ b/packages/webgal/src/UI/Menu/Options/Display/Display.tsx @@ -10,8 +10,10 @@ import { textSize } from '@/store/userDataInterface'; import { setOptionData } from '@/store/userDataReducer'; import { useDispatch, useSelector } from 'react-redux'; import { OptionSlider } from '../OptionSlider'; +import useApplyStyle from '@/hooks/useApplyStyle'; export function Display() { + const applyStyle = useApplyStyle('menuOptions'); const userDataState = useSelector((state: RootState) => state.userData); const dispatch = useDispatch(); const t = useTrans('menu.options.pages.display.options.'); @@ -27,7 +29,7 @@ export function Display() { : 0; return ( -
+
{isFullscreenSupported && ( { const len: number = props.textList.length; const buttonList: Array = []; const { playSeEnter, playSeSwitch } = useSoundEffect(); + const applyStyle = useApplyStyle('menuNormalButton'); for (let i = 0; i < len; i++) { if (i === props.currentChecked) { const t = (
{ playSeSwitch(); props.functionList[i](); @@ -27,7 +29,7 @@ export const NormalButton = (props: INormalButton) => { const t = (
{ playSeSwitch(); props.functionList[i](); diff --git a/packages/webgal/src/UI/Menu/Options/NormalOption.tsx b/packages/webgal/src/UI/Menu/Options/NormalOption.tsx index 02cad9823..e4f9d1eee 100644 --- a/packages/webgal/src/UI/Menu/Options/NormalOption.tsx +++ b/packages/webgal/src/UI/Menu/Options/NormalOption.tsx @@ -1,13 +1,15 @@ import styles from './normalOption.module.scss'; +import useApplyStyle from '@/hooks/useApplyStyle'; export const NormalOption = (props: any) => { + const applyStyle = useApplyStyle('menuNormalOption'); return ( -
+
{/*
{props.title}
*/} {/*
{props.title}
*/} -
{props.title}
+
{props.title}
{props.children} diff --git a/packages/webgal/src/UI/Menu/Options/OptionSlider.tsx b/packages/webgal/src/UI/Menu/Options/OptionSlider.tsx index 17a05235f..8c26a5106 100644 --- a/packages/webgal/src/UI/Menu/Options/OptionSlider.tsx +++ b/packages/webgal/src/UI/Menu/Options/OptionSlider.tsx @@ -2,9 +2,11 @@ import './slider.css'; import { ISlider } from '@/UI/Menu/Options/OptionInterface'; import { useEffect, useState, useRef } from 'react'; import useSoundEffect from '@/hooks/useSoundEffect'; +import useApplyStyle from '@/hooks/useApplyStyle'; export const OptionSlider = (props: ISlider) => { const { playSeEnter } = useSoundEffect(); + const applyStyle = useApplyStyle('menuSlider'); const [currentValue, setCurrentValue] = useState(props.initValue); const [isHovered, setIsHovered] = useState(false); const [isDragging, setIsDragging] = useState(false); @@ -32,7 +34,7 @@ export const OptionSlider = (props: ISlider) => { }; return ( -
+
{ /> {(isHovered || isDragging) && (
{ const { playSeEnter, playSeSwitch } = useSoundEffect(); + const applyStyle = useApplyStyle('menuOptions'); const currentOptionPage = useValue(optionPage.System); useEffect(getStorage, []); function getClassName(page: optionPage) { + const baseClass = applyStyle('Options_page_button', styles.Options_page_button); if (page === currentOptionPage.value) { - return styles.Options_page_button + ' ' + styles.Options_page_button_active; - } else return styles.Options_page_button; + return `${baseClass} ${applyStyle('Options_page_button_active', styles.Options_page_button_active)}`; + } + return baseClass; } const t = useTrans('menu.options.'); return ( -
-
-
-
{t('title')}
+
+
+
+
{t('title')}
-
-
+
+
{ currentOptionPage.set(optionPage.System); @@ -67,7 +71,7 @@ export const Options: FC = () => { {t('pages.sound.title')}
-
+
{currentOptionPage.value === optionPage.Display && } {currentOptionPage.value === optionPage.System && } {currentOptionPage.value === optionPage.Sound && } diff --git a/packages/webgal/src/UI/Menu/Options/Sound/Sound.tsx b/packages/webgal/src/UI/Menu/Options/Sound/Sound.tsx index 99f2898a8..8705a515a 100644 --- a/packages/webgal/src/UI/Menu/Options/Sound/Sound.tsx +++ b/packages/webgal/src/UI/Menu/Options/Sound/Sound.tsx @@ -8,14 +8,16 @@ import { useDispatch, useSelector } from 'react-redux'; import { RootState } from '@/store/store'; import useTrans from '@/hooks/useTrans'; import { voiceOption } from '@/store/userDataInterface'; +import useApplyStyle from '@/hooks/useApplyStyle'; export function Sound() { + const applyStyle = useApplyStyle('menuOptions'); const userDataState = useSelector((state: RootState) => state.userData); const dispatch = useDispatch(); const t = useTrans('menu.options.pages.sound.options.'); return ( -
+
void }) { const t = useTrans('menu.options.pages.system.options.about.'); + const applyStyle = useApplyStyle('menuAbout'); return ( -
-
- +
+
+
-
{t('subTitle')}
-
{t('version')}
-
{__INFO.version}
-
{t('source')}
-
+
{t('subTitle')}
+
{t('version')}
+
{__INFO.version}
+
{t('source')}
+ -
{t('contributors')}
-
+
{t('contributors')}
+ -
{t('website')}
-
+
{t('website')}
+
https://openwebgal.com/ diff --git a/packages/webgal/src/UI/Menu/Options/System/System.tsx b/packages/webgal/src/UI/Menu/Options/System/System.tsx index 00333ee94..90cf33a96 100644 --- a/packages/webgal/src/UI/Menu/Options/System/System.tsx +++ b/packages/webgal/src/UI/Menu/Options/System/System.tsx @@ -20,6 +20,7 @@ import savesReducer, { ISavesData, saveActions } from '@/store/savesReducer'; import { dumpFastSaveToStorage, dumpSavesToStorage } from '@/Core/controller/storage/savesController'; import { OptionSlider } from '@/UI/Menu/Options/OptionSlider'; import { Info } from '@icon-park/react'; +import useApplyStyle from '@/hooks/useApplyStyle'; interface IExportGameData { userData: IUserData; @@ -33,6 +34,7 @@ export function System() { const setLanguage = useLanguage(); const t = useTrans('menu.options.pages.system.options.'); const { playSeDialogOpen } = useSoundEffect(); + const applyStyle = useApplyStyle('menuOptions'); function exportSaves() { const gameData: IExportGameData = { @@ -101,7 +103,7 @@ export function System() { } return ( -
+
{showAbout && } {!showAbout && ( <> @@ -187,7 +189,7 @@ export function System() { currentChecked={2} /> -
+
diff --git a/packages/webgal/src/UI/Menu/Options/TextPreview/TextPreview.tsx b/packages/webgal/src/UI/Menu/Options/TextPreview/TextPreview.tsx index 0a86b672e..ff112170f 100644 --- a/packages/webgal/src/UI/Menu/Options/TextPreview/TextPreview.tsx +++ b/packages/webgal/src/UI/Menu/Options/TextPreview/TextPreview.tsx @@ -8,9 +8,11 @@ import { getTextSize } from '@/UI/getTextSize'; import IMSSTextbox from '@/Stage/TextBox/IMSSTextbox'; import { compileSentence } from '@/Stage/TextBox/TextBox'; import { useState } from 'react'; +import useApplyStyle from '@/hooks/useApplyStyle'; export const TextPreview = (props: any) => { const t = useTrans('menu.options.pages.display.options.'); + const applyStyle = useApplyStyle('menuTextPreview'); const userDataState = useSelector((state: RootState) => state.userData); const stageState = useSelector((state: RootState) => state.stage); const previewBackground = stageState.bgName; @@ -58,13 +60,13 @@ export const TextPreview = (props: any) => { return (
-
+
diff --git a/packages/webgal/src/UI/Menu/SaveAndLoad/Load/Load.tsx b/packages/webgal/src/UI/Menu/SaveAndLoad/Load/Load.tsx index 96fc6efcd..4ed242849 100644 --- a/packages/webgal/src/UI/Menu/SaveAndLoad/Load/Load.tsx +++ b/packages/webgal/src/UI/Menu/SaveAndLoad/Load/Load.tsx @@ -11,17 +11,24 @@ import { useTranslation } from 'react-i18next'; import useSoundEffect from '@/hooks/useSoundEffect'; import { getSavesFromStorage } from '@/Core/controller/storage/savesController'; import { easyCompile } from '@/UI/Menu/SaveAndLoad/Save/Save'; +import useApplyStyle from '@/hooks/useApplyStyle'; export const Load: FC = () => { const { playSeClick, playSeEnter, playSePageChange } = useSoundEffect(); + const applyStyle = useApplyStyle('menuSaveAndLoad'); const userDataState = useSelector((state: RootState) => state.userData); const saveDataState = useSelector((state: RootState) => state.saveData); const dispatch = useDispatch(); const page = []; for (let i = 1; i <= 20; i++) { - let classNameOfElement = styles.Save_Load_top_button + ' ' + styles.Load_top_button; + let classNameOfElement = `${applyStyle('Save_Load_top_button', styles.Save_Load_top_button)} ${applyStyle('Load_top_button', styles.Load_top_button)}`; if (i === userDataState.optionData.slPage) { - classNameOfElement = classNameOfElement + ' ' + styles.Save_Load_top_button_on + ' ' + styles.Load_top_button_on; + classNameOfElement = + classNameOfElement + + ' ' + + applyStyle('Save_Load_top_button_on', styles.Save_Load_top_button_on) + + ' ' + + applyStyle('Load_top_button_on', styles.Load_top_button_on); } const element = (
{ key={'Load_element_page' + i} className={classNameOfElement} > -
{i}
+
{i}
); page.push(element); @@ -59,20 +66,34 @@ export const Load: FC = () => { const speakerView = easyCompile(speaker); saveElementContent = ( <> -
-
+
+
{saveData.index}
-
+
{saveData.saveTime}
-
- Save_img_preview +
+ Save_img_preview
-
-
{speakerView}
-
{easyCompile(saveData.nowStageState.showText)}
+
+
+ {speakerView} +
+
+ {easyCompile(saveData.nowStageState.showText)} +
); @@ -88,7 +109,7 @@ export const Load: FC = () => { }} onMouseEnter={playSeEnter} key={'loadElement_' + i} - className={styles.Save_Load_content_element} + className={applyStyle('Save_Load_content_element', styles.Save_Load_content_element)} style={{ animationDelay: `${animationIndex * 30}ms` }} > {saveElementContent} @@ -100,14 +121,17 @@ export const Load: FC = () => { const t = useTrans('menu.'); return ( -
-
-
-
{t('loadSaving.title')}
+
+
+
+
{t('loadSaving.title')}
-
{page}
+
{page}
-
+
{showSaves}
diff --git a/packages/webgal/src/UI/Menu/SaveAndLoad/Save/Save.tsx b/packages/webgal/src/UI/Menu/SaveAndLoad/Save/Save.tsx index d084a7c05..3c497a3d9 100644 --- a/packages/webgal/src/UI/Menu/SaveAndLoad/Save/Save.tsx +++ b/packages/webgal/src/UI/Menu/SaveAndLoad/Save/Save.tsx @@ -11,17 +11,19 @@ import useSoundEffect from '@/hooks/useSoundEffect'; import { getSavesFromStorage } from '@/Core/controller/storage/savesController'; import { compileSentence } from '@/Stage/TextBox/TextBox'; import { mergeStringsAndKeepObjects } from '@/UI/Backlog/Backlog'; +import useApplyStyle from '@/hooks/useApplyStyle'; export const Save: FC = () => { const { playSePageChange, playSeEnter, playSeDialogOpen } = useSoundEffect(); + const applyStyle = useApplyStyle('menuSaveAndLoad'); const userDataState = useSelector((state: RootState) => state.userData); const savesDataState = useSelector((state: RootState) => state.saveData); const dispatch = useDispatch(); const page = []; for (let i = 1; i <= 20; i++) { - let classNameOfElement = styles.Save_Load_top_button; + let classNameOfElement = applyStyle('Save_Load_top_button', styles.Save_Load_top_button); if (i === userDataState.optionData.slPage) { - classNameOfElement = classNameOfElement + ' ' + styles.Save_Load_top_button_on; + classNameOfElement = classNameOfElement + ' ' + applyStyle('Save_Load_top_button_on', styles.Save_Load_top_button_on); } const element = (
{ key={'Save_element_page' + i} className={classNameOfElement} > -
{i}
+
{i}
); page.push(element); @@ -61,16 +63,28 @@ export const Save: FC = () => { const speakerView = easyCompile(speaker); saveElementContent = ( <> -
-
{saveData.index}
-
{saveData.saveTime}
+
+
+ {saveData.index} +
+
+ {saveData.saveTime} +
-
- Save_img_preview +
+ Save_img_preview
-
-
{speakerView}
-
{easyCompile(saveData.nowStageState.showText)}
+
+
+ {speakerView} +
+
+ {easyCompile(saveData.nowStageState.showText)} +
); @@ -100,7 +114,7 @@ export const Save: FC = () => { }} onMouseEnter={playSeEnter} key={'saveElement_' + i} - className={styles.Save_Load_content_element} + className={applyStyle('Save_Load_content_element', styles.Save_Load_content_element)} style={{ animationDelay: `${animationIndex * 30}ms` }} > {saveElementContent} @@ -112,14 +126,17 @@ export const Save: FC = () => { const t = useTrans('menu.'); return ( -
-
-
-
{t('saving.title')}
+
+
+
+
{t('saving.title')}
-
{page}
+
{page}
-
+
{showSaves}
diff --git a/packages/webgal/src/UI/PanicOverlay/PanicOverlay.tsx b/packages/webgal/src/UI/PanicOverlay/PanicOverlay.tsx index 168e5e445..a73d0bfa5 100644 --- a/packages/webgal/src/UI/PanicOverlay/PanicOverlay.tsx +++ b/packages/webgal/src/UI/PanicOverlay/PanicOverlay.tsx @@ -4,10 +4,12 @@ import { useSelector } from 'react-redux'; import { RootState } from '@/store/store'; import PanicYoozle from './PanicYoozle/PanicYoozle'; import styles from './panicOverlay.module.scss'; +import useApplyStyle from '@/hooks/useApplyStyle'; export default function PanicOverlay() { const GUIStore = useSelector((state: RootState) => state.GUI); const [showOverlay, setShowOverlay] = useState(false); + const applyStyle = useApplyStyle('panicOverlay'); const globalVars = useSelector((state: RootState) => state.userData.globalGameVar); const panic = globalVars['Show_panic']; const hidePanic = panic === false; @@ -16,7 +18,9 @@ export default function PanicOverlay() { setShowOverlay(isShowOverlay); }, [GUIStore.showPanicOverlay, hidePanic]); return ReactDOM.createPortal( -
{showOverlay && }
, +
+ {showOverlay && } +
, document.querySelector('#html-body__panic-overlay')!, ); } diff --git a/packages/webgal/src/UI/PanicOverlay/PanicYoozle/PanicYoozle.tsx b/packages/webgal/src/UI/PanicOverlay/PanicYoozle/PanicYoozle.tsx index 988555e30..d8980c0c6 100644 --- a/packages/webgal/src/UI/PanicOverlay/PanicYoozle/PanicYoozle.tsx +++ b/packages/webgal/src/UI/PanicOverlay/PanicYoozle/PanicYoozle.tsx @@ -17,11 +17,15 @@ export default function PanicYoozle() { W - e + e b g - a - l + + a + + l