Merge pull request #5 from Doer-org/client-draw

Client draw
Doer-org · Oct 30, 2023 · 07caaeb · 07caaeb
2 parents 3769287 + 251850e
commit 07caaeb
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 1 deletion.
diff --git a/client/font/font.ts b/client/font/font.ts
@@ -1,5 +1,10 @@
-import { Dela_Gothic_One } from 'next/font/google';
+import { Dela_Gothic_One, Zen_Maru_Gothic } from 'next/font/google';
 export const DelaGothic = Dela_Gothic_One({
   subsets: ['latin'],
   weight: '400',
 });
+
+export const ZenMaruGothic = Zen_Maru_Gothic({
+  subsets: ['latin'],
+  weight: '700',
+});
diff --git a/client/src/app/draw/components/DrawCondition.tsx b/client/src/app/draw/components/DrawCondition.tsx
@@ -0,0 +1,51 @@
+import { TActionState, TDrawCondition } from '@/types/app';
+import { FC } from 'react';
+
+type TProps = { drawConditionState: TActionState<TDrawCondition> };
+
+export const DrawCondition: FC<TProps> = ({ drawConditionState }) => {
+  const condition: { [K in TDrawCondition]: { text: string; color: string } } =
+    {
+      DRAWING: { text: '描画中', color: 'bg-green-400' },
+      MOVING: { text: '移動中', color: 'bg-yellow-400' },
+      STOPPING: { text: '停止中', color: 'bg-red-400' },
+    };
+
+  return (
+    <>
+      {drawConditionState.state === 'STOPPING' ? (
+        <>
+          <div
+            className={`p-1 rounded-sm bg-main ms-auto ${
+              condition[drawConditionState.state].color
+            }`}
+          >
+            {condition[drawConditionState.state].text}
+          </div>
+          <button
+            className='border-2 p-1 rounded-sm bg-green-400'
+            onClick={() => drawConditionState.setState('DRAWING')}
+          >
+            ▶️
+          </button>
+        </>
+      ) : (
+        <>
+          <div
+            className={`p-1 rounded-sm bg-main ms-auto ${
+              condition[drawConditionState.state].color
+            }`}
+          >
+            {condition[drawConditionState.state].text}
+          </div>
+          <button
+            className='border-2 p-1 rounded-sm bg-red-400'
+            onClick={() => drawConditionState.setState('STOPPING')}
+          >
+            ⏹
+          </button>
+        </>
+      )}
+    </>
+  );
+};
diff --git a/client/src/app/draw/components/DrawEditor.tsx b/client/src/app/draw/components/DrawEditor.tsx
@@ -0,0 +1,19 @@
+import { TActionState, TLine, TPicture } from '@/types/app';
+import { FC, useState } from 'react';
+
+type TPictureEditorProps = {
+  pictureState: TActionState<TPicture>;
+};
+
+export const DrawEditor: FC<TPictureEditorProps> = ({ pictureState }) => {
+  // TODO: Editor内のタップとかで切り替えられるようにしたい
+  // TODO: 初期値は選択できるようにしておきたい
+  const [line, setLine] = useState<TLine>(['0', '0']);
+
+  // TODO:　pixelsに線の描画が終わったらpushしていく
+  return (
+    <div className='bg-white w-[95vw] h-[70vh] flex items-center justify-center rounded-sm'>
+      <div className='w-2 h-2 rounded-full bg-secondary' />
+    </div>
+  );
+};
diff --git a/client/src/app/draw/layout.tsx b/client/src/app/draw/layout.tsx
@@ -0,0 +1,22 @@
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = { title: 'Duck Stream - draw -' };
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang='ja'>
+      <body>
+        <header className='h-[8vh] flex items-center bg-secondary'>
+          <h1 className='text-sm text-main w-[95vw] m-auto'>Duck Stream</h1>
+        </header>
+        <main className='flex min-h-[92vh] flex-col items-center justify-center gap-5 bg-secondary'>
+          {children}
+        </main>
+      </body>
+    </html>
+  );
+}
diff --git a/client/src/app/draw/page.tsx b/client/src/app/draw/page.tsx
@@ -0,0 +1,51 @@
+'use client';
+import { TDrawCondition, TPicture } from '@/types/app';
+import { useState } from 'react';
+import { ZenMaruGothic } from '../../../font/font';
+import { DrawCondition } from './components/DrawCondition';
+import { DrawEditor } from './components/DrawEditor';
+
+export default function Draw() {
+  const [title, setTitle] = useState('');
+  const [picture, setPicture] = useState<TPicture>([]);
+  const [drawCondition, setDrawCondition] =
+    useState<TDrawCondition>('STOPPING');
+
+  const onSubmit = () => {
+    // TODO: サーバー側に情報を渡す
+  };
+
+  return (
+    <div className={`${ZenMaruGothic.className} flex flex-col gap-1`}>
+      <div className='flex gap-1 items-center'>
+        <input
+          id='title'
+          placeholder='タイトル'
+          type='text'
+          className='p-1 rounded-sm'
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+        />
+        <button onClick={onSubmit} className='border-2 p-1 rounded-sm'>
+          保存
+        </button>
+
+        <div className='flex gap-1 items-center ms-auto'>
+          <DrawCondition
+            drawConditionState={{
+              state: drawCondition,
+              setState: setDrawCondition,
+            }}
+          />
+        </div>
+      </div>
+
+      <DrawEditor pictureState={{ state: picture, setState: setPicture }} />
+      <div>
+        <p className='text-sm'>
+          キャンバス内のクリックで描画/移動が切り替えれます
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/types/app.ts b/client/src/types/app.ts
@@ -0,0 +1,9 @@
+import { Dispatch, SetStateAction } from 'react';
+
+export type TLine = [x: string, y: string];
+export type TPicture = TLine[];
+export type TActionState<T> = {
+  state: T;
+  setState: Dispatch<SetStateAction<T>>;
+};
+export type TDrawCondition = 'DRAWING' | 'MOVING' | 'STOPPING';