search

freeCodeCamp / CurriculumExpansion

Creative Commons Attribution Share Alike 4.0 International
314 stars 105 forks source link

Learn TypeScript by Building a Poker Game #115

Closed QuincyLarson closed 2 years ago

UsamaHameed commented 5 years ago

Hello, I would like to work on this. Please let me know what the requirements are. Also, if you need help with any other typescript related curriculum challenges/projects, please feel free to ask me. I'd be more than happy to help.

QuincyLarson commented 5 years ago

@UsamaHameed Awesome! Welcome back! We would welcome your help. First of all, I recommend implementing a basic poker game in TypeScript - something that can give out two hands of cards and determine which one wins.

From there we can discuss specific ways we can incorporate TypeScript features into the project and how we can teach them through a series of tests.

S1ngS1ng commented 5 years ago

Hey Quincy, I'm interested in this project as well. To clarify:

  1. Does the application works something like:
    • Two (or more) players sitting in front of ONE computer
    • Each player places their initial bet
    • One (or two?) cards are given to each player. The winner is determined at this point
  2. If this is the case, we may need to utilize Local Storage (or maybe Firebase) for storing user info (such as name, total cash, statistics, etc.)
  3. If cash (not real for sure) is considered, how should we determine the pay table?
  4. Should this be an online game rather than local? If so, we may have to utilize something like socket.io
  5. Out of my mind, to utilize TypeScript should be fairly straightforward as per these scopes:
    • enum for the suit (i.e. spade, heart, club, and diamond)
    • Union type for the numbers (i.e. 2 - 10, J, Q, K, and A)
    • interface Card for the data shape of the random card, and Array<Card> for the cards of each player (if multiple)
    • class for the skeleton of the project
      • Use constructor to initialize players: name, cash
      • Has methods generateCards, compare, determineWinner, probably calculateCash as well. Then, updateCash. For each of those, the function returned type could be utilized
  6. When each player has multiple cards, how should we determine which player wins?
    • Simply by adding up the sum:
      • J, Q, K, A worth 11, 12, 13, 14, respectively?
    • Based on Poker Hands (e.g. Flush, two pairs, etc.). TBH, this is pretty hard to implement:
      • Should we include the Wild card as well?

I will try working on this as long as I am cleared with the stuff mentioned above.

QuincyLarson commented 5 years ago

@S1ngS1ng Great questions.

Does the application works something like: Two (or more) players sitting in front of ONE computer Each player places their initial bet One (or two?) cards are given to each player. The winner is determined at this point

It doesn't need to be that complicated. I think a single-player version where people play against the computer would be fine, and it could treat each hand as one-off. The main thing would be determining which player's hand won.

If this is the case, we may need to utilize Local Storage (or maybe Firebase) for storing user info (such as name, total cash, statistics, etc.)

If it's only one player, and we don't store data between hands, then we wouldn't need to worry about covering local storage here.

The main goal is to build a simple project while using TypeScript and some of its core features.

Should this be an online game rather than local? If so, we may have to utilize something like socket.io

This would be cool, but I think it's beyond the scope of trying to teach TypeScript. We do want to teach websockets later in the curriculum, though.

Out of my mind, to utilize TypeScript should be fairly straightforward as per these scopes: enum for the suit (i.e. spade, heart, club, and diamond) Union type for the numbers (i.e. 2 - 10, J, Q, K, and A) interface Card for the data shape of the random card, and Array for the cards of each player (if multiple) class for the skeleton of the project Use constructor to initialize players: name, cash Has methods generateCards, compare, determineWinner, probably calculateCash as well. Then, updateCash. For each of those, the function returned type could be utilized

Yes - these all sound like suitable types and scopes for various aspects of the game.

When each player has multiple cards, how should we determine which player wins? Simply by adding up the sum: J, Q, K, A worth 11, 12, 13, 14, respectively? Based on Poker Hands (e.g. Flush, two pairs, etc.). TBH, this is pretty hard to implement: Should we include the Wild card as well?

We should cover the types of hands, including the ones listed here: https://www.cardplayer.com/rules-of-poker/hand-rankings

I don't think we need to include wild cards.

I will try working on this as long as I am cleared with the stuff mentioned above.

I hope I've done a good enough job of answered your questions. I am excited to see what you come up with. Let me know if I can be of any help. Thanks again for helping build this.

UsamaHameed commented 5 years ago

@S1ngS1ng Hey! I am busy this week and then I am on vacation for two more weeks. Feel free to go ahead and take a shot at this. When I get back to work, I will let you know and we can work on it if there is something that needs doing.

S1ngS1ng commented 5 years ago

@UsamaHameed Sure, enjoy your vacation 🏖

S1ngS1ng commented 5 years ago

@QuincyLarson Thanks for your clarification. Here is a quick summary, please let me know if there is any mistake below:

  1. Hands ranking image
  2. Algorithm image

Also, a sorted value array (e.g. [10, 'J', 'Q', 'K', 'A']) will be included for the comparison later on. As per the sorting, there will be a corner case that I could come up with: the wheel (i.e., A, 2, 3, 4, 5)

It might take another few days for me to implement this. I'll keep you posted. 🍻

QuincyLarson commented 5 years ago

@S1ngS1ng This all looks correct. And yes - that algorithm all looks right based on my reading of it.

I'm excited to see this. Thanks again for your contributions, and for keeping us posted on your progress on this. 🍻

S1ngS1ng commented 5 years ago

@QuincyLarson Hey Quincy, here are some update for the poker game.

Disclaimer: this is not an April fool 😈

Here is the link to the source code

And here is the link of online preview

