diff --git a/client/font/font.ts b/client/font/font.ts index 72c8bf5..70f3fb2 100644 --- 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 new file mode 100644 index 0000000..5dc03c7 --- /dev/null +++ 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 }; + +export const DrawCondition: FC = ({ 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' ? ( + <> +
+ {condition[drawConditionState.state].text} +
+ + + ) : ( + <> +
+ {condition[drawConditionState.state].text} +
+ + + )} + + ); +}; diff --git a/client/src/app/draw/components/DrawEditor.tsx b/client/src/app/draw/components/DrawEditor.tsx new file mode 100644 index 0000000..67b1830 --- /dev/null +++ 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; +}; + +export const DrawEditor: FC = ({ pictureState }) => { + // TODO: Editor内のタップとかで切り替えられるようにしたい + // TODO: 初期値は選択できるようにしておきたい + const [line, setLine] = useState(['0', '0']); + + // TODO:　pixelsに線の描画が終わったらpushしていく + return ( +
+
+
+ ); +}; diff --git a/client/src/app/draw/layout.tsx b/client/src/app/draw/layout.tsx new file mode 100644 index 0000000..8668e57 --- /dev/null +++ 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 ( + + +
+

Duck Stream

+
+
+ {children} +
+ + + ); +} diff --git a/client/src/app/draw/page.tsx b/client/src/app/draw/page.tsx new file mode 100644 index 0000000..ea3a41d --- /dev/null +++ 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([]); + const [drawCondition, setDrawCondition] = + useState('STOPPING'); + + const onSubmit = () => { + // TODO: サーバー側に情報を渡す + }; + + return ( +
+
+ setTitle(e.target.value)} + /> + + +
+ +
+
+ + +
+

+ キャンバス内のクリックで描画/移動が切り替えれます +

+
+
+ ); +} diff --git a/client/src/types/app.ts b/client/src/types/app.ts new file mode 100644 index 0000000..00e32b1 --- /dev/null +++ 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 = { + state: T; + setState: Dispatch>; +}; +export type TDrawCondition = 'DRAWING' | 'MOVING' | 'STOPPING';