What I built

Tweng!, a turn-based card game between two players where each player controls an army that is used to destroy each other on the battlefield!

Tweng! is basically a bad and buggy clone of Gwent from The Witcher 3: Wild Hunt :D

Demo Link

http://chemical-dock.surge.sh

Link to Code

Client: https://github.com/markus-willems/tweng
Server: https://github.com/markus-willems/tweng-server

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Stack

I had to create a client as well as a server. For both I used more or less a different stack. Both of course use Pusher.

Client stack

The UI I created using React. For building and bundling I used Webpack and a bunch of other cool libs and tools, such as Babel. Check out the package.json for more information. The client is hosted at surge.

Server stack

For the server I used Express and PostgreSQL. With Express I created some API endpoints and I used PostgreSQL to persist some match data. Check out the package.json for more information. The server is hosted at OpenShift.

Problems

CSS and UI design is hard. Hats off to people who mastered it! I wanted to add more tests/make it more robust, and refactor the code, since there are a lot of smaller hacks and repetitive code but then I wouldn't have had a working demo until the deadline.

Lessons learned

In the future I should probably plan more. I sat down one day and just started hacking without a proper plan laid out. I had the plan in my head - or at least a rough idea of what I am trying to build. But, boy, thorough planning is so important.

Additional Resources/Info

How to play Tweng!

1.) Visit http://chemical-dock.surge.sh
2.) Create a match/channel and invite a friend via link
3.) Battle each other in turns until someone lost 2 lifes

Quick start

Each player has 10 cards during a match. A match consists of at least 2 rounds. A round is over when both players passed the round. The total strength of the army decides who won the round. The player with less strength will lose a life. If both players have the same strength then both will lose a life. Winner is who still has at least one life when the other player lost both.

To play a card, select it and click the ▲ icon. When a card was played during a round, it won't be available in the next round. Therefore, don't play all your cards during the first round if you plan to win. Be smart.

Cards

Front line

Front line cards are cards displayed as a sword. Front line cards are affected by Frost cards/spells - their strength is reduced to 1.

Mid range

Mid range cards are cards displayed as a bow & arrow. Mid range cards are affected by Fog cards/spells - their strength is reduced to 1.

Long range

Long range cards are cards displayed as a trebuchet (can launch 90kg projectiles over 300 meters). Long range cards are affected by Rain cards/spells - their strength is reduced to 1.

Frost, Fog, and Rain

Reduce the strength of cards. See above which spell affects what cards.

Sunshine

Gets rid of frost, fog, and rain. Spells won't any effect anymore. Cards have their normal strength again.

Plans for the future

I had a lot of fun hacking and would like to create a rewrite based on the experience I gained during development. This would include better planning, a better architecture, and of course a better UI.