pedropsi/game-bar-source

Pedro PSI game bar

game-bar-source's Issues

Gear icon to group settings

Why
These features are essentially settings which do not need to be readily accessible all the time.
Settings: mute, autosave on/off, clear saves, disable animations and whatever comes up.

What
Move all settings to a submenu.

How
Balloon similar to level select.

all option buttons fulltext in title screen

Why
Players new to the game bar might not know the function of each button. It might be nice if the game bar would diplay the function in text while the game is in main menu before switching to the icons.
This has accessibility benefits. It will also make it much easier to introduce new icons in the future.

What
While in main menu, display the game bar like
| hints | undo | restart | level select | music | fullscreen |

How
need a function to determine if in main menu, also bar item width needs to be constant which might be difficult.

mobile fullscreen always in landscape mode

Why
Useful in most cases, can still be manually adjusted.

What
Whenever fullscreen is selected on mobile, the screen orientation switches to landscape.

How
itch fullscreen does this

bookmarklet not working on itch anymore

Describe the bug
the bookmarklet does not seem to work on itch.io games anymore.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://w.itch.io/herding-cats
2. Click on game bar bookmarklet
3. ???
4. see that nothing happens

Expected behavior
game bar opening

game recommendations

Why
after the player is finished playing your game, they are likely to just close the tab and move on with their life. since we want to prevent this and eternally keep them in the grips of our webpage we need to provide them with an alternate option. when embedding games on external sites it would be nice to have a feature that draws some traffic in.

What
after the player has finished a game and registered for the hall of fame, show them 3 other games. these could be either hand-picked (for game series like BK and SB...) or picked from a list. List always shows most recent game and 2 random games.

Display an optional "Perfect Clear" or "Minimal Move" star ⍟.

Why
May be motivating for perfectionist players.

What
Display an optional "Perfect Clear" or "Minimal Move" star ⍟ instead of the default star when certain "merit" conditions are met.

How
Now to record this type of information extra info must be supplied to the game, such as which tiles to eliminate, how many moves are minimal, etc...

Differentiating between mobile and desktop

Why
Users with mobile devices have specific controls

What
Change the instructions text (among other things) when a mobile device is detected

How
Check how people have solved this before

Replace ★ with background image.

Currently the ★ is added as a unicode char. This increases the width of the flex item and breaks the alignment of the buttons.
Instead of adding the star, an image of the star could be placed in the background of the item. This would allow for further customization since the star image can be replaced.

Adding an optional image for unsolved levels and the currently selected level in a similar fashion would be a fancy addition.

Level Selector - Fix level width

popover instead of #credits and #How-to-play

Why
Creators might want to embed their games on external sites. Both the credits function and the how to play function currently link to external parts of the page.
Since this won't work for embedded games, the instructions and credits need to work from within the game bar.

What
A generic overlay function that is able to display formatted text and image. Would find use for embedding play instructions and credits.
It might make sense to spread the instructions over multiple pages with controls like in hints.
Hotkey ? could be referenced on the title screen and open an instruction/credit selector.
This bigger overlay could be reused for a potential settings menu.

How
Maybe the content can be somehow appended to the main game html? Otherwise separate files? Are there good markdown to html converters in .js? I imagine markdown support would be quite cool for hint formatting as well..

Clicking on locked level shows console message with unlock conditions

What
When locked levels are shown in level select, there should be a way for the user to get feedback about the unlock conditions. For linear+X, such a message could be 'Solve X more levels to unlock Level 12'. A boss level could be announced like 'Solve all previous levels to unlock level 12'. Levels >bosslevel+X would announce 'Solve all levels up to 12 and then X more to unlock level 16.'

Why
To resolve intransparencies in progression logic. Later on there could be other kinds of (more visual) feedback.

How
Console message?

Sounds were blocked in the game bar

mobile fullscreen cropped in landscape mode

What is the Problem / bug
turning to landscape mode on a mobile device crops the left and right border

System information:

• Android, can provide screenshot if needed

Include the checkpoints as a subset of level select

Describe the bug
"Checkpoints currently overwrite level select & there is no way to return to it except for beating the level."

Expected behavior
Should be possible to select both the level and the checkpoint

hint progress

Why
players should be able to see how many hints they have used

What
an ascii representation of hints used in a level/total hints !

How
image

Doubletap in LVLselect (Chrome/Kiwi)

Describe the bug
Taping the game bar lvl select menu to open, causes a doubletap, closing the menu immediately

Smartphone (please complete the following information):
Chrome & Kiwi browser

