karlyanelson/dnd-map

Dungeons and Dragons map with draggable player pieces

dnd-map's Issues

Be able to organize character list in to folders/sections: monsters, party, areas of effect etc.

• name the folders/sections
• delete all characters within a folder/section
• delete all folders/sections button
• backwards compatible - copy characters array into subfolder called “Characters” in folders/section array

Fog of war so only parts of the map are visible

use HTML Canvas?

• Be able to set opacity
• Erase parts of fog of war
• Have a DM map that can see through fog of war on one page
• Have a player map that can't see through fog of war on another page/tab that the DM can share over zoom

Hosted - can send link to other people to view it

• DM vs Player map
• Multiple people can move markers at the same time
• Limit character movement, so only DM can control NPCs
• Fog of war for individual characters to imitate darkvision

online multiplayer

game server - https://aws.amazon.com/gamelift/

use open source PartyKit - https://github.com/partykit/partykit

Other options:

• Ably

Be able to add/draw a circle or a square or a rectangle

• for an area of effect spell static and stay on the map.
• Circles & Rectangles are really the only shapes you need.
• instead of “drawing” just have a folder for shapes in addition to characters that i can add?

Storage in the cloud instead of locally, or increased local storage

Example! - open source Beyond Table Top uses firebase

Idea

My main issue is user management and storing images, what if i just had a s3 bucket for images, but stored everything else locally? Maybe make an id per localstorage session per user and store s3 images in folder under that id?

---

User management

• Netlify Identity
  • docs
  • pricing
    • Free up to 1k per site /month ($99 when exceeded)

Local backend options

• Local Storage
• File API - give user option to store info in a file on their computer that the can manage

Cloud backend options

Monbo DB

• pricing

Try Cloudflare R2 or Images for Image storage

https://www.cloudflare.com/lp/pg-developer-platform/

From Bytes.dev

Cloudflare saved us thousands of dollars
Here’s how: We own a relatively popular site called npm trends, which serves millions of requests a day. Owning a site like that is kind of like doing an Olive Garden eat-the-menu challenge. It’s (mostly) fun and games — until the host brings you the bill.

After months of spending a gluttonous amount on hosting, we finally decided to save some dough and refactored our backend to use Cloudflare Workers instead of [REDACTED] — which made me feel like both a genius and an idiot. A genius because it instantly saved us thousands of dollars and easily scales to our needs, and an idiot for not switching sooner.

One more Cloudflare hack: Using R2 object storage to store and serve user data.

It’s fast, powerful, and way cheaper than Amazon S3 because it has no egress fees and an incredible free tier. And since it’s fully compatible with S3, you can save a bunch of money by using R2 for your object storage.

Try out the free tiers — you’ll thank me later.

AWS S3

• S3 bucket for storing images
• use S3 API to get images and add them
  • use cloudfront cdn? probably overkill
  • S3 pricing
• DynamoDB for database?
  • Pricing

Firebase

• Firestore (https://firebase.google.com/products/firestore)
• ⭐️ Realtime Database (https://firebase.google.com/products/realtime-database)
  • (https://firebase.google.com/docs/database/web/start)
  • better for apps that make a lot of tiny changes and are just a json object
  • If your app will be sending a stream of tiny updates, such as in a digital whiteboard app, we recommend Realtime Database.
  • use for data (just get 1GB free)
• Cloud Storage
  • use for storing images (get 5GB free, or 2,500 2MB photos)
• Phone Auth
  • Get 10,000 phone auth verifications a month for free

Alt Auth: Use Clerk.dev

• great for user management
• Free for 500 users
• Integrates with firebase

Google Sheets

Store data in database per user instead of locally => google sheet?

login with google account so can use google sheet as backend?

Bigger local storage options

IndexDB

Use IndexedDB to store data locally instead of LocalStorage ?

https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/

• tutorial on how to store images and files in indexeddb - READ FIRST

https://www.npmjs.com/package/idb

• wrapper for indexdb that helps with usability

⭐️ https://localforage.github.io/localForage/#multiple-stores

• library that has localstorage like api but uses indexdb

https://jlongster.com/future-sql-web

• use sql with index db -> very fast

https://web.dev/storage-for-the-web/#how-much

Bonus: Why use a wrapper for IndexedDB #
IndexedDB is a low level API that requires significant setup before use, which can be particularly painful for storing simple data. Unlike most modern promise-based APIs, it is event based. Promise wrappers like idb for IndexedDB hide some of the powerful features but more importantly, hide the complex machinery (e.g. transactions, schema versioning) that comes with the IndexedDB library.

https://developer.mozilla.org/en-US/docs/

Click and drag selection area to select multiple characters instead of having to click them