diff --git a/package.json b/package.json index f41fa3c..2a99db7 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "react-infinite-scroller": "^1.2.6", "react-markdown": "^8.0.7", "react-player": "^2.12.0", + "react-scroll": "^1.8.9", "react-three-fiber": "^6.0.13", "recoil": "^0.7.7", "swr": "^2.1.5", @@ -52,6 +53,7 @@ "@storybook/nextjs": "^7.0.22", "@storybook/react": "^7.0.22", "@types/react-infinite-scroller": "^1.2.3", + "@types/react-scroll": "^1.8.7", "@types/uuid": "^9.0.2", "babel-loader": "^8.3.0", "eslint-config-next": "13.2.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a813973..0db8b21 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -65,6 +65,9 @@ dependencies: react-player: specifier: ^2.12.0 version: 2.12.0(react@18.2.0) + react-scroll: + specifier: ^1.8.9 + version: 1.8.9(react-dom@18.2.0)(react@18.2.0) react-three-fiber: specifier: ^6.0.13 version: 6.0.13(react-dom@18.2.0)(react@18.2.0)(three@0.153.0) @@ -112,6 +115,9 @@ devDependencies: '@types/react-infinite-scroller': specifier: ^1.2.3 version: 1.2.3 + '@types/react-scroll': + specifier: ^1.8.7 + version: 1.8.7 '@types/uuid': specifier: ^9.0.2 version: 9.0.2 @@ -4261,6 +4267,12 @@ packages: '@types/react': 18.0.28 dev: false + /@types/react-scroll@1.8.7: + resolution: {integrity: sha512-BB8g+hQL7OtBPWg/NcES6p5u6vduZonGl1BxrsGUwcefE53pfI0pFDd1lRFndgEUE6whYdFfhD+j0sZZT/6brQ==} + dependencies: + '@types/react': 18.0.28 + dev: true + /@types/react-transition-group@4.4.5: resolution: {integrity: sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==} dependencies: @@ -8209,6 +8221,10 @@ packages: resolution: {integrity: sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q==} dev: false + /lodash.throttle@4.1.1: + resolution: {integrity: sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==} + dev: false + /lodash@4.17.21: resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} @@ -9722,6 +9738,18 @@ packages: engines: {node: '>=0.10.0'} dev: true + /react-scroll@1.8.9(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-9m7ztraiX/l6L7erzYAD3fhnveNckei6/NkWfqwN2e0FRdoE2W6Pk4oi2Nah7mWpPCPAeIgegfaqZACTimPOwg==} + peerDependencies: + react: ^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0 + react-dom: ^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0 + dependencies: + lodash.throttle: 4.1.1 + prop-types: 15.8.1 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /react-three-fiber@6.0.13(react-dom@18.2.0)(react@18.2.0)(three@0.153.0): resolution: {integrity: sha512-uShQnkMVLvnzwf3YzY9mnzCnpmLpvTQkc0ycrtwk8fyjXmZt2695tLn3tufPF6uxq06UKJRKJcjCVCMXyUcEPQ==} deprecated: react-three-fiber has been deprecated, please use @react-three/fiber from now on diff --git a/src/components/Map/Site/Site.jsx b/src/components/Map/Site/Site.jsx deleted file mode 100644 index 6cffbed..0000000 --- a/src/components/Map/Site/Site.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import { useMemo } from "react"; -import { useConvexPolyhedron } from "@react-three/cannon"; -import { useGLTF } from "@react-three/drei"; -import { Geometry } from "three-stdlib"; - - -function toConvexProps(bufferGeometry) { - const geo = new Geometry().fromBufferGeometry(bufferGeometry); - geo.mergeVertices(); - return [geo.vertices.map((v) => [v.x, v.y, v.z]), geo.faces.map((f) => [f.a, f.b, f.c]), []]; // prettier-ignore -} - -export const Site = () => { - const loadpath = "/models/site_physics.glb"; - const { nodes } = useGLTF(loadpath); - const geo = useMemo(() => toConvexProps(nodes.root.geometry), [nodes]); - const [ref] = useConvexPolyhedron(() => ({ mass: 100,type: "static" , args: geo })); - return ( - - - ) -} - -useGLTF.preload('/models/site_physics_joined.glb') \ No newline at end of file diff --git a/src/components/Map/Site/Site.tsx b/src/components/Map/Site/Site.tsx new file mode 100644 index 0000000..1c89cbb --- /dev/null +++ b/src/components/Map/Site/Site.tsx @@ -0,0 +1,44 @@ +import { useMemo, useRef } from "react"; +import { ConvexPolyhedronArgs, useConvexPolyhedron } from "@react-three/cannon"; +import { useGLTF } from "@react-three/drei"; +import { Geometry } from "three-stdlib"; +import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'; +import * as THREE from 'three'; + +type GLTFResult = GLTF & { + nodes: { + root: THREE.Mesh + } +} + + +function toConvexProps(bufferGeometry: THREE.BufferGeometry): ConvexPolyhedronArgs { + const geo = new Geometry().fromBufferGeometry(bufferGeometry); + geo.mergeVertices(); + return [ + geo.vertices.map((v) => new THREE.Vector3(v.x, v.y, v.z)), + geo.faces.map((f) => [f.a, f.b, f.c]), + [] + ]; +} + + +export const Site = () => { + const loadpath = "/models/site_physics.glb"; + const { nodes } = useGLTF(loadpath) as GLTFResult; + const geo: ConvexPolyhedronArgs = useMemo(() => toConvexProps(nodes.root.geometry), [nodes]); + const [ref] = useConvexPolyhedron( + () => ({ + mass: 100, + Type: "static", + args: geo + }), + useRef(null), + ); + return ( + + + ) +} + +useGLTF.preload('/models/site_physics_joined.glb') \ No newline at end of file diff --git a/src/components/Web/OwnerComment/OwnerComment.stories.tsx b/src/components/Web/OwnerComment/OwnerComment.stories.tsx new file mode 100644 index 0000000..3c54ce1 --- /dev/null +++ b/src/components/Web/OwnerComment/OwnerComment.stories.tsx @@ -0,0 +1,16 @@ +import { Meta, StoryObj } from "@storybook/react"; + +import { OwnerComment } from "./OwnerComment"; + +export default { + title: "Web/OwnerComment", + component: OwnerComment, + tags: ['autodocs'], + parameters: { + layout: 'fullscreen', + }, + argTypes: { + }, +} as Meta; + +export const Default: StoryObj = {}; diff --git a/src/components/Web/OwnerComment/OwnerComment.tsx b/src/components/Web/OwnerComment/OwnerComment.tsx new file mode 100644 index 0000000..9d46851 --- /dev/null +++ b/src/components/Web/OwnerComment/OwnerComment.tsx @@ -0,0 +1,45 @@ +import { comments } from "@/constants/ownerComment"; +import { Box, Typography, useMediaQuery } from "@mui/material"; +import { FlowBackImages } from "../FlowBackImages/FlowBackImages"; + +export const OwnerComment = () => { + const isDarkMode = useMediaQuery("(prefers-color-scheme: dark)"); + + return ( + + + + + {comments} + + + + ); +}; diff --git a/src/components/Web/ScrollTo/ScrollTo.stories.tsx b/src/components/Web/ScrollTo/ScrollTo.stories.tsx new file mode 100644 index 0000000..8f18720 --- /dev/null +++ b/src/components/Web/ScrollTo/ScrollTo.stories.tsx @@ -0,0 +1,19 @@ +import { Meta, StoryObj } from "@storybook/react"; + +import { ScrollTo } from "./ScrollTo"; + +export default { + title: "Web/ScrollTo", + component: ScrollTo, + tags: ["autodocs"], + parameters: { + layout: "fullscreen", + }, + argTypes: {}, +} as Meta; + +export const Default: StoryObj = { + args: { + to: "", + }, +}; diff --git a/src/components/Web/ScrollTo/ScrollTo.tsx b/src/components/Web/ScrollTo/ScrollTo.tsx new file mode 100644 index 0000000..8b332c1 --- /dev/null +++ b/src/components/Web/ScrollTo/ScrollTo.tsx @@ -0,0 +1,50 @@ +import { Button, useMediaQuery } from "@mui/material"; +import { Link as Scroll } from "react-scroll"; + +export type ScrollToProps = { + to: string; +}; + +export const ScrollTo = ({ to }: ScrollToProps) => { + const isDarkMode = useMediaQuery("(prefers-color-scheme: dark)"); + return ( + + + + ); +}; diff --git a/src/components/Web/TopBackground/TopBackground.stories.tsx b/src/components/Web/TopBackground/TopBackground.stories.tsx new file mode 100644 index 0000000..f79e55f --- /dev/null +++ b/src/components/Web/TopBackground/TopBackground.stories.tsx @@ -0,0 +1,19 @@ +import { Meta, StoryObj } from "@storybook/react"; + +import { TopBackground } from "./TopBackground"; + +export default { + title: "Web/TopBackground", + component: TopBackground, + tags: ["autodocs"], + parameters: { + layout: "fullscreen", + }, + argTypes: {}, +} as Meta; + +export const Default: StoryObj = { + args: { + hovering: "hack", + }, +}; diff --git a/src/components/Web/TopBackground/TopBackground.tsx b/src/components/Web/TopBackground/TopBackground.tsx new file mode 100644 index 0000000..a8ecbfa --- /dev/null +++ b/src/components/Web/TopBackground/TopBackground.tsx @@ -0,0 +1,66 @@ +import { imagePaths } from "@/constants/topBackground"; +import { TopBackgroundProps } from "@/types/web"; +import { Box, Stack, useMediaQuery } from "@mui/material"; + +export const TopBackground = ({ hovering }: TopBackgroundProps) => { + const isDarkMode = useMediaQuery("(prefers-color-scheme: dark)"); + const isSmall = useMediaQuery("(min-width:800px)"); + + return ( + + {imagePaths.map(({ department, imagePath }, index) => ( + + + + ))} + + ); +}; diff --git a/src/constants/ownerComment.ts b/src/constants/ownerComment.ts new file mode 100644 index 0000000..678a2a4 --- /dev/null +++ b/src/constants/ownerComment.ts @@ -0,0 +1,2 @@ +export const comments = + "オープンキャンパス（以下OC）特設サイトにご来場の皆様、こんにちわ！\n2023年度部長の鈴木乖離と言います。\n\n前々年度、前年度は新型コロナウイルスの影響で対面での活動が制限されており、「オンラインでC3を知ってもらうきっかけ」としてOCサイトは特に重要でした。\nでは、対面活動が再開された本年度では必要ないのでは？と思うかもですが、OCサイトは、すでにC3の伝統であり、C3になくてはならないイベントのです。具体的には2つの意味合いがあります。\nまず、C3に入部した部員の最初の作品制作の目標地点という意味です。4月に入部した部員にとって、作品制作の目標を作るのはなかなか難しいことです。そこで、「7月のOCまでに一つ作る」ということが1つの目標となるのです。\nそして、このOCサイト自体も部員の作品であり、C3の真骨頂です。\nというのも、C3の最大の魅力は「コンピュータでモノづくり」という共通点を持った様々な分野に注力する部員が集まっています。その部員たちが自分の得意分野を生かして最大限協働した集大成がこのOCサイトになるわけです。こういう意味でも、C3においてOCサイトはすごく大切なものなんです。\nこの伝統は、もはや情勢だとかそういったものではなく、今後もC3の1つのビックイベントとして継承されていくでしょう。\n\n部員の作品については、私から語ることはありません。\n見ていただければ、その想い・熱意は伝わると確信しています。ぜひOCサイトを楽しんでください！\n\nそして、C3に興味を持った皆さん、来年度皆さんにお会いできることを楽しみにしています！\n"; diff --git a/src/constants/topBackground.ts b/src/constants/topBackground.ts new file mode 100644 index 0000000..7dcd4b2 --- /dev/null +++ b/src/constants/topBackground.ts @@ -0,0 +1,27 @@ +export const imagePaths = [ + { + department: "hack", + imagePath: + "https://img.freepik.com/free-photo/cute-kitten-staring-out-the-window-playful-curiosity-generative-ai_188544-12520.jpg", + }, + { + department: "game", + imagePath: + "https://img.freepik.com/free-photo/cute-kitten-staring-out-the-window-playful-curiosity-generative-ai_188544-12520.jpg", + }, + { + department: "2dcg", + imagePath: + "https://img.freepik.com/free-photo/cute-kitten-staring-out-the-window-playful-curiosity-generative-ai_188544-12520.jpg", + }, + { + department: "3dcg", + imagePath: + "https://img.freepik.com/free-photo/cute-kitten-staring-out-the-window-playful-curiosity-generative-ai_188544-12520.jpg", + }, + { + department: "music", + imagePath: + "https://img.freepik.com/free-photo/cute-kitten-staring-out-the-window-playful-curiosity-generative-ai_188544-12520.jpg", + }, +]; diff --git a/src/pages/map/index.tsx b/src/pages/map/index.tsx index 6aee21d..49768a4 100644 --- a/src/pages/map/index.tsx +++ b/src/pages/map/index.tsx @@ -1,17 +1,21 @@ -import { Canvas } from "@react-three/fiber"; +import { Canvas, MeshProps } from "@react-three/fiber"; import { OrbitControls } from "@react-three/drei"; import { Site } from "../../components/Map/Site/Site"; import { Plane } from "../../components/Map/Plane" import styles from "../../styles/map.module.css"; import { Physics, useBox } from "@react-three/cannon"; +import { useRef } from "react"; +import { Mesh } from "three"; -function Box(props: any) { - const [ref, api] = useBox(() => ({ - mass: 1, - position: [30, 10, 0.8], - args: [1, 1, 1], - })); - +function Box(props: MeshProps) { + const [ref, api] = useBox( + () => ({ + mass: 1, + position: [30, 10, 0.8], + args: [1, 1, 1], + }), + useRef(null), + ); return ( api.velocity.set(0, 5, 0)} {...props}> diff --git a/src/types/web.ts b/src/types/web.ts index c0a9916..49901a6 100644 --- a/src/types/web.ts +++ b/src/types/web.ts @@ -60,3 +60,6 @@ export type CategoryOutlineCardProps = { caption: string; redirectPath: string; }; +export type TopBackgroundProps = { + hovering: "hack" | "game" | "2dcg" | "3dcg" | "music" | ""; +}; diff --git a/tsconfig.json b/tsconfig.json index 7735fc9..9766b35 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -24,6 +24,6 @@ "@/*": ["./src/*"] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/components/Map/Site/SitePhysics.jsx", "src/components/Map/Site/LoadModel.jsx", "src/components/Map/Site/Site.jsx"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/components/Map/Site/SitePhysics.jsx", "src/components/Map/Site/LoadModel.jsx", "src/components/Map/Site/Site.tsx"], "exclude": ["node_modules"] }