Giter Club home page Giter Club logo

dankdeck.xyz's Introduction

DankDeck.xyz

A card trading and collecting game that uses Edgedb and Astro.

  • Deployed on vercel
  • Login with GitHub, Discord or Email
  • Open Source
  • Svelte 5
  • TRPC
  • Pusher for trading
  • R2 for image storage

How we use edgedb

  • sessions
  • cards
  • basically everything except images

We use edgedb to save session user info and memes/cards, The memes are borrowed from know your meme and we saved them in a sqlite database we then run seed.ts with bun to upload the memes to edgedb to use for relations and queries.

Things to try out when you use this site

  • Trade some cards with someone (you need a friend for this)
  • Buy and sell some cards, maybe the same one to see the graph working
  • Try changing your theme and name in settings
  • Search for a card you put for sale
  • Linking other accounts in settings
  • Changing your profile picture to a dope meme you got
  • Posting a link of your card in Discord or another site with embeds
  • Bio
  • Show discord toggle

Pre-requisites

Create a quick GitHub application:

https://github.com/settings/developers

set the callback url to:

http://localhost:4321/auth/callback/github

Or the url of your forwarded codespace port

https://SOME_GIBBERISH-4321.app.github.dev/auth/callback/github

.env:

# itll start without these for now.
GITHUB_CLIENT_ID=XXXX
GITHUB_CLIENT_SECRET=XXXX

AUTH_SECRET=somerandomstring
AUTH_TRUST_HOST=true

# Optional - For trading ui
PUBLIC_PUSHER_APP_KEY=
PUBLIC_PUSHER_APP_CLUSTER=
PUSHER_APP_ID=
PUSHER_APP_SECRET=

if you are not on localhost like GitHub codespaces you will need to add this option:

AUTH_URL=https://SOME_GIBBERISH-4321.app.github.dev/ # Leading slash is important

and run

wget "https://github.com/Tricked-dev/kymdb/raw/master/memes.db?raw" -O memes.db
edgedb project init
bunx @edgedb/generate interfaces --file dbschema/schema.ts
bunx @edgedb/generate edgeql-js --target ts
bun seed.ts

Developing

edgedb instance start -I codereview # or your instance name / only once per session, takes a while
bun run --bun dev

Go to /login to log in with GitHub and done!

Design file:

Figma file

Icons:

https://icon-sets.iconify.design/

All icons come from here copy the svelte svg and place it in the icons folder then add a export :)

Todo:

  • Add account deletion process with memes being put on auction on delete
  • a11y - would be cool if everyone could play this game
  • Card favoriting
  • showcase
  • click on like a meme name or something and see existing rolled cards to view them and stuff
  • a no nsfw option maybe? or something cause nsfw memes do exist and are marked
  • a better user info ui /user/id
  • Trading socket changes - detect multiple people or something - dont allow 3 people etc
  • A user rating / weight (total cards + average card level + money + cards sold maybe)
  • giving a thumbsup to people
  • Card view counter (maybe per logged in user once or something or another way to avoid spam!)
  • Fix X overallping in trade menu
  • Money up and down animation

UI (ordered by priority):

  • Redesign the card (fix card roll, long card name, maybe do something about the height too)
  • Fix border color in card info
  • 1/2: Add tooltips on hover for CardInfo
  • Responsive navbar
  • Maybe do something about y overflow on CardInfo (not 100% sure yet)
  • Add card view status (chill, hot, on fire) (APi done just ui now)

dankdeck.xyz's People

Contributors

tricked-dev avatar abdh-dev avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.