v1.0.0

Slouchwind · Jun 6, 2023 · b8e85ef · b8e85ef · vercel · Jun 6, 2023
1 parent 62165ee
commit b8e85ef
Show file tree

Hide file tree

Showing 18 changed files with 473 additions and 117 deletions.
diff --git a/.gitignore b/.gitignore
@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# video
+*.mp4
diff --git a/components/imgCol.tsx b/components/imgCol.tsx
@@ -0,0 +1,38 @@
+import { studentInfo } from "./students/students";
+
+type keyofDefaultStyle = 'content' | 'student';
+const DefaultStyle: { [K in keyofDefaultStyle]: React.CSSProperties } = {
+    content: {
+        margin: 'auto',
+        marginTop: 20,
+        marginBottom: 5,
+    },
+    student: {
+        margin: 10,
+    },
+}
+
+interface ImgColProps {
+    style: React.CSSProperties | keyofDefaultStyle;
+    size: number;
+    info: studentInfo;
+}
+
+export default function ImgCol({ style, size, info }: ImgColProps) {
+    if (typeof style === 'string') style = DefaultStyle[style];
+    const imgStyle: React.CSSProperties = {
+        width: size,
+        height: size,
+        ...style,
+    }
+    return (<div className='imgCol' style={imgStyle}>
+        <img
+            className='col'
+            src={
+                info.schale?.CollectionTexture &&
+                `https://schale.gg/images/student/collection/${info.schale?.CollectionTexture}.webp`
+            }
+            alt={`${info.schale?.Name || ''} collection image`}
+        />
+    </div>);
+}
diff --git a/components/loadFile.ts b/components/loadFile.ts
@@ -0,0 +1,27 @@
+export function downloadFile(json: object, filename: string) {
+    const data = JSON.stringify(json, null, 4);
+    const blob = new Blob([data], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = filename;
+    document.body.appendChild(anchor);
+    anchor.click();
+    //Remove the Element and the Url
+    document.body.removeChild(anchor);
+    URL.revokeObjectURL(url);
+}
+
+export function uploadFile(fileOnLoad: FileReader['onload']) {
+    const anchor = document.createElement('input');
+    anchor.type = 'file';
+    anchor.accept = 'application/json';
+    document.body.appendChild(anchor);
+    anchor.addEventListener('change', () => {
+        if (!anchor.files?.[0]) return;
+        const reader = new FileReader();
+        reader.readAsText(anchor.files?.[0]);
+        reader.onload = fileOnLoad;
+    });
+    anchor.click();
+}
diff --git a/components/repeat.tsx b/components/repeat.tsx
@@ -1,7 +1,11 @@
 interface RepeatProps<T> {
+    /**自变量初始值 */
     variable: T,
+    /**重复次数 */
     repeat: number,
+    /**自变量变动 */
     func: (variable: T) => T,
+    /**遍历返回 */
     components: (variable: T) => React.ReactNode,
 }
 

diff --git a/components/student.tsx b/components/student.tsx
@@ -1,28 +1,24 @@
-import Image from 'next/image';
 import { studentsJson } from './students/students';
 import { getStudentInfo } from './students/infoStudents';
 import ItemStyles from '@/styles/Item.module.scss';
+import ImgCol from './imgCol';
 
 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) {
+export default 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`}
-                    onError={_ => onError(id)}
-                />
-            </div>
+            <ImgCol
+                style='student'
+                size={60}
+                info={info}
+            />
             <div className={ItemStyles.p}>
                 <p className={ItemStyles.name}>{info.schale?.Name}</p>
                 <p className={ItemStyles.info}>{info.file?.info}</p>
@@ -33,5 +29,5 @@ export default function Student({ id, allInfo, onClick, select, onError }: Stude
 }
 
 export function AllStudentsIcon() {
-    return (<Image src='/api/icon/line?fill=63adc6' alt='All Students Icon' />);
+    return (<img src='/api/icon/line?fill=63adc6' alt='All Students Icon' />);
 }
diff --git a/components/students/chatStudents.ts b/components/students/chatStudents.ts
diff --git a/pages/api/icon/birth.ts b/pages/api/icon/birth.ts
@@ -6,7 +6,8 @@ export default function handler(
 ) {
   res.setHeader('Access-Control-Allow-Origin', '*');
   res.setHeader('Content-Type', 'image/svg+xml');
-  const { fill = 'fff' } = req.query;
+  let { fill = 'fff' } = req.query;
+  if (fill instanceof String) fill = fill.substring(0, 6);
   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">

diff --git a/pages/api/icon/chat.ts b/pages/api/icon/chat.ts
@@ -6,7 +6,8 @@ export default function handler(
 ) {
   res.setHeader('Access-Control-Allow-Origin', '*');
   res.setHeader('Content-Type', 'image/svg+xml');
-  const { fill = 'fff' } = req.query;
+  let { fill = 'fff' } = req.query;
+  if (fill instanceof String) fill = fill.substring(0, 6);
   res.status(200).send(`<?xml version="1.0" encoding="utf-8"?>
     <svg width="39px" height="31px" viewBox="0 0 39 31" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
       <g id="Group-2">

diff --git a/pages/api/icon/download.ts b/pages/api/icon/download.ts
@@ -0,0 +1,25 @@
+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');
+  let { fill = 'fff' } = req.query;
+  if (fill instanceof String) fill = fill.substring(0, 6);
+  res.status(200).send(`<?xml version="1.0" encoding="utf-8"?>
+  <svg width="90px" height="90px" viewBox="0 0 90 90" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
+    <g id="download">
+      <path d="M0 90L90 90L90 0L0 0L0 90Z" transform="matrix(1 0 0 -1 0 90)" id="Rectangle-2" fill="#FFFFFF" fill-opacity="0" fill-rule="evenodd" stroke="none" />
+      <g id="Group-2" transform="translate(12.5 12)">
+        <g id="Group" transform="matrix(1 0 0 -1 21.5 51)">
+          <path d="M12 0L12 51" id="Line-3" fill="none" fill-rule="evenodd" stroke="#${fill}" stroke-width="6" stroke-linecap="round" />
+          <path d="M12 0.5L0 13" id="Line-4" fill="none" fill-rule="evenodd" stroke="#${fill}" stroke-width="6" stroke-linecap="round" />
+          <path d="M12 0.5L24 12.5" id="Line-5" fill="none" fill-rule="evenodd" stroke="#${fill}" stroke-width="6" stroke-linecap="round" />
+        </g>
+        <path d="M12.5 22L9 22C9 22 5 22.25 3 24C1 25.75 0 30 0 30L1.19209e-07 60.5C1.19209e-07 60.5 0.125 62.875 1.5 64.5C2.875 66.125 5.5 67 5.5 67L60.5 67C60.5 67 63.5 66.125 65 64.5C66.5 62.875 66.5 60.5 66.5 60.5L66.5 28C66.5 28 66.5 25.5 65 24C63.5 22.5 60.5 22 60.5 22L54.5 22" id="Line-2" fill="none" fill-rule="evenodd" stroke="#${fill}" stroke-width="6" stroke-linecap="round" />
+      </g>
+    </g>
+  </svg>`);
+}
diff --git a/pages/api/icon/index.ts b/pages/api/icon/index.ts
@@ -6,7 +6,8 @@ export default function handler(
 ) {
     res.setHeader('Access-Control-Allow-Origin', '*');
     res.setHeader('Content-Type', 'image/svg+xml');
-    const { fill = 'fff' } = req.query;
+    let { fill = 'fff' } = req.query;
+    if (fill instanceof String) fill = fill.substring(0, 6);
     res.status(200).send(`<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" x="0" y="0" viewBox="0 0 512 477.9" fill="#${fill}">
 <path d="M101.8 396.4c-53.3 0-98.4 53.8-101.8 79.5 81.4 7.9 196.1-6.8 252.1-65-74.7 13.5-135.9-5.2-150.3-14.5zM281.4 412.5c55.1 73.3 137.7 58.5 230.5 63.3 3.5-42.1-73.2-80.9-103.9-82.2-39.9 28.5-123.3 19.5-126.6 18.9z"></path>
 <path d="M256.4 0C136.8 45 31.5 151.4 31.5 259.4c0 85 68.4 153.9 195.3 137.3 3.9-.5 7.6-1.1 11.2-1.7-1.1-.4-2.1-.9-2.9-1.3-19.4-9.8-53.4-56.7-39-112.6 1.4 59.3 39.7 102.6 57.1 111 2.7 1.3 11.9 4.6 25.5 6.7 51.9 8 164.9 4.7 187.9-116.7C498.9 111.4 256.4 0 256.4 0z"></path>

diff --git a/pages/api/icon/info.ts b/pages/api/icon/info.ts
@@ -6,7 +6,8 @@ export default function handler(
 ) {
     res.setHeader('Access-Control-Allow-Origin', '*');
     res.setHeader('Content-Type', 'image/svg+xml');
-    const { fill = 'fff' } = req.query;
+    let { fill = 'fff' } = req.query;
+    if (fill instanceof String) fill = fill.substring(0, 6);
     res.status(200).send(`<?xml version="1.0" encoding="utf-8"?>
     <svg width="34.053787px" height="39.500008px" viewBox="0 0 34.053787 39.500008" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
       <defs>

diff --git a/pages/api/icon/line.ts b/pages/api/icon/line.ts
@@ -6,7 +6,8 @@ export default function handler(
 ) {
     res.setHeader('Access-Control-Allow-Origin', '*');
     res.setHeader('Content-Type', 'image/svg+xml');
-    const { fill = 'fff' } = req.query;
+    let { fill = 'fff' } = req.query;
+    if (fill instanceof String) fill = fill.substring(0, 6);
     res.status(200).send(`<?xml version="1.0" encoding="utf-8"?>
     <svg width="3px" height="9.5px" viewBox="0 0 3 9.5" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
       <path d="M1.5 0.5L1.5 9" id="Line" fill="none" fill-rule="evenodd" stroke="#${fill}" stroke-width="1" stroke-linecap="square" />

diff --git a/pages/api/icon/upload.ts b/pages/api/icon/upload.ts
@@ -0,0 +1,25 @@
+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');
+  let { fill = 'fff' } = req.query;
+  if (fill instanceof String) fill = fill.substring(0, 6);
+  res.status(200).send(`<?xml version="1.0" encoding="utf-8"?>
+  <svg width="90px" height="90px" viewBox="0 0 90 90" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
+    <g id="upload">
+      <path d="M0 0L90 0L90 90L0 90L0 0Z" id="Rectangle-2" fill="#FFFFFF" fill-opacity="0" fill-rule="evenodd" stroke="none" />
+      <g id="Group-2" transform="translate(12.5 11.5)">
+        <path d="M12.5 22L9 22C9 22 5 22.25 3 24C1 25.75 0 30 0 30L1.19209e-07 60.5C1.19209e-07 60.5 0.125 62.875 1.5 64.5C2.875 66.125 5.5 67 5.5 67L60.5 67C60.5 67 63.5 66.125 65 64.5C66.5 62.875 66.5 60.5 66.5 60.5L66.5 28C66.5 28 66.5 25.5 65 24C63.5 22.5 60.5 22 60.5 22L54.5 22" id="Line-2" fill="none" fill-rule="evenodd" stroke="#${fill}" stroke-width="6" stroke-linecap="round" />
+        <g id="Group" transform="translate(21.500004 0)">
+          <path d="M12 0L12 51" id="Line-3" fill="none" fill-rule="evenodd" stroke="#${fill}" stroke-width="6" stroke-linecap="round" />
+          <path d="M12 0.5L0 13" id="Line-4" fill="none" fill-rule="evenodd" stroke="#${fill}" stroke-width="6" stroke-linecap="round" />
+          <path d="M12 0.5L24 12.5" id="Line-5" fill="none" fill-rule="evenodd" stroke="#${fill}" stroke-width="6" stroke-linecap="round" />
+        </g>
+      </g>
+    </g>
+  </svg>`);
+}