Frontend

This is the frontend part of the Gartic-Like Application.

✅ Choose your name
✅ Choose your room or create a new one

✅ Multiple colors to draw
✅ Know which player is currently drawing
✅ Know which participants are in the room
✅ Progress Bar shows you how much time you have to draw or to get it right

✅ Clear and erase functions
✅ Chat between participants

✅ Multiple clients
✅ Multiple rooms

Installation

Using Docker-Compose

You can follow the README from the PKG Gartic Deploy that uses Docker-Compose to build the whole application. If you don't want to use Docker-Compose, follow the next instructions.

Git clone this repository

git clone https://github.com/Guilospanck/gartic-like-app.git

Git clone Gartic-Go-Backend repository

git clone https://github.com/Guilospanck/gartic-go-backend.git

Be sure to have NodeJS (at least version v14), Yarn and Go installed.

Running

First follow the instructions to run the backend Go part and then:

Cd into gartic-like-app folder, then run

yarn

to install node_modules dependencies and finally

yarn start:dev

to start the application.

Tip (for myself)

After building the application by using yarn build, you can serve the production public folder by going into the folder directory and running npx http-server .

Important

SVG Files

In order to load SVG files, you must create at the root of the project a file named custom.d.ts with the following contents:

declare module "*.svg" {
  import { ReactElement, SVGProps } from "react";
  const content: (props: SVGProps<SVGElement>) => ReactElement;
  export default content;
}

And then on the tsconfig.json you must add to the include section:

"include": ["src", "jest.setup.ts", "custom.d.ts"],

And, finally, to import some SVG, do:

import EstetoSVGIcon from '../../../assets/svg/esteto.svg'

 <ContainerGrid>
    <EstetoSVGIcon />
    <TextWrapper />
  </ContainerGrid>

Also, install the library "@svgr/webpack": "^5.5.0" as dev dependency

yarn add -D @svgr/wepack

and add this to your webpack.common.js:

{
  test: /\.svg$/,
  use: ['@svgr/webpack'],
}

Open SVG file in a text editor and remove width and height attributes from the root node in order to change the width and height.

TODO

Add responsiveness.
Send messages.
Show them on the messages box.
Create a simple Go backend to handle requests.
Add interaction when user exits room while drawing.
Add which design will be drawn.
Add function to read chat messages and verify if user got it right.
Add score function when user is right about a design being drawn.
Add tests.