chat

Slouchwind · Mar 19, 2023 · f1be7e0 · f1be7e0 · vercel · Mar 19, 2023
1 parent fe10279
commit f1be7e0
Show file tree

Hide file tree

Showing 13 changed files with 495 additions and 124 deletions.
diff --git a/components/main.tsx b/components/main.tsx
@@ -25,7 +25,7 @@ function MTBarLink({ type }: { type: string }) {
     );
 }
 
-export default function MainNode({ children }: { children: JSX.Element }) {
+export default function MainNode({ children }: { children: JSX.Element | JSX.Element[] }) {
     return (
         <div id={styles.main}>
             <div id={styles.MTStart}>

diff --git a/components/students/chatStudents.ts b/components/students/chatStudents.ts
@@ -0,0 +1,13 @@
+import { fileInfo, schaleInfo, studentsJson, studentInfo } from './students';
+
+export async function getStudentJson(): Promise<studentsJson> {
+    const studentsJson: fileInfo[] = await fetch('../students.json').then(r => r.json());
+    const schaleJson: schaleInfo[] = await fetch('https://schale.gg/data/cn/students.min.json?v=102').then(r => r.json());
+    return { fileJson: studentsJson, schaleJson };
+}
+
+export function getStudentInfo({ fileJson: studentsJson, schaleJson }: studentsJson, studentId: number): studentInfo {
+    const json = studentsJson && studentsJson.filter(info => (info.id === studentId))[0];
+    const schale = schaleJson && schaleJson.filter(info => (info.Id === studentId))[0];
+    return { file: json, schale };
+}
diff --git a/components/students/infoStudents.ts b/components/students/infoStudents.ts
@@ -0,0 +1,13 @@
+import { fileInfo, schaleInfo, studentsJson, studentInfo } from './students';
+
+export async function getStudentsJson(): Promise<studentsJson> {
+    const fileJson: fileInfo[] = await fetch('../students.json').then(r => r.json());
+    const schaleJson: schaleInfo[] = await fetch('https://schale.gg/data/cn/students.min.json?v=102').then(r => r.json());
+    return { fileJson, schaleJson };
+}
+
+export function getStudentInfo({ fileJson, schaleJson }: studentsJson, studentId: number): studentInfo {
+    const file = fileJson && fileJson.filter(info => (info.id === studentId))[0];
+    const schale = schaleJson && schaleJson.filter(info => (info.Id === studentId))[0];
+    return { file, schale };
+}
diff --git a/components/students.ts → components/students/students.ts b/components/students.ts → components/students/students.ts
@@ -1,9 +1,9 @@
-interface studentsInfo {
+export interface fileInfo {
     id?: number;
     info?: string;
 }
 
-interface schaleInfo {
+export interface schaleInfo {
     Id: number;
     IsReleased: boolean[];
     DefaultOrder: number;
@@ -64,24 +64,12 @@ interface schaleInfo {
     RegenCost: number;
 }
 
-export interface Main {
-    studentsJson?: studentsInfo[];
+export interface studentsJson {
+    fileJson?: fileInfo[];
     schaleJson?: schaleInfo[];
 }
 
-export interface MainInfo {
-    json?: studentsInfo;
+export interface studentInfo {
+    file?: fileInfo;
     schale?: schaleInfo;
-}
-
-export async function getStudentJson(): Promise<Main> {
-    const studentsJson: studentsInfo[] = await fetch('/students.json').then(r => r.json());
-    const schaleJson: schaleInfo[] = await fetch('https://schale.gg/data/cn/students.min.json?v=102').then(r => r.json());
-    return { studentsJson, schaleJson };
-}
-
-export function getStudentInfo({ studentsJson, schaleJson }: Main, studentId: number): MainInfo {
-    const json = studentsJson && studentsJson.filter(info => (info.id === studentId))[0];
-    const schale = schaleJson && schaleJson.filter(info => (info.Id === studentId))[0];
-    return { json, schale };
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,13 +1,8 @@
 import type { AppProps } from 'next/app';
-import MainNode from '@/components/main';
 
 //Global Style
 import '@/styles/globals.scss';
 
 export default function App({ Component, pageProps }: AppProps) {
-    return (
-        <MainNode>
-            <Component {...pageProps} />
-        </MainNode>
-    );
+    return (<Component {...pageProps} />);
 }
diff --git a/pages/api/icon/birth.ts b/pages/api/icon/birth.ts
@@ -0,0 +1,22 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<string>
+) {
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Content-Type', 'image/svg+xml');
+  const { fill = 'fff' } = req.query;
+  res.status(200).send(`<?xml version="1.0" encoding="utf-8"?>
+  <svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
+    <g id="Group-4">
+      <path d="M0 0L25 0L25 25L0 25L0 0Z" id="Rectangle-2" fill="none" fill-rule="evenodd" stroke="none" />
+      <g id="Group-3" transform="translate(3.3625412 2.6835938)">
+        <path d="M8.13746 0.316406C7.63746 0.738281 7.38746 1.12891 7.13746 2.00391C6.88746 2.87891 7.01246 3.11328 7.13746 3.81641C7.26246 4.51953 7.63746 4.81641 7.63746 4.81641L9.63746 4.81641C9.63746 4.81641 10.0125 4.51953 10.1375 3.81641C10.2625 3.11328 10.3875 2.87891 10.1375 2.00391C9.88746 1.12891 9.63746 0.738281 9.13746 0.316406C8.63746 -0.105469 8.63746 -0.105469 8.13746 0.316406Z" id="Line-2" fill="#${fill}" fill-rule="evenodd" stroke="#${fill}" stroke-width="1" stroke-linecap="square" />
+        <path d="M9.13746 5.81641L9.13746 6.81641L8.13746 6.88672L8.13746 5.81641L9.13746 5.81641Z" id="Line-3" fill="#${fill}" fill-rule="evenodd" stroke="#${fill}" stroke-width="1" stroke-linecap="square" />
+        <path d="M8.13745 7.81644C8.13745 7.81644 1.38746 8.31641 0.137459 9.31641C-0.442223 9.78015 0.923883 10.3171 2.13746 10.3164C2.13746 10.3164 3.13745 11.8164 3.13745 11.8164C3.13745 11.8164 3.63745 12.0664 4.13745 11.8164C4.63745 11.5664 4.26245 11.0664 5.13745 10.8164C6.01245 10.5664 6.88745 10.5664 7.63745 10.8164C8.38745 11.0664 7.63745 11.5664 8.13745 11.8164C8.63745 12.0664 9.13745 12.0664 9.63745 11.8164C10.1375 11.5664 9.51245 11.0664 10.1375 10.8164C10.7625 10.5664 11.3875 10.5664 12.1375 10.8164C12.8875 11.0664 13.1374 11.8164 13.1374 11.8164C13.1374 11.8164 12.8874 11.8164 13.1374 11.8164C13.3874 11.8164 14.1375 11.8164 14.1375 11.8164C14.1375 11.8164 16.1375 10.3164 16.1375 10.3164C17.8198 10.3871 18.6776 9.7965 18.1374 9.31641C17.0124 8.31641 9.63745 7.81644 9.63745 7.81644L8.13745 7.81644Z" id="Line-4" fill="#${fill}" fill-rule="evenodd" stroke="#${fill}" stroke-width="1" stroke-linecap="square" />
+        <path d="M0.1409 12.8163L3.13745 14.8163C3.13745 14.8163 3.63745 15.0663 4.13745 14.8163C4.63745 14.5663 4.26245 14.0663 5.13745 13.8163C6.01245 13.5663 7.63745 13.8163 7.63745 13.8163C7.80289 13.8217 7.63745 14.5663 8.13745 14.8163C8.63745 15.0663 9.13745 15.0663 9.63745 14.8163C10.1375 14.5663 9.38746 13.9836 10.1375 13.8163C10.2234 13.7972 11.9899 13.7433 12.1375 13.8163C12.674 14.0821 12.7476 14.8838 13.1375 14.8163L14.2039 14.8163L18.1374 12.8163L18.1374 18.3164C18.1374 18.3164 16.1375 19.3164 14.1375 19.8164C12.1375 20.3163 9.63745 20.3163 9.63745 20.3163L8.13745 20.3163C8.13745 20.3163 5.13745 20.3163 3.13745 19.8164C1.13744 19.3164 0.1409 18.3163 0.1409 18.3163L0.1409 12.8163Z" id="Line-5" fill="#${fill}" fill-rule="evenodd" stroke="#${fill}" stroke-width="1" stroke-linecap="square" />
+      </g>
+    </g>
+  </svg>`);
+}
diff --git a/pages/chat.tsx b/pages/chat.tsx
@@ -1,24 +1,166 @@
 //Components
 import { NextSeo } from 'next-seo';
+import MainNode from '@/components/main';
+
+//Styles
+import ItemStyles from '@/styles/Item.module.scss';
+import ChatStyles from '@/styles/Chat.module.scss';
 
 //Methods
+import { useState } from 'react';
 import getTitle from '@/components/title';
+import { studentsJson } from '@/components/students/students';
+import { getStudentInfo, getStudentsJson } from '@/components/students/infoStudents';
 
-//Styles
-import styles from '@/styles/Item.module.scss';
+interface RepeatProps<T> {
+    variable: T,
+    repeat: number,
+    func: (variable: T) => T,
+    components: (variable: T) => JSX.Element,
+}
+
+interface StudentProps {
+    id: number,
+    allInfo: studentsJson,
+    onClick: React.MouseEventHandler<HTMLDivElement>,
+    select: boolean,
+}
+
+interface ContentProps {
+    id: number,
+    allInfo: studentsJson
+}
+
+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}</>;
+}
+
+function Student({ id, allInfo, onClick, select }: 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`}
+                />
+            </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>
+    );
+}
+
+function Content({ id, allInfo }: ContentProps) {
+    const info = getStudentInfo(allInfo, id);
+    return (
+        <div id={ItemStyles.content}>
+            <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`}
+                />
+            </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.birthday}>
+                <img
+                    src='/api/icon/birth?fill=5f7c8c'
+                    alt={`${info.schale?.Name} birthday icon`}
+                />
+                <p>{info.schale?.Birthday}</p>
+            </div>
+        </div>
+    );
+}
 
 export default function Info() {
+    const [state, setState] = useState<{
+        student: number,
+        studentsList: number[],
+        studentsJson: {
+            data: studentsJson,
+            fetch: boolean,
+        }
+    }>({
+        student: 0,
+        studentsList: [10000, 10002],
+        studentsJson: { data: {}, fetch: false },
+    });
+    if (!state.studentsJson.fetch) getStudentsJson().then(r => setState({
+        student: state.student,
+        studentsList: state.studentsList,
+        studentsJson: { data: r, fetch: true },
+    }));
     return (
-        <>
+        <MainNode>
             <NextSeo
                 title={getTitle('聊天编辑')}
             />
-            <div id={styles.infoBar}>
-
+            <div id={ItemStyles.infoBar}>
+                <div id={ChatStyles.title}>
+                    <p id={ChatStyles.left}>学生({state.studentsList.length})</p>
+                    <p id={ChatStyles.right} onClick={_ => {
+                        const id = Number(window.prompt('Input id', '10001')) || 10001;
+                        let { studentsList } = state;
+                        studentsList.push(id);
+                        setState({
+                            student: state.student,
+                            studentsList: studentsList,
+                            studentsJson: state.studentsJson,
+                        })
+                    }}>+</p>
+                </div>
+                <div style={{ height: 70 }} />
+                <div id={ItemStyles.all}>
+                    <img src='/api/icon/line?fill=63adc6' />
+                    <p>所有学生</p>
+                </div>
+                <div id={ItemStyles.students}>
+                    {state.studentsJson.fetch &&
+                        <Repeat
+                            variable={0}
+                            repeat={state.studentsList.length}
+                            func={v => v + 1}
+                            components={v => {
+                                const id = state.studentsList[v];
+                                return (
+                                    <Student
+                                        id={id}
+                                        allInfo={state.studentsJson.data}
+                                        key={id}
+                                        onClick={_ => setState({
+                                            student: id,
+                                            studentsList: state.studentsList,
+                                            studentsJson: state.studentsJson,
+                                        })}
+                                        select={state.student === id}
+                                    />
+                                );
+                            }}
+                        />
+                    }
+                </div>
             </div>
-            <div id={styles.contentBar}>
-
+            <div id={ItemStyles.contentBar}>
+                {state.student !== 0 ?
+                    <Content id={state.student} allInfo={state.studentsJson.data} />
+                    :
+                    <p>请选择学生。</p>
+                }
             </div>
-        </>
+        </MainNode>
     );
 }
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,16 +1,17 @@
 //Components
 import { NextSeo } from 'next-seo';
+import MainNode from '@/components/main';
 
 //Methods
 import getTitle from '@/components/title';
 
 export default function Home() {
     return (
-        <>
+        <MainNode>
             <NextSeo
                 title={getTitle()}
             />
             <p>请选择栏目。</p>
-        </>
+        </MainNode>
     );
 }