chore: 乞讨~

src/App.tsx

@@ -15,6 +15,7 @@ import { PersonalInfo } from './components/PersonalInfo';
 import { Info } from './components/Info';
 const ThemeChanger = React.lazy(() => import('./components/ThemeChanger'));
 const ConfigDialog = React.lazy(() => import('./components/ConfigDialog'));
+const WxQrCode = React.lazy(() => import('./components/WxQrCode'));
 
 // 读取缓存关卡得分
 const initLevel = Number(localStorage.getItem(LAST_LEVEL_STORAGE_KEY) || '1');
@@ -74,7 +75,10 @@ const App: FC<{ theme: Theme<any> }> = ({ theme: initTheme }) => {
                 initTime={initTime}
             />
             <PersonalInfo />
-            <div className={'flex-spacer'} />
+            <div className={'flex-spacer'} style={{ minHeight: 52 }} />
+            <Suspense fallback={<span>Loading</span>}>
+                {!__DIY__ && <WxQrCode />}
+            </Suspense>
             {!__DIY__ && (
                 <p
                     style={{

src/components/CloseIcon.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+
+export const CloseIcon: FC<{ fill: string }> = ({ fill }) => {
+    return (
+        <svg
+            width="13"
+            height="14"
+            viewBox="0 0 13 14"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M4.9498 7.04945L0 11.9993L1.41421 13.4135L6.36401 8.46367L11.3138 13.4135L12.728 11.9993L7.77823 7.04945L12.7279 2.09976L11.3137 0.685547L6.36401 5.63524L1.41432 0.685547L0.0001055 2.09976L4.9498 7.04945Z"
+                fill={fill}
+            />
+        </svg>
+    );
+};

src/components/FixedAnimateScalePanel.tsx

@@ -1,6 +1,7 @@
 import React, { FC, ReactNode, useState } from 'react';
 import style from './FixedAnimateScalePanel.module.scss';
 import classNames from 'classnames';
+import { CloseIcon } from './CloseIcon';
 
 export const FixedAnimateScalePanel: FC<{
     children: ReactNode;
@@ -28,20 +29,7 @@ export const FixedAnimateScalePanel: FC<{
         >
             {children}
             <div className={style.closeBtn} onClick={() => setOpen(false)}>
-                <svg
+                <CloseIcon fill={'#888'} />
-                    width="13"
-                    height="14"
-                    viewBox="0 0 13 14"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <path
-                        fillRule="evenodd"
-                        clipRule="evenodd"
-                        d="M4.9498 7.04945L0 11.9993L1.41421 13.4135L6.36401 8.46367L11.3138 13.4135L12.728 11.9993L7.77823 7.04945L12.7279 2.09976L11.3137 0.685547L6.36401 5.63524L1.41432 0.685547L0.0001055 2.09976L4.9498 7.04945Z"
-                        fill="#888888"
-                    />
-                </svg>
             </div>
         </div>
     );

src/components/Game.scss

@@ -107,7 +107,8 @@
 .level {
     font-size: 1.5em;
     font-weight: 900;
-    line-height: 2;
+    line-height: 1.4;
+    padding: 12px 0;
     text-shadow: 4px 6px 2px rgb(0 0 0 / 20%);
     font-family: Menlo, Monaco, 'Courier New', monospace, serif;
 }

src/components/ThemeChanger.module.scss

@@ -45,7 +45,7 @@
         }
     }
 
-    .diy{
+    .diy {
         width: 52px;
         font-weight: 900;
         font-size: 18px;
@@ -68,3 +68,26 @@
         }
     }
 }
+
+.adv {
+    position: fixed;
+    right: 8px;
+    bottom: 8px;
+    transition: 0.5s;
+    height: 250px;
+    backdrop-filter: blur(10px);
+    border-radius: 8px;
+    background-color: rgb(0 0 0 / 30%);
+    transform-origin: right bottom;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 8px;
+
+    @media screen and (max-width: 500px) {
+        width: calc(100vw - 16px);
+    }
+    @media screen and (min-width: 501px) {
+        width: 500px;
+    }
+}

src/components/ThemeChanger.tsx

@@ -7,6 +7,7 @@ import { ikunTheme } from '../themes/ikun';
 import { pddTheme } from '../themes/pdd';
 import { getDefaultTheme } from '../themes/default';
 import { Theme } from '../themes/interface';
+import WxQrCode from './WxQrCode';
 
 const BuiltinThemes = [
     getDefaultTheme(),
@@ -22,6 +23,7 @@ const ThemeChanger: FC<{
 }> = ({ changeTheme, onDiyClick }) => {
     const [open, setOpen] = useState(false);
     return (
+        <>
             <div className={classNames(style.container, open && style.open)}>
                 {BuiltinThemes.map((theme, idx) => (
                     <div
@@ -66,6 +68,7 @@ const ThemeChanger: FC<{
                 >
                     {open ? '点我整活' : 'DIY!'}
                 </div>
+
                 <div
                     onClick={() => setOpen(!open)}
                     className={classNames(style.square)}
@@ -73,6 +76,18 @@ const ThemeChanger: FC<{
                     {open ? '收起' : '更多'}
                 </div>
             </div>
+            <div
+                className={style.adv}
+                style={{
+                    opacity: open ? 1 : 0.3,
+                    transform: open
+                        ? `translateY(-400px) scale(1)`
+                        : 'translateY(0) scale(0)',
+                }}
+            >
+                <WxQrCode />
+            </div>
+        </>
     );
 };
 

src/components/WxQrCode.module.scss

@@ -0,0 +1,63 @@
+.wxQrCode {
+    &Container {
+        display: flex;
+        gap: 16px;
+        flex-wrap: wrap;
+        padding: 12px;
+        border-radius: 12px;
+        border: 1px solid currentcolor;
+    }
+
+    &Title {
+        opacity: 0.8;
+        width: 100%;
+    }
+
+    &Item {
+        display: flex;
+        flex: 1 1 0;
+        gap: 12px;
+        flex-direction: column;
+        align-items: center;
+        transition: 0.3s;
+
+        &Title {
+            font-weight: 600;
+            font-size: 16px;
+        }
+
+        &Image {
+            width: 100%;
+            transition: 0.3s;
+            cursor: pointer;
+            z-index: 1;
+            transform-origin: bottom;
+
+            &:hover {
+                z-index: 10;
+                transform: scale(1.1);
+                box-shadow: 0 19px 38px rgb(0 0 0 / 30%),
+                    0 15px 12px rgb(0 0 0 / 22%);
+            }
+        }
+
+        &.fullScreen .wxQrCodeItemImage {
+            z-index: 10;
+            transform: scale(3);
+            box-shadow: 0 19px 38px rgb(0 0 0 / 30%),
+                0 15px 12px rgb(0 0 0 / 22%);
+        }
+
+        &:nth-child(2).fullScreen .wxQrCodeItemImage {
+            transform-origin: left bottom;
+        }
+
+        &:nth-child(3).fullScreen .wxQrCodeItemImage {
+            transform-origin: center bottom;
+        }
+
+        &:nth-child(4).fullScreen .wxQrCodeItemImage {
+            transform-origin: right bottom;
+        }
+    }
+}

src/components/WxQrCode.tsx

@@ -0,0 +1,54 @@
+import React, { FC, useState } from 'react';
+import style from './WxQrCode.module.scss';
+import classNames from 'classnames';
+const WxQrCode: FC<{ title?: string }> = ({
+    title = '【广告位招租中】同时如果您喜欢这个项目的话，可以点击扫描下方收款码分摊后台相关费用，感谢~😘',
+}) => {
+    const [fullScreen, setFullScreen] = useState<Record<number, boolean>>({
+        0: false,
+        1: false,
+        2: false,
+    });
+    const onImageClick = (idx: number) => {
+        setFullScreen({
+            0: false,
+            1: false,
+            2: false,
+            [idx]: !fullScreen[idx],
+        });
+        const clickListener: EventListener = (e) => {
+            // @ts-ignore
+            if (e.target?.className !== style.wxQrCodeItemImage) {
+                setFullScreen({ 0: false, 1: false, 2: false });
+            }
+            window.removeEventListener('click', clickListener);
+        };
+        setTimeout(() => {
+            window.addEventListener('click', clickListener);
+        });
+    };
+    return (
+        <div className={style.wxQrCodeContainer}>
+            <div className={style.wxQrCodeTitle}>{title}</div>
+            {[1, 5, 8].map((num, idx) => (
+                <div
+                    key={num}
+                    className={classNames(
+                        style.wxQrCodeItem,
+                        fullScreen[idx] && style.fullScreen
+                    )}
+                >
+                    <span className={style.wxQrCodeItemTitle}>￥ {num}</span>
+                    <img
+                        alt={''}
+                        src={`/wxQrCode${num}.jpg`}
+                        className={style.wxQrCodeItemImage}
+                        onClick={() => onImageClick(idx)}
+                    />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default WxQrCode;

src/utils.ts

@@ -5,6 +5,7 @@ export const LAST_LEVEL_STORAGE_KEY = 'lastLevel';
 export const LAST_SCORE_STORAGE_KEY = 'lastScore';
 export const LAST_TIME_STORAGE_KEY = 'lastTime';
 export const LAST_UPLOAD_TIME_STORAGE_KEY = 'lastUploadTime';
+export const CUSTOM_THEME_STORAGE_KEY = 'customTheme';
 export const DEFAULT_BGM_STORAGE_KEY = 'defaultBgm';
 export const DEFAULT_TRIPLE_SOUND_STORAGE_KEY = 'defaultTripleSound';
 export const DEFAULT_CLICK_SOUND_STORAGE_KEY = 'defaultClickSound';