Timer hud + npm run start-dev

[benjaminpwagner]

Fix #16

Locks pack timer to top left of screen when user scrolls down.

This way users can keep track of how much time they have left to pick when they are scrolled down the page.

Added nodemon (as a dev dependency) and npm run start-dev so server / client detects changes and reloads for dev purposes.

[HerveH44]

Thanks! I love the idea and I was wondering how to do it. I'll check the code as soon as I can. I would suggest though to add a bit of CSS to make it nicer. I feel that like that it's barely noticeable.

About nodemon I'm more doubtful : what about webpack dev-server? Isn't it exactly the same thing? Look at "npm run dev-server", I installed it a while ago and I use it from time to time. It works well

[ZeldaZach]

So i tested this out and I do like it, but like Herve said the CSS needs to be better. Maybe make it more noticeable / fancy so people know what they're looking at as I had to actively look for it.

[benjaminpwagner]

@HerveH44 About the nodemon: As far as I know, webpack-dev-server only reloads for client side code change and has an identical effect to running webpack with a -w flag. Nodemon will restart the server in the event of server side code changes.

Can someone attach a screenshot of what they see for the HUD timer? I'm on MacOS and chrome, so it make look different but on my screen it is quite evident where it is and what the timer indicates.

[tooomm]

This is how it looks for me on Windows with Firefox:

It's a nice improvement in my opinion, even though it's not perfectly stressed.

Something like the floating box in #345 in one of the upper or bottom corners would be more visible.

[HerveH44]

I've never used nodemon but I'm more than happy to use it! Webpack dev-server is not useful anymore I guess!

[HerveH44]

I think we could also delete all the informations about dev-server setup in webpack.config files

[benjaminpwagner]

So I had to use relative distances to get the timer hud where I wanted on scroll down.

Is it showing up here for everyone else?

[tooomm]

Windows 10
Firefox 65
1366x768

There are several issues for me:

• timer in the middle of the page
  

• timer freezes sometimes
  

• chat overlays and cuts timer off
  

[benjaminpwagner]

Took a different approach, should be good cross browser/device. Let me know what you guys think.

[ZeldaZach]

Interesting approach. Getting better, but not perfect. when you scroll down, the cards shift.

[ZeldaZach]

Also...

Seems to glitch out when I try to scroll down super far to my Main/Side/Junk boards

[benjaminpwagner]

Took a different approach again.

@ZeldaZach New commits should fix those issues + look slightly better.

[ZeldaZach]

Getting better for sure! Still some issues, see screenshots

[ZeldaZach]

Very nice job! This is a great addition :)

[HerveH44]

[benjaminpwagner]

Hm, looks like your browser is overriding the global font we are using on the site.

I'll try to adjust the width to be font-agnostic, but I could always find a fallback font that works with the size of the panel if that doesn't work.

[tooomm]

This is turning out nicely!
I also tested it on a tablet with smaller screen, but higher resolution without issues.

What does change now is that the segments/blocks (Players, Game and Settings...) get regrouped once the chat is displayed on smaller screens. The boxes overlay each other a bit in that case:

[benjaminpwagner]

@tooomm The chat was cutting off the config boxes on smaller screens so we added a wrap around. I can give those elements a bit of margin to prevent any overlap.