v0.1.0

components/extraReact.ts

@@ -0,0 +1,6 @@
+export function useClassState<S>(
+    useState: [S, React.Dispatch<React.SetStateAction<S>>]
+): [S, (newState: Partial<S>) => void] {
+    const setState = (newState: Partial<S>) => useState[1]((preState) => ({ ...preState, ...newState }));
+    return [useState[0], setState];
+}

components/main.tsx

@@ -25,7 +25,7 @@ function MTBarLink({ type }: { type: string }) {
     );
 }
 
-export default function MainNode({ children }: { children: JSX.Element | JSX.Element[] }) {
+export default function MainNode({ children }: { children: React.ReactNode }) {
     return (
         <div id={styles.main}>
             <div id={styles.MTStart}>

components/randomId.ts

@@ -0,0 +1,3 @@
+export default function randomId() {
+    return Math.random().toString(16).slice(2);
+}

components/repeat.tsx

@@ -0,0 +1,15 @@
+interface RepeatProps<T> {
+    variable: T,
+    repeat: number,
+    func: (variable: T) => T,
+    components: (variable: T) => React.ReactNode,
+}
+
+export default function Repeat<T>({ variable, repeat, func, components }: RepeatProps<T>) {
+    const array = new Array(repeat).fill(null);
+    array.forEach((_, i) => {
+        array[i] = components(variable);
+        variable = func(variable);
+    });
+    return <>{array}</>;
+}

components/student.tsx

@@ -0,0 +1,32 @@
+import ItemStyles from '@/styles/Item.module.scss';
+import { studentsJson } from './students/students';
+import { getStudentInfo } from './students/infoStudents';
+
+interface StudentProps {
+    id: number,
+    allInfo: studentsJson,
+    onClick: React.MouseEventHandler<HTMLDivElement>,
+    select: boolean,
+    onError: (id: number) => void,
+}
+
+export default function Student({ id, allInfo, onClick, select, onError }: StudentProps) {
+    const info = getStudentInfo(allInfo, id);
+    return (
+        <div onClick={onClick} style={{ backgroundColor: select ? '#dce5ec' : '#f3f7f8' }} title={`id:${id}`}>
+            <div className={ItemStyles.img}>
+                <img
+                    className={ItemStyles.col}
+                    src={`https://schale.gg/images/student/collection/${info.schale?.CollectionTexture}.webp`}
+                    alt={`${info.schale?.Name} collection image`}
+                    onError={_ => onError(id)}
+                />
+            </div>
+            <div className={ItemStyles.p}>
+                <p className={ItemStyles.name}>{info.schale?.Name}</p>
+                <p className={ItemStyles.info}>{info.file?.info}</p>
+            </div>
+            <div className={ItemStyles.line} />
+        </div>
+    );
+}

components/window.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import Repeat from "./repeat";
+import { useClassState } from './extraReact';
+import randomId from "./randomId";
+
+interface WindowProps<C> {
+    /**标题 */
+    title: string;
+    /**关闭窗口时调用的函数 */
+    closeWindow: () => C;
+    /**窗口渲染的元素 */
+    element: (closeWindow: () => C) => React.ReactNode;
+    /**窗口zIndex */
+    zIndex: number;
+    /**窗口是否显示 */
+    display: boolean;
+}
+
+interface WindowTypeAll {
+    name: string,
+    id: string,
+    display: boolean,
+    arg: any
+}
+
+type WindowTypeComArg<A> = (
+    zIndex: number,
+    id: string,
+    display: boolean,
+    arg: A,
+    all: AllWindow['all']
+) => React.ReactNode;
+
+export interface AllWindow {
+    all?: WindowTypeAll[];
+    component?: {
+        [x: string]: WindowTypeComArg<any>
+    };
+}
+
+export default class Window<A> {
+    name: string;
+
+    constructor(name: string) {
+        this.name = name;
+    }
+
+    Component<C>({ closeWindow, element, zIndex, display, title }: WindowProps<C>) {
+        return (<>
+            {display && (
+                <div className='ask' style={{ zIndex }}>
+                    <div className='up'>
+                        <h2>{title}</h2>
+                        <p onClick={_ => closeWindow()}>x</p>
+                    </div>
+                    <div
+                        className='element'
+                        children={element(closeWindow)}
+                    />
+                </div>
+            )}
+        </>);
+    }
+}
+
+export function AllWindows({ zIndex, allWindow }: {
+    zIndex: number,
+    allWindow: AllWindow
+}) {
+    if (allWindow.all?.length !== 0)
+        return (<>
+            <Repeat
+                variable={0}
+                repeat={allWindow.all?.length || 0}
+                func={v => v + 1}
+                components={v => {
+                    if (allWindow.component && allWindow.all)
+                        return (
+                            <React.Fragment key={allWindow.all[v].id}>
+                                <div className='back' style={{ zIndex: zIndex + (2 * v) }} />
+                                {allWindow.component[allWindow.all[v].name](
+                                    zIndex + 1 + (2 * v),
+                                    allWindow.all[v].id,
+                                    allWindow.all[v].display,
+                                    allWindow.all[v].arg,
+                                    allWindow.all
+                                )}
+                            </React.Fragment>
+                        );
+                }}
+            />
+        </>);
+    return null;
+}
+
+export function getWindowFun(
+    useState: [AllWindow, React.Dispatch<React.SetStateAction<AllWindow>>]
+) {
+    const [allWindow, setAllWindow] = useClassState(useState);
+    function addNewWindow<A>(
+        window: Window<A>,
+        Component: WindowTypeComArg<A>
+    ) {
+        let component = allWindow.component || {};
+        component[window.name] = Component;
+        return setAllWindow({ component });
+    };
+    function openWindow<A>(all: AllWindow['all'], window: Window<A>, arg: A) {
+        const { name } = window;
+        all?.push({ name, id: randomId(), display: true, arg });
+        setAllWindow({ all });
+    };
+    const closeWindow = (all: AllWindow['all'], id: string) => {
+        all = all?.filter(v => v.id !== id);
+        setAllWindow({ all });
+    };
+    return { allWindow, setAllWindow, addNewWindow, openWindow, closeWindow };
+}

pages/_document.tsx

@@ -2,7 +2,7 @@ import { Html, Head, Main, NextScript } from 'next/document'
 
 export default function Document() {
     return (
-        <Html>
+        <Html lang='zh-CN'>
             <Head>
                 <link rel="icon" href="/api/icon" />
             </Head>