tmp

eimsound · Jan 6, 2025 · 0164b24 · 0164b24
1 parent e11a5c1
commit 0164b24
Show file tree

Hide file tree

Showing 9 changed files with 233 additions and 114 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from 'react'
 import { useRouter } from 'next/navigation'
+import SettingPanel from '@/components/SettingPanel'
 
 export default function Home() {
     const [roomId, setRoomId] = useState('')
@@ -15,23 +16,20 @@ export default function Home() {
 
     return (
         <main className="flex min-h-screen flex-col items-center justify-center p-24">
-            <h1 className="text-4xl font-bold mb-8">Collaborative Editor</h1>
+            <h1 className="text-4xl font-bold mb-8">co-coding</h1>
             <div className="flex flex-col items-center space-y-4">
                 <input
                     type="text"
                     value={roomId}
                     onChange={(e) => setRoomId(e.target.value)}
-                    placeholder="Enter room number"
-                    className="p-2 border rounded w-64"
+                    placeholder="Enter room id"
+                    className="input input-bordered w-64"
                 />
-                <button
-                    onClick={handleJoinRoom}
-                    className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 w-64"
-                >
+                <SettingPanel />
+                <button onClick={handleJoinRoom} className="btn btn-primary">
                     Join Room
                 </button>
             </div>
         </main>
     )
 }
-
diff --git a/app/room/[roomId]/page.tsx b/app/room/[roomId]/page.tsx
@@ -1,4 +1,4 @@
-import CollaborativeEditor from '@/components/CollaborativeEditor/CollaborativeEditor'
+import CollaborativeEditor from '@/components/CollaborativeEditor'
 
 export default async function Room({
     params,
@@ -13,4 +13,3 @@ export default async function Room({
         </main>
     )
 }
-
diff --git a/common/game_rules.ts b/common/game_rules.ts
diff --git a/...llaborativeEditor/CollaborativeEditor.tsx → components/CollaborativeEditor.tsx b/...llaborativeEditor/CollaborativeEditor.tsx → components/CollaborativeEditor.tsx
@@ -2,11 +2,16 @@
 
 import { useEffect, useRef, useState } from 'react'
 import { io, Socket } from 'socket.io-client'
-import CodeMirror, { EditorView, Extension, keymap, ReactCodeMirrorRef, ViewUpdate, } from '@uiw/react-codemirror'
+import CodeMirror, {
+    EditorView,
+    Extension,
+    keymap,
+    ReactCodeMirrorRef,
+    ViewUpdate,
+} from '@uiw/react-codemirror'
 import { StreamLanguage } from '@codemirror/language'
 // import { vscodeDark } from '@uiw/codemirror-theme-vscode'
 import { insertNewlineAndIndent } from '@codemirror/commands'
-import './CollaborativeEditor.css'
 
 const BACKEND_URL =
     process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:3001'

diff --git a/components/CollaborativeEditor/CollaborativeEditor.css b/components/CollaborativeEditor/CollaborativeEditor.css
diff --git a/components/SettingPanel.tsx b/components/SettingPanel.tsx
@@ -0,0 +1,82 @@
+import { Select, Card } from 'react-daisyui'
+import React from 'react'
+import { create } from 'zustand'
+
+interface Settings {
+    language: string
+    theme: string
+}
+
+interface SettingsStore {
+    settings: Settings
+    updateSettings: (settings: Settings) => void
+}
+
+export const useSettingsStore = create<SettingsStore>((set) => ({
+    settings: { language: 'javascript', theme: 'light' },
+    updateSettings: (newSettings) => set({ settings: newSettings }),
+}))
+
+interface SettingPanelProps {
+    onSettingChange?: (settings: Settings) => void
+}
+
+export default function SettingPanel({
+    onSettingChange = () => {},
+}: SettingPanelProps) {
+    const { settings, updateSettings } = useSettingsStore()
+
+    const handleSettingChange = (key: 'language' | 'theme', value: string) => {
+        const newSettings = { ...settings, [key]: value }
+        updateSettings(newSettings)
+        onSettingChange(newSettings)
+    }
+
+    return (
+        <Card className="bg-base-200 shadow-xl p-6">
+            <Card.Body className="space-y-4">
+                <div className="form-control">
+                    <label className="label">
+                        <span className="label-text">编程语言</span>
+                    </label>
+                    <Select
+                        value={settings.language}
+                        onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+                            handleSettingChange('language', e.target.value)
+                        }
+                        className="w-full max-w-xs"
+                    >
+                        <Select.Option value="javascript">
+                            JavaScript
+                        </Select.Option>
+                        <Select.Option value="typescript">
+                            TypeScript
+                        </Select.Option>
+                        <Select.Option value="python">Python</Select.Option>
+                        <Select.Option value="java">Java</Select.Option>
+                    </Select>
+                </div>
+
+                <div className="form-control">
+                    <label className="label">
+                        <span className="label-text">主题</span>
+                    </label>
+                    <Select
+                        value={settings.theme}
+                        onChange={(e) =>
+                            handleSettingChange('theme', e.target.value)
+                        }
+                        className="w-full max-w-xs"
+                    >
+                        <Select.Option value="light">Light</Select.Option>
+                        <Select.Option value="dark">Dark</Select.Option>
+                        <Select.Option value="cupcake">Cupcake</Select.Option>
+                        <Select.Option value="dracula">Dracula</Select.Option>
+                        <Select.Option value="night">Night</Select.Option>
+                        <Select.Option value="coffee">Coffee</Select.Option>
+                    </Select>
+                </div>
+            </Card.Body>
+        </Card>
+    )
+}
diff --git a/package.json b/package.json
@@ -17,16 +17,19 @@
         "codemirror-lang-elixir": "^4.0.0",
         "next": "15.1.2",
         "react": "^19.0.0",
+        "react-daisyui": "^5.0.5",
         "react-dom": "^19.0.0",
         "socket.io": "^4.8.1",
         "socket.io-client": "^4.8.1",
-        "ts-node": "^10.9.2"
+        "ts-node": "^10.9.2",
+        "zustand": "^5.0.2"
     },
     "devDependencies": {
         "@eslint/eslintrc": "^3",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
+        "daisyui": "^4.12.23",
         "eslint": "^9",
         "eslint-config-next": "15.1.2",
         "postcss": "^8",