trangram

Thank you. It's not easy at all to implement a modern browser. You must have put a lot of effort into it

Great job! Does Northstar support web APIs like: Encoding, Compression Streams and Web Crypto, cause my web-based vector editor relies on them

Fixed the typo, thanks.

Fix the off-screen issue. Now the previous stuck stick will be reset to the original place on your next drag. Thanks for pointing this out. And you probably need to refresh the browser to see the new update

Fix the integer overflow issue. Now your share link will only the first puzzle, the other two puzzles are invalid thus won't be shown any more. If you don't see any changes, you may need to refresh the browser to see the latest version.

Thank you for sharing your story. Actually I didn't read any physical books to learn js and css, I learned both of them online and practicing them in my hobby projects, practicing is the only way that helps me finally grasp concepts of a programming/language and improve my coding skills using that specific language. I started learned css and js 17 years ago on https://www.w3schools.com, I decided to learn css just because I found it was so cool you can change the style of your website completely by replacing your css file with a different one. But later I used Java more frequently than other languages for 5 years due to my job need, and naturally I almost forgot all what I learned about js and css skill. It was around 2013/14 that js picked up my interest again due to the hit of nodejs at that time, so I turned to online to learn js again, this time learned it on https://javascript.info, yeah there are many resources to learning things, maybe nowadays people prefer LLMs, it's totally fine, just find the one that suits you. But remember you don't need to finish all those topics or concepts before you start your own project. Practices make your skill better if not perfect. Use those resources as references, you don't have to learn it chapter by chapter, everyone has different learning style. Programming is a long journey (and what any things else are not?), let your passion guides you, let you interest/hobby be your best teacher :) Best wishes ~

Thank you! Glad you find it addictive, enjoy the game :)

yeah, the solver behind Mathstick is pretty much like what you described: building the problem + solution simultaneously, besides you also need to collect the multiple solutions for the same question and information for further classifying the difficulty of a puzzle.

Just like "hand-made" pizza used as a response to the rise of frozen, factory-produced pizza and to establish authenticity against fast-food chains. Maybe "hand-made" will be used to emphasize a app/software is made by human rather than being vibecoded or completely AI generated in the future. Also, if you use the Puzzle Maker to create your own puzzle, it becomes a "hand-made" puzzle :)

Thanks for trying this out. I'll fix the off-screen issue later.

I created this game because of an old news my wife shared with me, it was about The New York Times bought the Wordle game. I was then surprised that such a simple, old-style game caught the attention of a big company. I said "I'd rather play a matchstick puzzle", and it was that moment that inspired me to create a free online version with all the puzzles procedurally generated by my own hand-made solver (I like the sound of this :D). Personally, I like moving one and only one matchstick to solve a puzzle rather than 2 or 3 sticks, also I don't like those tricky solutions like negative number, rotation trick and etc. although they could be a very creative solution and let you think outside the box sometimes, IMO, it is just not elegant and sometime distracting to encourage people to think in a systematic way.

I thought this game might be too tough. You're actually the first one besides my wife who's told me it is addictive.

Exactly. We only find real fulfillment when we work on what we’re passionate about. We need to value the process more than the outcome.

thank you and glad you love it, those books are more than enough.

As for the css part, I would suggest you start by building the layout for the desktop first. Once the desktop version looks good, use media queries to adjust the design for mobile and tablet sizes.

As for js and html part, think in Components: Instead of one giant file, break your code into "modules" or "components". In my matchstick game, I built the "Puzzle Display" as a standalone component. This allowed me to reuse the exact same code for the main game, the puzzle creator, and the shareable play pages.

For specific effects or tricky logic, Google and LLMs (like ChatGPT) are great resources. Avoid "copy-pasting" code you don't understand. Always try to deconstruct how a solution works before adding it to your project. Use these tools as teachers, not just shortcuts.

Most importantly, enjoy what you are doing. Let me know if you need more info, I'm more than happy to help. Good luck to your coding journey.

This is too tricky to be allowed. Let's play a fair game :D

Glad you enjoy it!

Thanks, I used to do something like that when I made a tabletop like card maker using three.js + angular 8, but it has been a long time ago, I need to catch up with the details how to implement it with angular v21 since it is almost a completely new framework compared to the old versions

Highly recommend y'all try playing with the Puzzle Maker first! It’s a great way to get a feel for the shape of numbers and the different moves you can make.

I personally found this 'learn-by-doing' approach really helps me understand the patterns before I tackle the harder levels.

sure i'll consider converting it to PWA if people prefer playing the main game than creating and sharing puzzles with the Puzzle Maker.

may I know which page it is?

good eye~ thanks

Yeah, you did! It's integer overflow, good catch!

js+css, angular only for fancy pop menu and dropdown list, no angular material though, as as to keep it simple and lightweight.

sure, will have a look. thanks!

Mathstick 2 is now ready!

Same as my first version, you can earn sticks to unlock the next level and the challenges get harder as you progress. With the newly added Puzzled Maker, you can now create your own matchstick puzzles and generate a shareable link to stump your friends :)

For example, check out this custom challenge I just created: https://mathstick.github.io/play?q=ktoylsjcnmylbetuinmylielj...

Feel free to share your puzzles below and feedback is welcome.

Please consider the scope of the updates, resources, and the effort I(solo maker)'ve put in over the past 6 months. The work involved could easily compare to what others might achieve in over a year. Thanks for understanding.

Thanks for the heads-up! I’m already aware, but I appreciate the reminder. These updates aren’t just small tweaks—I’ve been working hard every day for the past 6 months. I think visitors will find the new features, UI/UX improvements, tutorials, interactive tours, and community updates really useful. You can check out all my update posts from the past 6 months on YouTube here: https://www.youtube.com/@TrangramMotion/community Thanks again for the kind reminder!

Below are key features of Trangram (Prefer visuals? Check out the landing page: www.trangram.com):

Special Features: - Shape morphing - Group animation - Dynamic parent links - Multiple trackers on motion paths - Edit styles and transforms across keyframes

Animation Features: - Motion paths - Trim paths - Parent links - Looping - Easing (Customisable with graph editor) - Number animation

Illustration Features: - Rounded corners - Boolean operations - Vector tool (aka Pen tool) - Layering and Grouping - Clipping masks - Compound paths

Import & Export: - Import .svg and .tg (project files) - Export project files (tg), videos (mp4, webm), GIFs, and images (png, jpg, webp, svg)

In addition to exporting/importing tg files, logged-in users can easily reuse their existing designs by directly importing them from "My Designs".

Trangram indeed supports basic SVG import as well as importing Trangram files (tg). To import, simply navigate to the "Import" option under the main menu (Trangram logo) in the editor.

Regarding reusing shapes or groups, you can export them as tg files and import them into your new project. This feature allows for seamless reuse across projects. I hope this clarifies things for you!

Thank you for your kind words! I'm continuously striving to improve Trangram. Currently, I'm focusing on enhancing existing features and ensuring a smoother user experience overall. Rest assured, I'll continue to add new features to Trangram in the future, as stated on the https://www.trangram.com/about page.

Thank you! Well, it's hard to say, because the first version of Trangram differed significantly from what you see now. Additionally, I've been involved in various projects over the years.

Thank you! Delighted to hear that you find Trangram intuitive. Looking forward to having you explore it further in the future!