Add basic UI components

[amaury1093]

Add some basic UI in this PR. Note: nothing is connected to the backend yet, there is a temporary mockData.ts file which holds some fake territories of one nation, which evolves over time.

• Add a left pane which will hold nation information
• Add a slider on the bottom to travel through time
• Add the list of territories of this nation (from mock data)
• Show these territories on the map, only show the territory that is current to the current date
• Add a possibility to edit the current territory (only if you're connected). The "Save" button doesn't do anything yet.
• If you change date while editing, the editing mode is turned off.

Edit: sorry about the git avatars not being there, i got a new computer, but forgot to do git config...

[vercel[bot]]

This pull request is automatically deployed with Now.

To access deployments, click Details below or on the icon next to each push.

[amaury1093]

Fixing Now deployment

[amaury1093]

Yes, thanks for the comments.

• http://localhost:3000/_next/webpack-hmr I have a suspicion on where this come from: We're using dynamic routes (e.g. /map/yyyy/mm/dd), but it requires a custom server script. I filed an issue here: https://github.com/zeit/next.js/issues/4989. However the error doesn't appear on production, and HMR still works. So i'll leave this for now.
• Fixed NaN and territories on firefox, it was due to a difference of the javascript Date object behaving differently.
• Thanks for the design compliments. However, I'm not a designer, and that's the best I can do, and I actually feel that it could be way better. If at some point we could have an UI/UX designer in our team, that'd be excellent.
• Agreed with responsiveness, will address in a separate PR.

[amaury1093]

I was looking at the alternatives of a React date picker component, but didn't find the perfect one:

I'm looking for one where it's easy to navigate between years.

• react-dates by airbnb. It's super cool, but you can't change years easily. You can customize it, but there's some design work to do. Also, it depends on moment, which I want to avoid.
• react-date-picker. To go way back in time, you have to choose your century, decade, year etc. Not the best UX.
• react-datepicker: Doesn't go back to earlier than 1900 (https://github.com/Hacker0x01/react-datepicker/issues/893). Depends on moment.
• HTML5 date input: Doesn't render the same across browsers

Didn't try others yet. I'll try some others later, maybe in another PR. If not, then I'll create a custom datepicker (probably will be based on airbnb's one).

For now, in the scope of this PR, I'll use the HTML5 one.

[quorth0n]

Yeah I'd say react-dates with some customization is probably the best option. Have you seen https://github.com/airbnb/react-dates/pull/1106? It looks like this recent PR might help us out a bit for our customization. Why do you want to avoid moment.js? Also, might be worth noting the design of the date picker in a game that a lot of our mappers play. It's unique but is pretty intuitive and makes it easy to select dates. The arrows above and below the year allow you to change by century/decade/year, a fourth for millennia might suit this project.

[amaury1093]

Yes, I saw that PR, that's what I meant by "some design work" in my previous message, we needed to design the month/year selector ourselves. But this comment https://github.com/airbnb/react-dates/pull/1106#issuecomment-395693542 seems to be cool.

I really like the game one. react-dates + this customization would be really nice.

I want to avoid moment because of the bundle size: see https://github.com/moment/moment/issues/3376 or tons of other articles on the net.