ルーム作成・ルーム一覧/参加・websocketの実装

.devcontainer/devcontainer.json

@@ -1,5 +1,5 @@
 {
-  "name": "card-game-simulator",
+  "name": "card-playroom-client",
   "dockerFile": "Dockerfile",
   "forwardPorts": [19000, 19001, 19002, 19006],
   "settings": {

App.tsx

@@ -3,6 +3,7 @@ import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
 import HomeScreen from "./src/screens/home/index";
 import RoomScreen from "./src/screens/room/index";
+import CreateRoomScreen from "./src/screens/create-room/index";
 import RoomListScreen from "./src/screens/room-list/index";
 import EditDeckScreen from "./src/screens/edit-deck/index";
 import PreferencesScreen from "./src/screens/preferences/index";
@@ -32,6 +33,7 @@ export default function App(): ReactElement {
         >
           <Stack.Screen name="Home" component={HomeScreen} />
           <Stack.Screen name="Room" component={RoomScreen} />
+          <Stack.Screen name="CreateRoom" component={CreateRoomScreen} />
           <Stack.Screen name="RoomList" component={RoomListScreen} />
           <Stack.Screen name="EditDeck" component={EditDeckScreen} />
           <Stack.Screen name="Preferences" component={PreferencesScreen} />
@@ -43,7 +45,8 @@ export default function App(): ReactElement {
 
 export type RootStackParamList = {
   Home: undefined;
-  Room: undefined;
+  Room: { id: number };
+  CreateRoom: undefined;
   RoomList: undefined;
   EditDeck: undefined;
   Preferences: undefined;

README.md

@@ -1,22 +1,22 @@
-# Card Game Simulator
+# Card Playroom Client
 
 ![ReactNative](https://img.shields.io/static/v1?label=React%20Native&message=v0.63.2&color=61DAFB&logo=react)
 ![TypeScript](https://img.shields.io/static/v1?label=TypeScript&message=v3.9.5&color=007ACC&logo=typeScript)
 ![Docker](https://img.shields.io/static/v1?label=Docker&message=v19.3.13&color=2496ED&logo=docker)
 ![Node.js](https://img.shields.io/static/v1?label=Node.js&message=v12.18.4&color=339933&logo=node.js)
 
-[![Release](https://img.shields.io/github/v/release/2d-rpg/card-game-simulator?include_prereleases)](https://github.com/2d-rpg/card-game-simulator/releases)
-[![NodeJS](https://github.com/2d-rpg/card-game-simulator/workflows/NodeJS/badge.svg)](https://github.com/2d-rpg/card-game-simulator/actions?query=workflow%3ANodeJS)
-[![CodeQL](https://github.com/2d-rpg/card-game-simulator/workflows/CodeQL/badge.svg)](https://github.com/2d-rpg/card-game-simulator/actions?query=workflow%3ACodeQL)
+[![Release](https://img.shields.io/github/v/release/2d-rpg/card-playroom-client?include_prereleases)](https://github.com/2d-rpg/card-playroom-client/releases)
+[![NodeJS](https://github.com/2d-rpg/card-playroom-client/workflows/NodeJS/badge.svg)](https://github.com/2d-rpg/card-playroom-client/actions?query=workflow%3ANodeJS)
+[![CodeQL](https://github.com/2d-rpg/card-playroom-client/workflows/CodeQL/badge.svg)](https://github.com/2d-rpg/card-playroom-client/actions?query=workflow%3ACodeQL)
 
 ## <img src="https://user-images.githubusercontent.com/42469701/95276781-1b815500-0887-11eb-84e5-f1dc89df3efb.png" width="20px"> How to get started
 
 VSCode の[Remote Container 拡張](https://code.visualstudio.com/docs/remote/containers)の使用を推奨します．  
 このプロジェクトをクローンし，VSCode の[Remote Container 拡張](https://code.visualstudio.com/docs/remote/containers)を使用して開く．
 
 ```
-git clone https://github.com/2d-rpg/card-game-simulator.git
-code card-game-simulator
+git clone https://github.com/2d-rpg/card-playroom-client.git
+code card-playroom-client
 ```
 
 以下 Docker コンテナ上で実行

app.json

@@ -1,7 +1,7 @@
 {
   "expo": {
-    "name": "card-game-simulator",
-    "slug": "card-game-simulator",
+    "name": "card-playroom-client",
+    "slug": "card-playroom-client",
     "version": "0.0.1",
     "orientation": "portrait",
     "icon": "./assets/icon.png",

package.json

@@ -9,15 +9,19 @@
     "lint": "eslint '*.{ts,tsx}'"
   },
   "dependencies": {
-    "@apollo/client": "^3.3.6",
+    "@apollo/client": "^3.2.5",
     "@react-native-community/masked-view": "0.1.10",
-    "@react-native-community/picker": "^1.8.1",
+    "@react-native-community/picker": "1.6.6",
     "@react-navigation/native": "^5.7.6",
     "@react-navigation/stack": "^5.9.3",
+    "@types/node": "^14.11.10",
     "@types/react-native-dialog": "^5.6.2",
+    "@types/react-native-elements": "^0.18.0",
+    "@types/yup": "^0.29.9",
     "babel-plugin-dotenv-import": "^2.1.0",
     "expo": "~39.0.2",
     "expo-status-bar": "~1.0.2",
+    "formik": "^2.2.5",
     "graphql": "^15.4.0",
     "react": "16.13.1",
     "react-dom": "16.13.1",
@@ -30,13 +34,13 @@
     "react-native-swipe-gestures": "^1.0.5",
     "react-native-web": "~0.13.12",
     "reflect-metadata": "^0.1.13",
-    "socket.io-client": "^2.3.1",
-    "typeorm": "^0.2.28"
+    "typeorm": "^0.2.28",
+    "yup": "^0.29.3"
   },
   "devDependencies": {
     "@types/react": "~16.9.35",
     "@types/react-dom": "~16.9.8",
-    "@types/react-native": "~0.63.2",
+    "@types/react-native": "^0.63.37",
     "@typescript-eslint/eslint-plugin": "^4.3.0",
     "@typescript-eslint/parser": "^4.3.0",
     "eslint": "^7.10.0",

src/@types/types.d.ts

@@ -0,0 +1 @@
+declare module "@env";

src/components/SearchTextInput.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement, useState } from "react";
 import { TextInput, StyleSheet } from "react-native";
 
 export default function SearchTextInput(): ReactElement {
-  const [value, onChangeText] = useState("ルーム検索...");
+  const [value, onChangeText] = useState("");
 
   return (
     <TextInput

src/screens/create-room/index.tsx

@@ -0,0 +1,109 @@
+import React, { ReactElement } from "react";
+import {
+  StyleSheet,
+  View,
+  Text,
+  Button,
+  ScrollView,
+  TextInput,
+} from "react-native";
+import { StackNavigationProp } from "@react-navigation/stack";
+import { RootStackParamList } from "../../../App";
+import { gql, useMutation } from "@apollo/client";
+import { Formik } from "formik";
+import * as Yup from "yup";
+import { ENDPOINT } from "@env";
+
+const CREATE_ROOM = gql`
+  mutation CreateRoom($name: String!, $player: String!) {
+    createRoom(name: $name, player: $player) {
+      id
+      name
+      players
+    }
+  }
+`;
+
+export default function CreateRoomScreen({
+  navigation,
+}: {
+  navigation: CreateRoomScreenNavigationProp;
+}): ReactElement {
+  const [createRoom] = useMutation(CREATE_ROOM, {
+    onCompleted: (data) => {
+      console.log(data.createRoom.id);
+      navigation.navigate("Room", { id: data.createRoom.id }); // TODO
+    },
+  });
+
+  const onSubmit = async (values: { name: string }) => {
+    // データ送信
+    console.log(values);
+    createRoom({ variables: { name: values.name, player: "piypiyo" } });
+  };
+
+  const schema = Yup.object().shape({
+    name: Yup.string()
+      .min(3, "3文字以上で入力してください")
+      .max(20, "20文字以内で入力してください")
+      .required("ルーム名を入力してください"),
+  });
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <View>
+        <Formik
+          initialValues={{
+            name: "",
+          }}
+          validateOnMount
+          validationSchema={schema}
+          onSubmit={(values) => onSubmit(values)}
+        >
+          {({
+            handleSubmit,
+            handleChange,
+            handleBlur,
+            isValid,
+            isSubmitting,
+            values,
+            errors,
+            touched,
+          }) => (
+            <>
+              <View>
+                {errors.name && touched.name ? (
+                  <Text>{errors.name}</Text>
+                ) : null}
+                <TextInput
+                  value={values.name}
+                  onChangeText={handleChange("name")}
+                  onBlur={handleBlur("name")}
+                  placeholder="ルーム名を入力してください"
+                />
+              </View>
+              <Button
+                title="Submit"
+                onPress={() => handleSubmit()}
+                disabled={!isValid || isSubmitting}
+              />
+            </>
+          )}
+        </Formik>
+      </View>
+    </ScrollView>
+  );
+}
+
+type CreateRoomScreenNavigationProp = StackNavigationProp<
+  RootStackParamList,
+  "CreateRoom"
+>;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

src/screens/home/index.tsx

@@ -1,8 +1,9 @@
 import { StatusBar } from "expo-status-bar";
 import React, { ReactElement } from "react";
-import { StyleSheet, View, Text, Button } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { StackNavigationProp } from "@react-navigation/stack";
 import { RootStackParamList } from "../../../App";
+import { Button } from "react-native-elements";
 
 export default function HomeScreen({
   navigation,
@@ -11,12 +12,11 @@ export default function HomeScreen({
 }): ReactElement {
   return (
     <View style={styles.container}>
-      <Text>Home Screen</Text>
       <View style={styles.buttons}>
         <View style={styles.button}>
           <Button
             title="ルーム作成"
-            onPress={() => navigation.navigate("Room")}
+            onPress={() => navigation.navigate("CreateRoom")}
           />
         </View>
         <View style={styles.button}>