# Webatrice (webclientvue)

Webatrice built with vue and quasar

---

# New to the project? Follow below to get started locally

## Install the dependencies

```terminal
npm install
```

## If you've never used Quasar before, install the CLI:

```terminal
npm i -g @quasar/cli
```

### Start the app in development mode (hot-code reloading, error reporting, etc.)

```terminal
quasar dev
```

---

# Useful commands

### Lint the files

```terminal
npm run lint
```

### Format the files with prettier

```terminal
npm run format
```

### Build the app for production

```terminal
quasar build
```

---

# Routing

### Adding a page to routing

Inside of src/router/routes.ts you'll follow the pattern in the file for the rest of the pages in this app; add an object to the routes array. Specify a path, a layout (things like header/footer) and the page to use.

[Quasar Routing Documentation](https://quasar.dev/layout/routing-with-layouts-and-pages)

### Routing to a page

Let's say you setup the routing already and now you need a way to navigate to a page. This project utilizes [Vue Router](https://router.vuejs.org/guide/advanced/composition-api)

# Additional Info

### Customize the configuration

See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-vite/quasar-config-js).

#TODOs:

- Create a gaming layout that isn't connected to the routing system
- Working login
- Working websocket
- Decide how we will go about routing to each game. Will probably require some knowledge of the websocket data structure and a slug
- Admin functionailty/tools
- Polish UI