Steemopoly Game Big Update: Socket.io problem solved

in utopian-io •  7 months ago  (edited)

NEW GITHUB REPOSITORY: https://github.com/WhySoSeriousCreativeDepartment/STEEMOPOLY-GAME
OLD GITHUB REPOSITORY: https://github.com/WhySoSeriousCreativeDepartment/Steemopoly


I made a new repository because my new code is completely different than the previous one. I made a 'task-request' post a month ago with the goal to find someone who would help me to make my game possible to play in the multiplayer mode. The previous code contained only 'index.html' file and it was created for 2-6 players playing on the same computer. At the time when I posted my 'task-request' post, I didn't realize the amount to work for some developer to make my game 'multiplayer', so after 10 days, when I saw that nobody would be eager to help me, I decided to learn all about SOCKET.IO and do it myself. After all, when I learn something, I don't need anyone else to beg for some help. Now I am so happy that I did it, my learning lasted for the whole last month and now it looks so easy. For now, the game is still not available on some webpage to play, my next few moves will define the SteemConnect connection. This version also contains the multi-table support and a chatroom. The whole code was written in Javascript, HTML, and CSS.

Capture4.PNG


Project description

How to test the game

Steemopoly Game is a browser game written with Javascript, HTML, and CSS. All work was done in Visual Studio Code software which is a great IDE for writing this sort of apps. SOCKET.IO and EXPRESS are installed and saved in the app folder. To test the game, download the repository and go to your Terminal/Command Prompt. If you use Visual Studio Code, the Terminal is already there and the only thing you have to do there is to go to the game folder and write: node server.js. After that, go to your browser and type "localhost:3040". You can do it from multiple tabs in your browser to check how it goes in 'Multiplayer mode'.

Tables

When you open the game, the first you see is the lobby with four (for now) different tables, each for 2-6 players. At this moment, the number of players is still not set, there are a few minor details that I will fix in the next few days.

Capture2.PNG


These tables are actually rooms and I will add the possibility for users to create their own tables for them and their friends. The first player who joins some table decides when the game will start. All users have to write their nicknames and take the seat. Only the first one has the 'START BUTTON' and when that button is clicked, nobody else can join the table. So the first player is a kind of initiator and he can decide if he wants to make a (let's say) 4-player game. The images below are the examples of a game for two players, one is 'dumar022' and the second is 'stemopoly-game'.

Capture3.PNG


After the integration of SteemConnect, users will not be able to write their nicknames because the app will use their Steemit usernames for that.


Gameplay

Steemopoly Money

In this test version, each player starts with 1200 Steemopoly money and the bank starts with 9000. These amounts are only for testing and the final amounts depend on the testers' feedback. Steemopoly Money is not a token on some blockchain but I would like to have everything prepared when SMT tokens come out. But in the near future, my plan is to create a PUNCHING BAG using which the users will be able to create Steemopoly Money with their voting power.


Fields

The game board contains 40 fields of which 22 are CONTENT fields, 4 are ICO fields, 4 are FEE fields, 3 are DAYTRADE fields, 3 are AIRDROP fields, a START field, a WARNING field, a NAPTIME field, and a TAX OFFICE field.

Content fields

Content fields are divided into 8 groups: SPAM POSTS (2 fields), SHIT POSTS (3 fields), MEME POSTS (3 fields), PHOTOGRAPHY POSTS (3 fields), CHART POSTS (3 fields), LIFE POSTS (3 fields), STEEM POSTS (3 fields), and DEVELOPER POSTS (2 fields).
When a user steps on some content field that is not 'owned' by anyone, he has the possibility to invest in it. Let's say that you have stepped on Meme Post 1 field. You can invest your Steemopoly Money in the creation and the promotion of a Meme Post 1. That way, the field becomes yours and it gets colored like your avatar in the game. When you step on the same field again, you get an upvote, dependingly of the position and the value of the field. If someone else steps on that field, his comment on that post get flagged and you have all the benefits (double upvote) from the wallet of the trespasser. If you hold the whole group of content fields (let's say Meme Post 1, Meme Post 2, and Meme Post 3), the 'upvote' for that field dramatically increases.
You can also sell your content field back to the bank when you step on it.

