update adaptive ui

Author: Hardy--Lee

packages/webgal/src/Core/controller/storage/saveGame.ts

@@ -36,9 +36,11 @@ export function generateCurrentStageData(index: number, isSavePreviewImage = tru
     const canvas: HTMLCanvasElement = document.getElementById('pixiCanvas')! as HTMLCanvasElement;
     const canvas2 = document.createElement('canvas');
     const context = canvas2.getContext('2d');
-    canvas2.width = 480;
-    canvas2.height = 270;
-    context!.drawImage(canvas, 0, 0, 480, 270);
+    const previewImageWidth = WebGAL.canvasWidth * 0.2;
+    const previewImageHeight = WebGAL.canvasHeight * 0.2;
+    canvas2.width = previewImageWidth;
+    canvas2.height = previewImageHeight;
+    context!.drawImage(canvas, 0, 0, previewImageWidth, previewImageHeight);
     urlToSave = canvas2.toDataURL('image/webp', 0.5);
     canvas2.remove();
   }

packages/webgal/src/UI/Backlog/backlog.module.scss

@@ -1,3 +1,5 @@
+@import "../Utils/constants.scss";
+
 .Backlog_main {
   font-family: "思源宋体", serif;
   position: absolute;
@@ -9,6 +11,7 @@
   padding: 2em 0 2em 0;
   animation: backlog_soft_in 0.7s ease-out forwards;
   box-sizing: border-box;
+  justify-items: center;
 }
 
 .Backlog_main_out {
@@ -22,6 +25,7 @@
   padding: 2em 0 2em 0;
   animation: backlog_soft_out 0.7s ease-out forwards;
   box-sizing: border-box;
+  justify-items: center;
 }
 
 // 把z-index置为负数 不然会挡住点击层
@@ -39,6 +43,8 @@
   padding: 0 0 0 1em;
   display: flex;
   height: 10%;
