feat: update multiplayer code

apps/suika-multiplayer/components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

apps/suika-multiplayer/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@suika/suika-multiplayer",
   "version": "0.0.1",
-  "description": "a graphics editor.",
+  "description": "a graphics editor with real-time collaboration.",
   "private": true,
   "type": "module",
   "scripts": {
@@ -13,24 +13,35 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.22.3",
-    "@hocuspocus/provider": "^2.13.5",
+    "@hocuspocus/provider": "^2.15.3",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@suika/common": "workspace:^",
     "@suika/components": "workspace:^",
     "@suika/core": "workspace:^",
     "@suika/geo": "workspace:^",
     "@suika/icons": "workspace:^",
+    "@tailwindcss/vite": "^4.1.15",
     "ahooks": "^3.7.4",
     "axios": "^1.7.3",
+    "class-variance-authority": "^0.7.1",
     "classnames": "^2.3.2",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.546.0",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0",
     "react-intl": "^6.3.2",
     "react-scripts": "5.0.1",
     "sass": "^1.57.1",
     "stats.js": "^0.17.0",
-    "y-websocket": "^2.0.3",
-    "yjs": "^13.6.17"
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.15",
+    "y-websocket": "^2.1.0",
+    "yjs": "^13.6.29"
   },
   "devDependencies": {
     "@types/react": "^18.2.25",
@@ -42,6 +53,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "sass": "^1.70.0",
+    "tw-animate-css": "^1.4.0",
     "vite": "^5.0.8",
     "vite-plugin-checker": "^0.6.4"
   }

apps/suika-multiplayer/src/api-service/api-service.ts

@@ -3,7 +3,7 @@ import './api-config';
 import axios from 'axios';
 
 interface FileItem {
-  id: number;
+  id: string;
   title: string;
   createdAt: string;
   updatedAt: string;
@@ -23,7 +23,7 @@ interface LoginRes {
 
 interface UserProfileRes {
   username: string;
-  id: number;
+  id: string;
 }
 
 export const ApiService = {
@@ -51,19 +51,19 @@ export const ApiService = {
     });
     return res.data;
   },
-  getFile: async (id: number) => {
+  getFile: async (id: string) => {
     const res = await axios.get<ResStruct<FileItem>>(`files/${id}`);
     return res.data;
   },
-  deleteFiles: async (ids: number[]) => {
+  deleteFiles: async (ids: string[]) => {
     const res = await axios.delete<ResStruct<FileItem[]>>('files', {
       params: {
         ids,
       },
     });
     return res.data;
   },
-  updateFile: async (id: number, data: Partial<FileItem>) => {
+  updateFile: async (id: string, data: Partial<FileItem>) => {
     const res = await axios.patch<ResStruct<FileItem[]>>(`files/${id}`, {
       data,
     });

apps/suika-multiplayer/src/components/Cards/AlignCard.tsx

@@ -0,0 +1,158 @@
+import { isWindows } from '@suika/common';
+import {
+  alignAndRecord,
+  AlignType,
+  type SuikaEditor,
+  type SuikaGraphics,
+} from '@suika/core';
+import {
+  AlignHCenter,
+  AlignLeft,
+  AlignRight,
+  AlignTop,
+  AlignVCenter,
+  IconAlignBottom,
+} from '@suika/icons';
+import classNames from 'classnames';
+import { type FC, useContext, useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+
+import { EditorContext } from '../../context';
+import { type MessageIds } from '../../locale';
+import { BaseCard } from './BaseCard';
+
+interface AlignItemProps {
+  icon: JSX.Element;
+  alignType: AlignType;
+  intlId: MessageIds;
+  editor: SuikaEditor | null;
+  disabled: boolean;
+  hotkey?: string;
+}
+
+const AlignItem: FC<AlignItemProps> = ({
+  icon,
+  alignType,
+  intlId,
+  editor,
+  disabled,
+  hotkey,
+}) => {
+  const intl = useIntl();
+
+  return (
+    <Tooltip>
+      <TooltipTrigger>
+        <div
+          className={classNames(
+            'flex justify-center items-center mx-[2px] rounded-[3px] w-9 h-8 text-[#333] hover:bg-[#f2f2f2] cursor-pointer',
+            {
+              'hover:bg-transparent': disabled,
+            },
+          )}
+          onClick={() => {
+            if (editor && !disabled) {
+              alignAndRecord(editor, alignType);
+            }
+          }}
+        >
+          {icon}
+        </div>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">
+        {intl.formatMessage({ id: intlId })}
+        {hotkey && <span className="ml-4 text-[#ccc]">{hotkey}</span>}
+      </TooltipContent>
+    </Tooltip>
+  );
+};
+
+export const AlignCard: FC = () => {
+  const editor = useContext(EditorContext);
+  const [disabled, setDisable] = useState(true);
+
+  useEffect(() => {
+    if (editor) {
+      const selectedEls = editor.selectedElements.getItems();
+      setDisable(selectedEls.length < 2);
+
+      const handler = (items: SuikaGraphics[]) => {
+        setDisable(items.length < 2);
+      };
+
+      editor.selectedElements.on('itemsChange', handler);
+      return () => {
+        editor.selectedElements.off('itemsChange', handler);
+      };
+    }
+  }, [editor]);
+
+  const getHotkey = (key: string) => {
+    return isWindows() ? `Alt ${key}` : `⌥${key}`;
+  };
+
+  return (
+    <BaseCard>
+      <div
+        className={classNames('flex px-2', {
+          'opacity-30': disabled,
+        })}
+      >
+        <AlignItem
+          icon={<AlignLeft />}
+          alignType={AlignType.Left}
+          intlId="align.left"
+          editor={editor}
+          disabled={disabled}
+          hotkey={getHotkey('A')}
+        />
+        <AlignItem
+          icon={<AlignHCenter />}
+          alignType={AlignType.HCenter}
+          intlId="align.horizontalCenter"
+          editor={editor}
+          disabled={disabled}
+          hotkey={getHotkey('H')}
+        />
+        <AlignItem
+          icon={<AlignRight />}
+          alignType={AlignType.Right}
+          intlId="align.right"
+          editor={editor}
+          disabled={disabled}
+          hotkey={getHotkey('D')}
+        />
+        <AlignItem
+          icon={<AlignTop />}
+          alignType={AlignType.Top}
+          intlId="align.top"
+          editor={editor}
+          disabled={disabled}
+          hotkey={getHotkey('W')}
+        />
+        <AlignItem
+          icon={<AlignVCenter />}
+          alignType={AlignType.VCenter}
+          intlId="align.verticalCenter"
+          editor={editor}
+          disabled={disabled}
+          hotkey={getHotkey('V')}
+        />
+        <AlignItem
+          icon={<IconAlignBottom />}
+          alignType={AlignType.Bottom}
+          intlId="align.bottom"
+          editor={editor}
+          disabled={disabled}
+          hotkey={getHotkey('S')}
+        />
+      </div>
+    </BaseCard>
+  );
+};