Realistic Fivem MDT script

this went sprisingly well for what it is,
I built up the incident part of the home page with status colours and everything
I do still need to do the map and crew sections but that will come when I do their pages

I finally actually finished enough of the TRN page to start work on the incident variant of the home page
I added the incident creation and updating section to the incident utilities tab of the TRN page
I also did a small update to the sound so it starts from the start

I wanted to put this off for a bit longer but I dont wanna lose time lol
I’m almost done building one section of the TRN page once that’s done I’ll move onto the incident version of the home screen because I know what I need to include and I can populate it
I also updated the way the sound works so it actually fades in the same way it does on the real thing

bit of a rushed log because I gotta go in like 1 minute but I built the pages section and started the TRN page that will be used to test different events
I also built an error handler, but I haven’t hooked it up to React errors yet

finally actually started building the pages and it’s not as bad as I thought it would be
I fully built the status system and built the main home page
the incident version of the main home page is in the works but not done yet
mainly put out this devlog because I was approaching 10 hours and panicked

While procrastinating making the pages I managed to spend an hour and a half changing the scrollbar on the breakthrough messages and changing their content to an array so we can have multiple lines (I’m now realising there were much easier ways to do that)

another quick one so there isnt little stuff mixxed in with the pages
I made the perimeter info bar a function so I can call it for other stuff when needed

Really quick one because I want to go to bed and the next stuff takes a while because its building the pages
I added a perimeter for emergency mode
Tomorrow I’ll make it a proper function that can be called for other status updates as well

Finally a devlog where I’m happy with how things went

I added breakthrough messages both with and without sound

I also used the most irritating sound known to man as the alert sound while I’m looking for the actual one and I hate myself for it already

Just spent almost 4 hours trying to make an insanely simple animation just for it to only work when I gave up and commented everything out
Added the math for the pages of buttons to work and the arrows to refelect what they can do
Added a simple animation for when the buttons move

I added the arrows to the navbar, theyre not perfect yet but it’ll have to do
next I’ve got to figure out how to get the pages of buttons to display

this took a god awful amount of time to figure out because I dont know how css animation works but I managed to add the emergency button and made it work after a lot of research

next steps are add the arrows and make the buttons stop after they take up all their space then move into the next page of buttons controlled by the arrows

started a few hours prior to deciding to make it open source so a bit of a long one but lets go:

I started by finding a top-down view of the model of TOUGHBOOK that the RFS use then took it into an image editor to change branding so it doesn’t break Fivem TOS and while I was there I cleared out the actual screen of it so I can replace it later

Then I started building the site, that will turn into our in-game UI, using React and React Router

Then I figured out how to almost perfectly center the image on the page and add a container to the middle of it (I struggled massively here for some reason)

Then after that I built the navbar to look like the real thing (little lines and all) (this took so much longer than it should have because I dont know how CSS works)

Then I built the buttons to look good (again took me ages because of CSS) and then made them get created from a loop over a variable

Next steps are to add the emergency button and arrows and do the logic to not show too many buttons and instead have someone press the down arrow to see more