5 ms·
Show HN: 3D Mahjong, Built in CSS
- codingdave 7mo agoIt 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 7mo agoThanks 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.
- deleted 7mo ago[deleted]
- rofko 7mo agoThank you for the feedback! I will triple check the rules
- thih9 7mo ago> Tiles are supposed to be free when there is a side free No. According to wikipedia[1]: "A tile is said to be open or exposed if it can be moved either left or right without disturbing other tiles.". Also look at the photo in the wikipedia article[2]. This implementation looks correct to me. [1]: https://en.wikipedia.org/wiki/Mahjong_solitaire https://en.wikipedia.org/wiki/Mahjong_solitaire [2]: https://en.wikipedia.org/wiki/Mahjong_solitaire#/media/File:Mahjong_solitaire-02.jpg https://en.wikipedia.org/wiki/Mahjong_solitaire#/media/File:...
- Crestwave 7mo agoA "free side" means being exposed on the left or right, matching your Wikipedia quote. On the other hand, OP's implementation checks if it can be moved up or down.
- thih9 7mo agoLook at the shape of the puzzle and compare with the wikipedia photo. The sides logic is correct. Although looks like the images on the tiles were indeed rotated, as mentioned in another comment[1]. [1]: https://news.ycombinator.com/item?id=47115499 https://news.ycombinator.com/item?id=47115499
- jasperry 7mo agoIf you rotate it so the board looks like the traditional solitaire layout, the direction of free tiles is horizontal as it's supposed to be. But then the images on the tiles are rotated 90 degrees. Either way you look at it, something is non-standard. The other thing is that this implementation doesn't seem to support overlapping tiles, which is kind of important. For instance, the topmost tile should overlap and block all four tiles under it.
- rofko 7mo agoThank you for the insight! I think rotating the tile images is key. Since I’m using CSS Grid for positioning, there are some limitations around overlap like the one you mentioned, but it should be solvable. I’ll keep working on it to bring it closer to the standard behavior.
- omgmajk 7mo agoTwo games in a row now I have gotten to a point where the last two pieces are ontop of eachother. I think this is perfectly fine, but seems to happen a little too often. Or I was just very unlucky. Otherwise it's a sweet game!
- rofko 7mo agoThank you! I'm going to review that. In the meantime I've added Undo/Redo options so you can backtrack your steps.
- HardwareLust 7mo agoVery nice! Worked great on my shitty old Motorola phone.
- apresmoi 7mo agowtf kind of magic is that? I looked at the repo and... you've built a 3d CSS rendering engine to create this?
- pverheggen 7mo agoThere'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.
- DuncanCoffee 7mo agoNice! Wish the supported rotation was bigger, maybe +- 90 instead of only 90 deg?
- akersten 7mo agoIf 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
- haunter 7mo agoNow make it _real_ mahjong (; https://en.wikipedia.org/wiki/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 7mo agoRiichi is the fun one, where skill weights over luck.
- haunter 7mo agoI also prefer riichi. Furiten is such a game changer, all other rulesets feel a bit less after that
- whateveracct 7mo agoRiichi 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 https://kemono.games/game/Kemono-Mahjong hunky furries aside, it's a really good single player Riichi app lol
- haunter 7mo 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
- dugidugout 7mo agoI second Mahjong Soul!
- 7mo ago
- snvzz 7mo agoThis ain't mahjong. Instead, it is some solitaire using mahjong pieces.
- koolala 7mo agoIs mahjong using solitare pieces Rummy?
- socalgal2 7mo agoYea, pretty culturally insensive to call this "mahjong" https://en.wikipedia.org/wiki/Mahjong https://en.wikipedia.org/wiki/Mahjong Beautifully made though. What I liked about the first one I saw in the 80s was the cascading shadows. Admittedly they were more important for 2d version https://www.uvlist.net/game-18516-Shanghai#gallery-1 https://www.uvlist.net/game-18516-Shanghai#gallery-1 https://www.youtube.com/watch?v=b-pH0mnqCYM&t=337s https://www.youtube.com/watch?v=b-pH0mnqCYM&t=337s
- rdescartes 7mo agoShould it be named Shanghai solitaire Or Mahjong Solitaire ?
- gchamonlive 7mo agoMaybe Mahjunk, am I right? slowly lowers right hand in awkward silence
- user3939382 7mo agoSome people say “mar” jong it’s the weirdest thing.
- thenthenthen 7mo agoSounds like dongbeinese (or erhua) haha, ‘marjang’
- Minor49er 7mo agoThis 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
- rofko 7mo agoThanks for the report! I added a patch that hopefully fixes that.
- sanj 7mo agoThis is lovely! Can I suggest make sure that the board is solveable?
- uean 7mo agoThis is part of the game. Many games will not be solvable.
- overflyer 7mo agoThis has bothing to do with how Mahjong is actually played.
- TazeTSchnitzel 7mo agoIs the lack of a perspective projection option deliberate? CSS can do that too.
- thenthenthen 7mo agoThere 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)
- Bender 7mo agoI 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!
- koolala 7mo agoI wonder if versus Mahjong Solitaire could be like Battle Tetris. I've never heard of people playing it competitively.
- rafabulsing 7mo agoMinecraft in CSS has been done, actually! https://benjaminaster.com/css-minecraft/ https://benjaminaster.com/css-minecraft/ Discussion: https://news.ycombinator.com/item?id=44100148 https://news.ycombinator.com/item?id=44100148
- koolala 7mo agoI wish you could rotate all the way. On a phone its also easy to do the refresh gesture.
- rofko 7mo agoDone!
- jsmo 7mo agoNice!
- aranw 7mo agoReally enjoyed that although my final two tiles were stacked and couldn't finish the game!
- rofko 7mo agoThat's unfortunate! I'll make sure to patch that case.
- tejonutella 7mo agoLooks cool! Wish I knew how to play Mahjong tho
- alexpotato 7mo agoCoding + Mahjong related story: Back in college, while majoring in CS, I had a rough time dealing with semicolons, typos, missed characters while coding. I thought to myself "I wonder if playing Mahjong in the Windows games would help me get better at scanning code and finding these types of errors". So I tried it and, lo and behold, it did. Also, in this day and age of LLMs writing a lot of the code, scanning for missing semicolons in code sounds like "I was great at fixing telegraphs!"
- soni96pl 7mo agoBeautiful work, thank you for showing it
- alexb_ 7mo agoDisappointed to see that this is solitaire and not Riichi :( would love to see more implementations of actual mahjong
- lieblingautor 7mo agoi'm confused how to play it but it's pretty amazing this was done with css cool stuff man