[Concept] : [UI/UX] : YoRHa UI

[h0lybyte]

Core Concept/Theory A clear and concise description of what the concept is. Ex. It would be cool if [...]

This is the issue ticket in reference to the YoRHa UI, I will try to add all the links into this specific blog post and then extend it out for whatever we might want to use it for in the future. I am thinking of wrapping the whole UI/UX into a template widget, with the option to deploy the template out to an external repo.

[widget-template-yorha-ui] - -> { Github Action } - -> [Build and Bundle Dist] - -> { Pull Request kbve.com/public/embed/$widget-folder/$dist_files }

That is currently the workflow that I am suggesting, we could make improvements as we fix it up.

I was a bit inspired by how Sweep handles their automated issues, pull requests and patching, thus getting a bit closer to that area would be great!

---

Alternative Ideas Is there any other way this concept could be used?

I can add more ideas later on here if need be.

---

Alternative Examples/Sources Are there any other references that you can provide?

• Kndgy's Automa Design System

• Plat. Games Blog Post

• Code Pen

• BetterDiscord UI Design

• MetaKirby5 Yorha CSS

• • *

Additional information Add any other context or examples of this concept here.

No additional information as of right now.

[h0lybyte]

Almost done with the CI/CD for a testcase Widget that we could use as a template in the future.

I am thinking we could use Twin, aka https://github.com/ben-rogerson/twin.macro to help handle the CSS-in-JS aspect of the widget, but I am not too sure if that would be the best move as of right now.

[h0lybyte]

<script type="module" src="https://kbve.com/embed/yorha-ui/bootstrap.js"></script>
<div id="widget_yorha_ui"></div>

And we got ourselves a widget! Ah yes! Took me a bit to figure out some of the concepts for it but we in here!

[h0lybyte]

Appwrite Hackathon -> https://dev.to/appwrite/lightning-hackathon-functions-3fhf Google Ai / Square API -> https://square-google-ai.devpost.com/

Honestly, we could just integrate all of the G Ai and SquareAPI into the Appwrite functions, which I am already doing, so I suppose we got both in one.

The Appwrite Hackathon starts in a couple days and lasts 13th of September - End date: the 23rd of September. G Ai - October 17th 2023 is the Deadline.

[h0lybyte]

Interesting CLI/Terminal from Fallout 3 - https://codepen.io/32bitkid/pen/DrXOVg For future reference ^

[h0lybyte]

• Petals Test case integration, a reminder to add this in within this week.

[h0lybyte]

• Merging the Manga Template into YoRHa UI and migrating out the petals instance into its own issue ticket for now.

[h0lybyte]

• Proof of concept to Mini Idle Aura

[h0lybyte]

More Idle games to pull data from

• Idle Space Force https://apps.apple.com/au/app/idle-space-force/id1605194403
• Rogue with the dead https://apps.apple.com/au/app/rogue-with-the-dead-idle-rpg/id1515542137
• Idle Dyson Swarm - https://apps.apple.com/au/app/idle-dyson-swarm/id1631060225
• Idle Research - https://apps.apple.com/au/app/idle-research/id1538381108
• Tap Wizard 2 - https://apps.apple.com/au/app/tap-wizard-2-idle-magic-game/id1596750535
• Grim RPG - https://apps.apple.com/au/app/grim-rpg/id1551670378
• Magic Research - https://apps.apple.com/au/app/magic-research/id1671272877
• Progress Knight Remastered - https://apps.apple.com/au/app/progress-knight-remastered/id6450839683
• Eatventure - https://apps.apple.com/au/app/eatventure/id1600871388
• Idle Baker Boss - https://apps.apple.com/au/app/idle-baker-boss/id1581019999
• Grimoire Incremental - https://apps.apple.com/au/app/grimoire-incremental/id1618966147
• Spaceplan - https://apps.apple.com/au/app/spaceplan/id1200864554
• Idle Wizard - https://apps.apple.com/au/app/idle-wizard-a-fair-play-game/id1521860288

[h0lybyte]

• Starting Integration with Phaser 3
• Checking Appwrite Login for now

[h0lybyte]

• Grid Engine -> https://github.com/Annoraaq/grid-engine
• Plugins -> https://phaserplugins.com/

Before I add these, we are sitting at around 240kb file size before gzip compression.

[h0lybyte]

• Repo base -> https://github.com/blopa/top-down-react-phaser-game/
• Article for Reference -> https://javascript.plainenglish.io/i-made-a-top-down-game-version-of-my-blog-with-phaser-and-react-faf5c28cf768

[h0lybyte]

Welp this looks like it wont work in our favor,

yorha-ui\bootstrap.js ⚠️ 1.85 MB 9.24s

The engine runs our build-up towards almost 2MB without any major scenes, which is something that I might not want to do.

[h0lybyte]

I decided to abandon the Phaser engine and switch over to this vanillajs codepen https://codepen.io/punkydrewster713/pen/WNrXPrb

Keeps our build at around 250kb and gets the job done as of right now.

[h0lybyte]

• The pixel size ratio is currently set to 2px, could expand it out for bigger screens later on.

The character layout is the same as Drew Conley's structure.

        D1 D2 D3 D4
        R1 R2 R3 R4 (32px away from top)
        U1 U2 U3 U4 (64px away from top)
        L1 L2 L3 L4 (96px away from top)

This would make it easier to add, swap, and customize the pixel characters. I am currently going to add a function that would quickly swap the character sprite sheet out. The whole setup takes about 1kb in size but can be improved with some optimization to be around 400 bytes, give or take.

[h0lybyte]

Going to close this out and move it over to this -> https://github.com/KBVE/kbve/issues/106

We want to avoid using YoRHa as the direct name and maybe find a new name for it.