Website dark mode/Frontend rework

[Dave247]

Being able to switch to a darker colour theme would be nice. I discovered that while using an extension such as Dark Reader does work, it messes with the pulsing of the toypad light effects so a custom solution will be needed. Though it wouldn't need to be that fancy by just making the backgounds darker, it will also probably mean needing to change the hue of some of the other colours such as the default grey to something else.

[aurarius1]

I mentioned in #287 that I might start working on a frontend rework in vue.js/vuetify. I have been working the last two days on it and can show first revisions here (since I guess it fits here):

The light effects also work (did test it this night). With this there will also be an option to localize the page (currently just english, I could add german as well).

@Tivertoni I annotated the ToyPad component with a comment at the top that this is your work!

[Tivertoni]

@Dave247 Yeah, I guess it would be purely visible. But I also think it ads a nice touch to the emulator.

I did not use Bricklink, though I agree that this would make the most sense in the future.

I gathered high quality image of a stud, cleaned it up and wrote a small program that generates the baseplate for me, I wanted to be able to remove the LEGO logo if needed, that's why I choose that route.

For the details(bricks), I drew them myself in Paint3D, mirrored them, scaled them up to the texture and
overlayed both textures.

The workflow is not optimal and very manual, I think I will keep it until I have a design for all Story Pack portals. Maybe then I will write some script to automate that with the bricklink software.

[Dave247]

Defiantly check out the Studio app. Even if it ultimately doesn't meet your needs it is fun to play around in as the best thing to replicate the experience of building without physically doing it. Hopefully you can find a way to integrate it though as it can do some very fancy stuff which I imagine could make things a hell of a lot easier for you.

Also I just realised, I wouldn't know but hopefully there wouldn't be any licensing issues to use it in the repo.

[Berny23]

I wanted to be able to remove the LEGO logo if needed, that's why I choose that route.

That would be best, I think. Lego is a greedy company with more lawyers than designers. So, we should not give them anything to complain about, like including logos, pictures etc.

Unmarked bricks and plates are perfectly fine, except original Lego minifigures of course (those are still patented and Lego is really strict about that).

[Dave247]

I wanted to be able to remove the LEGO logo if needed, that's why I choose that route.

That would be best, I think. Lego is a greedy company with more lawyers than designers. So, we should not give them anything to complain about, like including logos, pictures etc.

Unmarked bricks and plates are perfectly fine, except original Lego minifigures of course (those are still patented and Lego is really strict about that).

That's a good point and the kind of thing I was thinking of when I mentioned potential licensing issues. I went and checked in Studio and was surprised you can actually toggle off the stud logo when rendering the image, so perhaps there is still a potential for use.

Reading what I can find such as the IP Guidance Statement makes me think that the design of the portal & base itself being from an official set would be protected in some way, so recreating it even fully yourself from scratch could still be problematic? A shame if so, but I can understand the desire to stay as far away from any of that as possible even if any potential risks would be small.

I could be overthinking it though. Easiest thing would be to ask Brinklink support seeing as they are (now) owned by the Lego group you should be able to take whatever they say with some confidence.

[Tivertoni]

I will try and contact them today when I'm home.

I will not directly mention the project it would be for, I could imagine that they don't like any emulation projects that achieve tag replication of tags you do not own on their own IP.

I will most likely start a new Discussion here on GitHub, I do not want to use "random" issues as threads.

[Dave247]

I have found a workarond for the time being when using Dark Reader (in Firefox at least), switching the theme generation mode to filter (from the default dynamic) will stop it from interfering with the drop targets element. Though the colour scheme changes from a nice grey to a ugly black it is better then nothing.

I did try looking into trying to fix it from the extension side. It doesn't have a ignore element function due to it adding a big performance impact and other workaround require manually messing with the stylesheets, which I try to stay as far away from if I can.

I don't envy your (and other frontend developers) work @aurarius1 because of how finicky it is, but will always be forever grateful for it.

[Dave247]

Perhaps this is something you have already implemented @aurarius1, but similar to #295 the issue of causing the server to crash by placing a tag on the pad prior to it detecting the game could also be handled by simply not allowing tags to be placed until that information has been received?

[aurarius1]

Yes this should be implemented (though probably still just very basic as the frontend is probably not complete as of now) as the whole toypad is disabled in the frontend until the "game connected" event is receiced.👍