Draft to develop PR for review #13

t-shimoda · 2024-04-19T02:22:40Z

レビューのためのdevelopへのマージリクエスト

ESLint setting Prettier setting

…erties of three.js

・Load VRM models imported from Mixamo ・Load FBX animations ・Load VRM animations ・Changing animations and transforms based on user input

Create Vite Project and Avatar move function

…nd `three` with `@pixiv/three-vrm` requirements.

Resolved `@pixiv/three-vrm` dependency issue

Add user profile input screen

* update gitignore and settings.json of vscode * add openapi.yaml and mock json * update package.json for openapi and error boundary * add orval settings * add orval generated codes * Add ErrorPage * Add spotselect page as sample * Update openapi.yaml and generated codes

* Add spot thumbnails and sphere images * Add sphere videos as .m3u8 * Add hls.js to play .m3u8 videos * Create spot card component * Create spot select board component * Move spot select components to "/pages/SpotSelect/" * Add spherecal video components * Add store for spot select * Move file to "pages/SpotSelect/" * Change CSS of avatar select component * Display back button and video sphere * Remove default margin * Add new default API mock response * Change label of spot card button * Change to console.debug for future tests * Remove unnecessary log

* Add ImageSphere * Componentize Spot as InSpot.tsx * Add IconMenu * Refactor AvatarSelect for IconMenu * Rename SpotSelectBoard to SpotSelectPanel * Add no videoSphere spots * Fix Degradtion of AvatarSelect * Change Dependency between IconMenu and AvatarSelect Dialog/Store * Generalize IconMenu for SpotSelect and InSpot

* Add Voice Chat * Add Multiplay Message Queue * Add Local Player * Add Remote Player Group * Add Multiplay Message Class * Add Multiplay Button * Remove unused Log * Add Multiplay Util Functions * Add Multiplay in App * Add packages for Multiplay * Create Access Token Server for Development only * Fix name of package.json * Rename Function * Fix Destructuring assignment * Remove unnecessary line * Fix inefficient Lines * Refactor repeated Lines into functions

* Add Viewport Settings for Responsive Design * Add JoyStick package * Remove unused props * Use Third person camera and Virtual Joystick in spot * Add Virtual Joystick component * Add Third Person Camera component * Make Player controls more intuitive * Fix infinity jump * Fix Group name modal styles * Remove unused prop * Remove not required hook * Add comments about handling with VRM update * Fix comment

* Refactor Multiplay component * Rename MultiPlay to Multiplay * Merge SpotSelectStore to PlayerStore * Refactor ThirdPersonCamera to store its own position for Multiplay * Change UpdateTransform to deal with ThirdPersonCamera * Send message when camera position changes * Change messages to include camera direction * Change RemotePlayer to deal with camera direction * Add 4k resolution videos

* Add Environment Variables for Spot Visit * Change source code to use environment variables * Add .env.* to .gitignore * Change ESLint to ignore files in public * Change the port number to match .env * Change to describe how to start Spot Visit * Add environment variables for access token server * Change access token server to use environment variables * Add .eslintrc.cjs for access token server * Add README for access token server

kiyohome · 2024-04-30T08:02:02Z

package.json

@@ -0,0 +1,57 @@
+{


書くとこ無いのでここに書きます。
ライセンスはFintanやNablarchに合わせて、MITでなくApache 2.0にしましょう。
https://fintan.jp/page/295/
過去のOSS公開時に検討してApacheにしている経緯があるためです。

kiyohome · 2024-05-01T06:13:03Z

README.md

+
+```text
+cd livekit-server
+npm run start


npm run startをしたらcorsがないと怒られました。
npm installしたらなおりました。

kiyohome · 2024-05-01T06:16:07Z

README.md

+npm run start
+```
+
+For datails, refer to the `./livekit-server/README.md`


リンク先のファイルもnpm installがあった方が親切だと思いました。
上記と内容が重複しそうなのでこちらのリンク先見て、アクセストークンサーバーを起動してね、とした方がメンテが楽だと思います。

kiyohome · 2024-05-01T06:19:31Z

README.md

+To start API Mock Server, execute the following command.
+
+```text
+npm run api-mock


こちらもnpm installがあった方が親切だと思いました。

kiyohome · 2024-05-01T06:25:21Z

README.md

+
+## How to Start Spot Visit
+
+### Start Livekit Server


各サーバーはdocker composeで提供だとポータビリティがあり再利用しやすいですが、公式の提供がないですかね？

kiyohome · 2024-05-01T07:14:18Z

package.json

@@ -0,0 +1,57 @@
+{


念のための確認です。
外部から持ってきたもの（ライブラリ、画像、3Dモデルなど）は全てライセンスや利用規約の確認をお願いします。必要であればライセンス表記などを追加してください。
特にリポジトリに含める場合は、リポジトリをpublicにして再配布する状態になるので、再配布禁止のものがないか注意してください。3Dモデルなどは商用利用は可能でも、再配布は禁止されているものが多いです。mixamo（=adobe）のモデルはアプリに含めて利用するのは良いのですが、再配布がダメでした。

kiyohome · 2024-05-01T08:03:14Z

src/components/basics/Multiplay/MultiplayChannel.tsx

+
+  return (
+    <>
+      <LiveKitRoom


LiveKitRoomをMutiplayChannelの外に出したらダメでしょうか？
MutiplayChannelがVoiceChatPanelに依存しているのが気になりました。

App.tsがこうなるイメージです。

<LiveKitRoom> <MutiplayChannel /> <VoiceChatPanel /> </LiveKitRoom>

kiyohome · 2024-05-01T08:39:53Z

src/components/pages/SpotSelect/useSpots.ts

@@ -0,0 +1,7 @@
+import { useGetSpots } from "@/generated/spots/spots";
+
+const useSpots = () => {


このhook無くして直接読んだらダメでしょうか？
ただ委譲するだけのコードが増えるような気がしました。

kiyohome · 2024-05-01T08:50:07Z

src/components/pages/SpotSelect/SpotSelectPanel.tsx

+
+const SpotSelectPanel = () => {
+  const { isLoading, data, error } = useSpots();
+  if (isLoading) {


isLoadingやerrorはリンク先のように無くせないですかね？

https://qiita.com/YukiLulu0229/items/2cb9c97f21bd7a46d8ca

kiyohome · 2024-05-01T09:15:07Z

src/components/basics/Avatar/Avatar.function.ts

@@ -0,0 +1,26 @@
+export const defaultAnimationMap: { [name: string]: string } = {


ガイドのステレオタイプにfunction.tsが無いので何だろう？と思いました。

実装を見ると、マスタデータに近いものかと思うので、ソースコードにハードコードせず、バックエンドAPIから取得する方がよくないでしょうか？

kiyohome · 2024-05-01T09:21:25Z

src/components/basics/Avatar/Avatar.tsx

+  );
+});
+
+Avatar.displayName = "Avatar";


こちらはデバッグ用でしょうか？
明示的に指定する必要ありますか？

kiyohome · 2024-05-02T05:46:11Z

src/App.tsx

+
+  return (
+    <>
+      <ErrorBoundary FallbackComponent={ErrorPage}>


コンポーネント毎に個別にエラー処理をせずに、ErrorBoundaryで共通的にエラー通知する想定でしょうか？そうであればガイドに記載しておいて欲しいです。
4xx系のエラーはコンポーネント内でエラー処理、5xx系は個別にエラー処理せずにErrorBoundaryで処理するイメージでした。

kiyohome · 2024-05-02T05:56:09Z

src/components/basics/Player/usePlayerStore.ts

+  setMultiplayPlayerId: (val: string) => void;
+};
+
+const usePlayerInfoStore = create<PlayerInfo>((set) => ({


「共通フックは、hooks の下に作成します。個別のコンポーネント専用のフックはコンポーネントと同じ場所に作成します。」
ガイドに上記記載があり読んだ時は違和感なかったんですが、usePlayerInfoStoreフックは他のbasicsからも利用されているので、共通フックに該当しないのかな？と感じました。

それでそもそも思ったんですが、コンポーネントとステレオタイプの依存関係をガイドで明記して、コンポーネントやステレオタイプの依存関係を整理したいです。

ストアは機能間で利用されるものなので、basicsから切り出して新たにstoresを設けて集約した方が、アプリ全体で管理している状態がすぐに分かっていいように感じました。

kiyohome · 2024-05-02T07:09:14Z

src/components/basics/Avatar/Avatar.tsx

+
+  return (
+    <>
+      <Suspense fallback={null}>


質問です。
Suspenseでfallbackにnullを指定しているのはどうしてですか？

kiyohome · 2024-05-02T07:16:27Z

src/hooks/useVirtualJoyStickPlayerInput.ts

+import usePlayerInput from "@/hooks/usePlayerInput";
+import { IJoystickUpdateEvent } from "react-joystick-component/build/lib/Joystick";
+
+const useVirtualJoyStickPlayerInput = () => {


このフックやhooksに入っている他のフックは1つのコンポーネントからしか使われてないものばかりに見えました。それであればbasicsに移動した方がよくないでしょうか？

* Change VoiceChatPanel to ParticipantInfoGroup to optimize for mobile devices * Add PaticipantInfoPanel which follows avatar * Display ParticipantInfoPanel above avatar as billboard * Fix keyboard input logic to running * Add VConsole to debug on mobile devices * Add "npm i" instructions * Fix initial play/stop button state * Display ParticipantInfoList as modal * Replace VoiceChatPanel with ParticipantInfoGroup * Disable camera control when player is moving * Add grid floor for visibility * Remove whitespaces from player name not to be bugged * Change to use mock data to debug on mobile devices * Change server URL format * Fix token properties * Change port number * Change favicon * Optimize VRMs * Fix low quality vide issue * Revert "Change to use mock data to debug on mobile devices" This reverts commit 5bfaf63.

Nacchiman and others added 30 commits March 1, 2024 10:31

create new Vite project

dccba4b

path alias setting

f5ea979

ESLint setting Prettier setting

Configuration to avoid the issue where ESLint does not recognize prop…

24e4629

…erties of three.js

Modifying the page title and icon

0167021

Path alias configuration

cb9a03d

Install dependencies to display Avatar

8ddff25

Displaying avatars and key controlls

7adb439

Avatar Component

0157ace

・Load VRM models imported from Mixamo ・Load FBX animations ・Load VRM animations ・Changing animations and transforms based on user input

Importing necessary VRM/FBX files

3519888

Delete unnecessary files

12412fc

Merge pull request #1 from extreal-dev/feature/avatar-move

d6ceee0

Create Vite Project and Avatar move function

Remove unused import

b375975

Resolve dependency conflicts by aligning versions of @types/three a…

5dbbb63

…nd `three` with `@pixiv/three-vrm` requirements.

Merge pull request #2 from extreal-dev/fix/package-dependencies

3155ade

Resolved `@pixiv/three-vrm` dependency issue

Add Ant Design and react icon modules

cbcf1dd

Add avatar preview images

806e4f4

Add avatar select screen

b08b089

Avatar selection screen as a dialog

6616764

Store for avatar type and nickname

ac2d88e

Fix initial value of isModalOpen state

3e258a9

Change properly name of css class

3efafed

Merge pull request #3 from extreal-dev/feature/avatar-select

8bd33b6

Add user profile input screen

Fix to not use style (#8)

3ae0bf4

sus-taguchi-t approved these changes Apr 26, 2024

View reviewed changes

kiyohome suggested changes Apr 30, 2024

View reviewed changes

kiyohome suggested changes May 1, 2024

View reviewed changes

kiyohome suggested changes May 2, 2024

View reviewed changes

Nacchiman force-pushed the draft branch from 9b3548d to d34e1a0 Compare May 10, 2024 07:14

		@@ -0,0 +1,7 @@
		import { useGetSpots } from "@/generated/spots/spots";

		const useSpots = () => {

		@@ -0,0 +1,26 @@
		export const defaultAnimationMap: { [name: string]: string } = {

Draft to develop PR for review #13

Are you sure you want to change the base?

Draft to develop PR for review #13

Uh oh!

Conversation

t-shimoda commented Apr 19, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants