src > frontend > js

Separate functions into modules for example stage-controller.js

I feel like the game is a little tough unless you check the code (maybe it's just me), an answers list would be nice for curious/stuck users.

We could do with a loading page and/or a bundler.

Also remove the close popup menu x button because that's worse than closing an ad.
You just need to check for a click that isn't on the popup menu and toggle the popup (via the function)

This was fixed by a pull request but I'm afraid I messed something up.

npm install npm start

and open http://localhost:3000/

There's no clear method of compiling assets defined for the developer. While it's trivial to do this locally apart from the repository, having it defined helps with the messy untracked files such as package.json, lockfile, package folder (.gitignore) that are going to end up there anyways.

Mostly the button colors, these can be changed through themeName.css

convert repo to camelcase (unless necessary). functions starting with an uppercase letter should only be used as a constructor

main.js > line 129

a {} 

b {}

=>

a 
{} 

b 
{}

*do this for all elements if they aren't already

Debating viability but would be an awesome addition nonetheless.

Create a set of variables that will change depending on theme. All colour related styles will use said variables.

I went to https://devkennyy.github.io/rungeon/ and the loading logo appears but it never progresses from there. Looking in the console I see this:

01001001 01101110 00100000 01110000 01110010 01101111 01100111 01110010 01100101 01110011 01110011 00101110 00101110 00101110
main.js:70 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at main.js:70:13

I've told a few people to checkout out the site and they don't know to click on the dungeon doors, they don't know to squash the bug icon. Should we make it more obvious or leave it as is since it's a game.

The space after the theme name is to ensure the tick looks nice when it is added. Although, we should probably be doing it like so:
"cobalt" += " ✔️" instead of making the text content "cobalt ". Comment if you need more clarity, it's a little confusing.

The bottom margin should be increased and the height should be increased by roughly 1 pixel. Overall, this needs to be more responsive in case we add more popups. Maybe we should remove all the icons on the page? Would love to hear suggestions.

a { color: pink }
=>
a { color: pink; }

*do this for all elements if they aren't already

Remove useless comments, functions, styles. Make sure it really is useless.

When resetting stage 4 the commented code causes the key to not show. At the moment there is no other stage so it won't be reset, create a test level when testing.

Make sure the theme popup resizes to include all of the text

Add some padding so it isn't the size of largest text

Maybe a tick indication next to the theme in the popup?

We need to call the toggleThemePopup function in the setTheme function

This is an error related to the changes I made (switching the theme method), not sure what it's caused by.

I hadn't known of this because it was working with cache. Remove site data when testing.

content is no longer horizontally centred after the navbar was introduced.

The site is heavily based around icons, if they can't load an alert should be shown.

Option to return to the front-page or a full blown navbar that will allow users to change theme, discord...might render the landing page useless though.

Reset the opacity of the bug, change the coins display and make the buttons disabled until criteria is met again. Handler is all set up

Also remove the close popup menu x button because that's worse than closing an ad

This will require buttons to use their own class and not the bootstrap one, the same goes for the navbar.

Vertically and horizontally. This includes the icon, h1 and p.

You cannot drag the key to the lock, I'd have to read up on the api

Not really an issue, just keeping track.

best practices

Testing the Discord webhook.

Has a backend for this been considered? I'd be interested in contributing if there was plans for one. ^_^

Add a theme (give it a name) or the theme popup could be a checkbox system and you can just uncheck the themes.

I'm 300% sure there's some typos laying around. You can use an automatic checker like this, or this.

The themes popup covers the door icon instead of actually hiding it. leaves room for bugs.

If the user didn't collect the coin, the cursor will be 'not-allowed'
If the user did collect the coin, the cursor will be 'grab'

After clicking on the dragon, the button should be enabled and opacity will be reset.

(on the dragon icon)