Achieved so far:

  1. Generate poker hand randomly: source code
  2. Compare poker hands of the Player and the BOT: source code
  3. Most of the logic is done w/ its output in the console 😐. Will wire those up in the next day or two
  4. Everything is done through JavaScript Modules, see here. It works on my latest chrome. Since we'd convert that to TypeScript later anyway, I'm not gonna introduce Babel here
  5. Everything is NOT documented and NOT to be converted to TypeScript (#AprilFool)

How to use the online version (as of Apr 1, seriously this is not April fool 😂 ):

  1. Enter your name (optional) and click "Start"
  2. Set your bet (optional) and click "Bet"
  3. Open the console, and you'll see: image
    1. The randomly generated poker hands of the Player and the Bot
    2. The poker hand object of the Player
      • sortedValue: The card values sorted based on value point only (where 2 ~ 10 as is, "J" ~ "A" as in 11 ~ 14, refence)
      • suit: the suit count object (i.e. suit => count)
      • value: the cardValue count object (i.e. cardValue => count)
    3. The poker hand object of the Bot
    4. The poker hand rank point object of the Player
    5. The poker hand rank point object of the Bot
    6. The comparison result, denoting whether the Player is the winner
  4. Refresh the page for a new session

TODO

Logic

  1. Cash calculation based on the bet: this should be quick. Since most of the related stuff are defined/set up there, I'd assume no more than 2 evenings for getting this done
  2. Cash refill will be done together with the above
  3. Please note that the "Next" and "End" button won't work. I'll try to implement that tonight

    UI

  4. To demonstrate the poker hand. Though, I am almost certain that I can't make it nice-looking 😞
  5. To demonstrate the winner and the cash as per win/lose
  6. The alert text when an error happens (e.g. session exists), or when no cash is available

    TypeScript

    I'd consider it to be straight forward. Now that each part is based on module, and I've added enough, if not all type documentation (example here). After I am done with rest of the UI and logic, I'll work on converting it to TypeScript

scissorsneedfoodtoo commented 5 years ago

@S1ngS1ng, this looks great! And thank you for your thorough breakdown of the project and the bonus April Fools joke :+1: :+1:

As for the UI, don't worry so much about how it looks. The main focus is to teach TypeScript, and I'm sure users will appreciate spending more time building the game rather than making the page look good. For showing the poker hands, using Unicode could be a good option: https://en.wikipedia.org/wiki/Playing_cards_in_Unicode

Here's a CodePen I found showing Unicode playing cards with some simple styling: https://codepen.io/ogab/pen/peXpqW

Hope that helps. Can't wait to see the finished project. Really looking forward to building this myself!

S1ngS1ng commented 5 years ago

@scissorsneedfoodtoo Thanks for your suggestions. Yes, I've found some similar stuff on CodePen as well 😃 As per the suits, I've noticed that an HTML entity could work as well. Should we use Unicode or HTML entity, or either one should be fine (#bikeshedding)?

scissorsneedfoodtoo commented 5 years ago

@S1ngS1ng, it's totally up to you! Go with whichever you feel is best.

S1ngS1ng commented 5 years ago

@scissorsneedfoodtoo Cool. Thanks

S1ngS1ng commented 5 years ago

Updated Apr/4/2019 - 0:36

@QuincyLarson Here is another update F.Y.I. @scissorsneedfoodtoo Here is the online preview, if you are interested 😃 If you guys think that I am missing something, or if you have any questions/comments/concerns, please do let me know.

Tasks

Process

Gifs

Outdated, see below

Some (random) thoughts

  1. Should we show the detailed poker hand info (e.g. royal flush, straight, etc.) as well? Since I already have the info, displaying that shouldn't be an issue. Also, I'd consider it to be a better user experience
  2. Any suggestions that how could we use extends within modules? Though, I coded most of the stuff as in module, but I didn't figure out a way to utilize extends in this case. Still, I believe it is nice to have
S1ngS1ng commented 5 years ago

@QuincyLarson @UsamaHameed @scissorsneedfoodtoo Here is the final version (w/ JS). Please let know how you guys like it 🍻 The source code is here, and here is the online preview

And a quick gif demo:

Basic process

demo - basic process (1)

Refill and end

demo - refill and end (1)

I've included some animations comparing to the previous version. In case of any questions/concerns, please let me know. Meanwhile, I'll work on converting it to the TypeScript version.

From the previous thread:

  1. Should we show the detailed poker hand info (e.g. royal flush, straight, etc.) as well? Since I already have the info, displaying that shouldn't be an issue. Also, I'd consider it to be a better user experience
  2. Any suggestions that how could we use extends within modules? Though, I coded most of the stuff as in module, but I didn't figure out a way to utilize extends in this case. Still, I believe it is nice to have

Any suggestions please?

scissorsneedfoodtoo commented 5 years ago

@S1ngS1ng, wow, this looks amazing! Just played a few hands and had a lot of fun :+1: :+1:

Unfortunately, I noticed a couple of bugs:

Could you add some logic to prevent these from happening?

About your questions:

S1ngS1ng commented 5 years ago

@scissorsneedfoodtoo Thanks! That was a good catch, spot on!. Looks like I did set the max for range input, while not for the text input 🤦‍♂️ Sure, I'll fix that tonight.

Also, thanks for your thought on the questions.

S1ngS1ng commented 5 years ago

@scissorsneedfoodtoo I've made some changes. Now that the text input is removed. Here is what it looks like now: image In this way, at least it minimize the effort to deal with the input validation XD For displaying the poker hand details, I am still working on it. There are some method to be re-implemented, which should be done by tomorrow.

scissorsneedfoodtoo commented 5 years ago

@S1ngS1ng, looks great! Removing the text input is a good way to avoid that issue. I like the slider more anyway :+1:

Just one more thing I noticed with the text. Could we change it to: "You bet $__. Good luck!"

"You're the winner! Yay!" "You won $__!"

"The bot won. Darn it!" "You lost $__!"

About discussing about extends, I'd be happy to talk about that or other parts of your project if you'd like. I'll send you an email and we can set something up.

S1ngS1ng commented 5 years ago

@scissorsneedfoodtoo image

Few updates here:

  1. Update the text, as discussed above
  2. Add style to the result-rank-container
  3. As per the offline discussion, change the timeout to 0.5 seconds

I'd like to hear about your thought on the text: The bot has Three of a kind, Your have High card. Does that make sense? If there is a better way to describe that, please lemme know 😃

scissorsneedfoodtoo commented 5 years ago

@S1ngS1ng, lookin' good! Thanks again for taking the time to walk me through your project yesterday and for your updates.

It seems like you're using rankMap to update the language in the result-rank-container, so maybe you could modify the text to the following:

this.rankMap = {
  1: 'high card',
  2: 'a pair',
  3: 'two pair',
  4: 'three of a kind',
  5: 'a straight',
  6: 'a flush',
  7: 'a full house',
  8: 'four of a kind',
  9: 'a straight flush/royal flush'
};

I'm not sure if it's more appropriate to say "The bot has the high card" or "The bot has high card," but it seems like they're titles for the types of hands, so the object above should be fine. Also, it would probably be best to write just "It's a draw!" and leave cashContent blank in case of a draw.

Anyway, hope that helps! Let me know what you think.

S1ngS1ng commented 5 years ago

@scissorsneedfoodtoo Sounds good! I'll be working on that tonight. Thanks for the advice

S1ngS1ng commented 5 years ago

@scissorsneedfoodtoo Done. See here for the online preview 🍻

scissorsneedfoodtoo commented 5 years ago

@S1ngS1ng, awesome! This looks and plays great. Looking forward to seeing it in TypeScript now :+1: :+1:

QuincyLarson commented 5 years ago

@S1ngS1ng You did a great job on the UI. I'm excited to go through and build this project myself based on your tests! :)

S1ngS1ng commented 5 years ago

@QuincyLarson Thanks! I am working on converting that to TypeScript. Also, I've added pug as the template engine. For the bundle tool, I've been trying out Parcel and would add that to the TypeScript version as well.

scissorsneedfoodtoo commented 5 years ago

@S1ngS1ng, sounds good! Parcel seems like a really neat tool to get things up and running quickly. I don't think we'll be able to use actual Pug template files on the final platform, but we'll certainly be able to use any HTML files that it renders!

S1ngS1ng commented 5 years ago

@scissorsneedfoodtoo All right. Though, I am using pug right now. Here is the repo for your interest. Now I am working on the logic part. You may expect some updates this weekend if things are working out on my side 😂

scissorsneedfoodtoo commented 5 years ago

@S1ngS1ng, it's no problem for the prototype! Just wanted to let you know before you start breaking things down into steps, even if you'll only be breaking down the JS/TS parts. Everything in that repo LGTM :+1: :+1:

Alright, sounds good. Just let us know how everything's going and if we can help with anything.

swyxio commented 5 years ago

i am belatedly arriving here and realizing this project is mostly done. any typescript stuff you may want me to look at let me know! is this the source? where is the typescript in this?

S1ngS1ng commented 5 years ago

@sw-yx Hey, thanks for the comment. Yes, that is the source. I am working on the conversion to TypeScript right now. Will let you know when it is done. And it would be great if you could review my code later on. Thanks in advance 🙏

swyxio commented 5 years ago

sure thing tag me when you want me

scissorsneedfoodtoo commented 5 years ago

Thank you for your help, @sw-yx!

scissorsneedfoodtoo commented 5 years ago

Hi @S1ngS1ng, how's everything going with converting your prototype to TypeScript? Anything we can help out with?

S1ngS1ng commented 5 years ago

@scissorsneedfoodtoo Hey, my apologize for the delay. We've been working on the moving since last week, and we'll be on a vacation in the next few days. I've made some changes on my local machine regarding the conversion of TypeScript, will push those changes before we head off tomorrow.

scissorsneedfoodtoo commented 5 years ago

@S1ngS1ng, no need to apologize! Hope the move went well and you had a nice vacation.

I'm sorry for taking so long to respond. Not sure if you saw, but we moved off of Medium, and it was all hands on deck for a while there. Now that things have settled down I'm getting all caught up on things around here. Looking forward to seeing your changes soon!

QuincyLarson commented 5 years ago

Hi @S1ngS1ng how is this project coming along? We are excited to get Typescript into the curriculum. This is commonly requested.

S1ngS1ng commented 5 years ago

@QuincyLarson Hey Quincy. I've been constantly working on it. I ran into some OOP design issues, and have it mostly resolved over last weekend. I'll try to make some updates before this weekend. What I am doing now is rewriting some classes and putting them together.

S1ngS1ng commented 5 years ago

@QuincyLarson @scissorsneedfoodtoo @sw-yx https://github.com/S1ngS1ng/freeCodeCampProject/tree/master/poker-game-ts

Here is a quick preview of what I currently have. Still, it is not fully functional since I am still working on some refactoring on my side. Please let me know if you guys have any questions or concerns. Comments and suggestions are always welcome, for sure XD

(Should be able to make some updates early next week

swyxio commented 5 years ago

interesting way to code this. looks like Angular, but entirely done with dom api's!

not much comments apart from that i personally would opt for far fewer files, collapsing interfaces w implementations where possible. many files is scary to me as a beginner.

scissorsneedfoodtoo commented 5 years ago

Thank you for your continued efforts on this project, @S1ngS1ng. Looking forward to seeing your fully functional project.

@sw-yx brings up a good point. Would it be possible to simplify further and reduce the number of files? Having a few longer files will be easier for learners to grasp, and will also make things easier on us when it's time to start breaking this project up into steps.

S1ngS1ng commented 5 years ago

@sw-yx Thanks a lot for your feedback.

many files is scary to me as a beginner

That is actually scary to me as well 😂But TBH, it is pretty common in the real world. With the help of those up-to-date editor/IDE, spreading out the code is (IMO) kind of beneficial, especially for larger projects.

@scissorsneedfoodtoo

Would it be possible to simplify further and reduce the number of files?

That said, we don't have any limitations on the max lines of a file? If so, I'll definitely work on that after it is fully functional. I'll merge those interface, class, enums (if any) together. The ultimate goal could be the project w/o directory. Still, I'd consider splitting based on logic/duty (e.g. DOM manipulation and Poker Service) to be valid. What's your opinion? @sw-yx @scissorsneedfoodtoo

swyxio commented 5 years ago

🤷‍♂️

scissorsneedfoodtoo commented 5 years ago

@S1ngS1ng, that's also a valid point.

It's hard to say right now because I don't have any concrete details about the new platform yet, it's just something we've talked about. Why don't we stick to the way you've been splitting files based on logic/duty now? Then we can consider consolidating later if it's necessary due to platform limitations or how learners react to projects earlier in the curriculum.

JoshQuaintance commented 4 years ago

Is this project still being worked on?

S1ngS1ng commented 4 years ago

Code wise, it is ready to go. I was working on the documentation (guide) and have yet to update the codebase. @scissorsneedfoodtoo As far as I remember, you mentioned that this was not on a high priority when we talked about it last time. Is there any updates regarding this (i.e. the project-based challenge, as mentioned last time)?

scissorsneedfoodtoo commented 4 years ago

Hi @JoshuaPelealu, thanks for your interest. Also thanks for the update @S1ngS1ng. Awesome to hear that you were able to rework everything into TypeScript.

There's still a lot of deliberation about how to handle these later Front End Libraries projects, especially this one since we need a way to run TypeScript in the browser. At the moment we're working on getting the Front End Libraries projects broken up into steps, then we'll move onto the JavaScript Data Structures and Algorithm projects.

For now, could you create a PR for the code you have @S1ngS1ng? Would be great to see your finished prototype. But let's hold off on breaking up into steps until we have a better idea about how to handle these later projects.

S1ngS1ng commented 4 years ago

@scissorsneedfoodtoo Sorry for the delay Kris. We were mostly out of town last week and over the weekends. I'll create a PR this evening. I will link this issue to the PR as well. Again, sorry for the delay 🤦‍♂️

S1ngS1ng commented 4 years ago

PR created https://github.com/freeCodeCamp/CurriculumExpansion/pull/305 Feel free to include more reviewers. In case of any comments/concerns, I'd address that as soon as I can. @scissorsneedfoodtoo Please take a look at the README. This might help when breaking up this challenge into steps. Please let me know what would be the best way to break it down and I should be able to work on it this weekend. Last but not least, here is the online demo

scissorsneedfoodtoo commented 4 years ago

Hey @S1ngS1ng, thank you for your patience and all the hard work you put into this. I took a quick look and everything LGTM :+1: :+1: Like you mentioned, the README will really help break this project down into steps.

We're in the process of moving some projects around and trying to figure out the best way to implement this one. We'll definitely reach out about how you might break this project down once we decide all that.

Thanks again! I'll go ahead and merge your PR now.