Unbrewed: play your favorite Unmatched fan decks online with friends! All that's needed is a web-browser.
- uses unmatched.cards to load decks
- upload any map with just an image url
- play with friends by connecting to the same lobby/room
A combined web-app and go-server to play Unmatched fan-decks online. Designed to make it easy for anyone to run the sever through a few terminal commands and let others connect to it.
Feel free to submit PRs/Fork/or request features through the issue tracker.
cd gameserver && go buildcd ../ && yarn server- then open a new terminal and run
yarn dev - open http://localhost:3000
Having issues with canvas?
- run
yarn add canvas - for whatever reason this sometimes just doesn't install with default yarn
follow these instructions to run your own gameserver
It's possible to run the server on your own computer and have others connect to you. Completely for free and without needing Unbrewed servers (in case they go offline).
cd gameserver && go buildcd ../ && yarn server(will be running a server on localhost:1111)- go to ngrok.com and signup for a free account
- open a new terminal, navigate to folder, and type
yarn grok - open
https://unbrewed.xyz/settingsand paste the link provided - You can provide the same url to others and they can connect to your server by pasting the same link.
Want to deploy a gameserver that exists 24/7? Add an issue to github or PR so we can update default server lists.
Unbrewed is made using Nextjs Static Site Export so that it can run on github pages. Recently some updates were made to run off https://unbrewed.xyz/ yet when running from github pages the url structure changes to https://username.github.io/repo/
If you wish to fork Unbrewed and deploy it to github pages yourself, you'll need to update some of the build steps to acommodate the url change:
Sharing some of the files before the URL change
- https://github.com/JollyGrin/unbrewed-p2p/blob/895a3ec785a386a0f1fa344b0837e3ed8345cfc0/lib/buildTools/prefixFonts.js
- replace unbrewed-p2p with your repo name of the fork
- https://github.com/JollyGrin/unbrewed-p2p/blob/317cdc216d8680e2e088ede43cfecd2b480d3a84/next.config.js
- use the node.env to check if running on development mode or production. If production, update baseurl (change unbrewed-p2p with your repo)
- add file to
public/fonts - update
styles/fonts.css - update
styles/styles.ts - update
lib/devTools/prefixFonts.jsto add another html match for fixing production links. Github pages will put the repo after the url
- JonG, creator of unmatched.cards (create your own unmatched deck), created the styling for the card template
The purpose of this refactor was to evergreen this app, and make it always possible to play unmatched fan decks in the browser. In this theme I added more ways to add data/decks/maps so it's less reliant on unmatched.cards (in case it becomes unavailable in the future)
Improved bag handling.
- Add deck with JSON or URL: instead of only being able to add a deck with unmatched.cards, I added two MVP inputs so you can add a deck by pasting JSON text, or a URL that contains a JSON download
- Add decks/maps in bulk: shows your entire decks/maps so you can copy/paste to store. Can also use a URL that downloads a JSON
At the moment neither of these have any validation checking. So if you upload a broken JSON, it can break your app. You can fix this by clearing localStorage from your browser (Inspect > Application > Local Storage)
Later will be adding a list of URLs with decks and maps to ensure they can always be played, as long as a static HTML & Go server can run.
Updated the website to use unbrewed.xyz. This was important to finally redirect traffic from unmatched.cards which has a built in "Test in unbrewed" button.
When navigating from unmatched.cards, will be redirected to the /connect page with the details loaded in. One caveat is that you'll need to refresh to show your loaded deck.
Finally have everything mostly functional.
- Token movement over websocket
- ability to create more tokens (and color them)
- added simple operations for discard/deck modal so you can draw them to your hand
- add a custom map (local only, both players need to load the same map)
- added some default decks that you can load into the bag
We have a default server live, so for the majority of players they can just create a new room and play
Next step will be to improve the landing page so it's understandable how to use the tool
Just added the header component to react to the gameState. In doing so though I found that the AliceCarousel was not working because it would cause the entire row to reset (scroll back to beginning) on every update.
I fixed this by using overflowY='clip' and overflowX='auto' and it's working well now. Will likely need to do some extra css to get the css more smooth.
-REMOVED THE P2P- We decided to just make a simple server that can be easily deployed. P2P ended up being too difficult.
Have the gameserver working now with:
- deck init: when loading gameboard, it will load your deck that you added and starred in /bag
- hand: drawing cards work and added styling to make it easier to read text
- discard: when hovering over a card you can select to discard.
- modal: added a modal which accepts a tag and then loads the relevant data from gameserver
Had to refactor the Pool class to instead be an object that can be passed around.
- refactored the functions to be isolated. They accept a
PoolTypeand return aPoolType - this works well with lodash flow to chain a pool action with a gameserver update function
Now have a fully working board.
- can swap between boards (svgs)
- can dynamically load circles
- moving circles is handled with a callback, preparing for webrtc data to update the board state.
The import worked suprisingly well. Only had 1 issue but still requires a huge rework.
Had an issue measuring the text width in the svg with node-canvas & ssg/hydration issues. Solution: use functional components instead of a class so that I can use hooks (useEffect) Buzzkill: have to refactor the entire 600+ lines