From 5e03571a2696929ec4394542bb195de100660a97 Mon Sep 17 00:00:00 2001 From: Jae-Seong Jeong Date: Thu, 21 Sep 2023 20:42:02 +0900 Subject: [PATCH 01/15] =?UTF-8?q?:construction:=20=EC=83=88=20=EB=A7=81?= =?UTF-8?q?=ED=81=AC=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/nwjns-powerpuffgirl/_app.tsx | 10 ++++++++++ src/app/nwjns-powerpuffgirl/nwjns.scss | 0 src/app/nwjns-powerpuffgirl/page.tsx | 15 +++++++++++++++ src/app/sandbox/_app.tsx | 2 +- src/app/sandbox/components/ToyDescription.tsx | 14 +++++++++++++- 5 files changed, 39 insertions(+), 2 deletions(-) create mode 100644 src/app/nwjns-powerpuffgirl/_app.tsx create mode 100644 src/app/nwjns-powerpuffgirl/nwjns.scss create mode 100644 src/app/nwjns-powerpuffgirl/page.tsx diff --git a/src/app/nwjns-powerpuffgirl/_app.tsx b/src/app/nwjns-powerpuffgirl/_app.tsx new file mode 100644 index 0000000..104ae81 --- /dev/null +++ b/src/app/nwjns-powerpuffgirl/_app.tsx @@ -0,0 +1,10 @@ +"use client"; + +export default function NWJNS_Powerpuffgirl() { + return ( +
+
+
+
+ ); +} diff --git a/src/app/nwjns-powerpuffgirl/nwjns.scss b/src/app/nwjns-powerpuffgirl/nwjns.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/nwjns-powerpuffgirl/page.tsx b/src/app/nwjns-powerpuffgirl/page.tsx new file mode 100644 index 0000000..2e94f09 --- /dev/null +++ b/src/app/nwjns-powerpuffgirl/page.tsx @@ -0,0 +1,15 @@ +"use client"; + +import { Provider } from "react-redux"; +import { store } from "@/utils/redux/store"; +import Modal from "@/components/modal"; +import NWJNS_Powerpuffgirl from "./_app"; + +export default function App() { + return ( + + + + + ); +} diff --git a/src/app/sandbox/_app.tsx b/src/app/sandbox/_app.tsx index 1fe2a45..f30bf20 100644 --- a/src/app/sandbox/_app.tsx +++ b/src/app/sandbox/_app.tsx @@ -83,7 +83,7 @@ export default function Sandbox() { moveRef: createRef(), rotateRef: createRef(), physics: { ...defaultToyPhysics }, - link: "", + link: "/nwjns-powerpuffgirl", image: charaSelector(), }, { diff --git a/src/app/sandbox/components/ToyDescription.tsx b/src/app/sandbox/components/ToyDescription.tsx index 4cc5dc4..1f1ec5d 100644 --- a/src/app/sandbox/components/ToyDescription.tsx +++ b/src/app/sandbox/components/ToyDescription.tsx @@ -5,6 +5,8 @@ import Image, { StaticImageData } from "next/image"; import "./components.scss"; import Link from "next/link"; +import { useDispatch } from "react-redux"; +import { modalClose } from "@/utils/redux/modalState"; interface Props { name: string; @@ -28,6 +30,8 @@ const descriptions: ObjType = { }; export default function ToyDescription({ name, link, Img }: Props) { + const dispatch = useDispatch(); + const DescriptionImage = () => { return (
@@ -62,7 +66,15 @@ export default function ToyDescription({ name, link, Img }: Props) {

{name}

{descriptions[`${name}`]}

-

{name === "qr-code" ? `Take QR!` : {link !== "" ? "Visit" : "Preparing"}}

+

+ {name === "qr-code" ? ( + `Take QR!` + ) : ( + dispatch(modalClose())}> + {link !== "" ? "Visit" : "Preparing"} + + )} +

); From 2a829a46ca745e54834fe056f632d1fb1c6ed062 Mon Sep 17 00:00:00 2001 From: Jae-Seong Jeong Date: Fri, 22 Sep 2023 15:52:33 +0900 Subject: [PATCH 02/15] =?UTF-8?q?:sparkles:=20=EB=B0=B0=EA=B2=BD=20?= =?UTF-8?q?=EC=82=AC=EC=9D=B4=EC=A6=88=20=EA=B8=B0=EB=B3=B8=20=EC=99=84?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/nwjns-powerpuffgirl/_app.tsx | 59 ++++++++++++++++++- .../nwjns-powerpuffgirl/model/constants.ts | 4 ++ src/app/nwjns-powerpuffgirl/nwjns.scss | 49 +++++++++++++++ src/app/sandbox/components/components.scss | 2 + 4 files changed, 113 insertions(+), 1 deletion(-) create mode 100644 src/app/nwjns-powerpuffgirl/model/constants.ts diff --git a/src/app/nwjns-powerpuffgirl/_app.tsx b/src/app/nwjns-powerpuffgirl/_app.tsx index 104ae81..923e997 100644 --- a/src/app/nwjns-powerpuffgirl/_app.tsx +++ b/src/app/nwjns-powerpuffgirl/_app.tsx @@ -1,9 +1,66 @@ "use client"; +import { RefObject, useEffect, useRef } from "react"; +import Link from "next/link"; +import { BACKGROUND_BLUR, STAGE_HEIGHT, STAGE_WIDTH, STANDARD_HEIGHT } from "./model/constants"; + +import "./nwjns.scss"; + export default function NWJNS_Powerpuffgirl() { + const bgTopRef: RefObject = useRef(null); + const bgBottomRef: RefObject = useRef(null); + const bgLeftRef: RefObject = useRef(null); + const bgRightRef: RefObject = useRef(null); + + useEffect(() => { + document.documentElement.style.setProperty("--blur", `${BACKGROUND_BLUR}px`); + + setBackground(); + window.addEventListener("resize", setBackground); + + return () => { + window.removeEventListener("resize", setBackground); + }; + }, []); + + const setBackground = () => { + if ( + bgTopRef.current === null || + bgBottomRef.current === null || + bgLeftRef.current === null || + bgRightRef.current === null + ) + return; + + for (let i = STANDARD_HEIGHT.length - 1; i >= 0; i--) { + if (STANDARD_HEIGHT[i] >= window.innerHeight) continue; + + const horizonal = (window.innerWidth - STAGE_WIDTH[i]) / 2; + const vertical = (window.innerHeight - STAGE_HEIGHT[i]) / 2; + + // console.log(i, horizonal, vertical); + + bgTopRef.current.style.height = vertical + "px"; + bgBottomRef.current.style.height = vertical + "px"; + bgLeftRef.current.style.width = horizonal + "px"; + bgRightRef.current.style.width = horizonal + "px"; + + bgTopRef.current.style.width = STAGE_WIDTH[i] + 5 + "px"; + bgBottomRef.current.style.width = STAGE_WIDTH[i] + 5 + "px"; + + break; + } + }; + return (
-
+ + 뒤로가기 + +
+
+
+
); diff --git a/src/app/nwjns-powerpuffgirl/model/constants.ts b/src/app/nwjns-powerpuffgirl/model/constants.ts new file mode 100644 index 0000000..018c7b2 --- /dev/null +++ b/src/app/nwjns-powerpuffgirl/model/constants.ts @@ -0,0 +1,4 @@ +export const STAGE_WIDTH = [360, 450]; +export const STAGE_HEIGHT = [640, 800]; +export const STANDARD_HEIGHT = [700, 900]; +export const BACKGROUND_BLUR = 5; diff --git a/src/app/nwjns-powerpuffgirl/nwjns.scss b/src/app/nwjns-powerpuffgirl/nwjns.scss index e69de29..4a8dd47 100644 --- a/src/app/nwjns-powerpuffgirl/nwjns.scss +++ b/src/app/nwjns-powerpuffgirl/nwjns.scss @@ -0,0 +1,49 @@ +.nwjns-background-blur { + filter: blur(var(--blur)); + -webkit-filter: blur(var(--blur)); + + opacity: 0.5; + + background-color: rgb(174, 255, 0); +} + +.nwjns-background-blur.top { + position: absolute; + top: 0px; + left: 50%; + + width: 100vw; + // height: 20vh; + + transform: translateX(-50%); +} +.nwjns-background-blur.bottom { + position: absolute; + bottom: 0px; + left: 50%; + + width: 100vw; + // height: 20vh; + + transform: translateX(-50%); +} +.nwjns-background-blur.left { + position: absolute; + left: 0px; + + // width: 40vw; + height: 100vh; +} +.nwjns-background-blur.right { + position: absolute; + right: 0px; + + // width: 40vw; + height: 100vh; +} + +.temp { + position: absolute; + left: 50%; + top: 50%; +} diff --git a/src/app/sandbox/components/components.scss b/src/app/sandbox/components/components.scss index 5ff66ff..6f87247 100644 --- a/src/app/sandbox/components/components.scss +++ b/src/app/sandbox/components/components.scss @@ -106,6 +106,7 @@ h3 { color: gray; font-size: 2vh; + text-align: center; transition: 0.5s; transform: translate(-50%, 0%); @@ -123,6 +124,7 @@ h3 { .sandbox-tail { @extend .sandbox-text; bottom: 0%; + width: 90vw; } .sandbox-tail.on-grid { From 9cc6b1d9c171904f6e4a1141b15c14df22c5bccb Mon Sep 17 00:00:00 2001 From: Jae-Seong Jeong Date: Fri, 22 Sep 2023 16:14:27 +0900 Subject: [PATCH 03/15] =?UTF-8?q?:zap:=20=EB=B0=B0=EA=B2=BD=EA=B3=BC=20?= =?UTF-8?q?=EC=98=A4=EB=B8=8C=EC=A0=9D=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/nwjns-powerpuffgirl/_app.tsx | 20 ++++++-- src/app/nwjns-powerpuffgirl/model/types.ts | 58 ++++++++++++++++++++++ src/app/nwjns-powerpuffgirl/nwjns.scss | 29 ++++++++++- src/utils/nwjnsCharacter.ts | 15 +++++- 4 files changed, 115 insertions(+), 7 deletions(-) create mode 100644 src/app/nwjns-powerpuffgirl/model/types.ts diff --git a/src/app/nwjns-powerpuffgirl/_app.tsx b/src/app/nwjns-powerpuffgirl/_app.tsx index 923e997..5d4c73b 100644 --- a/src/app/nwjns-powerpuffgirl/_app.tsx +++ b/src/app/nwjns-powerpuffgirl/_app.tsx @@ -5,13 +5,17 @@ import Link from "next/link"; import { BACKGROUND_BLUR, STAGE_HEIGHT, STAGE_WIDTH, STANDARD_HEIGHT } from "./model/constants"; import "./nwjns.scss"; +import { NWJNSCharacter, defaultCharacters } from "./model/types"; export default function NWJNS_Powerpuffgirl() { + const stageRef: RefObject = useRef(null); const bgTopRef: RefObject = useRef(null); const bgBottomRef: RefObject = useRef(null); const bgLeftRef: RefObject = useRef(null); const bgRightRef: RefObject = useRef(null); + const charaRef = useRef>([...defaultCharacters]); + useEffect(() => { document.documentElement.style.setProperty("--blur", `${BACKGROUND_BLUR}px`); @@ -25,6 +29,7 @@ export default function NWJNS_Powerpuffgirl() { const setBackground = () => { if ( + stageRef.current === null || bgTopRef.current === null || bgBottomRef.current === null || bgLeftRef.current === null || @@ -40,6 +45,9 @@ export default function NWJNS_Powerpuffgirl() { // console.log(i, horizonal, vertical); + stageRef.current.style.width = STAGE_WIDTH[i] + "px"; + stageRef.current.style.height = STAGE_HEIGHT[i] + "px"; + bgTopRef.current.style.height = vertical + "px"; bgBottomRef.current.style.height = vertical + "px"; bgLeftRef.current.style.width = horizonal + "px"; @@ -54,14 +62,18 @@ export default function NWJNS_Powerpuffgirl() { return (
- - 뒤로가기 - +
+ {charaRef.current.map((v, i) => { + return
; + })}
-
+ + + 뒤로가기 +
); } diff --git a/src/app/nwjns-powerpuffgirl/model/types.ts b/src/app/nwjns-powerpuffgirl/model/types.ts new file mode 100644 index 0000000..eb8f6bd --- /dev/null +++ b/src/app/nwjns-powerpuffgirl/model/types.ts @@ -0,0 +1,58 @@ +import { + DanielleFow1, + DanielleFow2, + DanielleFow3, + DanielleRev1, + DanielleRev2, + DanielleRev3, + HaerinFow1, + HaerinFow2, + HaerinFow3, + HaerinRev1, + HaerinRev2, + HaerinRev3, +} from "@/utils/nwjnsCharacter"; +import { StaticImageData } from "next/image"; +import { RefObject, createRef } from "react"; + +export type NWJNSCharacter = { + name: string; + ref: RefObject; + images: NWJNSImage; +}; + +export type NWJNSImage = { + fow1: StaticImageData; + fow2: StaticImageData; + fow3: StaticImageData; + rev1: StaticImageData; + rev2: StaticImageData; + rev3: StaticImageData; +}; + +export const defaultCharacters: Array = [ + { + name: "haerin", + ref: createRef(), + images: { + fow1: HaerinFow1, + fow2: HaerinFow2, + fow3: HaerinFow3, + rev1: HaerinRev1, + rev2: HaerinRev2, + rev3: HaerinRev3, + }, + }, + { + name: "danielle", + ref: createRef(), + images: { + fow1: DanielleFow1, + fow2: DanielleFow2, + fow3: DanielleFow3, + rev1: DanielleRev1, + rev2: DanielleRev2, + rev3: DanielleRev3, + }, + }, +]; diff --git a/src/app/nwjns-powerpuffgirl/nwjns.scss b/src/app/nwjns-powerpuffgirl/nwjns.scss index 4a8dd47..74e4fb6 100644 --- a/src/app/nwjns-powerpuffgirl/nwjns.scss +++ b/src/app/nwjns-powerpuffgirl/nwjns.scss @@ -1,3 +1,15 @@ +.nwjns-stage { + position: absolute; + top: 50%; + left: 50%; + + border-radius: 5px; + + background-color: aqua; + + transform: translate(-50%, -50%); +} + .nwjns-background-blur { filter: blur(var(--blur)); -webkit-filter: blur(var(--blur)); @@ -42,8 +54,21 @@ height: 100vh; } +.chara-div { + position: absolute; + + top: 10%; + left: 20%; + + width: 10vh; + height: 10vh; + + border-radius: 5vh; + border-width: 2px; + border-color: purple; +} + .temp { position: absolute; - left: 50%; - top: 50%; + z-index: 1; } diff --git a/src/utils/nwjnsCharacter.ts b/src/utils/nwjnsCharacter.ts index 94ea007..1d22327 100644 --- a/src/utils/nwjnsCharacter.ts +++ b/src/utils/nwjnsCharacter.ts @@ -20,4 +20,17 @@ export const charaSelector = (): StaticImageData => { return characters[Math.floor(Math.random() * characters.length)]; }; -export { HaerinRev2, HaerinRev3, DanielleRev2, DanielleRev3 }; +export { + HaerinFow1, + HaerinFow2, + HaerinFow3, + HaerinRev1, + HaerinRev2, + HaerinRev3, + DanielleFow1, + DanielleFow2, + DanielleFow3, + DanielleRev1, + DanielleRev2, + DanielleRev3, +}; From 11af88498a4f0578a4a46fcab4bf6d5c40f04bc2 Mon Sep 17 00:00:00 2001 From: Jae-Seong Jeong Date: Fri, 22 Sep 2023 17:14:59 +0900 Subject: [PATCH 04/15] =?UTF-8?q?:sparkles:=20Hovering=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/nwjns-powerpuffgirl/_app.tsx | 25 +++++++++++++-- src/app/nwjns-powerpuffgirl/model/types.ts | 4 +++ src/app/nwjns-powerpuffgirl/utils/stream.ts | 34 +++++++++++++++++++++ src/app/sandbox/_app.tsx | 2 +- src/app/sandbox/model/constants.ts | 1 - src/utils/constants.ts | 1 + 6 files changed, 63 insertions(+), 4 deletions(-) create mode 100644 src/app/nwjns-powerpuffgirl/utils/stream.ts create mode 100644 src/utils/constants.ts diff --git a/src/app/nwjns-powerpuffgirl/_app.tsx b/src/app/nwjns-powerpuffgirl/_app.tsx index 5d4c73b..b914675 100644 --- a/src/app/nwjns-powerpuffgirl/_app.tsx +++ b/src/app/nwjns-powerpuffgirl/_app.tsx @@ -2,10 +2,12 @@ import { RefObject, useEffect, useRef } from "react"; import Link from "next/link"; + import { BACKGROUND_BLUR, STAGE_HEIGHT, STAGE_WIDTH, STANDARD_HEIGHT } from "./model/constants"; +import { NWJNSCharacter, defaultCharacters } from "./model/types"; +import { FPS_OFFSET } from "@/utils/constants"; import "./nwjns.scss"; -import { NWJNSCharacter, defaultCharacters } from "./model/types"; export default function NWJNS_Powerpuffgirl() { const stageRef: RefObject = useRef(null); @@ -22,8 +24,11 @@ export default function NWJNS_Powerpuffgirl() { setBackground(); window.addEventListener("resize", setBackground); + const hoverInterval = setInterval(charaHovering, FPS_OFFSET); + return () => { window.removeEventListener("resize", setBackground); + clearInterval(hoverInterval); }; }, []); @@ -60,11 +65,27 @@ export default function NWJNS_Powerpuffgirl() { } }; + const charaHovering = () => { + charaRef.current.map((v) => { + const charaRef = v.ref; + + if (charaRef.current === null) return; + + const nowY = charaRef.current.offsetTop; + + charaRef.current.style.top = nowY + (v.hover.next().value as number) + "px"; + }); + }; + return (
{charaRef.current.map((v, i) => { - return
; + return ( +
+ A +
+ ); })}
diff --git a/src/app/nwjns-powerpuffgirl/model/types.ts b/src/app/nwjns-powerpuffgirl/model/types.ts index eb8f6bd..eba59c5 100644 --- a/src/app/nwjns-powerpuffgirl/model/types.ts +++ b/src/app/nwjns-powerpuffgirl/model/types.ts @@ -14,10 +14,12 @@ import { } from "@/utils/nwjnsCharacter"; import { StaticImageData } from "next/image"; import { RefObject, createRef } from "react"; +import { hoveringSequence } from "../utils/stream"; export type NWJNSCharacter = { name: string; ref: RefObject; + hover: Generator; images: NWJNSImage; }; @@ -34,6 +36,7 @@ export const defaultCharacters: Array = [ { name: "haerin", ref: createRef(), + hover: hoveringSequence(), images: { fow1: HaerinFow1, fow2: HaerinFow2, @@ -46,6 +49,7 @@ export const defaultCharacters: Array = [ { name: "danielle", ref: createRef(), + hover: hoveringSequence(), images: { fow1: DanielleFow1, fow2: DanielleFow2, diff --git a/src/app/nwjns-powerpuffgirl/utils/stream.ts b/src/app/nwjns-powerpuffgirl/utils/stream.ts new file mode 100644 index 0000000..26b4b20 --- /dev/null +++ b/src/app/nwjns-powerpuffgirl/utils/stream.ts @@ -0,0 +1,34 @@ +export function* hoveringSequence() { + const seq: Array = []; // (-2) 5개, (2) 10개, (-2) 5개 + for (let i = 0; i < 10; i++) { + seq.push(-1); + } + for (let i = 0; i < 2; i++) { + seq.push(0); + } + for (let i = 0; i < 20; i++) { + seq.push(1); + } + for (let i = 0; i < 2; i++) { + seq.push(0); + } + for (let i = 0; i < 10; i++) { + seq.push(-1); + } + + // let escape: boolean = false; + + const delay = Math.floor(Math.random() * 2) * 22; + for (let i = 0; i < delay; i++) { + yield 0; + } + + while (true) { + for (let v of seq) { + // if (escape) return; + + yield v; + // alert(escape); + } + } +} diff --git a/src/app/sandbox/_app.tsx b/src/app/sandbox/_app.tsx index f30bf20..6fae402 100644 --- a/src/app/sandbox/_app.tsx +++ b/src/app/sandbox/_app.tsx @@ -29,7 +29,6 @@ import { SandboxTutorial } from "./demonstrations"; import { GVT_SPEED_OFFSET, SPIN_SPEED_OFFSET, - FPS_OFFSET, UNDER_BOUND, TUTORIAL_INDEX, GRID_4_BY_2, @@ -41,6 +40,7 @@ import { charaSelector } from "@/utils/nwjnsCharacter"; import { modalOpen, modalSwitch, setChild } from "@/utils/redux/modalState"; import SandboxDescription from "./components/SandboxDescription"; import ToyDescription from "./components/ToyDescription"; +import { FPS_OFFSET } from "@/utils/constants"; export default function Sandbox() { // console.log("re-render!"); diff --git a/src/app/sandbox/model/constants.ts b/src/app/sandbox/model/constants.ts index 8f2307c..8ccc3b4 100644 --- a/src/app/sandbox/model/constants.ts +++ b/src/app/sandbox/model/constants.ts @@ -1,6 +1,5 @@ export const GVT_SPEED_OFFSET: number = 0.1; export const SPIN_SPEED_OFFSET: number = 0.2; -export const FPS_OFFSET: number = 1000 / 60; // 60fps export const UNDER_BOUND: number = 0.8; export const GRID_2_BY_4 = { cols: 2, rows: 4 }; export const GRID_3_BY_3 = { cols: 3, rows: 3 }; diff --git a/src/utils/constants.ts b/src/utils/constants.ts new file mode 100644 index 0000000..2d94904 --- /dev/null +++ b/src/utils/constants.ts @@ -0,0 +1 @@ +export const FPS_OFFSET: number = 1000 / 60; // 60fps From 71d2d0d9282468e2104c22e82bce069bcbef28ee Mon Sep 17 00:00:00 2001 From: Jae-Seong Jeong Date: Sun, 24 Sep 2023 19:32:01 +0900 Subject: [PATCH 05/15] =?UTF-8?q?:sparkles:=20=EB=8B=A8=EC=9D=BC=20move=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/nwjns-powerpuffgirl/_app.tsx | 59 ++++++++++++++++----- src/app/nwjns-powerpuffgirl/model/types.ts | 39 ++++++++++++-- src/app/nwjns-powerpuffgirl/nwjns.scss | 16 +++++- src/app/nwjns-powerpuffgirl/utils/stream.ts | 30 ++++++++--- src/utils/hooks.ts | 2 +- src/utils/physicalEngine.ts | 33 +++++++++--- 6 files changed, 145 insertions(+), 34 deletions(-) diff --git a/src/app/nwjns-powerpuffgirl/_app.tsx b/src/app/nwjns-powerpuffgirl/_app.tsx index b914675..76cb5df 100644 --- a/src/app/nwjns-powerpuffgirl/_app.tsx +++ b/src/app/nwjns-powerpuffgirl/_app.tsx @@ -1,12 +1,16 @@ "use client"; -import { RefObject, useEffect, useRef } from "react"; +import { MouseEventHandler, RefObject, useCallback, useEffect, useRef } from "react"; import Link from "next/link"; import { BACKGROUND_BLUR, STAGE_HEIGHT, STAGE_WIDTH, STANDARD_HEIGHT } from "./model/constants"; import { NWJNSCharacter, defaultCharacters } from "./model/types"; import { FPS_OFFSET } from "@/utils/constants"; +import { Coordinate } from "@/utils/physicalEngine"; +import { moveSequence } from "./utils/stream"; +import { useSleep } from "@/utils/hooks"; + import "./nwjns.scss"; export default function NWJNS_Powerpuffgirl() { @@ -16,7 +20,7 @@ export default function NWJNS_Powerpuffgirl() { const bgLeftRef: RefObject = useRef(null); const bgRightRef: RefObject = useRef(null); - const charaRef = useRef>([...defaultCharacters]); + const charaList = useRef>([...defaultCharacters]); useEffect(() => { document.documentElement.style.setProperty("--blur", `${BACKGROUND_BLUR}px`); @@ -24,11 +28,11 @@ export default function NWJNS_Powerpuffgirl() { setBackground(); window.addEventListener("resize", setBackground); - const hoverInterval = setInterval(charaHovering, FPS_OFFSET); + const moveInterval = setInterval(charaMove, FPS_OFFSET); return () => { window.removeEventListener("resize", setBackground); - clearInterval(hoverInterval); + clearInterval(moveInterval); }; }, []); @@ -48,8 +52,6 @@ export default function NWJNS_Powerpuffgirl() { const horizonal = (window.innerWidth - STAGE_WIDTH[i]) / 2; const vertical = (window.innerHeight - STAGE_HEIGHT[i]) / 2; - // console.log(i, horizonal, vertical); - stageRef.current.style.width = STAGE_WIDTH[i] + "px"; stageRef.current.style.height = STAGE_HEIGHT[i] + "px"; @@ -65,24 +67,53 @@ export default function NWJNS_Powerpuffgirl() { } }; - const charaHovering = () => { - charaRef.current.map((v) => { + const charaMove = useCallback(() => { + charaList.current.forEach((v, i) => { const charaRef = v.ref; - + const charaPhysics = v.physics; if (charaRef.current === null) return; - const nowY = charaRef.current.offsetTop; + charaPhysics.HOVER.vy = charaPhysics.HOVER_SEQ.next().value; + + let endX = charaPhysics.DST.X + charaPhysics.HOVER.vx; + let endY = charaPhysics.DST.Y + charaPhysics.HOVER.vy; - charaRef.current.style.top = nowY + (v.hover.next().value as number) + "px"; + charaRef.current.style.left = endX + "px"; + charaRef.current.style.top = endY + "px"; }); + }, []); + + const singleMove = async (end: Coordinate) => { + const charaRef = charaList.current[0].ref; + + if (charaRef.current === null) return; + const start = { X: charaRef.current.offsetLeft, Y: charaRef.current.offsetTop }; + const seq = moveSequence(start, end, 70); + + let seqNow; + do { + await useSleep(FPS_OFFSET); + + seqNow = seq.next(); + + charaList.current[0].physics.DST.X = seqNow.value.X; + charaList.current[0].physics.DST.Y = seqNow.value.Y; + } while (!seqNow.done); + }; + + const mouseClickEvent: MouseEventHandler = (e: React.MouseEvent) => { + const clickX = e.clientX; + const clickY = e.clientY; + + singleMove({ X: clickX, Y: clickY }); }; return ( -
+
- {charaRef.current.map((v, i) => { + {charaList.current.map((v, i) => { return ( -
+
A
); diff --git a/src/app/nwjns-powerpuffgirl/model/types.ts b/src/app/nwjns-powerpuffgirl/model/types.ts index eba59c5..71b8576 100644 --- a/src/app/nwjns-powerpuffgirl/model/types.ts +++ b/src/app/nwjns-powerpuffgirl/model/types.ts @@ -14,12 +14,13 @@ import { } from "@/utils/nwjnsCharacter"; import { StaticImageData } from "next/image"; import { RefObject, createRef } from "react"; +import { Coordinate, Vector } from "@/utils/physicalEngine"; import { hoveringSequence } from "../utils/stream"; export type NWJNSCharacter = { name: string; ref: RefObject; - hover: Generator; + physics: NWJNSPhysics; images: NWJNSImage; }; @@ -32,11 +33,39 @@ export type NWJNSImage = { rev3: StaticImageData; }; +export type NWJNSPhysics = { + DST: Coordinate; + HOVER: Vector; + HOVER_SEQ: Generator; +}; + +export const haerinImages = { + fow1: HaerinFow1, + fow2: HaerinFow2, + fow3: HaerinFow3, + rev1: HaerinRev1, + rev2: HaerinRev2, + rev3: HaerinRev3, +}; + +export const danielleImages = { + fow1: DanielleFow1, + fow2: DanielleFow2, + fow3: DanielleFow3, + rev1: DanielleRev1, + rev2: DanielleRev2, + rev3: DanielleRev3, +}; + export const defaultCharacters: Array = [ { name: "haerin", ref: createRef(), - hover: hoveringSequence(), + physics: { + DST: { X: 0, Y: 0 } as Coordinate, + HOVER: { vx: 0, vy: 0 } as Vector, + HOVER_SEQ: hoveringSequence(), + }, images: { fow1: HaerinFow1, fow2: HaerinFow2, @@ -49,7 +78,11 @@ export const defaultCharacters: Array = [ { name: "danielle", ref: createRef(), - hover: hoveringSequence(), + physics: { + DST: { X: 0, Y: 0 } as Coordinate, + HOVER: { vx: 0, vy: 0 } as Vector, + HOVER_SEQ: hoveringSequence(), + }, images: { fow1: DanielleFow1, fow2: DanielleFow2, diff --git a/src/app/nwjns-powerpuffgirl/nwjns.scss b/src/app/nwjns-powerpuffgirl/nwjns.scss index 74e4fb6..bbb7d94 100644 --- a/src/app/nwjns-powerpuffgirl/nwjns.scss +++ b/src/app/nwjns-powerpuffgirl/nwjns.scss @@ -1,8 +1,18 @@ +.nwjns-screen { + position: fixed; + overflow: hidden; + width: 100%; + height: 100%; +} + .nwjns-stage { position: absolute; top: 50%; left: 50%; + // width: 100%; + // height: 100%; + border-radius: 5px; background-color: aqua; @@ -57,8 +67,8 @@ .chara-div { position: absolute; - top: 10%; - left: 20%; + // top: 15%; + // left: 25%; width: 10vh; height: 10vh; @@ -66,6 +76,8 @@ border-radius: 5vh; border-width: 2px; border-color: purple; + + transform: translate(-50%, -50%); } .temp { diff --git a/src/app/nwjns-powerpuffgirl/utils/stream.ts b/src/app/nwjns-powerpuffgirl/utils/stream.ts index 26b4b20..5461b38 100644 --- a/src/app/nwjns-powerpuffgirl/utils/stream.ts +++ b/src/app/nwjns-powerpuffgirl/utils/stream.ts @@ -1,19 +1,21 @@ -export function* hoveringSequence() { - const seq: Array = []; // (-2) 5개, (2) 10개, (-2) 5개 - for (let i = 0; i < 10; i++) { - seq.push(-1); +import { Coordinate, getBezierArray } from "@/utils/physicalEngine"; + +export function* hoveringSequence(): Generator { + const seq: Array = [-1]; // (-2) 5개, (2) 10개, (-2) 5개 + for (let i = 1; i < 10; i++) { + seq.push(seq[seq.length - 1] - 1); } for (let i = 0; i < 2; i++) { - seq.push(0); + seq.push(seq[seq.length - 1]); } for (let i = 0; i < 20; i++) { - seq.push(1); + seq.push(seq[seq.length - 1] + 1); } for (let i = 0; i < 2; i++) { - seq.push(0); + seq.push(seq[seq.length - 1]); } for (let i = 0; i < 10; i++) { - seq.push(-1); + seq.push(seq[seq.length - 1] - 1); } // let escape: boolean = false; @@ -32,3 +34,15 @@ export function* hoveringSequence() { } } } + +export function* moveSequence(start: Coordinate, end: Coordinate, frames: number): Generator { + const moveX = end.X - start.X; + const moveY = end.Y - start.Y; + const xRoute = getBezierArray(frames).map((v) => v * moveX + start.X); + const yRoute = getBezierArray(frames).map((v) => v * moveY + start.Y); + + for (let i = 0; i < frames - 1; i++) { + yield { X: xRoute[i], Y: yRoute[i] } as Coordinate; + } + return { X: xRoute[frames - 1], Y: yRoute[frames - 1] } as Coordinate; +} diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts index 6366d0b..13d3db5 100644 --- a/src/utils/hooks.ts +++ b/src/utils/hooks.ts @@ -1 +1 @@ -export const useSleep = (delay: number) => new Promise((resolve) => setTimeout(resolve, delay)); +export const useSleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); diff --git a/src/utils/physicalEngine.ts b/src/utils/physicalEngine.ts index 9c69c56..c4392ae 100644 --- a/src/utils/physicalEngine.ts +++ b/src/utils/physicalEngine.ts @@ -1,18 +1,18 @@ -export interface Vector { +export type Vector = { vx: number; vy: number; -} +}; -export interface Coordinate { +export type Coordinate = { X: number; Y: number; -} +}; -export interface Circle { +export type Circle = { x: number; y: number; d: number; -} +}; export const lerp = (start: number, end: number, t: number): number => { return start * (1 - t) + end * t; @@ -60,3 +60,24 @@ export const reactionByCircleCollision = (data: Array, index: num return result; }; + +export const getBezierArray = (n: number): Array => { + const result: Array = []; + + const delay = 5; + n -= delay * 2; + + for (let i = 0; i < delay; i++) { + result.push(0); + } + for (let i = 1; i <= n; i++) { + const t = i / n; + + result.push(t * t * (3 - 2 * t)); + } + for (let i = 0; i < delay; i++) { + result.push(1); + } + + return result; +}; From cfcadd5ec5b827fc58f2a7d5468beb026e916746 Mon Sep 17 00:00:00 2001 From: Jae-Seong Jeong Date: Mon, 25 Sep 2023 10:23:04 +0900 Subject: [PATCH 06/15] =?UTF-8?q?:zap:=20=EA=B8=B0=EB=B3=B8=20=EC=9D=B8?= =?UTF-8?q?=ED=84=B0=EB=9E=99=EC=85=98=20=EC=98=A4=EB=B8=8C=EC=A0=9D?= =?UTF-8?q?=ED=8A=B8=205=EA=B0=9C=EB=A1=9C=20=EB=8A=98=EB=A6=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/nwjns-powerpuffgirl/_app.tsx | 31 +++++++---- src/app/nwjns-powerpuffgirl/model/types.ts | 58 +++++++++++++++++++-- src/app/nwjns-powerpuffgirl/nwjns.scss | 10 ++-- src/app/nwjns-powerpuffgirl/utils/stream.ts | 33 +++++++++--- src/components/components.scss | 2 + 5 files changed, 110 insertions(+), 24 deletions(-) diff --git a/src/app/nwjns-powerpuffgirl/_app.tsx b/src/app/nwjns-powerpuffgirl/_app.tsx index 76cb5df..a805a84 100644 --- a/src/app/nwjns-powerpuffgirl/_app.tsx +++ b/src/app/nwjns-powerpuffgirl/_app.tsx @@ -30,6 +30,18 @@ export default function NWJNS_Powerpuffgirl() { const moveInterval = setInterval(charaMove, FPS_OFFSET); + // charaList.current.map((v, i) => + // singleMove(i, { X: window.innerWidth * 0.1 + 50 * i, Y: window.innerHeight * 0.4 + 100 * i }, 50) + // ); + { + const frames = 50; + singleMove(0, { X: window.innerWidth * 0.15 - 50, Y: window.innerHeight * 0.5 - 100 }, frames); + singleMove(1, { X: window.innerWidth * 0.15, Y: window.innerHeight * 0.5 }, frames); + singleMove(2, { X: window.innerWidth * 0.15 - 50, Y: window.innerHeight * 0.5 + 100 }, frames); + singleMove(3, { X: window.innerWidth * 0.15 + 50, Y: window.innerHeight * 0.5 - 100 }, frames); + singleMove(4, { X: window.innerWidth * 0.15 + 50, Y: window.innerHeight * 0.5 + 100 }, frames); + } + return () => { window.removeEventListener("resize", setBackground); clearInterval(moveInterval); @@ -83,12 +95,13 @@ export default function NWJNS_Powerpuffgirl() { }); }, []); - const singleMove = async (end: Coordinate) => { - const charaRef = charaList.current[0].ref; + const singleMove = async (index: number, end: Coordinate, frames: number = 70) => { + const charaRef = charaList.current[index].ref; + const charaPhysics = charaList.current[index].physics; if (charaRef.current === null) return; const start = { X: charaRef.current.offsetLeft, Y: charaRef.current.offsetTop }; - const seq = moveSequence(start, end, 70); + const seq = moveSequence(start, end, frames); let seqNow; do { @@ -96,16 +109,16 @@ export default function NWJNS_Powerpuffgirl() { seqNow = seq.next(); - charaList.current[0].physics.DST.X = seqNow.value.X; - charaList.current[0].physics.DST.Y = seqNow.value.Y; + charaPhysics.DST.X = seqNow.value.X; + charaPhysics.DST.Y = seqNow.value.Y; } while (!seqNow.done); }; const mouseClickEvent: MouseEventHandler = (e: React.MouseEvent) => { - const clickX = e.clientX; - const clickY = e.clientY; - - singleMove({ X: clickX, Y: clickY }); + charaList.current.map((v, i) => { + if (v.ref.current === null) return; + singleMove(i, { X: v.ref.current.offsetLeft + window.innerWidth * 0.35, Y: v.ref.current.offsetTop }); + }); }; return ( diff --git a/src/app/nwjns-powerpuffgirl/model/types.ts b/src/app/nwjns-powerpuffgirl/model/types.ts index 71b8576..4219f10 100644 --- a/src/app/nwjns-powerpuffgirl/model/types.ts +++ b/src/app/nwjns-powerpuffgirl/model/types.ts @@ -58,13 +58,65 @@ export const danielleImages = { }; export const defaultCharacters: Array = [ + { + name: "minji", + ref: createRef(), + physics: { + DST: { X: 0, Y: 0 } as Coordinate, + HOVER: { vx: 0, vy: 0 } as Vector, + HOVER_SEQ: hoveringSequence(0), + }, + images: { + fow1: DanielleFow1, + fow2: DanielleFow2, + fow3: DanielleFow3, + rev1: DanielleRev1, + rev2: DanielleRev2, + rev3: DanielleRev3, + }, + }, + { + name: "hanni", + ref: createRef(), + physics: { + DST: { X: 0, Y: 0 } as Coordinate, + HOVER: { vx: 0, vy: 0 } as Vector, + HOVER_SEQ: hoveringSequence(1), + }, + images: { + fow1: DanielleFow1, + fow2: DanielleFow2, + fow3: DanielleFow3, + rev1: DanielleRev1, + rev2: DanielleRev2, + rev3: DanielleRev3, + }, + }, + + { + name: "danielle", + ref: createRef(), + physics: { + DST: { X: 0, Y: 0 } as Coordinate, + HOVER: { vx: 0, vy: 0 } as Vector, + HOVER_SEQ: hoveringSequence(2), + }, + images: { + fow1: DanielleFow1, + fow2: DanielleFow2, + fow3: DanielleFow3, + rev1: DanielleRev1, + rev2: DanielleRev2, + rev3: DanielleRev3, + }, + }, { name: "haerin", ref: createRef(), physics: { DST: { X: 0, Y: 0 } as Coordinate, HOVER: { vx: 0, vy: 0 } as Vector, - HOVER_SEQ: hoveringSequence(), + HOVER_SEQ: hoveringSequence(3), }, images: { fow1: HaerinFow1, @@ -76,12 +128,12 @@ export const defaultCharacters: Array = [ }, }, { - name: "danielle", + name: "hyein", ref: createRef(), physics: { DST: { X: 0, Y: 0 } as Coordinate, HOVER: { vx: 0, vy: 0 } as Vector, - HOVER_SEQ: hoveringSequence(), + HOVER_SEQ: hoveringSequence(4), }, images: { fow1: DanielleFow1, diff --git a/src/app/nwjns-powerpuffgirl/nwjns.scss b/src/app/nwjns-powerpuffgirl/nwjns.scss index bbb7d94..a5d513a 100644 --- a/src/app/nwjns-powerpuffgirl/nwjns.scss +++ b/src/app/nwjns-powerpuffgirl/nwjns.scss @@ -23,10 +23,10 @@ .nwjns-background-blur { filter: blur(var(--blur)); -webkit-filter: blur(var(--blur)); + backdrop-filter: blur(1px); + -webkit-backdrop-filter: blur(var(--blur)); - opacity: 0.5; - - background-color: rgb(174, 255, 0); + background-color: rgba(174, 255, 0, 0.5); } .nwjns-background-blur.top { @@ -67,8 +67,8 @@ .chara-div { position: absolute; - // top: 15%; - // left: 25%; + top: 50%; + left: -10%; width: 10vh; height: 10vh; diff --git a/src/app/nwjns-powerpuffgirl/utils/stream.ts b/src/app/nwjns-powerpuffgirl/utils/stream.ts index 5461b38..2977d7a 100644 --- a/src/app/nwjns-powerpuffgirl/utils/stream.ts +++ b/src/app/nwjns-powerpuffgirl/utils/stream.ts @@ -1,28 +1,47 @@ import { Coordinate, getBezierArray } from "@/utils/physicalEngine"; -export function* hoveringSequence(): Generator { +export function* hoveringSequence(index: number): Generator { const seq: Array = [-1]; // (-2) 5개, (2) 10개, (-2) 5개 - for (let i = 1; i < 10; i++) { + // for (let i = 1; i < 10; i++) { + // seq.push(seq[seq.length - 1] - 1); + // } + // for (let i = 0; i < 2; i++) { + // seq.push(seq[seq.length - 1]); + // } + // for (let i = 0; i < 20; i++) { + // seq.push(seq[seq.length - 1] + 1); + // } + // for (let i = 0; i < 2; i++) { + // seq.push(seq[seq.length - 1]); + // } + // for (let i = 0; i < 10; i++) { + // seq.push(seq[seq.length - 1] - 1); + // } + for (let i = 1; i < 5; i++) { seq.push(seq[seq.length - 1] - 1); + seq.push(seq[seq.length - 1]); } for (let i = 0; i < 2; i++) { seq.push(seq[seq.length - 1]); } - for (let i = 0; i < 20; i++) { + for (let i = 0; i < 10; i++) { seq.push(seq[seq.length - 1] + 1); + seq.push(seq[seq.length - 1]); } for (let i = 0; i < 2; i++) { seq.push(seq[seq.length - 1]); } - for (let i = 0; i < 10; i++) { + for (let i = 0; i < 5; i++) { seq.push(seq[seq.length - 1] - 1); + seq.push(seq[seq.length - 1]); } // let escape: boolean = false; - const delay = Math.floor(Math.random() * 2) * 22; - for (let i = 0; i < delay; i++) { - yield 0; + if (1 <= index && index <= 3) { + for (let i = 0; i < 22; i++) { + yield 0; + } } while (true) { diff --git a/src/components/components.scss b/src/components/components.scss index 7bbef6e..05b4d47 100644 --- a/src/components/components.scss +++ b/src/components/components.scss @@ -7,6 +7,8 @@ min-height: 100vh; min-height: -webkit-fill-available; + backdrop-filter: blur(1px); + opacity: 0; transition: 0.5s; From 481aefd26fdcbf0d90f128fa41c58d2cae2bc406 Mon Sep 17 00:00:00 2001 From: Jae-Seong Jeong Date: Mon, 25 Sep 2023 12:18:54 +0900 Subject: [PATCH 07/15] =?UTF-8?q?:sparkles:=20=EC=8A=A4=ED=94=84=EB=9D=BC?= =?UTF-8?q?=EC=9D=B4=ED=8A=B8=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/assets/images/nwjns/haerin-sprite.png | Bin 0 -> 8124 bytes src/app/nwjns-powerpuffgirl/_app.tsx | 67 +++++++++++++----- .../nwjns-powerpuffgirl/model/constants.ts | 1 + src/app/nwjns-powerpuffgirl/model/types.ts | 36 ++++++---- src/app/nwjns-powerpuffgirl/nwjns.scss | 17 +++++ src/utils/nwjnsCharacter.ts | 3 + 6 files changed, 93 insertions(+), 31 deletions(-) create mode 100644 public/assets/images/nwjns/haerin-sprite.png diff --git a/public/assets/images/nwjns/haerin-sprite.png b/public/assets/images/nwjns/haerin-sprite.png new file mode 100644 index 0000000000000000000000000000000000000000..27cbc13c7eb4ee04e7988e2ca6578acbdf86967f GIT binary patch literal 8124 zcmc&(dpK0<+g?bDqINmt5L=|8(aC9q3OVJFVk*oC1-m2u04PNGX#q=NU%7 z2+1j-j4?8pL1Qo&j4|J${cYbLu3f+V+u!vqm$}|q*Sh9?-{*er`?;TYMVguDZRZu` z1pr{XfxeD80PutY0LQ5h#+GYmY+EN}~?$@1fUITyw@xk%x`tQtk z-(?pVS{#!0HS=sT%TTzlC|<^^Te!m|!cyX#+tTg*+YO?k^9HYYOqE>n@$l^FervH~ zlcZEJ#3Tx0K2&9pqx+Hv!XV+u>?(%!sY0QY>t!(mhc(p6LyrQI1s(Fo zTb?97RlU;FtKnl#(Dk>RsMRX6YQ3~=Dzg5~$0M#o+lR)C@q<`Xal3%avYK*xmBwz@ z$63QphLF;|FAt{temv!g9RJSfs{NL!PezPm{1a4PxPIJKx${mjqe(&AxWa6*Ej`m|_KnXofEC9vEUTa%#AUOck)95~Uj56id6o#?+3KNx*&6^L`&R!s{PVSZ!J9lt17lqt z^42|^9CDX9imJg|dyu-9klOC9uGid4J7zc2tuBpT?P zzUbdaB^-4U@2v&~3FL^P*WY+|4YloXBSA8F<0noW?azixor~!|B`tfiMaB2V0#X9ksoBSr2ZgRov)-3@VR8E8;!t+|D_nxP~VC`USXwd0eTX7K{ z5ypEBAfJ^6`D5Cq(;Ol{hEiL(ZGVhHWp;=Dv9bg+V3iQyrGMtH9~2qm1b`(6=4eJi zz3=?q0f}+rCC#1~djL4a&lw#${n;y(Tj`+R=dao~|v?&6yTxs}T*T-m&Ej_p5|^zaVn zksqT|zwy@n7y$+c0InZHnH*r-kI~N_Joi%&mD~8oxVNCN5{b%a&{~uNl%_WQgJ4au zT}G9@5HIx_olYFP*>N3})Za7wjbO=i0i$1K?+${Pa~=fsQIl9-+v#~uHOp6vzW6HF zn5a>F*X3PK``I?3a(^cI)FzK$X|`A4O4h!36b>06-bwWHsuXik8R#Dy_BUd9Pa%}U zscC*^@N^yCp)4>FIZl0*gM{GWV@%s_2EC6gdwDc6pKQ!!>Ldm3xJ8T&WP4}+Ds?tO zH8LJ#sI7rg{8^^hL^o@y8L3=2U7;7!+x%^^UzyaJ(G#aQgWtzYJLj0=Sr$xh>sJO@ z&u>!z;%X(W)&!z#Y^&bjRc&5%Wh@AD(ap+!V4#6^D8*f1GgsAY-LC)Pi}N~Pz6o|5 zKDhWH9P&7b_13ndb%M2&Js*;}sqy$2>B_8ysPWwi>*cQYAxR*(MXVL^5drxZCkeeZ z_7<9=y}XO<)u0uy4-ou2IPbFomz}kmxZ6(LSOXS4v#`JGYrnGGJxq>kjEdjpVCp?( z=JCE~vP|!psp9B806?)ffkPAzJz}5rQd)G!Y8jDn`3gshQ|nasUdLH#aQr3t6-X+f zX||ZF&D3kCijyt*!_ByOTk_#zK>~W=-YUpXR8mx~4mb?RfSBG#3GZbOhXc!s z>kRq#1SVa3*G-k1-dP}^ZQCrOA9OY&dp`TR+SF-+V!No^RKZ8<`V*E7Wvu>K2$$;8 z%J+g{6S=Oh<~}p|DsV9e3T`}(r0C9{@Sv+8Z^GL8Mi{vENYs#IXuyRLM&1Wn(I{;6 z>!|Ts;)3@@f#~U9vS;A3?e{2jGa{IdcU%oa3#+#2umObUr zuQak=)}200#zr^O{N&-)K!NU}J!0WvKnYi`z0u~}&g04R9Y5@0sN4})7>F$<7e!)f2+(YeXX zLbrz1zw-r!*L(=V|24=P7PSXSQ%~-_^)RZenw>kh0Gch67Jo|g5p-C zvP}^f<*^{ZG7xkwYssN3y8Mcd_jv9z9T>-K@>&{Y=mL0TYJ%bh+qJ>LvycI z67*i1Bmg{AGj&#nd9MtoUiRnwPi)OujfEKF5&W8w2!;5R#cF<@1Ll62H5)>>uCp7; zMjk(dpd*?gE`gjOy}w~)kyWW8FL~+Rx7Ud*UnO{wF^nv{1}aw_E4+NvxYH+0fy^-0 z<^plv#ZDSpPEv;BU2=baYq6zc@47;*fjiac5+t2XeRddoEt^f=0ZMJAc~*kEBZa<5 zS5BQd`PWMMlXb5fuLls@G~=h8V0je2B(VaLkZg#irx_oMa*e*8cGPHnyd1A+g z8g*&moyLap);DcVtiUEovGiWbY!#kaD=CGPau@D{h|^)7;< z@mm(hl@qH5Z`QyeM`nhcn1DJNsQ_7gXF!nVL&Y}?^RJlMg@GD&;IT^SQe%dG>_|J5 zC4BjKWI8zkRbLgV^}A)GeD=R>h<`$pvzPfDu;qd-6}S>O5|=op@Y(I!oM9nhY#P)k zMPE(6vRfzy$qdsTr#Uu^4X&JbE+jN}zBRXb(n*SmW#R}Jn^Hn@1uZhu$9XL=KoPjK zx07jkadzc8+^aUg07h@qBVrYx?JFZ>$>>pz^TH3?PrNPAKCcI6Og--0v|`|ZiKNyJ zBoKIWl~jc~$S|MD+pZ3s`NNW?(kSSd-8cCe$Heb^sj|XH_C>d?n1L2w0h56G5;<(r zGNqT%boA^@AEal$G^#1`WesvlFCEU_+40ZE>aN5j=3rF`D`xJ6df>4PLBhaVl(blj zt!9`Xxim9hliTR&g*2NB5JS5j?)H?4KH4I)+Z6LhdFW(RU6+~Eu`>~#E_i?AgqKZ^ zs1@}7LA%H=-MsXKkoOP4fJ(S98rmFld~wUm_JxEGD<@<6k@DCM~j3EUGL?j2zf7wp|A2p(wcXdVOot_(~*Wnc0~J)@B(UFOM3 zoIVcSUn$tvGc{i$dJo~?>imT~apUv(XWPNnCHc@p-8jEv84-PDH9HnfzIWQ3~SL4SHCAP6~d zF)%an8r=K}GV?-UEv63p+-a|^#8xm|EkbNn1UBoOqj9r8@cJc|Q}jn;`cL%S3-+L) z^u|9>@r$C;hCTe;(%xjjp+`^4wi`PrfYWpkgTxknh1TtjbnC9VRlO-LLhaN+AwKg+ z)`+>lW+X+zPcKUz%QRHW`b2g;BC>7H#UeG8WHDCh>xJxS^(ifvU2~N{3j`@C?ml@! z)^EHyDx@vVC9A^kv7|0TJ*6!*p;vZDlG=cyKqvB;rn%GEodQ4xG1shUb%64@-oRGnXF(S?$3vTy! zIL9d!Mt4V0FZMa4Gr$v>X#+*Xj0(!DxCs*6$FK_3HOxX?La4dS~6Sm3Qr zpS#69HNy8{8Oxf$hriPetq0=)5-dB*CCx}n2X#3;o`#Sve^>d>li_g#8Tiqf){1CW zF`6Hjh9B)@$qXp^Q%-SS7VM{Q&1%K8>A%) zY$m+C+JtY}&>Jeu@KUZm?R0?NFkGoC-a7`Fdx6u{mBhtip|(fv<20rE+?W|Pr|;77 z-Tqr~ZBq-ng@mu;6D6$8h~6Wh3o(4pH7<&ZhoxKJ`9x9^W#<~YqvdU|wfRPT^+maK zae$JN%V^P|-_K8#^Hoxe1xr&teNWbwCW&6d#v+P;Y%x;@E|%)N{21;?VESSx^U~;Z zHZruy7i`10WXe3mR>CHP-|T-i@ITSg_2aCyQ>r9zYkaG%gwvc~OmBJ8O22g=smu)X zrn@&f0~AV{`%8=m7`H<$guDRaWf{rtk#FK^eYE@@i`)rWF9ssuug&G9YIi^nH|M*| z>IGR*J7f9%j&-f53xl!(`W=Qcaq?-_8?3zs6uvq9?U57w%6_T(7*M)8O!A2P?gvS_ zAGt&k3ovdD2_wF@=*GFz@Klp|466+;#|m0nI4#$Bi(~pj12+&cS#&-*7J>8-<>{+)pCB+8qI2fk?JNyt1oRl_!{_!<6g_@^zGb zuv;3~=x$P0I`N4E2t6}8Div>C(4M>KG@70+{uA%Huz5-?28|V*ptQi$7lZM%?-m5q zs&+v-{kYE%oy6QHb!r*Ps%rh)sk7!&jTx_MCv#VVTN7fsat%XN@{GzFyFQW7vjOVC z%ThwuGLZrs|r92Zsu`UJ@?66h4T(3Y8PU)@Q zBLTV$D`wzLWCpZ)vL=vP{dV)~O+SHkP1aftEX9;e_gNM(<*Qzy*i7GeQgnzgwdfsf zv^)SzqzTrJor_7yZXVy4(bswQ&d{;C7MM15zLo%~CW7iJUtPnB@quY;MHE*&7OO~==?&=K z-*vgW_Zsq6CrNc>Wnwq^RnfvS$nF;;Z=^U_QellHb(L}N4W&@~2)NpE)8}PmnBHe zU=*)QZs-h{FCv>JyY#nUM#y}JQX3s3Q8o=s54f1MV@%Y0a-ma@5E@v(Z5W;(MqyV# zjkPekHX2(%=Y$`u_-t4kSUOw@a&7pa*TeokIMGi9IWqfgxGGo!pla5-B7;+XELUfX-Q!6{6v3iWG zJFz55l-3sN>^m}hr;Fdr_j_iTzFud*Y2%ZVJ&5RCffjl&bSQk#!cZ4cV!kBUk&h@j zMxj_7Emljq7&UQtX&n2>5XUJxy?eTNvn=_&hQE)K)%0`c0F;zlY9plOq@}gaN$MC@ zu4QQ$1SfiLBR7`wO8V1+ld^Nm$9@yQjuL{Va{sf_m%B#(AHjo!X$In+vNBjc3kj5& z?!I;d`)!=T_c7-?7sR{6RrzNfSGv@}74p@0eOI&Wnpp{TU_67hX9*F;n%_u9xw+5v z`FL)l1P<8DL2sOh)g!&BG`iM1@p@*VBdWAU)W=vheOk4*-sV&BS z6L;F#K*_f8^vI6T3#)upS*#TO>P(!Z+nRQW^G zXc0HkcLAO-ah^h`NpyZ_<;|6CQnAsP!7F~jbj2B7C$P+d*WY?Ww_b_XHxZcwzGeu` s?`gUK{^}{nA1~I{=J@~rD4j$BSt^zB(YUCOtE(~4HPI({ stageWidth: 0, stageHeight: 0, charaSize: 0 }); const stageRef: RefObject = useRef(null); const bgTopRef: RefObject = useRef(null); const bgBottomRef: RefObject = useRef(null); @@ -23,10 +24,8 @@ export default function NWJNS_Powerpuffgirl() { const charaList = useRef>([...defaultCharacters]); useEffect(() => { - document.documentElement.style.setProperty("--blur", `${BACKGROUND_BLUR}px`); - - setBackground(); - window.addEventListener("resize", setBackground); + initialize(); + window.addEventListener("resize", initialize); const moveInterval = setInterval(charaMove, FPS_OFFSET); @@ -35,20 +34,22 @@ export default function NWJNS_Powerpuffgirl() { // ); { const frames = 50; - singleMove(0, { X: window.innerWidth * 0.15 - 50, Y: window.innerHeight * 0.5 - 100 }, frames); + const distShort = offsetRef.current.charaSize; + const distLong = (distShort / 4) * 5; + singleMove(0, { X: window.innerWidth * 0.15 - distShort, Y: window.innerHeight * 0.5 - distLong }, frames); singleMove(1, { X: window.innerWidth * 0.15, Y: window.innerHeight * 0.5 }, frames); - singleMove(2, { X: window.innerWidth * 0.15 - 50, Y: window.innerHeight * 0.5 + 100 }, frames); - singleMove(3, { X: window.innerWidth * 0.15 + 50, Y: window.innerHeight * 0.5 - 100 }, frames); - singleMove(4, { X: window.innerWidth * 0.15 + 50, Y: window.innerHeight * 0.5 + 100 }, frames); + singleMove(2, { X: window.innerWidth * 0.15 - distLong, Y: window.innerHeight * 0.5 + distShort }, frames); + singleMove(3, { X: window.innerWidth * 0.15 + distLong, Y: window.innerHeight * 0.5 - distShort }, frames); + singleMove(4, { X: window.innerWidth * 0.15 + distShort, Y: window.innerHeight * 0.5 + distLong }, frames); } return () => { - window.removeEventListener("resize", setBackground); + window.removeEventListener("resize", initialize); clearInterval(moveInterval); }; }, []); - const setBackground = () => { + const initialize = () => { if ( stageRef.current === null || bgTopRef.current === null || @@ -58,12 +59,19 @@ export default function NWJNS_Powerpuffgirl() { ) return; + document.documentElement.style.setProperty("--blur", `${BACKGROUND_BLUR}px`); + for (let i = STANDARD_HEIGHT.length - 1; i >= 0; i--) { if (STANDARD_HEIGHT[i] >= window.innerHeight) continue; const horizonal = (window.innerWidth - STAGE_WIDTH[i]) / 2; const vertical = (window.innerHeight - STAGE_HEIGHT[i]) / 2; + offsetRef.current.stageWidth = STAGE_WIDTH[i]; + offsetRef.current.stageHeight = STAGE_HEIGHT[i]; + offsetRef.current.charaSize = CHARACTER_SIZE[i]; + document.documentElement.style.setProperty("--chara-size", `${CHARACTER_SIZE[i]}px`); + stageRef.current.style.width = STAGE_WIDTH[i] + "px"; stageRef.current.style.height = STAGE_HEIGHT[i] + "px"; @@ -75,6 +83,14 @@ export default function NWJNS_Powerpuffgirl() { bgTopRef.current.style.width = STAGE_WIDTH[i] + 5 + "px"; bgBottomRef.current.style.width = STAGE_WIDTH[i] + 5 + "px"; + charaList.current.map((v) => { + const charaRef = v.ref; + if (charaRef.current === null) return; + + charaRef.current.style.width = CHARACTER_SIZE[i] + "px"; + charaRef.current.style.height = CHARACTER_SIZE[i] + "px"; + }); + break; } }; @@ -102,7 +118,6 @@ export default function NWJNS_Powerpuffgirl() { if (charaRef.current === null) return; const start = { X: charaRef.current.offsetLeft, Y: charaRef.current.offsetTop }; const seq = moveSequence(start, end, frames); - let seqNow; do { await useSleep(FPS_OFFSET); @@ -114,6 +129,21 @@ export default function NWJNS_Powerpuffgirl() { } while (!seqNow.done); }; + const interactionInitialize = () => { + const frames = 70; + const distShort = offsetRef.current.charaSize; + const distLong = (distShort / 4) * 5; + singleMove(0, { X: window.innerWidth * 0.15 - distShort, Y: window.innerHeight * 0.5 - distLong }, frames); + singleMove(1, { X: window.innerWidth * 0.15, Y: window.innerHeight * 0.5 }, frames); + singleMove(2, { X: window.innerWidth * 0.15 - distLong, Y: window.innerHeight * 0.5 + distShort }, frames); + singleMove(3, { X: window.innerWidth * 0.15 + distLong, Y: window.innerHeight * 0.5 - distShort }, frames); + singleMove(4, { X: window.innerWidth * 0.15 + distShort, Y: window.innerHeight * 0.5 + distLong }, frames); + + if (charaList.current[3].ref.current) { + charaList.current[3].ref.current.style.backgroundPosition = `${-distShort * 3}px 0`; + } + }; + const mouseClickEvent: MouseEventHandler = (e: React.MouseEvent) => { charaList.current.map((v, i) => { if (v.ref.current === null) return; @@ -122,10 +152,12 @@ export default function NWJNS_Powerpuffgirl() { }; return ( -
-
+
+
{charaList.current.map((v, i) => { - return ( + return i === 3 ? ( +
+ ) : (
A
@@ -139,6 +171,9 @@ export default function NWJNS_Powerpuffgirl() { 뒤로가기 +
+ 초기화 +
); } diff --git a/src/app/nwjns-powerpuffgirl/model/constants.ts b/src/app/nwjns-powerpuffgirl/model/constants.ts index 018c7b2..e05ca3a 100644 --- a/src/app/nwjns-powerpuffgirl/model/constants.ts +++ b/src/app/nwjns-powerpuffgirl/model/constants.ts @@ -1,4 +1,5 @@ export const STAGE_WIDTH = [360, 450]; export const STAGE_HEIGHT = [640, 800]; export const STANDARD_HEIGHT = [700, 900]; +export const CHARACTER_SIZE = [60, 80]; export const BACKGROUND_BLUR = 5; diff --git a/src/app/nwjns-powerpuffgirl/model/types.ts b/src/app/nwjns-powerpuffgirl/model/types.ts index 4219f10..7416451 100644 --- a/src/app/nwjns-powerpuffgirl/model/types.ts +++ b/src/app/nwjns-powerpuffgirl/model/types.ts @@ -39,23 +39,29 @@ export type NWJNSPhysics = { HOVER_SEQ: Generator; }; -export const haerinImages = { - fow1: HaerinFow1, - fow2: HaerinFow2, - fow3: HaerinFow3, - rev1: HaerinRev1, - rev2: HaerinRev2, - rev3: HaerinRev3, +export type Offsets = { + stageWidth: number; + stageHeight: number; + charaSize: number; }; -export const danielleImages = { - fow1: DanielleFow1, - fow2: DanielleFow2, - fow3: DanielleFow3, - rev1: DanielleRev1, - rev2: DanielleRev2, - rev3: DanielleRev3, -}; +// export const haerinImages = { +// fow1: HaerinFow1, +// fow2: HaerinFow2, +// fow3: HaerinFow3, +// rev1: HaerinRev1, +// rev2: HaerinRev2, +// rev3: HaerinRev3, +// }; + +// export const danielleImages = { +// fow1: DanielleFow1, +// fow2: DanielleFow2, +// fow3: DanielleFow3, +// rev1: DanielleRev1, +// rev2: DanielleRev2, +// rev3: DanielleRev3, +// }; export const defaultCharacters: Array = [ { diff --git a/src/app/nwjns-powerpuffgirl/nwjns.scss b/src/app/nwjns-powerpuffgirl/nwjns.scss index a5d513a..f708449 100644 --- a/src/app/nwjns-powerpuffgirl/nwjns.scss +++ b/src/app/nwjns-powerpuffgirl/nwjns.scss @@ -80,7 +80,24 @@ transform: translate(-50%, -50%); } +.chara-div.haerin { + border-radius: 0px; + border-width: 0px; + + background-image: url("../../../public/assets/images/nwjns/haerin-sprite.png"); + background-repeat: no-repeat; + background-position: -60px 0; + background-size: cover; +} + .temp { position: absolute; z-index: 1; } + +.reset { + position: absolute; + z-index: 1; + + right: 0%; +} diff --git a/src/utils/nwjnsCharacter.ts b/src/utils/nwjnsCharacter.ts index 1d22327..1aede32 100644 --- a/src/utils/nwjnsCharacter.ts +++ b/src/utils/nwjnsCharacter.ts @@ -1,5 +1,7 @@ import { StaticImageData } from "next/image"; +import HaerinSprite from "/public/assets/images/nwjns/haerin-sprite.png"; + import HaerinFow1 from "/public/assets/images/nwjns/haerin-fow-1.png"; import HaerinFow2 from "/public/assets/images/nwjns/haerin-fow-2.png"; import HaerinFow3 from "/public/assets/images/nwjns/haerin-fow-3.png"; @@ -21,6 +23,7 @@ export const charaSelector = (): StaticImageData => { }; export { + HaerinSprite, HaerinFow1, HaerinFow2, HaerinFow3, From 5bd4dcd411d34ad2eda90ff6c3aa95ece0e7b4f4 Mon Sep 17 00:00:00 2001 From: Jae-Seong Jeong Date: Mon, 25 Sep 2023 13:13:22 +0900 Subject: [PATCH 08/15] =?UTF-8?q?:zap:=20=EC=8A=A4=ED=94=84=EB=9D=BC?= =?UTF-8?q?=EC=9D=B4=ED=8A=B8=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4?= =?UTF-8?q?=EC=85=98=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets/images/nwjns/danielle-sprite.png | Bin 0 -> 6971 bytes src/app/nwjns-powerpuffgirl/_app.tsx | 29 ++++++++++++------ src/app/nwjns-powerpuffgirl/nwjns.scss | 11 ++++++- src/app/nwjns-powerpuffgirl/utils/stream.ts | 2 +- src/utils/nwjnsCharacter.ts | 2 ++ 5 files changed, 32 insertions(+), 12 deletions(-) create mode 100644 public/assets/images/nwjns/danielle-sprite.png diff --git a/public/assets/images/nwjns/danielle-sprite.png b/public/assets/images/nwjns/danielle-sprite.png new file mode 100644 index 0000000000000000000000000000000000000000..562887df7d205ba6fda07219474142fe208437ec GIT binary patch literal 6971 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 K+0rx4k^ct5_|TRB literal 0 HcmV?d00001 diff --git a/src/app/nwjns-powerpuffgirl/_app.tsx b/src/app/nwjns-powerpuffgirl/_app.tsx index 27288f5..e9588bf 100644 --- a/src/app/nwjns-powerpuffgirl/_app.tsx +++ b/src/app/nwjns-powerpuffgirl/_app.tsx @@ -118,12 +118,27 @@ export default function NWJNS_Powerpuffgirl() { if (charaRef.current === null) return; const start = { X: charaRef.current.offsetLeft, Y: charaRef.current.offsetTop }; const seq = moveSequence(start, end, frames); + const charaSize = offsetRef.current.charaSize; let seqNow; + let i = 0; do { await useSleep(FPS_OFFSET); + i++; seqNow = seq.next(); + if (start.X <= end.X) { + if (i === 1) charaRef.current.style.backgroundPosition = `${-charaSize}px 0`; + if (i === 10) charaRef.current.style.backgroundPosition = `${-charaSize * 0}px 0`; + if (i === frames - 10) charaRef.current.style.backgroundPosition = `${-charaSize}px 0`; + if (i === frames) charaRef.current.style.backgroundPosition = `${-charaSize * 2}px 0`; + } else { + if (i === 1) charaRef.current.style.backgroundPosition = `${-charaSize * 4}px 0`; + if (i === 10) charaRef.current.style.backgroundPosition = `${-charaSize * 3}px 0`; + if (i === frames - 10) charaRef.current.style.backgroundPosition = `${-charaSize * 4}px 0`; + if (i === frames) charaRef.current.style.backgroundPosition = `${-charaSize * 5}px 0`; + } + charaPhysics.DST.X = seqNow.value.X; charaPhysics.DST.Y = seqNow.value.Y; } while (!seqNow.done); @@ -139,9 +154,9 @@ export default function NWJNS_Powerpuffgirl() { singleMove(3, { X: window.innerWidth * 0.15 + distLong, Y: window.innerHeight * 0.5 - distShort }, frames); singleMove(4, { X: window.innerWidth * 0.15 + distShort, Y: window.innerHeight * 0.5 + distLong }, frames); - if (charaList.current[3].ref.current) { - charaList.current[3].ref.current.style.backgroundPosition = `${-distShort * 3}px 0`; - } + // if (charaList.current[3].ref.current) { + // charaList.current[3].ref.current.style.backgroundPosition = `${-distShort * 3}px 0`; + // } }; const mouseClickEvent: MouseEventHandler = (e: React.MouseEvent) => { @@ -155,13 +170,7 @@ export default function NWJNS_Powerpuffgirl() {
{charaList.current.map((v, i) => { - return i === 3 ? ( -
- ) : ( -
- A -
- ); + return
; })}
diff --git a/src/app/nwjns-powerpuffgirl/nwjns.scss b/src/app/nwjns-powerpuffgirl/nwjns.scss index f708449..d5b97b0 100644 --- a/src/app/nwjns-powerpuffgirl/nwjns.scss +++ b/src/app/nwjns-powerpuffgirl/nwjns.scss @@ -86,7 +86,16 @@ background-image: url("../../../public/assets/images/nwjns/haerin-sprite.png"); background-repeat: no-repeat; - background-position: -60px 0; + background-position: 0 0; + background-size: cover; +} +.chara-div.danielle { + border-radius: 0px; + border-width: 0px; + + background-image: url("../../../public/assets/images/nwjns/danielle-sprite.png"); + background-repeat: no-repeat; + background-position: 0 0; background-size: cover; } diff --git a/src/app/nwjns-powerpuffgirl/utils/stream.ts b/src/app/nwjns-powerpuffgirl/utils/stream.ts index 2977d7a..0c20512 100644 --- a/src/app/nwjns-powerpuffgirl/utils/stream.ts +++ b/src/app/nwjns-powerpuffgirl/utils/stream.ts @@ -54,7 +54,7 @@ export function* hoveringSequence(index: number): Generator { } } -export function* moveSequence(start: Coordinate, end: Coordinate, frames: number): Generator { +export function* moveSequence(start: Coordinate, end: Coordinate, frames: number): Generator { const moveX = end.X - start.X; const moveY = end.Y - start.Y; const xRoute = getBezierArray(frames).map((v) => v * moveX + start.X); diff --git a/src/utils/nwjnsCharacter.ts b/src/utils/nwjnsCharacter.ts index 1aede32..cc44595 100644 --- a/src/utils/nwjnsCharacter.ts +++ b/src/utils/nwjnsCharacter.ts @@ -1,6 +1,7 @@ import { StaticImageData } from "next/image"; import HaerinSprite from "/public/assets/images/nwjns/haerin-sprite.png"; +import DanielleSprite from "/public/assets/images/nwjns/danielle-sprite.png"; import HaerinFow1 from "/public/assets/images/nwjns/haerin-fow-1.png"; import HaerinFow2 from "/public/assets/images/nwjns/haerin-fow-2.png"; @@ -24,6 +25,7 @@ export const charaSelector = (): StaticImageData => { export { HaerinSprite, + DanielleSprite, HaerinFow1, HaerinFow2, HaerinFow3, From 6051ae1c3809559c25712b6abb2ef6b96252f154 Mon Sep 17 00:00:00 2001 From: Jae-Seong Jeong Date: Mon, 25 Sep 2023 16:34:28 +0900 Subject: [PATCH 09/15] =?UTF-8?q?:zap:=20=EB=90=98=EB=8F=8C=EC=95=84?= =?UTF-8?q?=EA=B0=80=EA=B8=B0=20z-index=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/nwjns-powerpuffgirl/_app.tsx | 13 ++++++++++--- src/app/nwjns-powerpuffgirl/nwjns.scss | 6 ++++-- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/app/nwjns-powerpuffgirl/_app.tsx b/src/app/nwjns-powerpuffgirl/_app.tsx index e9588bf..d83e4e1 100644 --- a/src/app/nwjns-powerpuffgirl/_app.tsx +++ b/src/app/nwjns-powerpuffgirl/_app.tsx @@ -29,9 +29,6 @@ export default function NWJNS_Powerpuffgirl() { const moveInterval = setInterval(charaMove, FPS_OFFSET); - // charaList.current.map((v, i) => - // singleMove(i, { X: window.innerWidth * 0.1 + 50 * i, Y: window.innerHeight * 0.4 + 100 * i }, 50) - // ); { const frames = 50; const distShort = offsetRef.current.charaSize; @@ -148,12 +145,22 @@ export default function NWJNS_Powerpuffgirl() { const frames = 70; const distShort = offsetRef.current.charaSize; const distLong = (distShort / 4) * 5; + + if (stageRef.current) { + stageRef.current.style.zIndex = "1"; + } + singleMove(0, { X: window.innerWidth * 0.15 - distShort, Y: window.innerHeight * 0.5 - distLong }, frames); singleMove(1, { X: window.innerWidth * 0.15, Y: window.innerHeight * 0.5 }, frames); singleMove(2, { X: window.innerWidth * 0.15 - distLong, Y: window.innerHeight * 0.5 + distShort }, frames); singleMove(3, { X: window.innerWidth * 0.15 + distLong, Y: window.innerHeight * 0.5 - distShort }, frames); singleMove(4, { X: window.innerWidth * 0.15 + distShort, Y: window.innerHeight * 0.5 + distLong }, frames); + setTimeout(() => { + if (stageRef.current) { + stageRef.current.style.zIndex = "0"; + } + }, FPS_OFFSET * 70); // if (charaList.current[3].ref.current) { // charaList.current[3].ref.current.style.backgroundPosition = `${-distShort * 3}px 0`; // } diff --git a/src/app/nwjns-powerpuffgirl/nwjns.scss b/src/app/nwjns-powerpuffgirl/nwjns.scss index d5b97b0..1bacc3a 100644 --- a/src/app/nwjns-powerpuffgirl/nwjns.scss +++ b/src/app/nwjns-powerpuffgirl/nwjns.scss @@ -9,13 +9,15 @@ position: absolute; top: 50%; left: 50%; + backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(5px); // width: 100%; // height: 100%; border-radius: 5px; - background-color: aqua; + background-color: rgba(0, 255, 255, 0.9); transform: translate(-50%, -50%); } @@ -24,7 +26,7 @@ filter: blur(var(--blur)); -webkit-filter: blur(var(--blur)); backdrop-filter: blur(1px); - -webkit-backdrop-filter: blur(var(--blur)); + -webkit-backdrop-filter: blur(1px); background-color: rgba(174, 255, 0, 0.5); } From 733da217ee80350988429542bb08eb7a94f10dd4 Mon Sep 17 00:00:00 2001 From: Jae-Seong Jeong Date: Mon, 25 Sep 2023 23:25:45 +0900 Subject: [PATCH 10/15] =?UTF-8?q?:construction:=20=EC=9E=84=EC=8B=9C=20?= =?UTF-8?q?=EC=BB=A4=EB=B0=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/nwjns-powerpuffgirl/_app.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/app/nwjns-powerpuffgirl/_app.tsx b/src/app/nwjns-powerpuffgirl/_app.tsx index d83e4e1..adb1c56 100644 --- a/src/app/nwjns-powerpuffgirl/_app.tsx +++ b/src/app/nwjns-powerpuffgirl/_app.tsx @@ -15,6 +15,7 @@ import "./nwjns.scss"; export default function NWJNS_Powerpuffgirl() { const offsetRef = useRef({ stageWidth: 0, stageHeight: 0, charaSize: 0 }); + const stageRef: RefObject = useRef(null); const bgTopRef: RefObject = useRef(null); const bgBottomRef: RefObject = useRef(null); @@ -160,10 +161,7 @@ export default function NWJNS_Powerpuffgirl() { if (stageRef.current) { stageRef.current.style.zIndex = "0"; } - }, FPS_OFFSET * 70); - // if (charaList.current[3].ref.current) { - // charaList.current[3].ref.current.style.backgroundPosition = `${-distShort * 3}px 0`; - // } + }, FPS_OFFSET * frames); }; const mouseClickEvent: MouseEventHandler = (e: React.MouseEvent) => { From 7f2ad1557c7fa4d279ea97ca076fa484dc4ba854 Mon Sep 17 00:00:00 2001 From: Jae-Seong Jeong Date: Tue, 26 Sep 2023 12:33:47 +0900 Subject: [PATCH 11/15] =?UTF-8?q?:zap:=20=EA=B8=B0=EA=B8=B0=EC=97=90=20?= =?UTF-8?q?=EB=94=B0=EB=A5=B8=20=ED=99=94=EB=A9=B4=20=EB=B0=98=EC=9D=91?= =?UTF-8?q?=ED=98=95/=EC=A0=81=EC=9D=91=ED=98=95=20resize=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/nwjns-powerpuffgirl/_app.tsx | 49 ++++++++++++------- .../nwjns-powerpuffgirl/model/constants.ts | 9 ++-- src/app/nwjns-powerpuffgirl/model/types.ts | 7 +++ src/app/nwjns-powerpuffgirl/nwjns.scss | 29 +++++++++-- src/utils/hooks.ts | 2 +- 5 files changed, 69 insertions(+), 27 deletions(-) diff --git a/src/app/nwjns-powerpuffgirl/_app.tsx b/src/app/nwjns-powerpuffgirl/_app.tsx index adb1c56..db6063d 100644 --- a/src/app/nwjns-powerpuffgirl/_app.tsx +++ b/src/app/nwjns-powerpuffgirl/_app.tsx @@ -4,12 +4,12 @@ import { MouseEventHandler, RefObject, useCallback, useEffect, useRef } from "re import Link from "next/link"; import { BACKGROUND_BLUR, CHARACTER_SIZE, STAGE_HEIGHT, STAGE_WIDTH, STANDARD_HEIGHT } from "./model/constants"; -import { NWJNSCharacter, Offsets, defaultCharacters } from "./model/types"; +import { NWJNSCharacter, Offsets, ScreenType, defaultCharacters } from "./model/types"; import { FPS_OFFSET } from "@/utils/constants"; import { Coordinate } from "@/utils/physicalEngine"; import { moveSequence } from "./utils/stream"; -import { useSleep } from "@/utils/hooks"; +import { sleep } from "@/utils/hooks"; import "./nwjns.scss"; @@ -21,6 +21,7 @@ export default function NWJNS_Powerpuffgirl() { const bgBottomRef: RefObject = useRef(null); const bgLeftRef: RefObject = useRef(null); const bgRightRef: RefObject = useRef(null); + const pageBlockRef: RefObject = useRef(null); const charaList = useRef>([...defaultCharacters]); @@ -59,35 +60,46 @@ export default function NWJNS_Powerpuffgirl() { document.documentElement.style.setProperty("--blur", `${BACKGROUND_BLUR}px`); + // 스크린 초기화 + let screenType: ScreenType; + if (window.innerHeight < (window.innerWidth * 16) / 9) screenType = ScreenType.Normal; + else screenType = ScreenType.Vertical; for (let i = STANDARD_HEIGHT.length - 1; i >= 0; i--) { - if (STANDARD_HEIGHT[i] >= window.innerHeight) continue; + if (screenType === ScreenType.Normal) { + if (STANDARD_HEIGHT[i] > window.innerHeight) continue; + } else { + if (STAGE_WIDTH[i] > window.innerWidth) continue; + } + if (i == 0 && pageBlockRef.current) { + pageBlockRef.current.style.display = "flex"; + } else if (pageBlockRef.current) { + pageBlockRef.current.style.display = "none"; + } + + console.log(STAGE_WIDTH[i], STAGE_HEIGHT[i]); - const horizonal = (window.innerWidth - STAGE_WIDTH[i]) / 2; - const vertical = (window.innerHeight - STAGE_HEIGHT[i]) / 2; + const horGap = (window.innerWidth - STAGE_WIDTH[i]) / 2; + const verGap = (window.innerHeight - STAGE_HEIGHT[i]) / 2; + // 오프셋 설정 offsetRef.current.stageWidth = STAGE_WIDTH[i]; offsetRef.current.stageHeight = STAGE_HEIGHT[i]; offsetRef.current.charaSize = CHARACTER_SIZE[i]; - document.documentElement.style.setProperty("--chara-size", `${CHARACTER_SIZE[i]}px`); + // 배경 resolution stageRef.current.style.width = STAGE_WIDTH[i] + "px"; stageRef.current.style.height = STAGE_HEIGHT[i] + "px"; - bgTopRef.current.style.height = vertical + "px"; - bgBottomRef.current.style.height = vertical + "px"; - bgLeftRef.current.style.width = horizonal + "px"; - bgRightRef.current.style.width = horizonal + "px"; + bgTopRef.current.style.height = verGap + "px"; + bgBottomRef.current.style.height = verGap + "px"; + bgLeftRef.current.style.width = horGap + "px"; + bgRightRef.current.style.width = horGap + "px"; bgTopRef.current.style.width = STAGE_WIDTH[i] + 5 + "px"; bgBottomRef.current.style.width = STAGE_WIDTH[i] + 5 + "px"; - charaList.current.map((v) => { - const charaRef = v.ref; - if (charaRef.current === null) return; - - charaRef.current.style.width = CHARACTER_SIZE[i] + "px"; - charaRef.current.style.height = CHARACTER_SIZE[i] + "px"; - }); + // Character size + document.documentElement.style.setProperty("--chara-size", `${CHARACTER_SIZE[i]}px`); break; } @@ -120,7 +132,7 @@ export default function NWJNS_Powerpuffgirl() { let seqNow; let i = 0; do { - await useSleep(FPS_OFFSET); + await sleep(FPS_OFFSET); i++; seqNow = seq.next(); @@ -188,6 +200,7 @@ export default function NWJNS_Powerpuffgirl() {
초기화
+
{`Screen size is too small`}
); } diff --git a/src/app/nwjns-powerpuffgirl/model/constants.ts b/src/app/nwjns-powerpuffgirl/model/constants.ts index e05ca3a..6a0aef2 100644 --- a/src/app/nwjns-powerpuffgirl/model/constants.ts +++ b/src/app/nwjns-powerpuffgirl/model/constants.ts @@ -1,5 +1,6 @@ -export const STAGE_WIDTH = [360, 450]; -export const STAGE_HEIGHT = [640, 800]; -export const STANDARD_HEIGHT = [700, 900]; -export const CHARACTER_SIZE = [60, 80]; +export const STAGE_WIDTH = [0, 225, 360, 450, 540, 675, 900]; +export const STAGE_HEIGHT = [0, 400, 640, 800, 960, 1200, 1600]; +export const STANDARD_WIDTH = [0, 225, 360, 450, 600, 750, 1000]; +export const STANDARD_HEIGHT = [0, 400, 640, 900, 1050, 1300, 1800]; +export const CHARACTER_SIZE = [0, 40, 60, 80, 100, 120, 160]; export const BACKGROUND_BLUR = 5; diff --git a/src/app/nwjns-powerpuffgirl/model/types.ts b/src/app/nwjns-powerpuffgirl/model/types.ts index 7416451..c3b73c6 100644 --- a/src/app/nwjns-powerpuffgirl/model/types.ts +++ b/src/app/nwjns-powerpuffgirl/model/types.ts @@ -45,6 +45,13 @@ export type Offsets = { charaSize: number; }; +export enum ScreenType { + Normal = 0, + Vertical = 1, + Mobile = 2, + Tablet = 3, +} + // export const haerinImages = { // fow1: HaerinFow1, // fow2: HaerinFow2, diff --git a/src/app/nwjns-powerpuffgirl/nwjns.scss b/src/app/nwjns-powerpuffgirl/nwjns.scss index 1bacc3a..d7cff44 100644 --- a/src/app/nwjns-powerpuffgirl/nwjns.scss +++ b/src/app/nwjns-powerpuffgirl/nwjns.scss @@ -72,8 +72,8 @@ top: 50%; left: -10%; - width: 10vh; - height: 10vh; + width: var(--chara-size); + height: var(--chara-size); border-radius: 5vh; border-width: 2px; @@ -103,12 +103,33 @@ .temp { position: absolute; - z-index: 1; + // z-index: 1; } .reset { position: absolute; - z-index: 1; + // z-index: 1; right: 0%; } + +.nwjns-not-support { + position: fixed; + overflow: hidden; + display: none; + justify-content: center; + align-items: center; + z-index: 99; + + width: 100%; + height: 100%; + + backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(5px); + + color: white; + font-size: large; + text-align: center; + + background-color: rgba(0, 0, 0, 0.8); +} diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts index 13d3db5..fe57bb6 100644 --- a/src/utils/hooks.ts +++ b/src/utils/hooks.ts @@ -1 +1 @@ -export const useSleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); +export const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); From 73286e89aa30652e5f16c3f87f80bb8f153d2940 Mon Sep 17 00:00:00 2001 From: Jae-Seong Jeong Date: Tue, 26 Sep 2023 16:28:45 +0900 Subject: [PATCH 12/15] =?UTF-8?q?:bug:=20Character=20=EC=82=AC=EC=9D=B4?= =?UTF-8?q?=EC=A6=88=EA=B0=80=20=EB=B0=98=EC=9D=91=ED=98=95=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20?= =?UTF-8?q?=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/nwjns-powerpuffgirl/_app.tsx | 28 ++++++++++--------- .../nwjns-powerpuffgirl/model/constants.ts | 8 +++--- src/app/nwjns-powerpuffgirl/model/types.ts | 9 ++---- src/app/sandbox/demonstrations.ts | 2 +- src/utils/hooks.ts | 1 - src/utils/types.ts | 6 ++++ src/utils/utilFunctions.ts | 4 +++ 7 files changed, 32 insertions(+), 26 deletions(-) delete mode 100644 src/utils/hooks.ts create mode 100644 src/utils/types.ts create mode 100644 src/utils/utilFunctions.ts diff --git a/src/app/nwjns-powerpuffgirl/_app.tsx b/src/app/nwjns-powerpuffgirl/_app.tsx index db6063d..a3ad31f 100644 --- a/src/app/nwjns-powerpuffgirl/_app.tsx +++ b/src/app/nwjns-powerpuffgirl/_app.tsx @@ -4,17 +4,18 @@ import { MouseEventHandler, RefObject, useCallback, useEffect, useRef } from "re import Link from "next/link"; import { BACKGROUND_BLUR, CHARACTER_SIZE, STAGE_HEIGHT, STAGE_WIDTH, STANDARD_HEIGHT } from "./model/constants"; -import { NWJNSCharacter, Offsets, ScreenType, defaultCharacters } from "./model/types"; -import { FPS_OFFSET } from "@/utils/constants"; +import { NWJNSCharacter, Offsets, defaultCharacters } from "./model/types"; +import { ScreenType } from "@/utils/types"; +import { FPS_OFFSET } from "@/utils/constants"; import { Coordinate } from "@/utils/physicalEngine"; import { moveSequence } from "./utils/stream"; -import { sleep } from "@/utils/hooks"; +import { getWindowRatio, sleep } from "@/utils/utilFunctions"; import "./nwjns.scss"; export default function NWJNS_Powerpuffgirl() { - const offsetRef = useRef({ stageWidth: 0, stageHeight: 0, charaSize: 0 }); + const offsetRef = useRef({ stageWidth: 0, stageHeight: 0, charaSize: 0, screenType: ScreenType.Normal }); const stageRef: RefObject = useRef(null); const bgTopRef: RefObject = useRef(null); @@ -26,6 +27,7 @@ export default function NWJNS_Powerpuffgirl() { const charaList = useRef>([...defaultCharacters]); useEffect(() => { + console.log(window.navigator.userAgent); initialize(); window.addEventListener("resize", initialize); @@ -61,11 +63,8 @@ export default function NWJNS_Powerpuffgirl() { document.documentElement.style.setProperty("--blur", `${BACKGROUND_BLUR}px`); // 스크린 초기화 - let screenType: ScreenType; - if (window.innerHeight < (window.innerWidth * 16) / 9) screenType = ScreenType.Normal; - else screenType = ScreenType.Vertical; for (let i = STANDARD_HEIGHT.length - 1; i >= 0; i--) { - if (screenType === ScreenType.Normal) { + if (getWindowRatio() > 9 / 16) { if (STANDARD_HEIGHT[i] > window.innerHeight) continue; } else { if (STAGE_WIDTH[i] > window.innerWidth) continue; @@ -76,8 +75,6 @@ export default function NWJNS_Powerpuffgirl() { pageBlockRef.current.style.display = "none"; } - console.log(STAGE_WIDTH[i], STAGE_HEIGHT[i]); - const horGap = (window.innerWidth - STAGE_WIDTH[i]) / 2; const verGap = (window.innerHeight - STAGE_HEIGHT[i]) / 2; @@ -100,6 +97,11 @@ export default function NWJNS_Powerpuffgirl() { // Character size document.documentElement.style.setProperty("--chara-size", `${CHARACTER_SIZE[i]}px`); + charaList.current.forEach((v) => { + if (v.ref.current) { + v.ref.current.style.backgroundPosition = `${-CHARACTER_SIZE[i] * 2}px, 0`; + } + }); break; } @@ -138,9 +140,9 @@ export default function NWJNS_Powerpuffgirl() { seqNow = seq.next(); if (start.X <= end.X) { - if (i === 1) charaRef.current.style.backgroundPosition = `${-charaSize}px 0`; + if (i === 1) charaRef.current.style.backgroundPosition = `${-charaSize * 1}px 0`; if (i === 10) charaRef.current.style.backgroundPosition = `${-charaSize * 0}px 0`; - if (i === frames - 10) charaRef.current.style.backgroundPosition = `${-charaSize}px 0`; + if (i === frames - 10) charaRef.current.style.backgroundPosition = `${-charaSize * 1}px 0`; if (i === frames) charaRef.current.style.backgroundPosition = `${-charaSize * 2}px 0`; } else { if (i === 1) charaRef.current.style.backgroundPosition = `${-charaSize * 4}px 0`; @@ -157,7 +159,7 @@ export default function NWJNS_Powerpuffgirl() { const interactionInitialize = () => { const frames = 70; const distShort = offsetRef.current.charaSize; - const distLong = (distShort / 4) * 5; + const distLong = (distShort * 5) / 4; if (stageRef.current) { stageRef.current.style.zIndex = "1"; diff --git a/src/app/nwjns-powerpuffgirl/model/constants.ts b/src/app/nwjns-powerpuffgirl/model/constants.ts index 6a0aef2..b03ffd0 100644 --- a/src/app/nwjns-powerpuffgirl/model/constants.ts +++ b/src/app/nwjns-powerpuffgirl/model/constants.ts @@ -1,6 +1,6 @@ -export const STAGE_WIDTH = [0, 225, 360, 450, 540, 675, 900]; -export const STAGE_HEIGHT = [0, 400, 640, 800, 960, 1200, 1600]; -export const STANDARD_WIDTH = [0, 225, 360, 450, 600, 750, 1000]; -export const STANDARD_HEIGHT = [0, 400, 640, 900, 1050, 1300, 1800]; +export const STAGE_WIDTH = [0, 270, 360, 450, 540, 675, 900]; +export const STAGE_HEIGHT = [0, 480, 640, 800, 960, 1200, 1600]; +export const STANDARD_WIDTH = [0, 270, 360, 450, 600, 750, 1000]; +export const STANDARD_HEIGHT = [0, 480, 640, 900, 1050, 1300, 1800]; export const CHARACTER_SIZE = [0, 40, 60, 80, 100, 120, 160]; export const BACKGROUND_BLUR = 5; diff --git a/src/app/nwjns-powerpuffgirl/model/types.ts b/src/app/nwjns-powerpuffgirl/model/types.ts index c3b73c6..57b8109 100644 --- a/src/app/nwjns-powerpuffgirl/model/types.ts +++ b/src/app/nwjns-powerpuffgirl/model/types.ts @@ -16,6 +16,7 @@ import { StaticImageData } from "next/image"; import { RefObject, createRef } from "react"; import { Coordinate, Vector } from "@/utils/physicalEngine"; import { hoveringSequence } from "../utils/stream"; +import { ScreenType } from "@/utils/types"; export type NWJNSCharacter = { name: string; @@ -43,15 +44,9 @@ export type Offsets = { stageWidth: number; stageHeight: number; charaSize: number; + screenType: ScreenType; }; -export enum ScreenType { - Normal = 0, - Vertical = 1, - Mobile = 2, - Tablet = 3, -} - // export const haerinImages = { // fow1: HaerinFow1, // fow2: HaerinFow2, diff --git a/src/app/sandbox/demonstrations.ts b/src/app/sandbox/demonstrations.ts index e38d560..18da064 100644 --- a/src/app/sandbox/demonstrations.ts +++ b/src/app/sandbox/demonstrations.ts @@ -1,6 +1,6 @@ /* eslint-disable react-hooks/rules-of-hooks */ import { MutableRefObject, RefObject } from "react"; -import { useSleep } from "../../utils/hooks"; +import { useSleep } from "../../utils/utilFunctions"; import { Toy, ToyPhysics } from "./model/types"; import { Coordinate } from "@/utils/physicalEngine"; import { SPIN_SPEED_OFFSET, TUTORIAL_INDEX } from "./model/constants"; diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts deleted file mode 100644 index fe57bb6..0000000 --- a/src/utils/hooks.ts +++ /dev/null @@ -1 +0,0 @@ -export const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); diff --git a/src/utils/types.ts b/src/utils/types.ts new file mode 100644 index 0000000..8bd04ba --- /dev/null +++ b/src/utils/types.ts @@ -0,0 +1,6 @@ +export enum ScreenType { + Normal = 0, + Vertical = 1, + Mobile = 2, + Tablet = 3, +} diff --git a/src/utils/utilFunctions.ts b/src/utils/utilFunctions.ts new file mode 100644 index 0000000..e603a0e --- /dev/null +++ b/src/utils/utilFunctions.ts @@ -0,0 +1,4 @@ +export const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); +export const getWindowRatio = (): number => { + return window.innerWidth / window.innerHeight; +}; From 1f3068fd4af5cb8f0c4d4548ae918331745be378 Mon Sep 17 00:00:00 2001 From: Jae-Seong Jeong Date: Tue, 26 Sep 2023 16:54:36 +0900 Subject: [PATCH 13/15] =?UTF-8?q?:zap:=20=EB=B0=98=EC=9D=91=ED=98=95/?= =?UTF-8?q?=EC=A0=81=EC=9D=91=ED=98=95=20=EA=B8=B0=EB=B3=B8=20=EC=9D=B8?= =?UTF-8?q?=ED=84=B0=EB=9E=99=EC=85=98=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/nwjns-powerpuffgirl/_app.tsx | 58 +++++++++++-------- .../nwjns-powerpuffgirl/model/constants.ts | 2 + 2 files changed, 36 insertions(+), 24 deletions(-) diff --git a/src/app/nwjns-powerpuffgirl/_app.tsx b/src/app/nwjns-powerpuffgirl/_app.tsx index a3ad31f..1b43b97 100644 --- a/src/app/nwjns-powerpuffgirl/_app.tsx +++ b/src/app/nwjns-powerpuffgirl/_app.tsx @@ -3,7 +3,14 @@ import { MouseEventHandler, RefObject, useCallback, useEffect, useRef } from "react"; import Link from "next/link"; -import { BACKGROUND_BLUR, CHARACTER_SIZE, STAGE_HEIGHT, STAGE_WIDTH, STANDARD_HEIGHT } from "./model/constants"; +import { + BACKGROUND_BLUR, + CHARACTER_SIZE, + STAGE_HEIGHT, + STAGE_WIDTH, + STANDARD_HEIGHT, + THRESHOLD_RATIO, +} from "./model/constants"; import { NWJNSCharacter, Offsets, defaultCharacters } from "./model/types"; import { ScreenType } from "@/utils/types"; @@ -28,29 +35,20 @@ export default function NWJNS_Powerpuffgirl() { useEffect(() => { console.log(window.navigator.userAgent); - initialize(); - window.addEventListener("resize", initialize); + resizeInitialize(); + window.addEventListener("resize", resizeInitialize); const moveInterval = setInterval(charaMove, FPS_OFFSET); - { - const frames = 50; - const distShort = offsetRef.current.charaSize; - const distLong = (distShort / 4) * 5; - singleMove(0, { X: window.innerWidth * 0.15 - distShort, Y: window.innerHeight * 0.5 - distLong }, frames); - singleMove(1, { X: window.innerWidth * 0.15, Y: window.innerHeight * 0.5 }, frames); - singleMove(2, { X: window.innerWidth * 0.15 - distLong, Y: window.innerHeight * 0.5 + distShort }, frames); - singleMove(3, { X: window.innerWidth * 0.15 + distLong, Y: window.innerHeight * 0.5 - distShort }, frames); - singleMove(4, { X: window.innerWidth * 0.15 + distShort, Y: window.innerHeight * 0.5 + distLong }, frames); - } + interactionInitialize(50); return () => { - window.removeEventListener("resize", initialize); + window.removeEventListener("resize", resizeInitialize); clearInterval(moveInterval); }; }, []); - const initialize = () => { + const resizeInitialize = () => { if ( stageRef.current === null || bgTopRef.current === null || @@ -156,8 +154,7 @@ export default function NWJNS_Powerpuffgirl() { } while (!seqNow.done); }; - const interactionInitialize = () => { - const frames = 70; + const interactionInitialize = (frames: number = 70) => { const distShort = offsetRef.current.charaSize; const distLong = (distShort * 5) / 4; @@ -165,11 +162,19 @@ export default function NWJNS_Powerpuffgirl() { stageRef.current.style.zIndex = "1"; } - singleMove(0, { X: window.innerWidth * 0.15 - distShort, Y: window.innerHeight * 0.5 - distLong }, frames); - singleMove(1, { X: window.innerWidth * 0.15, Y: window.innerHeight * 0.5 }, frames); - singleMove(2, { X: window.innerWidth * 0.15 - distLong, Y: window.innerHeight * 0.5 + distShort }, frames); - singleMove(3, { X: window.innerWidth * 0.15 + distLong, Y: window.innerHeight * 0.5 - distShort }, frames); - singleMove(4, { X: window.innerWidth * 0.15 + distShort, Y: window.innerHeight * 0.5 + distLong }, frames); + if (getWindowRatio() > THRESHOLD_RATIO) { + singleMove(0, { X: window.innerWidth * 0.15 - distShort, Y: window.innerHeight * 0.5 - distLong }, frames); + singleMove(1, { X: window.innerWidth * 0.15, Y: window.innerHeight * 0.5 }, frames); + singleMove(2, { X: window.innerWidth * 0.15 - distLong, Y: window.innerHeight * 0.5 + distShort }, frames); + singleMove(3, { X: window.innerWidth * 0.15 + distLong, Y: window.innerHeight * 0.5 - distShort }, frames); + singleMove(4, { X: window.innerWidth * 0.15 + distShort, Y: window.innerHeight * 0.5 + distLong }, frames); + } else { + singleMove(0, { X: -window.innerWidth * 0.3 - distShort, Y: window.innerHeight * 0.5 - distLong }, frames); + singleMove(1, { X: -window.innerWidth * 0.3, Y: window.innerHeight * 0.5 }, frames); + singleMove(2, { X: -window.innerWidth * 0.3 - distLong, Y: window.innerHeight * 0.5 + distShort }, frames); + singleMove(3, { X: -window.innerWidth * 0.3 + distLong, Y: window.innerHeight * 0.5 - distShort }, frames); + singleMove(4, { X: -window.innerWidth * 0.3 + distShort, Y: window.innerHeight * 0.5 + distLong }, frames); + } setTimeout(() => { if (stageRef.current) { @@ -181,7 +186,12 @@ export default function NWJNS_Powerpuffgirl() { const mouseClickEvent: MouseEventHandler = (e: React.MouseEvent) => { charaList.current.map((v, i) => { if (v.ref.current === null) return; - singleMove(i, { X: v.ref.current.offsetLeft + window.innerWidth * 0.35, Y: v.ref.current.offsetTop }); + + if (getWindowRatio() > THRESHOLD_RATIO) { + singleMove(i, { X: v.ref.current.offsetLeft + window.innerWidth * 0.35, Y: v.ref.current.offsetTop }); + } else { + singleMove(i, { X: v.ref.current.offsetLeft + window.innerWidth * 0.8, Y: v.ref.current.offsetTop }); + } }); }; @@ -199,7 +209,7 @@ export default function NWJNS_Powerpuffgirl() { 뒤로가기 -
+
interactionInitialize()}> 초기화
{`Screen size is too small`}
diff --git a/src/app/nwjns-powerpuffgirl/model/constants.ts b/src/app/nwjns-powerpuffgirl/model/constants.ts index b03ffd0..a108d44 100644 --- a/src/app/nwjns-powerpuffgirl/model/constants.ts +++ b/src/app/nwjns-powerpuffgirl/model/constants.ts @@ -3,4 +3,6 @@ export const STAGE_HEIGHT = [0, 480, 640, 800, 960, 1200, 1600]; export const STANDARD_WIDTH = [0, 270, 360, 450, 600, 750, 1000]; export const STANDARD_HEIGHT = [0, 480, 640, 900, 1050, 1300, 1800]; export const CHARACTER_SIZE = [0, 40, 60, 80, 100, 120, 160]; + export const BACKGROUND_BLUR = 5; +export const THRESHOLD_RATIO = 21 / 16; From b7cadc2b3973163ac89b818aec92f6c20026fbd3 Mon Sep 17 00:00:00 2001 From: Jae-Seong Jeong Date: Tue, 26 Sep 2023 16:58:29 +0900 Subject: [PATCH 14/15] =?UTF-8?q?:bug:=20=EB=AF=B8=EB=B3=80=EA=B2=BD?= =?UTF-8?q?=EB=90=9C=20=ED=95=A8=EC=88=98=EB=AA=85=20=EB=8F=99=EA=B8=B0?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/sandbox/demonstrations.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/sandbox/demonstrations.ts b/src/app/sandbox/demonstrations.ts index 18da064..875dbd5 100644 --- a/src/app/sandbox/demonstrations.ts +++ b/src/app/sandbox/demonstrations.ts @@ -1,6 +1,6 @@ /* eslint-disable react-hooks/rules-of-hooks */ import { MutableRefObject, RefObject } from "react"; -import { useSleep } from "../../utils/utilFunctions"; +import { sleep } from "../../utils/utilFunctions"; import { Toy, ToyPhysics } from "./model/types"; import { Coordinate } from "@/utils/physicalEngine"; import { SPIN_SPEED_OFFSET, TUTORIAL_INDEX } from "./model/constants"; @@ -36,18 +36,18 @@ export const SandboxTutorial = async ( spread(TUTORIAL_INDEX, false); - await useSleep(1500); + await sleep(1500); tutorialMessageRef.current.innerHTML = "HOLD"; - await useSleep(1500); + await sleep(1500); tutorialMessageRef.current.innerHTML = "THROW"; toyPhysics.V = { vx: Math.floor(Math.random() * 40) - 20, vy: -30 }; toyPhysics.dR = toyPhysics.V.vx * SPIN_SPEED_OFFSET; toyGravityDrop(TUTORIAL_INDEX); - await useSleep(2000); + await sleep(2000); tutorialMessageRef.current.innerHTML = "TRY IT"; toyPhysics.DST = dockerCoor; @@ -55,11 +55,11 @@ export const SandboxTutorial = async ( dockerRef.current.className = "sandbox-docker tutorial"; - await useSleep(3500); + await sleep(3500); spread(TUTORIAL_INDEX, true); - await useSleep(200); + await sleep(200); toyMoveRef.current.style.visibility = "hidden"; bgShadowRef.current.className = ""; From 46540229c0ae7f657263b57b94c6136570bac60f Mon Sep 17 00:00:00 2001 From: Jae-Seong Jeong Date: Tue, 26 Sep 2023 17:09:43 +0900 Subject: [PATCH 15/15] =?UTF-8?q?:bulb:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EC=A0=95?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/nwjns-powerpuffgirl/model/types.ts | 113 +++++++++----------- src/app/nwjns-powerpuffgirl/utils/stream.ts | 22 +--- 2 files changed, 50 insertions(+), 85 deletions(-) diff --git a/src/app/nwjns-powerpuffgirl/model/types.ts b/src/app/nwjns-powerpuffgirl/model/types.ts index 57b8109..f6ab0a3 100644 --- a/src/app/nwjns-powerpuffgirl/model/types.ts +++ b/src/app/nwjns-powerpuffgirl/model/types.ts @@ -1,18 +1,3 @@ -import { - DanielleFow1, - DanielleFow2, - DanielleFow3, - DanielleRev1, - DanielleRev2, - DanielleRev3, - HaerinFow1, - HaerinFow2, - HaerinFow3, - HaerinRev1, - HaerinRev2, - HaerinRev3, -} from "@/utils/nwjnsCharacter"; -import { StaticImageData } from "next/image"; import { RefObject, createRef } from "react"; import { Coordinate, Vector } from "@/utils/physicalEngine"; import { hoveringSequence } from "../utils/stream"; @@ -22,17 +7,17 @@ export type NWJNSCharacter = { name: string; ref: RefObject; physics: NWJNSPhysics; - images: NWJNSImage; + // images: NWJNSImage; }; -export type NWJNSImage = { - fow1: StaticImageData; - fow2: StaticImageData; - fow3: StaticImageData; - rev1: StaticImageData; - rev2: StaticImageData; - rev3: StaticImageData; -}; +// export type NWJNSImage = { +// fow1: StaticImageData; +// fow2: StaticImageData; +// fow3: StaticImageData; +// rev1: StaticImageData; +// rev2: StaticImageData; +// rev3: StaticImageData; +// }; export type NWJNSPhysics = { DST: Coordinate; @@ -74,14 +59,14 @@ export const defaultCharacters: Array = [ HOVER: { vx: 0, vy: 0 } as Vector, HOVER_SEQ: hoveringSequence(0), }, - images: { - fow1: DanielleFow1, - fow2: DanielleFow2, - fow3: DanielleFow3, - rev1: DanielleRev1, - rev2: DanielleRev2, - rev3: DanielleRev3, - }, + // images: { + // fow1: DanielleFow1, + // fow2: DanielleFow2, + // fow3: DanielleFow3, + // rev1: DanielleRev1, + // rev2: DanielleRev2, + // rev3: DanielleRev3, + // }, }, { name: "hanni", @@ -91,14 +76,14 @@ export const defaultCharacters: Array = [ HOVER: { vx: 0, vy: 0 } as Vector, HOVER_SEQ: hoveringSequence(1), }, - images: { - fow1: DanielleFow1, - fow2: DanielleFow2, - fow3: DanielleFow3, - rev1: DanielleRev1, - rev2: DanielleRev2, - rev3: DanielleRev3, - }, + // images: { + // fow1: DanielleFow1, + // fow2: DanielleFow2, + // fow3: DanielleFow3, + // rev1: DanielleRev1, + // rev2: DanielleRev2, + // rev3: DanielleRev3, + // }, }, { @@ -109,14 +94,14 @@ export const defaultCharacters: Array = [ HOVER: { vx: 0, vy: 0 } as Vector, HOVER_SEQ: hoveringSequence(2), }, - images: { - fow1: DanielleFow1, - fow2: DanielleFow2, - fow3: DanielleFow3, - rev1: DanielleRev1, - rev2: DanielleRev2, - rev3: DanielleRev3, - }, + // images: { + // fow1: DanielleFow1, + // fow2: DanielleFow2, + // fow3: DanielleFow3, + // rev1: DanielleRev1, + // rev2: DanielleRev2, + // rev3: DanielleRev3, + // }, }, { name: "haerin", @@ -126,14 +111,14 @@ export const defaultCharacters: Array = [ HOVER: { vx: 0, vy: 0 } as Vector, HOVER_SEQ: hoveringSequence(3), }, - images: { - fow1: HaerinFow1, - fow2: HaerinFow2, - fow3: HaerinFow3, - rev1: HaerinRev1, - rev2: HaerinRev2, - rev3: HaerinRev3, - }, + // images: { + // fow1: HaerinFow1, + // fow2: HaerinFow2, + // fow3: HaerinFow3, + // rev1: HaerinRev1, + // rev2: HaerinRev2, + // rev3: HaerinRev3, + // }, }, { name: "hyein", @@ -143,13 +128,13 @@ export const defaultCharacters: Array = [ HOVER: { vx: 0, vy: 0 } as Vector, HOVER_SEQ: hoveringSequence(4), }, - images: { - fow1: DanielleFow1, - fow2: DanielleFow2, - fow3: DanielleFow3, - rev1: DanielleRev1, - rev2: DanielleRev2, - rev3: DanielleRev3, - }, + // images: { + // fow1: DanielleFow1, + // fow2: DanielleFow2, + // fow3: DanielleFow3, + // rev1: DanielleRev1, + // rev2: DanielleRev2, + // rev3: DanielleRev3, + // }, }, ]; diff --git a/src/app/nwjns-powerpuffgirl/utils/stream.ts b/src/app/nwjns-powerpuffgirl/utils/stream.ts index 0c20512..effec50 100644 --- a/src/app/nwjns-powerpuffgirl/utils/stream.ts +++ b/src/app/nwjns-powerpuffgirl/utils/stream.ts @@ -1,22 +1,7 @@ import { Coordinate, getBezierArray } from "@/utils/physicalEngine"; export function* hoveringSequence(index: number): Generator { - const seq: Array = [-1]; // (-2) 5개, (2) 10개, (-2) 5개 - // for (let i = 1; i < 10; i++) { - // seq.push(seq[seq.length - 1] - 1); - // } - // for (let i = 0; i < 2; i++) { - // seq.push(seq[seq.length - 1]); - // } - // for (let i = 0; i < 20; i++) { - // seq.push(seq[seq.length - 1] + 1); - // } - // for (let i = 0; i < 2; i++) { - // seq.push(seq[seq.length - 1]); - // } - // for (let i = 0; i < 10; i++) { - // seq.push(seq[seq.length - 1] - 1); - // } + const seq: Array = [-1]; // 0 > -5 > 5 > 0 for (let i = 1; i < 5; i++) { seq.push(seq[seq.length - 1] - 1); seq.push(seq[seq.length - 1]); @@ -36,8 +21,6 @@ export function* hoveringSequence(index: number): Generator { seq.push(seq[seq.length - 1]); } - // let escape: boolean = false; - if (1 <= index && index <= 3) { for (let i = 0; i < 22; i++) { yield 0; @@ -46,10 +29,7 @@ export function* hoveringSequence(index: number): Generator { while (true) { for (let v of seq) { - // if (escape) return; - yield v; - // alert(escape); } } }