kinopio-client

[![Netlify Status](https://api.netlify.com/api/v1/badges/f8ef64eb-39f9-46c6-b042-635a8704cc42/deploy-status)](https://app.netlify.com/sites/kinopio-client/deploys)

# kinopio-client

<img src="./src/assets/logos/logo-base.png" alt="logo" width="200">

Kinopio is a spatial thinking canvas for your new ideas and hard problems.

The `kinopio-client` is the client web app that users use to read and update spaces, cards, connections, etc. – which is saved to localStorage and to the `kinopio-server` via API requests, queued API operations, and websocket broadcasts.

- [Kinopio Architecture and Costs](https://kinopio.club/JOGXFJ0FEMpS3crbh6U9k)
- [How Kinopio is Made](https://pketh.org/how-kinopio-is-made.html) (How data is saved)
- [Discord](https://kinopio.club/discord)

## Install

    git clone https://github.com/pketh/kinopio-client.git
    cd kinopio-client
    npm install
    npm install -g @vue/cli
    npm install -g hostile
    hostile set localhost kinopio.local
    hostile set ::1 kinopio.local

## Run

    npm run dev --host
    https://kinopio.local:8080

## Run Tests

    npm run test

## Run with Production API Server

You can force the local app to use the prod API by editing `.env.local` so that `VITE_PROD_SERVER=true`. Create `env.local` by duplicating and renaming `.env.local.sample`.

When the app starts up, the `🐸 kinopio-server URL` will be displayed in the browser logs.

## Linting

Linting runs on commit, but you can manually run it with

	npm run lint

## Primary Files

| File | Description |
| ------------- |-------------|
| `main.js` | Entry point, inits router |
| `router`  | Handles static page and app routes |
| `App.vue` | Root component, used by all routes|
| `stores/useGlobalStore.js` | [Pinia](https://pinia.vuejs.org//) store with global interaction state |
| `stores/useSpaceStore.js` | Pinia store module that handles loading spaces. Each item type in a space has it's own store, e.g. `useCardStore.js`, `useBoxStore.js`, …
| `utils.js` | Functional methods that just do dom manipulations or common tasks. These can't access components or store directly |
| `views/Space.vue` | Contains the core interaction layer which sends user inputs to painting, connecting, dragging etc. components. Also where new connections are created and checked to see if they connect |
| `views/Add.vue` | `kinopio.club/add` page for browser extensions and iOS share sheet |
| `components/Card.vue` | Displays cards from `cardStore` |
| `components/Connection.vue` | Displays connections from `connectionStore` |
| `components/Box.vue` | Displays boxes from `boxStore` |
| `components/Header.vue` | Used for moving between spaces, searching/filter, shows user presence, changing user prefs, and Kinopio meta options. Shown on all routes |
| `components/layers/PaintSelectCanvas.vue` | Paint select strokes for multiple card and connection selection which reveals `MultipleSelectedActions`, scroll locking on touch, and other `<canvas>` elements that need to cove