From 24a2925e3c8f093638b13cab8090b68fcf39fa14 Mon Sep 17 00:00:00 2001 From: ikura-hamu <104292023+ikura-hamu@users.noreply.github.com> Date: Tue, 21 Jan 2025 23:26:51 +0900 Subject: [PATCH 1/3] =?UTF-8?q?:sparkles:=20=E3=83=A1=E3=83=83=E3=82=BB?= =?UTF-8?q?=E3=83=BC=E3=82=B8=E3=82=A2=E3=82=A4=E3=82=B3=E3=83=B3=E3=82=92?= =?UTF-8?q?=E6=BA=96=E5=82=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/assets/icons/messageIcon.svg | 1 + client/src/pixi/World.tsx | 2 ++ client/src/pixi/components/Message.tsx | 18 ++++++++++++++++++ 3 files changed, 21 insertions(+) create mode 100644 client/src/assets/icons/messageIcon.svg create mode 100644 client/src/pixi/components/Message.tsx diff --git a/client/src/assets/icons/messageIcon.svg b/client/src/assets/icons/messageIcon.svg new file mode 100644 index 00000000..92324930 --- /dev/null +++ b/client/src/assets/icons/messageIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/pixi/World.tsx b/client/src/pixi/World.tsx index 296d5a74..d72723c9 100644 --- a/client/src/pixi/World.tsx +++ b/client/src/pixi/World.tsx @@ -3,6 +3,7 @@ import Rectangle from "./components/Rectangle"; import "@pixi/events"; import { DisplayPosition, Position } from "./Position"; import React from "react"; +import Message from "./components/Message"; interface Props { userPosition: Position; @@ -55,6 +56,7 @@ const World: React.FC = ({ userPosition, userDisplayPosition }) => { width={100} height={100} /> + ); }; diff --git a/client/src/pixi/components/Message.tsx b/client/src/pixi/components/Message.tsx new file mode 100644 index 00000000..d8a88981 --- /dev/null +++ b/client/src/pixi/components/Message.tsx @@ -0,0 +1,18 @@ +import { Sprite } from "@pixi/react"; +import messageIcon from "/src/assets/icons/messageIcon.svg"; + +const messageIconSize = 30; + +const Message: React.FC = () => { + return ( + + ); +}; + +export default Message; From 02261701d0617b0d318c03626dddd383db7f3843 Mon Sep 17 00:00:00 2001 From: ikura-hamu <104292023+ikura-hamu@users.noreply.github.com> Date: Wed, 22 Jan 2025 22:48:28 +0900 Subject: [PATCH 2/3] =?UTF-8?q?:sparkles:=20=E3=83=A1=E3=83=83=E3=82=BB?= =?UTF-8?q?=E3=83=BC=E3=82=B8=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D?= =?UTF-8?q?=E3=83=B3=E3=83=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/assets/icons/messageIcon.svg | 3 +- client/src/pixi/World.tsx | 9 +- client/src/pixi/components/Message.tsx | 112 ++++++++++++++++++++++-- 3 files changed, 113 insertions(+), 11 deletions(-) diff --git a/client/src/assets/icons/messageIcon.svg b/client/src/assets/icons/messageIcon.svg index 92324930..bce658ce 100644 --- a/client/src/assets/icons/messageIcon.svg +++ b/client/src/assets/icons/messageIcon.svg @@ -1 +1,2 @@ - \ No newline at end of file + + diff --git a/client/src/pixi/World.tsx b/client/src/pixi/World.tsx index d72723c9..ce721fa9 100644 --- a/client/src/pixi/World.tsx +++ b/client/src/pixi/World.tsx @@ -56,7 +56,14 @@ const World: React.FC = ({ userPosition, userDisplayPosition }) => { width={100} height={100} /> - + ); }; diff --git a/client/src/pixi/components/Message.tsx b/client/src/pixi/components/Message.tsx index d8a88981..824ad42e 100644 --- a/client/src/pixi/components/Message.tsx +++ b/client/src/pixi/components/Message.tsx @@ -1,17 +1,111 @@ -import { Sprite } from "@pixi/react"; +import { Container, Graphics, Sprite, Text } from "@pixi/react"; import messageIcon from "/src/assets/icons/messageIcon.svg"; +import React, { useRef, useState, useEffect, useCallback } from "react"; +import { Graphics as PIXIGraphics, TextStyle } from "pixi.js"; +import PIXI from "pixi.js"; +import { DisplayPosition } from "../Position"; const messageIconSize = 30; -const Message: React.FC = () => { +interface MessageBubbleProps { + width: number; + height: number; +} + +const MessageBubble: React.FC = (props) => { + const draw = useCallback( + (g: PIXIGraphics) => { + g.clear(); + g.lineStyle(2, 0x000000); + g.beginFill(0xffffff); + g.drawRoundedRect(0, 0, props.width, props.height, 10); + g.endFill(); + }, + [props], + ); + return ; +}; + +interface Props { + messageText: string; + displayPosition: DisplayPosition; + user: { + name: string; + iconUrl: string; + }; +} + +const userNameTextStyle = new TextStyle({ fontSize: 14, fill: "black" }); +const messageTextStyle = new TextStyle({ + fontSize: 16, + fill: "black", + wordWrap: true, + wordWrapWidth: 180, + breakWords: true, +}); + +const Message: React.FC = ({ messageText, displayPosition, user }) => { + const [showMessage, setShowMessage] = useState(false); + const textRef = useRef(null); + const [bubbleSize, setBubbleSize] = useState({ width: 200, height: 100 }); + + const handleMouseOver = useCallback(() => setShowMessage(true), []); + const handleMouseOut = useCallback(() => setShowMessage(false), []); + + useEffect(() => { + if (!showMessage) return; + if (textRef.current) { + const { width, height } = textRef.current; + setBubbleSize({ + width: width + 20, + height: height + 20, + }); + } + }, [showMessage]); + + const iconImageSrc = showMessage ? user.iconUrl : messageIcon; + return ( - + + + {showMessage && ( + <> + + + + + + + )} + ); }; From 2d0ac608ad9c82976d8e0a0a0cd817eb0a42bb84 Mon Sep 17 00:00:00 2001 From: ikura-hamu <104292023+ikura-hamu@users.noreply.github.com> Date: Wed, 22 Jan 2025 23:08:14 +0900 Subject: [PATCH 3/3] =?UTF-8?q?:lipstick:=20tailwind=E3=81=AE=E8=89=B2?= =?UTF-8?q?=E3=82=92pixi=E7=94=A8=E3=81=ABtypescript=E3=81=AB=E6=8C=81?= =?UTF-8?q?=E3=81=A3=E3=81=A6=E3=81=8F=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/pixi/components/Message.tsx | 3 ++- client/src/pixi/theme.ts | 31 ++++++++++++++++++++++++++ 2 files changed, 33 insertions(+), 1 deletion(-) create mode 100644 client/src/pixi/theme.ts diff --git a/client/src/pixi/components/Message.tsx b/client/src/pixi/components/Message.tsx index 824ad42e..a628f3ad 100644 --- a/client/src/pixi/components/Message.tsx +++ b/client/src/pixi/components/Message.tsx @@ -4,6 +4,7 @@ import React, { useRef, useState, useEffect, useCallback } from "react"; import { Graphics as PIXIGraphics, TextStyle } from "pixi.js"; import PIXI from "pixi.js"; import { DisplayPosition } from "../Position"; +import { themeColors } from "../theme"; const messageIconSize = 30; @@ -17,7 +18,7 @@ const MessageBubble: React.FC = (props) => { (g: PIXIGraphics) => { g.clear(); g.lineStyle(2, 0x000000); - g.beginFill(0xffffff); + g.beginFill(themeColors.backgroundPrimary); g.drawRoundedRect(0, 0, props.width, props.height, 10); g.endFill(); }, diff --git a/client/src/pixi/theme.ts b/client/src/pixi/theme.ts new file mode 100644 index 00000000..7652acc1 --- /dev/null +++ b/client/src/pixi/theme.ts @@ -0,0 +1,31 @@ +// @ts-expect-error tailwind config +import tailwindConfig from "../../tailwind.config"; + +const { colors } = tailwindConfig.theme.extend; + +type ThemeColors = Record< + | "backgroundPrimary" + | "backgroundSecondary" + | "backgroundTertiary" + | "textPrimary" + | "textSecondary" + | "textTertiary" + | "accentPrimary" + | "accentSecondary" + | "accentTertiary" + | "accentHover", + string +>; + +export const themeColors: ThemeColors = { + backgroundPrimary: colors["background-primary"], + backgroundSecondary: colors["background-secondary"], + backgroundTertiary: colors["background-tertiary"], + textPrimary: colors["text-primary"], + textSecondary: colors["text-secondary"], + textTertiary: colors["text-tertiary"], + accentPrimary: colors["accent-primary"], + accentSecondary: colors["accent-secondary"], + accentTertiary: colors["accent-tertiary"], + accentHover: colors["accent-hover"], +};