Update game-bar page and delete old repository

Which feature could be better documented?
The game bar page

What info is missing or would be nice to have?

• The changes due to the auto-sync
• New customisation procedure

Moving related icons closer together

Why
Undo and Restart are closely related, but have a lot of space between the icons. Seeing them both together should also help with quickly determiting which is which.
The same could be true for other related buttons, and with a somewhat low number of those, there is room for moving icons and buttons closer together while keeping them big enough to click.

What
Less wide undo and restart buttons (potentially with "Undo" and "Restart" text or "U" and "R", further removing space without making the clickable area smaller, but keeping the distinction between them). Remaining space could be between unrelated buttons instead. Grouping level saving and loading features together on one side and buttons like undo and music could also work, or even centering a smaller gamebar on bigger screens so that buttons keep a maximum width.

menu bar tap triggers action

What is the Problem / bug
The problem occurs on games with action (see Multiban). Mobile version has tap to trigger action, but action also gets triggered when tapping on undo, restart or when opening/closing level select.

Think it might relate to refocusing gameCanvas, which can be disabled on mobile I suppose since a swipe should refocus.

Video
see PN

Overwrite main menu

Why

• the PS main menu is very functional, but only that :'D
• the hotkey instructions are desktop-focused and is possibly dicouraging for mobile players.
• it could be a home for the instructions and credits button and as a result, free up space on the bar.
• when the time for settings has come, they can also be linked to here

What
Replare the main menu with a generic title screen. Should be able to load the game title and creator from the game if no menu code provided. If there is custom menu code it loads the custom menu from .html file (this would allow for game logos and image buttons).
Shows the new game and continue buttons as usual, but also has 'how to play', and 'credits' buttons. Mobile layout has bigger buttons and scrolling, desktop displays some keyboard shortcuts.

Force hide Android Chrome Menu

Why
To free space for the game bar

What
Force hide Android Chrome Menu

How
window.scrollTo(0,1); after detecting the appropriate browser version

Additional context
This hack does NOT work on Chrome 49 when the content height is less than the viewport.

Level Categories

Why
It would be nice to have a way of defining level categories, so that levels can be grouped by mechanic/complexity.

What
Levels are divided into categories in the level select menu.
Each category is shown as 'Category name 00/XX' where XX is the amount of levels in that category and 00 is the amount of solved levels in that category.
Ideally categories can be collapsed and expanded.

How
One array gives the category titles, another array the # of levels for each of the categories.
catName = [Intro, Beginner, Advanced, Expert]
catAmt = [4, 7, 11, 9]

wasd controls in level select

What
When opening the level select with L, players that play with WASD should be able to control the bar. Similarly, X as an additional confirm option seems reasonable.

How
I hope your rewrite of the hotkey system makes this an easy change.

Hints loading synchronously slow down game load

Morph into Progressive Web App too

Why

• potential fast track for publishing to android (publish a PWA directly to play store and add a donation button)
• better performance / native fullscreen

What

• essentially 'install' a webpage to the homescreen.

How
Possibly: https://fireship.io/lessons/pwa-to-play-store/

Greyed out locked levels, alternate style for boss levels

What
Add a toggleable feature for displaying locked levels, give visual feedback for boss levels by displaying them in an alternate style (even when solved). Alternate style could be a thicker outline and/or underlined text. Later on there could be a boss level icon.

Why
To add a way for visually distinguishing between regular and boss levels.

I have JavaScript unblocked in Chrome, and I've set Chrome to allow pedropsi.github.io, but I still get a notification saying the bar didn't load properly.

NB: if you think you can fix it yourself, please submit a pull request instead of an issue!

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Customizing the game bar is now hard

Describe the bug
After the autosync, customising the bar is no longer possible without some effort.

collapse / expand game bar

Why
Some players will prefer not having the gamebar visible at all times, especially in fullscreen mode.

What
Add a small 'collapse' button ⥥ ⥣ in the left of the game bar. When collapsed, show an expand button together with undo in the bottom left (undo should remain easily accessible).

undo past level change

Why
Mostly convenience, but also accident prevention.

How
copy undo stack before level change, then merge with newly loaded level

play button on .png images

I suppose giffer grabs them?

FAB undo on mobile

Why
The game bar is a bit slim and going for the undo button sometimes results in a miss, especially on smaller devices. Inputing a big amount of undos can become tedious.
What
On mobile devices, replace the undo element in the game bar with a floating action button. Press and hold should repeat undo, just like it does with keyboard input.