DEV Contest Entry - Tweng!
Tags: pushercontest, javascript, react, node
Published: 2018-05-24 20:12:25

---
title: DEV Contest Entry - Tweng!
published: true
description: A game submitted to the first-ever DEV Community contest. 
tags: pushercontest,javascript,react,node
---

# 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_](https://en.wikipedia.org/wiki/Gwent:_The_Witcher_Card_Game) :D

![Tweng!](https://thepracticaldev.s3.amazonaws.com/i/df3h0d338dt2eovpywtf.png)

## 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](http://surge.sh/).

### 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](https://openshift.com).

## 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.