Capture6.PNG


ICO fields

As I mentioned above, 4 fields are called ICO fields. When a player steps on the ICO field, he gets a possibility to invest in an ICO. When he steps on the field again, he gets a triple amount of his investment in the bank, but that ICO field the becomes open to others to invest in.

Capture5.PNG


Other fields

START FIELD - Each player starts from here.
AIRDROP FIELDS - A user gets a random amount as a reward from the bank.
DAYTRADE FIELDS - A user gets 125 Steemopoly Money from the bank
FEE FIELDS - A player gets charged with a random amount of Steemopoly Money for different bills and taxes.
WARNING FIELD - This is a field that only warns you of the tax office.
NAPTIME FIELD - A harmless field for ...nothing.
TAX OFFICE FIELD - When you step here, you are charged with 300 Steemopoly Money of taxes and thrown back to the WARNING FIELD.


Dice and avatars

As in the real Monopoly, there are also two dice in Steemopoly. Each die is presented as a random number between 1 and 6. When a player clicks the ROLL button, the information is sent to the server. There, the app generates two random number between 1 and 6, and the sum is sent to all of the clients. The player's avatar moves to the new field dependingly on the dice.
In this version, the avatars (pawns) are colored circles written in SVG as the board. Each of six players in the room had the different color. When a player invests in a content or an ICO, the chosen field gets colored as the player's avatar. When a player sells the field, the field gets it's old color back.
When a player gets bankrupted, all of his properties (contents and ICOs) are taken from him and colored with their default color and they become possible to invest for other players when they step on that fields.


Bank

I am trying to balance the money in Steemopoly money the way that the game always stays unpredictable. When I tested this version with my friends, each match ended with the different results. Each player starts with 1200 Steemopoly Money and the winner ends with the amount between 3000 and 12000 Steemopoly Money. The bank starts with 9000 Steemopoly money but ends with the amount between 4000 and 14000 Steemopoly Money. That's why I think that Steemopoly Game will not be only for the players to play the game. The users will be able to invest in the bank, but that will be some of my next steps.


Chat

If the players don't have the way to communicate, they can't cooperate and agree on which fields to buy and which field to leave to other players. That's why I created the CHAT window. It will make this game more fun to play. A little chat room for 2-6 players is a great addition. When some player gets bankrupted and the game is over for him, he can stay to watch the game and chat with the players. I am also planning to create a BIG chat room in the lobby to make possible for players to meet and choose the room together.

Capture8.PNG


The future of Steemopoly Game

For now, Steemopoly Money is just the number on your display and you can do nothing with it. That's about to be changed...

First steps these days will be fixing some minor issues:

  • Handling disconnection of the players
  • Setting the number and the names of waiting players for each table in the lobby
  • Restricting the number of players on each table to six
  • The 'SAY' button in the chat for now only reacts on the mouse click, but it will be also triggered with ENTER/RETURN button on your keyboard
  • Building a big chat room in the game lobby

Plans for the next few months:

  • Designing Steemopoly Money as a future SMT token on Steem blockchain
  • Creating Steemopoly Money wallet
  • Integrating SteemConnect and establishing the internal market

Graphics

As you probably noticed, I have troubles with graphic design. So I will post some task-requests in the next few weeks for:

  • Steemopoly Game logo
  • Steemopoly Money bill design
  • New SVG board and avatars


Final thoughts

I am really stuck in this project, I made it myself and I won't stop. Only six months ago, I didn't know anything about Javascript and today I am able to create my own game. The fact that I have learned so many things in the time I was 'chained' to my bed made me so happy and this is a great success for me. There are still many things that I don't know, but I'm upgrading my knowledge every day and so the Steemopoly Game will grow as I am growing. Thank you!





#whysoserious Creative Department

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Thank you for your contribution. It's good to see that you have learned first and then implemented, kudos to that. One thing even if the code is different you should have continued with the same repository, it would have been better to know what has been changed over the course of the project.

Also, it would always be better to not commit all the files in a single commit. Overall it's a great contribution and hope it will come functionally as soon as possible.


Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

·

Thank you for your review, @codingdefined! Keep up the good work!

Hey, @dumar022!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Hi @dumar022!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server