DEV Contest Entry - Tweng!

Markus Willems — Thu, 24 May 2018 20:12:25 +0000

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.

Tweng - DEV Contest - Current status

Markus Willems — Tue, 22 May 2018 19:32:18 +0000

Idea

A few months ago I started playing The Witcher 3: Wild Hunt and instantly fell in love with it. The amount of high quality content that's available is simply insane. Not only the main story but also the hundreds of side quests provide an awesome experience. However, there's one in-game feature (or more, a game) that was so successful that it is currently ported to a standalone game: Gwent: The Witcher Card Game.

Gwent is a turn-based card game between two players, with each game taking three rounds. Each player must play one card each turn from a deck of twenty-five to forty cards. The deck can contain a maximum of four different gold cards and six different silver cards. Gold and silver cards usually have more powerful abilities than bronze cards. Decks can contain a maximum of three copies of bronze cards. Each deck belongs to a faction that offers different play styles. Each faction has different "leaders," which function as Gold cards that can be played at any time, who each have individual abilities. As Gwent does not use a mana system like most traditional CCGs, card advantage is often what wins you the game.

The goal is to win two of three rounds by playing cards and spells to gain points called "power" on the board. A player wins a round by having more points on board than their opponent. Rounds end when either both players pass to the next round, or when both players run out of cards. The first to win two out of three rounds wins.

Gwent: The Witcher Card Game (Wikipedia)

And this is where I got my idea for the first ever DEV Contest. Even before I became aware that there will be a standalone Gwent I had the urge of creating a clone using web technologies. Just for fun. But I never actually took action - until two weeks ago! Since then I spent everyday an hour or two on creating a clone I call: Tweng.

Tweng isn't supposed to be a 100% clone, but the basic gameplay should be the same: turn-based card game between two players where each player controls an army with different attributes.

What's Pusher doing?

I use Pusher to share actions with a payload between the players in a channel. An action would be for example playCard and it's payload is the card that's being played. Another would be passRound to tell your opponent that you're passing this round.

Current status

There is a client written in React and a Node back-end which uses Express (for API endpoints) and PostgreSQL (persisting channels and users).

This past weekend I worked a lot on Tweng and was able to create a first playable version! However, there's still a lot of features missing that I would like to add. With some luck before the DEV Contest deadline, but most likely soon afterward.

What I really want to finish before the deadline is a proper mobile version. During development I tried to keep an eye on both desktop and mobile. But after some time I focused on desktop only to meet the deadline.

The matchmaking system is currently invite-based. That means you can create a channel and share the invite link with a friend. After your friend joined, you two are ready to play a game of Tweng!

So, here it is. A first glance at the current desktop version:

As you can guess, UI design is hard! So, for now, I only provide a basic layout with some very cool free icons by Smashicons.

Plan for delivery

As I already said before, I am trying to add at least a proper mobile version before the deadline. Also, there are still some minor bugs that need to be fixed.

Anyway, that's all for now. Thanks for reading and good luck to everyone participating in the contest!

Forem: Markus Willems