+  width: 100%;
+  max-width: $defaultScreenWidth;
 }
 
 .backlog_top_icon {
@@ -74,9 +80,10 @@
 }
 
 .backlog_content {
-  position: absolute;
+  position: relative;
+  max-width: $defaultScreenHeight;
   height: 80%;
-  padding: 1em 10em 1em 10em;
+  padding: 1em 5em 1em 5em;
   overflow: auto;
   display: flex;
   flex-flow: column-reverse;

packages/webgal/src/UI/BottomControlPanel/BottomControlPanel.tsx

@@ -31,6 +31,7 @@ import { showGlogalDialog, switchControls } from '@/UI/GlobalDialog/GlobalDialog
 import { useEffect } from 'react';
 import { getSavesFromStorage } from '@/Core/controller/storage/savesController';
 import { easyCompile } from '@/UI/Menu/SaveAndLoad/Save/Save';
+import { HorizontalScroll } from '@/UI/Utils/HorizontalScroll';
 
 export const BottomControlPanel = () => {
   const t = useTrans('gaming.');
@@ -66,7 +67,7 @@ export const BottomControlPanel = () => {
     fastSlPreview = (
       <div className={styles.slPreviewMain}>
         <div className={styles.imgContainer}>
-          <img style={{ height: '100%' }} alt="q-save-preview image" src={data.previewImage} />
+          <img className={styles.previewImg} alt="q-save-preview image" src={data.previewImage} />
         </div>
         <div className={styles.textContainer}>
           <div>{easyCompile(data.nowStageState.showName)}</div>
@@ -80,7 +81,8 @@ export const BottomControlPanel = () => {
     // <div className={styles.ToCenter}>
     <>
       {GUIStore.showTextBox && stageState.enableFilm === '' && (
-        <div className={styles.main} style={{ visibility: GUIStore.controlsVisibility ? 'visible' : 'hidden' }}>
+        <HorizontalScroll className={styles.main} style={{ visibility: GUIStore.controlsVisibility ? 'visible' : 'hidden' }}>
+          <div style={{flexGrow: 1}}/>
           {GUIStore.showTextBox && (
             <span
               className={styles.singleButton}
@@ -313,7 +315,7 @@ export const BottomControlPanel = () => {
               <Unlock className={styles.button} theme="outline" size={size} fill="#f5f5f7" strokeWidth={strokeWidth} />
             )}
           </span>
-        </div>
+        </HorizontalScroll>
       )}
     </>
     // </div>

packages/webgal/src/UI/BottomControlPanel/bottomControlPanel.module.scss

@@ -16,18 +16,17 @@
   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;
+  left: 20px;
   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%;
+  align-items: end;
+  overflow-x: auto;
+  scrollbar-width: none;
 }
 
 .button {
@@ -49,11 +48,12 @@
   height: 100%;
   display: inline-block;
   font-size: 150%;
-  padding: 0.25em 0.3em 0 0.15em;
+  padding: 0.2em 0.3em 0.0em 0.3em;
   transition: background-color 0.5s;
   background: rgba(255, 255, 255, 0.3);
   border-radius: 4px;
   margin: 0 0.1em 0 0.1em;
+  flex-shrink: 0;
 }
 
 .singleButton {
@@ -62,16 +62,19 @@
   display: inline-block;
   color: white;
   font-size: 150%;
-  padding: 0.3em 0.3em 0 0.15em;
+  padding: 0.2em 0.3em 0.0em 0.3em;
   transition: background-color 0.5s;
   cursor: pointer;
   border-radius: 4px;
   margin: 0 0.1em 0 0.1em;
   position: relative;
+  flex-shrink: 0;
 }
 
 .singleButton:hover {
   background-color: rgba(255, 255, 255, 0.3);
+  // 此处是为了让快速读存档弹窗不被裁剪
+  margin-top: 300px;
 }
 
 .fastSlPreview {
@@ -115,11 +118,21 @@
 
 .imgContainer {
   display: flex;
-  overflow: hidden;
+  // overflow: hidden;
   border-radius: 5px;
   //outline: 4px solid #005caf;
   flex-shrink: 0;
   height: 100%;
+  aspect-ratio: 16/9;
+}
+
+.previewImg {
+  width: 100%;
+  height: 100%;
+  // aspect-ratio: 4/3;
+  // height: 100%;
+  object-fit: cover;
+  // height: 200%;
 }
 
 .textContainer {

packages/webgal/src/UI/Extra/ExtraBgm.tsx

@@ -19,7 +19,6 @@ export function ExtraBgm() {
   let foundCurrentBgmName = initName;
   let foundCurrentBgmIndex = -1;
   const iconSize = 39;
-  const bgmPlayerHeight = isShowBgmList.value ? '80%' : '10%';
   const bgmListLen = extraState.bgm.length;
   extraState.bgm.forEach((e, i) => {
     if (e.url === currentBgmSrc) {
@@ -63,7 +62,7 @@ export function ExtraBgm() {
     );
   });
   return (
-    <div className={styles.bgmContainer} style={{ maxHeight: bgmPlayerHeight }}>
+    <div className={styles.bgmContainer}>
       <div className={styles.bgmPlayerMain}>
         <div
           onClick={() => {

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 HorizontalScroll from '@/UI//Utils/HorizontalScroll';
 
 export function ExtraCg() {
   const cgPerPage = 8;
@@ -63,7 +64,7 @@ export function ExtraCg() {
   return (
     <div className={styles.cgMain}>
       <div className={styles.cgShowDiv}>
-        <div className={styles.cgShowDivWarpper}>{showNav}</div>
+        <HorizontalScroll className={styles.cgShowDivWarpper}>{showNav}</HorizontalScroll>
       </div>
       <div className={styles.cgContainer}>{showCgList}</div>
     </div>

packages/webgal/src/UI/Extra/ExtraCgElement.tsx

@@ -45,14 +45,9 @@ export function ExtraCgElement(props: IProps) {
       );
     } else if (isImage) {
       return (
-        <div
-          style={{
-            backgroundImage: `url('${props.resourceUrl}')`,
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-            width: '100%',
-            height: '100%',
-          }}
+        <img
+          className={styles.cgImage}
+          src = {props.resourceUrl}
         />
       );
     } else {

packages/webgal/src/UI/Extra/extra.module.scss

@@ -1,3 +1,5 @@
+@import "../Utils/constants.scss";
+
 .extra {
   width: 100%;
   height: 100%;
@@ -8,12 +10,14 @@
   background-image: linear-gradient(135deg, #93a5cf 0%, #e4efe9 100%);;
   padding: 2em 2em 2em 2em;
   box-sizing: border-box;
+  justify-items: center;
 }
 
 .extra_top {
   padding: 0 0 0 0;
   display: flex;
-  height: 10%;
+  width: 100%;
+  max-width: $defaultScreenWidth;
 }
 
 .extra_top_icon {
@@ -51,10 +55,11 @@
 
 .mainContainer {
   box-sizing: border-box;
-  padding: 0 2em 0 2em;
   display: flex;
-  height: 92%;
+  width: 100%;
   flex-flow: column;
+  max-width: $defaultScreenWidth;
+  align-items: center;
 }
 
 .bgmContainer {
@@ -63,8 +68,11 @@
   bottom: 30px;
   position: absolute;
   overflow: auto;
-  //width: 100%;
+  width: 93%;
   //height: 70%;
+  max-width: $defaultScreenWidth;
+  max-height: 70%;
+  justify-self: center;
   box-sizing: border-box;
   display: flex;
   flex-flow: column-reverse;
@@ -89,7 +97,7 @@
   align-items: flex-start;
   margin: 0 0 15px 0;
   flex-wrap: wrap;
-  overflow: auto;
+  overflow-y: auto;
 }
 
 .bgmPlayerMain {
@@ -166,31 +174,39 @@
   width: 100%;
   display: flex;
   flex-wrap: wrap;
-  justify-content: flex-start;
+  justify-content: center;
   align-items: flex-start;
   align-content: flex-start;
-  height: 90%;
+  // height: 90%;
   box-sizing: border-box;
-  padding: 4em 0 0 2em;
+  padding: 4em 2em 4em 2em;
+  height: 1000px;
+  overflow-y: auto;
 }
 
 .cgElement {
-  width: 22.5%;
-  height: 37.5%;
+  height: 300px;
+  width: auto;
   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;
+  margin: 1.5em 1em 1.5em 1em;
   animation-delay: 100ms;
   z-index: 1;
-  position: relative;
+  position: initial;
   cursor: pointer;
 }
 
+.cgImage {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
 .cgShowDiv {
-  height: 8%;
+  // height: 8%;
   width: 100%;
   display: flex;
   flex-flow: row;
@@ -201,11 +217,13 @@
 .cgShowDivWarpper {
   display: flex;
   flex-flow: row;
-  justify-content: center;
+  // justify-content: center;
   align-items: flex-end;
   //background: rgba(255, 255, 255, 0.35);
   border-radius: 7px;
   padding: 12px 15px;
+  overflow-x: auto;
+  // scrollbar-width: none;
 }
 
 .cgNav {
@@ -247,16 +265,14 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.1);
+  background: rgba(0, 0, 0, 0.5);
   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);

packages/webgal/src/UI/GlobalDialog/globalDialog.module.scss

@@ -32,7 +32,6 @@
 }
 
 .glabalDialog_container {
-  height: 20%;
   width: 100%;
   border-top: 4px solid;
   border-bottom: 4px solid;

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 HorizontalScroll from '@/UI/Utils/HorizontalScroll';
 
 /**
  * Menu页的底栏
@@ -40,7 +41,7 @@ export const MenuPanel = () => {
     GUIState.currentMenuTag === MenuPanelTag.Option ? `rgba(81, 110, 65, 0.9)` : `rgba(123,144,169,1)`;
 
   return (
-    <div className={styles.MenuPanel_main}>
+    <HorizontalScroll className={styles.MenuPanel_main}>
       <MenuPanelButton
         iconName="save"
         buttonOnClassName={SaveTagOn}
@@ -111,6 +112,6 @@ export const MenuPanel = () => {
         tagName={t('exit.title')}
         key="exitIcon"
       />
-    </div>
+    </HorizontalScroll>
   );
 };