lineup

Plan your softball team's batting order and field positions. Then share a live scoreboard through a URL!

Try the live app now!

Project hosted at: https://github.com/krazkidd/lineup

License: AGPLv3 (see LICENSE.md file)

Features

Set player jersey numbers and field positions
Drag-and-drop to reorder players
Lock the lineup
- Only field positions can be changed after locking
Live (real time) scoreboard which can be accessed by friends through a URL
- React with emojis!
Customizable team colors
Dark mode

Development

VS Code Recommended Extensions:

vue.volar
vue.vscode-typescript-vue-plugin
- With Takeover Mode enabled
bradlc.vscode-tailwindcss
- Consider installing moalamri.inline-fold or similar to collapse verbose Tailwind CSS classes

Setup

To install dependencies and run the Vite development server:

npm install
npm run dev

The server listens on http://localhost:3000/.

Deployment

Only static Nuxt deployments (SSG) are supported at this time. This is due to a limitation in the way the Pinia and local storage Nuxt modules (i.e. the defineStore() and useLocalStorage() composables) work when Nuxt's server-side rendering (SSR) is enabled.

The basic problem is that hydration of the Pinia store on the client does not capture the locally-stored app state. Because of this, SSR is disabled with ssr: false. You may find additional details here.

Static Site Generation (SSG)

To pre-render the app as static files, run:

npm run generate

Then simply copy the contents of the .output/public/ directory to your host. An index.html entry point and a 404.html error page are provided and may need to be configured for use by your server.

For a preview of the generated site on http://localhost:3000/, you can run:

npm run preview

Hosting

GitHub Pages (free)

A workflow is available under .github/workflows/ which will run the SSG command and publish .output/public/ to your repository's Pages site.

DigitalOcean App Platform (free)

An app spec is available under .do/ which will run the SSG command and publish .output/public/ to DigitalOcean's App Platform. Some modification will be required to point to your repository (rather than this one). Additional configuration of the App Platform may be necessary. (Make sure you have the free plan selected.)

Attributions

The softball favicon (public/favicon/favicon.ico) is used under the CC-BY 4.0 license from the twemoji project.

The emoji images (assets/images/fluentui-emoji) are used under the MIT license (assets/images/fluentui-emoji/LICENSE) from the Fluent Emoji project.

fjuren/lineup