3 ms·

Show HN: Create and share your own text adventure games by editing a JSON!

kerbearasaurus 2y ago
Hello! I built this app over the past couple of days using tools that my co-founder and I created. I’m new to frontend (my background is in healthcare ML) so I wanted to see what I could build quickly using our tools! I had so much fun working on this app and discovering creative new ways our tools can be used. We’re opening up a private beta so email us at hello@phenoml.com if you’re interested! Youtube: https://www.youtube.com/watch?v=BBP-Egpu07g https://www.youtube.com/watch?v=BBP-Egpu07g How: PhenoUI Figma to Flutter plugin - Used a number of default Flutter widgets that our plugin supports (e.g. Buttons, Forms, Webview) and also used custom Flutter widgets (described below). You tag the elements in Figma with the corresponding Flutter widget you want to use and can add configurability if you desire (the demo in the youtube video shows this workflow in more detail) PhenoUI flutter library - Created a question manager to store and traverse the corresponding JSON to build the text adventure or questionnaire. - Created both general purpose Flutter widgets (e.g. EmailButton for launching a mailto upon button tap) as well as those for this specific app: AdventureCard-supports both fade and card flip animations using transformation matrices, TextAreaJson -extends our default Text widget to load prettified JSON What can you do in the app? - You can play the default text adventure game (an artistic take on my personal ADHD experiences) or a healthcare questionnaire (what can I say, we like building in healthcare) or you can create your own by editing the JSON - The text in the game and questionnaire supports rich text so you can add emojis to the title, content and buttons - The JSON validator checks for valid json as well as the specific overall structure required to run the text adventure game or questionnaire but I definitely could improve the verbosity of the error messages! - Once you’ve created your own game or questionnaire you can play it yourself and then share with others, so they can play your creation! Observations: - Once you abstract a text adventure game and a healthcare questionnaire to the same data structure it becomes hard to not see everything as a tree or graph structure - These tools are not no-code, they are a hybrid between low-code and dev tools. I really enjoyed getting to focus on logic and animations and not having to worry about layout, alignment, or overall responsiveness (the phenoUI-flutter library utilizes the Figma layout for this)

Hello! I built this app over the past couple of days using tools that my co-founder and I created. I’m new to frontend (my background is in healthcare ML) so I wanted to see what I could build quickly using our tools! I had so much fun working on this app and discovering creative new ways our tools can be used. We’re opening up a private beta so email us at hello@phenoml.com if you’re interested! Youtube: https://www.youtube.com/watch?v=BBP-Egpu07g https://www.youtube.com/watch?v=BBP-Egpu07g How: PhenoUI Figma to Flutter plugin - Used a number of default Flutter widgets that our plugin supports (e.g. Buttons, Forms, Webview) and also used custom Flutter widgets (described below). You tag the elements in Figma with the corresponding Flutter widget you want to use and can add configurability if you desire (the demo in the youtube video shows this workflow in more detail) PhenoUI flutter library - Created a question manager to store and traverse the corresponding JSON to build the text adventure or questionnaire. - Created both general purpose Flutter widgets (e.g. EmailButton for launching a mailto upon button tap) as well as those for this specific app: AdventureCard-supports both fade and card flip animations using transformation matrices, TextAreaJson -extends our default Text widget to load prettified JSON What can you do in the app? - You can play the default text adventure game (an artistic take on my personal ADHD experiences) or a healthcare questionnaire (what can I say, we like building in healthcare) or you can create your own by editing the JSON - The text in the game and questionnaire supports rich text so you can add emojis to the title, content and buttons - The JSON validator checks for valid json as well as the specific overall structure required to run the text adventure game or questionnaire but I definitely could improve the verbosity of the error messages! - Once you’ve created your own game or questionnaire you can play it yourself and then share with others, so they can play your creation! Observations: - Once you abstract a text adventure game and a healthcare questionnaire to the same data structure it becomes hard to not see everything as a tree or graph structure - These tools are not no-code, they are a hybrid between low-code and dev tools. I really enjoyed getting to focus on logic and animations and not having to worry about layout, alignment, or overall responsiveness (the phenoUI-flutter library utilizes the Figma layout for this)