Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(web/wasm): wasm demo web page #834

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

feat(web/wasm): wasm demo web page #834

wants to merge 8 commits into from

Conversation

aaadamgo
Copy link
Collaborator

Revamped the front-end with a fresh design. Some of the javascript has been updated, generally to add / remove classes to show/hide certain elements, but none of the core functions have been touched.

@sergey-melnychuk sergey-melnychuk changed the title Feature/front feat(web/wasm): improve wasm demo page web UI Nov 15, 2024
.gitignore Outdated Show resolved Hide resolved
web/app.js Outdated Show resolved Hide resolved
web/app.js Outdated Show resolved Hide resolved
web/package.json Outdated Show resolved Hide resolved
web/package.json Outdated Show resolved Hide resolved
web/style.css Outdated Show resolved Hide resolved
@sergey-melnychuk
Copy link
Collaborator

@aaadamgo , thank you for the pull request!

I left some comments/questions around the code, please let me know if I misinterpret any changes.

@ICavlek @LKozlowski PTAL.

.gitignore Outdated Show resolved Hide resolved
.gitignore Outdated Show resolved Hide resolved
.gitignore Outdated Show resolved Hide resolved
@sergey-melnychuk sergey-melnychuk changed the title feat(web/wasm): improve wasm demo page web UI feat(web/wasm): improve wasm demo web UI Nov 15, 2024
@ICavlek
Copy link
Contributor

ICavlek commented Nov 15, 2024

Nice work on the design, it really is a next step towards making the page look nicer and user friendly. Regarding the comments Sergey made, I agree with everything he has written and therefore I won't go deeper there. I will rather make comments and observations based on the design changes.

First of all, I like how the first page gives the impression how the whole workflow in Beerus should be done. What I had some UX issues is that I didn't have the impression that this was the major "help" page. I wasn't guided by the page and maybe the reason is that there was no box at the end that says "You can hit the Close button now and start working with Beerus". Also there might be another box that says to open terminal by clicking "+" to start interacting.

Next thing, ESC works, clicking outside not really and I don't know where it might work. Maybe directing to "Close" could be better. Or moving this whole box at the end of instructions.
Update

I think that hiding alchemy key as it was in the previous version should be used, the one with black circles instead of characters.
Screenshot 2024-11-15 at 11 52 03

In the end, these "Make call", "Get State" and all other "buttons" in the help page look not as attractive as the ones you did in the terminal. Same thing goes for the "Info" button, in the box where Click "Info" button to show this message again is, maybe that nice "i in circle" could be. This isn't crucial change for now, but it did catch my eye.
Screenshot 2024-11-15 at 11 53 45

I hope that this feedback will help on the future improvements. It is a completely different perspective from yours, where you have been working all the time on it and knowing what it contains and where it is located, and me, first time as a user seeing it and having first interactions :)

@sergey-melnychuk sergey-melnychuk changed the title feat(web/wasm): improve wasm demo web UI feat(web/wasm): wasm demo web page Nov 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants