Show HN: 3D Mahjong, Built in CSS
voxjong.com

・

82 points

・

rofko

・

6 hours ago

40 comments

codingdave ・ 6 hours ago

It is a nice UX, but with a fatal flaw: Tiles are supposed to be free when there is a side free, but you instead have it coded to be free when the top or bottom is free. Your app, your rules, so if you intended to do that, cool. It is just a fundamental divergence from how other implementations do it.

  • rpdillon ・ 6 hours ago

    Thanks for mentioning this. I played a little bit and I felt like it was the opposite of what I'd remembered. I do like that the inaccessible tiles are faded somewhat so that I don't inadvertently try to match them.

  • rofko ・ 6 hours ago

    Thank you for the feedback! I will triple check the rules

Bender ・ 2 hours ago

I think this is a good example of what CSS can do and probably was not easy to make but I will likely stick with Mahjong that comes with most Linux distributions as they follow rules that people I may end up playing against would know and they have many layouts. I could see this being applied to other things however such as games that require building or repairing something. Or something similar to Minecraft?

Impressive work!

rdescartes ・ 4 hours ago

Should it be named Shanghai solitaire Or Mahjong Solitaire ?

  • gchamonlive ・ 4 hours ago

    Maybe Mahjunk, am I right?

    slowly lowers right hand in awkward silence

aranw ・ an hour ago

Really enjoyed that although my final two tiles were stacked and couldn't finish the game!

sanj ・ 4 hours ago

This is lovely! Can I suggest make sure that the board is solveable?

akersten ・ 5 hours ago

If I click fast enough on mobile it starts trying to select/highlight text, should be able to prevent that with CSS too. I find this is somehow a common issue that separates a lot of PWAs from real apps, the browser text engine is still lurking there in the background trying to recall us all to the glory days of hypermedia

thenthenthen ・ 3 hours ago

There are some super weird bugs, sometimes only one of the two pieces are removed and sometimes the field goes blank? Also on every move the faves change?! iOS here. And yeah, no majiang, but still super cool! Nostalgic vibes waiting for my fries and playing the Photo Play touch screen gambling machine (after unlocking it by tapping the words photo and play on the logo with two different fingers and entering the code)

tejonutella ・ an hour ago

Looks cool! Wish I knew how to play Mahjong tho

haunter ・ 5 hours ago

Now make it _real_ mahjong (; https://en.wikipedia.org/wiki/Mahjong

Which makes me wonder which ruleset would be the easiest to implement. Probably MCR or HK, riichi has too many edge cases and sepcial rules and yakus.

  • snvzz ・ 5 hours ago

    Riichi is the fun one, where skill weights over luck.

    • haunter ・ 5 hours ago

      I also prefer riichi. Furiten is such a game changer, all other rulesets feel a bit less after that

      • whateveracct ・ 5 hours ago
        ・ 2 more

        Riichi is a good candidate for a video game due to all the specific rules. It has a lot of room for QoL. I have an app on my phone [1] that has made it fun to play and learn thanks to the guidance it has with the rules

        [1] https://kemono.games/game/Kemono-Mahjong hunky furries aside, it's a really good single player Riichi app lol

        • haunter ・ 4 hours ago

          >hunky furries

          Well the other options are the gooner gacha games like Mahjong Soul and Riichi City lol

          Personally I play on Mahjong Soul because apart from Tenhou that has the most populated PvP with enough players in each rank + it's a butter smooth experience with all the small features. And I love the special modes like Battle of Asura

      • koolala ・ 2 hours ago
        ・ 2 more

        I've been looking for a free one with really good helper UI to keep track of all the rules.

        • haunter ・ an hour ago

          Helper UI per se won't exist because there are so many little things.

          If we talk about riichi then the best tutorial is probably in Kemono Mahjong https://cyberdog.ca/kemono-mahjong/

          Personally I'd say Mahjong Soul is the best riichi client out there, that's where I play https://mahjongsoul.yo-star.com/ Extremely streamlined, good QoL features like tile highlighting (dora too), showing waits and options when you are tenpai, custom lobbies (so you can play with friends), and a pretty robust online ranked system. There is a good tutorial too. The big downside is the gacha system which is purely cosmetic and doesn't affect gameplay at all but it can be a turn off for some people.

Minor49er ・ 4 hours ago

This is pretty cool. I like the look and the gameplay. Though playing on mobile, some of the roatation gestures caused the page to refesh on me a couple of times since they triggered the browser's "drag down to refresh" interaction

koolala ・ 2 hours ago

I wish you could rotate all the way. On a phone its also easy to do the refresh gesture.

DuncanCoffee ・ 6 hours ago

Nice! Wish the supported rotation was bigger, maybe +- 90 instead of only 90 deg?

  • omoikane ・ 6 hours ago

    Maybe it was done this way so that they don't have to sort the tiles by depth?

    • koolala ・ 2 hours ago

      Would it just be the opposite depth of the current sorting once you pass 180 degrees?

TazeTSchnitzel ・ 3 hours ago

Is the lack of a perspective projection option deliberate? CSS can do that too.

HardwareLust ・ 6 hours ago

Very nice! Worked great on my shitty old Motorola phone.

jsmo ・ 2 hours ago

Nice!

snvzz ・ 5 hours ago

This ain't mahjong.

Instead, it is some solitaire using mahjong pieces.

  • koolala ・ 2 hours ago

    Is mahjong using solitare pieces Rummy?

user3939382 ・ 4 hours ago

Some people say “mar” jong it’s the weirdest thing.

  • thenthenthen ・ 4 hours ago

    Sounds like dongbeinese (or erhua) haha, ‘marjang’

apresmoi ・ 6 hours ago

wtf kind of magic is that? I looked at the repo and... you've built a 3d CSS rendering engine to create this?

  • pverheggen ・ 6 hours ago

    There's some CSS properties specifically for doing 3D, yeah. You use perspective and perspective-origin to create the view frustum, and then CSS transforms to place your elements in 3D space.

overflyer ・ 3 hours ago

This has bothing to do with how Mahjong is actually played.

  • koolala ・ 2 hours ago

    Isn't normal Mahjong 2D? 3D is a different game.