☰

Nitro Type - Safe Space

Replaces the Race Track with a Typing Test Lobby Chatroom. Choose which users to mute and block, it's your "safe space".

  1. // ==UserScript==
  2. // @name         Nitro Type - Safe Space
  3. // @version      0.6.1
  4. // @description  Replaces the Race Track with a Typing Test Lobby Chatroom. Choose which users to mute and block, it's your "safe space".
  5. // @author       Toonidy
  6. // @match        *://*.nitrotype.com/race
  7. // @match        *://*.nitrotype.com/race/*
  8. // @match        *://*.nitrotype.com/profile
  9. // @icon         https://i.ibb.co/YRs06pc/toonidy-userscript.png
  10. // @grant        none
  11. // @require      https://cdnjs.cloudflare.com/ajax/libs/dexie/3.2.1/dexie.min.js#sha512-ybuxSW2YL5rQG/JjACOUKLiosgV80VUfJWs4dOpmSWZEGwdfdsy2ldvDSQ806dDXGmg9j/csNycIbqsrcqW6tQ==
  12. // @require      https://greasyfork.org/scripts/443718-nitro-type-userscript-utils/code/Nitro%20Type%20Userscript%20Utils.js?version=1042360
  13. // @license      MIT
  14. // @namespace    https://greasyfork.org/users/858426
  15. // ==/UserScript==
  16.  
  17. /* globals Dexie findReact createLogger */
  18.  
  19. const logging = createLogger("Nitro Type Safe Space")
  20.  
  21. // Config storage
  22. const db = new Dexie("NTSafeSpace")
  23. db.version(1).stores({
  24.     users: "id, &username, team, displayName, status",
  25. })
  26. db.open().catch(function (e) {
  27.     logging.error("Init")("Failed to open up the config database", e)
  28. })
  29.  
  30. /////////////////////
  31. //  Settings Page  //
  32. /////////////////////
  33.  
  34. if (window.location.pathname === "/profile") {
  35.     //////////////////
  36.     //  Components  //
  37.     //////////////////
  38.  
  39.     const safeSpaceSettingRoot = document.createElement("div")
  40.     safeSpaceSettingRoot.classList.add("g-b", "g-b--9of12")
  41.     safeSpaceSettingRoot.innerHTML = `
  42.         <h2 class="tbs">Nitro Type Safe Space Settings</h2>
  43.         <p class="tc-ts">Manage settings from this Userscript.</p>
  44.         <p class="input-label">Mute/Blocked Users<p>
  45.         <table class="table table--selectable table--striped">
  46.             <thead class="table-head">
  47.                 <tr class="table-row">
  48.                     <th scope="col" class="table-cell table-cell--racer">Racer</th>
  49.                     <th scope="col" class="table-cell table-cell--status">Status</th>
  50.                     <th scope="col" class="table-cell table-cell--remove" style="width: 90px">Remove?</th>
  51.                 </tr>
  52.             </thead>
  53.             <tbody class="table-body">
  54.             </tbody>
  55.         </table>`
  56.  
  57.     const userTableBody = safeSpaceSettingRoot.querySelector("tbody.table-body")
  58.  
  59.     const userRow = document.createElement("tr")
  60.     userRow.classList.add("table-row")
  61.     userRow.innerHTML = `
  62.         <td class="table-cell table-cell--racer">
  63.             <div class="bucket bucket--s bucket--c">
  64.                 <div class="bucket-media bucket-media--w90">
  65.                     <img class="img--noMax db">
  66.                 </div>
  67.                 <div class="bucket-content">
  68.                     <div class="df df--align-center">
  69.                         <div class="prxxs"><img alt="Nitro Gold" class="icon icon-nt-gold-s" src="/dist/site/images/themes/profiles/gold/nt-gold-icon-xl.png"></div>
  70.                         <div class="prxxs df df--align-center">
  71.                             <a class="link link--bare mrxxs twb" style="color: rgb(253, 182, 77);"></a>
  72.                             <span class="type-ellip type-gold tss"></span>
  73.                         </div>
  74.                     </div>
  75.                     <div class="tsi tc-lemon tsxs"></div>
  76.                 </div>
  77.             </div>
  78.         </td>
  79.         <td class="table-cell table-cell--status">
  80.             <select class="input-select">
  81.                 <option value="MUTE">Muted</option>
  82.                 <option value="BLOCK">Blocked</option>
  83.             </select>
  84.         </td>
  85.         <td class="table-cell table-cell--remove tar prs">
  86.             <button title="Remove Block/Mute User" type="button" class="btn btn--negative">
  87.                 <svg class="icon icon-x--s"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/site/images/icons/icons.css.svg#icon-x"></use></svg>
  88.             </button>
  89.         </td>`
  90.  
  91.     const handleRowClick = (e) => {
  92.         const row = e.target.closest(".table-row"),
  93.             input = e.target.closest("a, button, select"),
  94.             userID = row && !input ? parseInt(row.dataset.user, 10) : null
  95.         if (userID !== null && !isNaN(userID)) {
  96.             db.users.get(userID).then((user) => {
  97.                 window.location.href = `/racer/${user.username}`
  98.             })
  99.         }
  100.     }
  101.  
  102.     const handleStatusUpdateChange = (e) => {
  103.         const targetElement = e.target.closest("select"),
  104.             row = e.target.closest(".table-row"),
  105.             userID = row ? parseInt(row.dataset.user, 10) : null
  106.         if (userID !== null && !isNaN(userID)) {
  107.             db.users.update(userID, { status: targetElement.value })
  108.         }
  109.     }
  110.  
  111.     const handleRemoveButtonClick = (e) => {
  112.         const row = e.target.closest(".table-row"),
  113.             userID = row ? parseInt(row.dataset.user, 10) : null
  114.         if (userID !== null && !isNaN(userID)) {
  115.             db.users.delete(userID).then(() => row.remove())
  116.         }
  117.     }
  118.  
  119.     db.users.count().then((total) => {
  120.         if (total === 0) {
  121.             const emptyRow = document.createElement("tr")
  122.             emptyRow.classList.add("table-row")
  123.             emptyRow.innerHTML = `<td class="table-cell" colspan="3">No racers found</td>`
  124.             userTableBody.append(emptyRow)
  125.             userTableBody.parentNode.classList.remove("table--selectable")
  126.             return
  127.         }
  128.  
  129.         const rowFragment = document.createDocumentFragment()
  130.         db.users
  131.             .each((userData) => {
  132.                 const row = userRow.cloneNode(true),
  133.                     carImage = row.querySelector("img.img--noMax"),
  134.                     teamLink = row.querySelector("a.link"),
  135.                     racerName = row.querySelector(".type-ellip"),
  136.                     statusSelect = row.querySelector("select"),
  137.                     removeButton = row.querySelector("button"),
  138.                     displayName = userData.displayName || userData.username
  139.  
  140.                 row.dataset.user = userData.id
  141.                 row.addEventListener("click", handleRowClick)
  142.  
  143.                 carImage.src = userData.carImgSrc
  144.                 carImage.alt = `${displayName}'s car`
  145.  
  146.                 teamLink.parentNode.title = displayName
  147.                 racerName.textContent = `${userData.team ? " " : ""}${displayName}`
  148.                 row.querySelector(".tsi").textContent = `"${userData.title}"`
  149.  
  150.                 if (!userData.team) {
  151.                     teamLink.remove()
  152.                 } else {
  153.                     teamLink.textContent = `[${userData.team}]`
  154.                     teamLink.href = `/team/${userData.team}`
  155.                     teamLink.style.color = `#${userData.teamColor}`
  156.                 }
  157.  
  158.                 if (!userData.isGold) {
  159.                     row.querySelector(".icon-nt-gold-s").parentNode.remove()
  160.                     racerName.classList.remove("type-gold")
  161.                 }
  162.  
  163.                 statusSelect.value = userData.status
  164.                 statusSelect.addEventListener("change", handleStatusUpdateChange)
  165.  
  166.                 removeButton.addEventListener("click", handleRemoveButtonClick)
  167.  
  168.                 rowFragment.append(row)
  169.             })
  170.             .then(() => {
  171.                 userTableBody.append(rowFragment)
  172.             })
  173.     })
  174.  
  175.     /////////////
  176.     //  Final  //
  177.     /////////////
  178.  
  179.     /** Mutation observer to check whether setting page has loaded. */
  180.     const settingPageObserver = new MutationObserver(([mutation], observer) => {
  181.         const sideMenu = mutation.target.querySelector(".has-btn"),
  182.             originalSettingRoot = mutation.target.querySelector(".g-b.g-b--9of12")
  183.         if (sideMenu && originalSettingRoot) {
  184.             observer.disconnect()
  185.  
  186.             const menuSafeSpaceButton = document.createElement("button")
  187.             menuSafeSpaceButton.classList.add("btn", "btn--fw")
  188.             menuSafeSpaceButton.textContent = "Nitro Type Safe Space"
  189.             menuSafeSpaceButton.addEventListener("click", () => {
  190.                 const currentActiveButton = sideMenu.querySelector(".btn.is-active")
  191.                 if (currentActiveButton) {
  192.                     currentActiveButton.classList.remove("is-active")
  193.                 }
  194.                 menuSafeSpaceButton.classList.add("is-active")
  195.                 originalSettingRoot.replaceWith(safeSpaceSettingRoot)
  196.             })
  197.  
  198.             const handleOriginalMenuButtonClick = () => {
  199.                 menuSafeSpaceButton.classList.remove("is-active")
  200.                 safeSpaceSettingRoot.replaceWith(originalSettingRoot)
  201.             }
  202.             sideMenu.querySelectorAll(".btn").forEach((node) => {
  203.                 node.addEventListener("click", handleOriginalMenuButtonClick)
  204.             })
  205.  
  206.             sideMenu.append(menuSafeSpaceButton)
  207.         }
  208.     })
  209.     settingPageObserver.observe(document.querySelector("main.structure-content"), { childList: true })
  210.  
  211.     return
  212. }
  213.  
  214. ///////////////////
  215. //  Racing Page  //
  216. ///////////////////
  217.  
  218. if (window.location.pathname === "/race" || window.location.pathname.startsWith("/race/")) {
  219.     const raceContainer = document.getElementById("raceContainer"),
  220.         canvasTrack = raceContainer?.querySelector("canvas"),
  221.         raceObj = raceContainer ? findReact(raceContainer) : null
  222.     if (!raceContainer || !canvasTrack || !raceObj) {
  223.         logging.error("Init")("Could not find the race track")
  224.         return
  225.     }
  226.     if (!raceObj.props.user.loggedIn) {
  227.         logging.error("Init")("Safe Space is not available for Guest Racing")
  228.         return
  229.     }
  230.  
  231.     //////////////
  232.     //  Styles  //
  233.     //////////////
  234.  
  235.     const style = document.createElement("style")
  236.     style.appendChild(
  237.         document.createTextNode(`
  238. :root {
  239.     --chat-contacts-width: 265px;
  240. }
  241.  
  242. .nt-safe-space-root {
  243.     position: relative;
  244.     box-sizing: border-box;
  245.     width: 1024px;
  246.     height: 400px;
  247.     background-color: #202020;
  248. }
  249.  
  250. /* Some Overrides */
  251. .race-results {
  252.     z-index: 6;
  253. }
  254.  
  255. /* Info Section */
  256. .nt-safe-space-info {
  257.     position: absolute;
  258.     left: 8px;
  259.     top: 8px;
  260.     bottom: 8px;
  261.     right: 633px;
  262.     display: flex;
  263.     flex-direction: column;
  264.     border-radius: 8px;
  265.     color: #eee;
  266.     background-color: #303030;
  267.     transition: 0.3s right ease;
  268. }
  269. .nt-safe-space-chat-contacts-hidden .nt-safe-space-info {
  270.     right: calc(617px - var(--chat-contacts-width));
  271. }
  272. .nt-safe-space-info-status {
  273.     display: flex;
  274.     flex-direction: column;
  275.     flex-grow: 1;
  276.     justify-content: center;
  277.     align-items: center;
  278. }
  279. .nt-safe-space-info-status-title {
  280.     font-size: 24px;
  281.     font-weight: 600;
  282.     text-align: center;
  283.     margin-bottom: 14px;
  284. }
  285. .nt-safe-space-info-status-subtitle {
  286.     font-size: 14px;
  287.     text-align: center;
  288. }
  289. .nt-safe-space-info-status-wampus {
  290.     display: flex;
  291.     justify-content: center;
  292.     margin-top: 1rem;
  293. }
  294. .nt-safe-space-info-status-wampus img {
  295.     width: 100px;
  296.     height: 64px;
  297. }
  298. .nt-safe-space-info-footer {
  299.     position: relative;
  300.     height: 138px;
  301.     border-bottom-left-radius: 8px;
  302.     border-bottom-right-radius: 8px;
  303. }
  304. .nt-safe-space-info-footer .nt-safe-space-contact-item {
  305.     position: absolute;
  306.     right: 8px;
  307.     bottom: 8px;
  308.     padding: 8px;
  309.     border-radius: 8px;
  310. }
  311.  
  312. /* Chat */
  313. .nt-safe-space-chat {
  314.     position: absolute;
  315.     left: 400px;
  316.     right: 8px;
  317.     top: 8px;
  318.     bottom: 8px;
  319.     z-index: 5;
  320.     display: flex;
  321.     border-radius: 8px;
  322.     overflow: hidden;
  323.     transition: 0.3s left ease;
  324. }
  325. .nt-safe-space-chat-contacts-hidden .nt-safe-space-chat {
  326.     left: calc(415px + var(--chat-contacts-width));
  327. }
  328.  
  329. /* Chat Contacts */
  330. .nt-safe-space-contacts {
  331.     display: flex;
  332.     flex-direction: column;
  333.     width: var(--chat-contacts-width);
  334.     border-top-left-radius: 8px;
  335.     border-bottom-left-radius: 8px;
  336.     border-right-width: 1px;
  337.     border-right-style: solid;
  338.     border-right-color: #34344a;
  339.     background-color: #0b0b10;
  340.     color: #fff;
  341.     transition-duration: 0.3s;
  342.     transition-property: width, border-right-width;
  343.     transition-timing-function: ease;
  344.     overflow: hidden;
  345. }
  346. .nt-safe-space-chat-contacts-hidden .nt-safe-space-contacts {
  347.     border-right-width: 0px;
  348.     width: 0px;
  349. }
  350. .nt-safe-space-contact-item {
  351.     padding: 2px 8px;
  352.     border-bottom: 1px solid #20202e;
  353.     background-color: #111218;
  354. }
  355. .nt-safe-space-contact-item:hover {
  356.     background-color: #181822;
  357. }
  358. .nt-safe-space-contact-item:first-of-type {
  359.     padding-top: 8px;
  360. }
  361. .nt-safe-space-contact-item:nth-child(4) {
  362.     padding-bottom: 8px;
  363.     border-bottom: 0;
  364. }
  365. .nt-safe-space-contact-item.alt-row {
  366.     background-color: #181a22;
  367. }
  368. .nt-safe-space-contact-item.alt-row:hover {
  369.     background-color: #20212c;
  370. }
  371. .nt-safe-space-contact-item-body {
  372.     display: flex;
  373.     justify-content: space-between;
  374.     align-items: center;
  375. }
  376. .nt-safe-space-contact-player {
  377.     display: flex;
  378.     align-items: center;
  379.     flex-grow: 1;
  380. }
  381. .nt-safe-space-contact-avatar  {
  382.     display: flex;
  383.     width: 64px;
  384.     height: 64px;
  385.     overflow: hidden;
  386.     margin-right: 4px;
  387. }
  388. .nt-safe-space-contact-avatar img {
  389.     margin: auto;
  390.     max-width: 100%;
  391.     max-height: 100%;
  392. }
  393. .nt-safe-space-contact-speech-bubble {
  394.     position: relative;
  395.     background: #fff;
  396.     border-radius: 8px;
  397.     padding: 4px;
  398.     margin-left: 10px;
  399.     transition: opacity 0.2s ease;
  400.     opacity: 1;
  401. }
  402. .nt-safe-space-contact-speech-bubble.nt-safe-space-hidden {
  403.     opacity: 0;
  404. }
  405. .nt-safe-space-contact-speech-bubble:after {
  406.     content: '';
  407.     position: absolute;
  408.     left: 0;
  409.     top: 50%;
  410.     width: 0;
  411.     height: 0;
  412.     border: 10px solid transparent;
  413.     border-right-color: #fff;
  414.     border-left: 0;
  415.     margin-top: -10px;
  416.     margin-left: -10px;
  417. }
  418. .nt-safe-space-contact-speech-bubble-img {
  419.     background-repeat: no-repeat;
  420.     background-size: contain;
  421.     background-position: center;
  422.     width: 48px;
  423.     height: 48px;
  424. }
  425. .nt-safe-space-contact-item-name {
  426.     display: flex;
  427.     align-items: center;
  428.     font-size: 12px;
  429.     font-weight: 600;
  430.     margin-bottom: 4px;
  431. }
  432. .nt-safe-space-contact-menu {
  433.     display: flex;
  434.     flex-direction: column;
  435.     font-size: 10px;
  436. }
  437. .nt-safe-space-contact-menu-item {
  438.     display: flex;
  439.     align-items: center;
  440.     padding: 4px;
  441.     margin-bottom: 2px;
  442.     border-radius: 4px;
  443.     width: 80px;
  444.     cursor: pointer;
  445. }
  446. .nt-safe-space-contact-menu-item:hover {
  447.     background-color: rgba(255, 255, 255, 0.1);
  448. }
  449. .nt-safe-space-contact-menu-icon {
  450.     margin-right: 8px;
  451. }
  452.  
  453. /* Chat Messages Container */
  454. .nt-safe-space-chatroom {
  455.     flex-grow: 1;
  456.     background-color: #20222e;
  457.     background-image: url(/dist/site/images/backgrounds/bg-noise.png)
  458. }
  459. .nt-safe-space-chatroom-messages {
  460.     position: relative;
  461.     height: 210px;
  462.     transition: height 0.2s ease;
  463. }
  464. .nt-safe-space-chatroom.hide-reply-options .nt-safe-space-chatroom-messages {
  465.     height: 344px;
  466. }
  467. .nt-safe-space-chatroom.disable-reply .nt-safe-space-chatroom-messages {
  468.     height: 384px;
  469. }
  470. .nt-safe-space-chatroom-messages-scrollable {
  471.     position: absolute;
  472.     left: 8px;
  473.     right: 8px;
  474.     top: 8px;
  475.     bottom: 8px;
  476.     display: flex;
  477.     flex-direction: column;
  478.     overflow-y: auto;
  479.     scrollbar-face-color: #fff;
  480.     scrollbar-track-color: #000;
  481.     color: #eee;
  482.     font-size: 12px;
  483. }
  484. .nt-safe-space-chatroom-messages-scrollable::-webkit-scrollbar {
  485.     width: 4px;
  486.     height: 4px;
  487. }
  488. .nt-safe-space-chatroom-messages-scrollable::-webkit-scrollbar-thumb {
  489.     background: #fff;
  490. }
  491. .nt-safe-space-chatroom-messages-scrollable::-webkit-scrollbar-track {
  492.     background: #000;
  493. }
  494.  
  495. /* Chat Message Item */
  496. .nt-safe-space-chatroom-message {
  497.     margin-top: auto;
  498.     margin-bottom: 16px;
  499. }
  500. .nt-safe-space-chatroom-message:last-of-type {
  501.     margin-bottom: unset;
  502. }
  503. .nt-safe-space-chatroom-message-heading, .nt-safe-space-chatroom-message-body  {
  504.     display: flex;
  505.     align-items: center;
  506. }
  507. .nt-safe-space-chatroom-message-heading {
  508.     margin-bottom: 4px;
  509.     font-weight: 600;
  510. }
  511. .nt-safe-space-chatroom-message-body {
  512.     display: inline-flex;
  513.     border-radius: 8px;
  514.     padding-top: 4px;
  515.     padding-bottom: 4px;
  516.     padding-left: 8px;
  517.     padding-right: 8px;
  518.     background-color: rgba(255, 255, 255, 0.1);
  519. }
  520. .nt-safe-space-chatroom-message-team,
  521. .nt-safe-space-chatroom-message-name {
  522.     margin-right: 0.5ch;
  523. }
  524. .nt-safe-space-chatroom-message-name.nt-gold-user,
  525. .nt-safe-space-contact-item-name.nt-gold-user {
  526.     color: #E0BB2F;
  527. }
  528. .nt-safe-space-chatroom-message-heading svg.icon,
  529. .nt-safe-space-contact-item svg.icon {
  530.     margin-right: 0.2ch;
  531. }
  532. .nt-safe-space-chatroom-message-body .nt-safe-space-chatroom-message-text.system-message {
  533.     font-style: italic;
  534. }
  535. .nt-safe-space-chatroom-message-body .nt-safe-space-chatroom-mesasge-img {
  536.     background-repeat: no-repeat;
  537.     background-size: contain;
  538.     background-position: center;
  539.     width: 48px;
  540.     height: 48px;
  541.     margin-left: 1ch;
  542. }
  543. .nt-safe-space-chatroom-message-time {
  544.     font-size: 10px;
  545.     margin-top: 2px;
  546. }
  547. .nt-safe-space-chatroom-message.is-me {
  548.     display: flex;
  549.     flex-direction: column;
  550. }
  551. .nt-safe-space-chatroom-message.is-me,
  552. .nt-safe-space-chatroom-message.is-me .nt-safe-space-chatroom-message-heading,
  553. .nt-safe-space-chatroom-message.is-me .nt-safe-space-chatroom-message-body {
  554.     margin-left: auto;
  555. }
  556. .nt-safe-space-chatroom-message.is-me .nt-safe-space-chatroom-message-time {
  557.     text-align: right;
  558. }
  559.  
  560. /* Chat Reply */
  561. .nt-safe-space-chatroom-reply {
  562.     height: 176px;
  563. }
  564. .nt-safe-space-chatroom-reply-toolbar {
  565.     background-color: #093c60;
  566.     padding: 2px;
  567. }
  568. .nt-safe-space-chatroom-reply-toolbar.friend-race {
  569.     display: grid;
  570.     grid-template-columns: 1fr 1fr;
  571.     gap: 2px;
  572. }
  573. .nt-safe-space-chatroom-reply-toolbar-option {
  574.     position: relative;
  575.     padding: 8px;
  576.     width: 100%;
  577.     color: #fff;
  578.     transition: background-color 0.2s ease;
  579.     background-color: rgba(0, 0, 0, 0.1);
  580. }
  581. .nt-safe-space-chatroom-reply-toolbar-option:hover {
  582.     background-color: rgba(0, 0, 0, 0.2);
  583. }
  584. .nt-safe-space-chatroom-reply-toolbar-option.selected {
  585.     background-color: rgba(0, 0, 0, 0.3);
  586. }
  587. .nt-safe-space-chatroom.hide-reply-options .nt-safe-space-chatroom-reply-toolbar-option {
  588.     border-bottom-left-radius: 4px;
  589.     border-bottom-right-radius: 4px;
  590. }
  591. .nt-safe-space-chatroom-reply-toolbar-option svg {
  592.     margin: 0 auto;
  593.     width: 20px;
  594.     height: 20px;
  595. }
  596. .nt-safe-space-chatroom-reply-options {
  597.     display: grid;
  598.     grid-template-columns: 1fr 1fr 1fr 1fr;
  599.     grid-template-rows: 1fr 1fr;
  600.     gap: 2px;
  601.     padding: 2px;
  602.     background: linear-gradient(to bottom, #167ac3 30%, #1C99F4 100%);
  603. }
  604. .nt-safe-space-chatroom-reply-sticker {
  605.     position: relative;
  606.     display: flex;
  607.     align-items: center;
  608.     justify-content: center;
  609.     border-radius: 4px;
  610.     padding: 8px;
  611.     background-color: rgba(0, 0, 0, 0.3);
  612.     transition: background-color 0.2s ease;
  613.     cursor: pointer;
  614. }
  615. .nt-safe-space-chatroom-reply-sticker:hover{
  616.     background-color: #eee;
  617. }
  618. .nt-safe-space-chatroom-reply-sticker.nt-space-space-activated {
  619.     background-color: #fff;
  620. }
  621. .nt-safe-space-chatroom-reply-sticker-img {
  622.     background-repeat: no-repeat;
  623.     background-size: contain;
  624.     background-position: center;
  625.     transition: background-image 0.2s ease;
  626.     width: 48px;
  627.     height: 48px;
  628. }
  629. .nt-safe-space-chatroom-reply-sticker-shortcut, .nt-safe-space-chatroom-reply-toolbar-option-shortcut {
  630.     position: absolute;
  631.     right: 0;
  632.     top: 0;
  633.     display: flex;
  634.     align-items: center;
  635.     justify-content: center;
  636.     width: 16px;
  637.     height: 16px;
  638.     border-bottom-left-radius: 4px;
  639.     background-color: rgba(0, 0, 0, 0.3);
  640.     color: #fff;
  641.     font-size: 12px;
  642. }`)
  643.     )
  644.     document.head.appendChild(style)
  645.  
  646.     const root = document.createElement("div")
  647.     root.classList.add("nt-safe-space-root", "nt-safe-space-chat-contacts-hidden")
  648.  
  649.     //////////////////
  650.     //  Components  //
  651.     //////////////////
  652.  
  653.     /** Display a chatroom with messages. */
  654.     const ChatRoom = ((safeSpaceContainer, raceObj, db) => {
  655.         const racerContactIDPrefix = "ntSafeSpaceRacer_",
  656.             friendIconSVG = `<svg class="icon icon-friends-s tc-lemon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/site/images/icons/icons.css.svg#icon-friends"></use></svg>`,
  657.             smileyIconSVG = `<svg class="icon icon-smiley-l"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/site/images/icons/icons.css.svg#icon-smiley"></use></svg>`,
  658.             chatIconSVG = `<svg class="icon icon-chat"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/site/images/icons/icons.css.svg#icon-chat"></use></svg>`,
  659.             blockIconSVG = `<svg class="icon icon-lock-outline"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/site/images/icons/icons.css.svg#icon-lock-outline"></use></svg>`,
  660.             muteIconSVG = `<svg class="icon icon-eye"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/site/images/icons/icons.css.svg#icon-eye"></use></svg>`,
  661.             root = document.createElement("div"),
  662.             systemUser = {
  663.                 userID: 0,
  664.                 profile: {
  665.                     displayName: "Typing Test Instructor",
  666.                     username: "Typing Test Instructor",
  667.                     tag: null,
  668.                     tagColor: null,
  669.                     membership: "normal",
  670.                 },
  671.             }
  672.         let userStickers = [],
  673.             userData = {},
  674.             isStickers = true,
  675.             isFriendRace = raceObj.state.friendsRace,
  676.             racerCount = 0,
  677.             userSpeechBubbleTimer = {},
  678.             chatButtonTimer = [],
  679.             updatingDB = [],
  680.             raceKeyboardObj,
  681.             originalChatObj
  682.  
  683.         root.classList.add("nt-safe-space-chat")
  684.         root.innerHTML = `
  685.             <div class="nt-safe-space-contacts"></div>
  686.             <div class="nt-safe-space-chatroom">
  687.                 <div class="nt-safe-space-chatroom-messages">
  688.                     <div class="nt-safe-space-chatroom-messages-scrollable"></div>
  689.                 </div>
  690.                 <div class="nt-safe-space-chatroom-reply">
  691.                     <div class="nt-safe-space-chatroom-reply-toolbar friend-race">
  692.                         <button class="nt-safe-space-chatroom-reply-toolbar-option option-sticker selected" type="button" title="Send Sticker">
  693.                             ${smileyIconSVG}
  694.                             <div class="nt-safe-space-chatroom-reply-toolbar-option-shortcut">S</div>
  695.                         </button>
  696.                         <button class="nt-safe-space-chatroom-reply-toolbar-option option-chat" type="button" title="Send Chat Message">
  697.                             ${chatIconSVG}
  698.                             <div class="nt-safe-space-chatroom-reply-toolbar-option-shortcut">C</div>
  699.                         </button>
  700.                     </div>
  701.                     <div class="nt-safe-space-chatroom-reply-options">
  702.                         ${Array.from(Array(8).keys())
  703.                             .map(
  704.                                 (i) =>
  705.                                     `<button class="nt-safe-space-chatroom-reply-sticker" type="button" data-stickerindex="${i}">
  706.                             <div class="nt-safe-space-chatroom-reply-sticker-img"></div>
  707.                             <div class="nt-safe-space-chatroom-reply-sticker-shortcut">${i + 1}</div>
  708.                         </button>`
  709.                             )
  710.                             .join("")}
  711.                     </div>
  712.                 </div>
  713.             </div>`
  714.  
  715.         const handleNoHighlightButtonMouseDown = (e) => {
  716.             e.preventDefault()
  717.         }
  718.  
  719.         const handleChatOptionButtonClick = (e) => {
  720.             e.preventDefault()
  721.             const targetElement = e.target.closest(".nt-safe-space-chatroom-reply-toolbar-option")
  722.             if (targetElement.classList.contains("selected")) {
  723.                 targetElement.classList.remove("selected")
  724.                 toggleChatOptions(false)
  725.                 return
  726.             }
  727.             toggleChatOptions(true)
  728.             isStickers = targetElement.classList.contains("option-sticker")
  729.             refreshChatOptions()
  730.             root.querySelectorAll(".nt-safe-space-chatroom-reply-toolbar-option").forEach((optionElement) => {
  731.                 optionElement.classList.remove("selected")
  732.             })
  733.             targetElement.classList.add("selected")
  734.         }
  735.  
  736.         const handleChatSendButtonClick = (e) => {
  737.             e.preventDefault()
  738.             const targetElement = e.target.closest(".nt-safe-space-chatroom-reply-sticker"),
  739.                 index = targetElement ? parseInt(targetElement.dataset.stickerindex, 10) : null
  740.             if (index === null || isNaN(index)) {
  741.                 return
  742.             }
  743.             if (isStickers) {
  744.                 originalChatObj.sendMessage(userStickers[index].id, userStickers[index].src, "sticker")
  745.             } else {
  746.                 originalChatObj.sendMessage(index, raceObj.props.chatTexts[index], "text")
  747.             }
  748.             flashChatButton(index)
  749.         }
  750.  
  751.         root.querySelectorAll(".nt-safe-space-chatroom-reply-toolbar-option").forEach((node) => {
  752.             node.addEventListener("click", handleChatOptionButtonClick)
  753.             node.addEventListener("mousedown", handleNoHighlightButtonMouseDown)
  754.         })
  755.         root.querySelectorAll(".nt-safe-space-chatroom-reply-sticker").forEach((node) => {
  756.             node.addEventListener("click", handleChatSendButtonClick)
  757.             node.addEventListener("mousedown", handleNoHighlightButtonMouseDown)
  758.         })
  759.  
  760.         const buttonSticker = root.querySelector(".nt-safe-space-chatroom-reply-toolbar-option.option-sticker"),
  761.             buttonChat = root.querySelector(".nt-safe-space-chatroom-reply-toolbar-option.option-chat")
  762.  
  763.         if (!isFriendRace) {
  764.             root.querySelector(".nt-safe-space-chatroom-reply-toolbar").classList.remove("friend-race")
  765.             buttonChat.remove()
  766.         }
  767.  
  768.         const chatMessages = root.querySelector(".nt-safe-space-chatroom-messages-scrollable")
  769.  
  770.         const refreshChatOptions = () => {
  771.             root.querySelectorAll(".nt-safe-space-chatroom-reply-sticker-img").forEach((stickerItemContainer, i) => {
  772.                 if (isStickers) {
  773.                     if (userStickers[i]) {
  774.                         stickerItemContainer.parentNode.title = userStickers[i].name
  775.                         stickerItemContainer.style.backgroundImage = `url(${userStickers[i].src})`
  776.                     } else {
  777.                         stickerItemContainer.parentNode.title = ""
  778.                         stickerItemContainer.parentNode.style.display = "none"
  779.                     }
  780.                 } else {
  781.                     stickerItemContainer.style.backgroundImage = `url(/dist/site/images/chat/canned/chat_${i}.png)`
  782.                     stickerItemContainer.parentNode.title = raceObj.props.chatTexts[i]
  783.                     stickerItemContainer.parentNode.style.display = ""
  784.                 }
  785.             })
  786.         }
  787.  
  788.         const toggleChatOptions = (show) => {
  789.             if (show) {
  790.                 chatMessages.parentNode.parentNode.classList.remove("hide-reply-options")
  791.             } else {
  792.                 chatMessages.parentNode.parentNode.classList.add("hide-reply-options")
  793.             }
  794.         }
  795.  
  796.         const toggleChat = (show) => {
  797.             if (show) {
  798.                 chatMessages.parentNode.parentNode.classList.remove("disable-reply")
  799.             } else {
  800.                 chatMessages.parentNode.parentNode.classList.add("disable-reply")
  801.             }
  802.         }
  803.  
  804.         const flashChatButton = (index) => {
  805.             const button = root.querySelector(`.nt-safe-space-chatroom-reply-sticker[data-stickerindex="${index}"]`)
  806.             if (button) {
  807.                 if (chatButtonTimer[index]) {
  808.                     clearTimeout(chatButtonTimer[index])
  809.                 }
  810.                 button.classList.add("nt-space-space-activated")
  811.                 chatButtonTimer[index] = setTimeout(() => {
  812.                     button.classList.remove("nt-space-space-activated")
  813.                 }, 5e2)
  814.             }
  815.         }
  816.  
  817.         const addRacer = (user, status) => {
  818.             const { userID } = user,
  819.                 { tag, tagColor, displayName, username, carID, carHueAngle } = user.profile,
  820.                 isMe = userID == currentUserID,
  821.                 isGold = user.profile.membership === "gold",
  822.                 isFriend = friendIDs && friendIDs.includes(userID) ? true : user.isFriend,
  823.                 imgCarSrc = raceObj.props.getCarUrl(carID, false, carHueAngle, false),
  824.                 newRacerElement = chatContactTemplate.cloneNode(true),
  825.                 newRacerTeamNode = newRacerElement.querySelector(".nt-safe-space-chatroom-message-team"),
  826.                 newRacerNameNode = newRacerElement.querySelector(".nt-safe-space-chatroom-message-name"),
  827.                 newRacerAvatarNode = newRacerElement.querySelector(".nt-safe-space-contact-avatar img"),
  828.                 newMuteButton = newRacerElement.querySelector(".nt-safe-space-btn-mute"),
  829.                 newBlockButton = newRacerElement.querySelector(".nt-safe-space-btn-block")
  830.             newRacerElement.id = `${racerContactIDPrefix}${userID}`
  831.             newRacerElement.dataset.user = userID
  832.             newRacerNameNode.textContent = displayName || username
  833.             newRacerAvatarNode.src = imgCarSrc
  834.             newRacerAvatarNode.alt = `${displayName || username}'s car`
  835.             if (isMe) {
  836.                 newRacerElement.classList.add("is-me")
  837.                 newRacerElement.querySelector(".nt-safe-space-contact-menu").remove()
  838.             }
  839.             if (tag) {
  840.                 newRacerTeamNode.textContent = `[${tag}]`
  841.                 newRacerTeamNode.style.color = `#${tagColor}`
  842.             } else {
  843.                 newRacerTeamNode.remove()
  844.             }
  845.             if (!isGold) {
  846.                 newRacerNameNode.classList.remove("nt-gold-user")
  847.                 newRacerElement.querySelector(".icon-nt-gold-s").remove()
  848.             }
  849.             if (!isFriend) {
  850.                 newRacerElement.querySelector(".nt-safe-space-chatroom-message-friend").remove()
  851.             }
  852.             if (racerCount % 2 !== 0 || isMe) {
  853.                 newRacerElement.classList.add("alt-row")
  854.             }
  855.             if (status === "MUTE") {
  856.                 newMuteButton.classList.remove("nt-safe-space-btn-mute")
  857.                 newMuteButton.classList.add("nt-safe-space-btn-unmute")
  858.                 newMuteButton.querySelector(".nt-safe-space-contact-menu-label").textContent = "Unmute"
  859.             }
  860.             newMuteButton.addEventListener("click", handleContactOptionButtonClick)
  861.             newBlockButton.addEventListener("click", handleContactOptionButtonClick)
  862.             newMuteButton.addEventListener("mousedown", handleNoHighlightButtonMouseDown)
  863.             newBlockButton.addEventListener("mousedown", handleNoHighlightButtonMouseDown)
  864.  
  865.             userData[userID] = user
  866.  
  867.             if (!isMe) {
  868.                 chatContacts.appendChild(newRacerElement)
  869.                 racerCount++
  870.                 safeSpaceContainer.classList.remove("nt-safe-space-chat-contacts-hidden")
  871.             }
  872.  
  873.             return newRacerElement
  874.         }
  875.  
  876.         const removeRacer = (userID) => {
  877.             const contact = document.getElementById(`${racerContactIDPrefix}${userID}`)
  878.             if (!contact || contact.classList.contains("is-me") || userID === currentUserID) {
  879.                 return
  880.             }
  881.             contact.remove()
  882.  
  883.             racerCount--
  884.             if (racerCount === 0) {
  885.                 safeSpaceContainer.classList.add("nt-safe-space-chat-contacts-hidden")
  886.             }
  887.             root.querySelectorAll(".nt-safe-space-contact-item").forEach((node, i) => {
  888.                 if (i % 2 !== 0) {
  889.                     node.classList.add("alt-row")
  890.                 } else {
  891.                     node.classList.remove("alt-row")
  892.                 }
  893.             })
  894.         }
  895.  
  896.         const getRacer = (userID) => {
  897.             return userData[userID]
  898.         }
  899.  
  900.         const updateUser = (userID, status, user) => {
  901.             if (updatingDB.includes(userID)) {
  902.                 return
  903.             }
  904.             user = user || raceObj.state.racers.find((r) => r.userID === userID)
  905.             if (!user) {
  906.                 logging.warn("Chat")("User not found for sync", userID)
  907.                 return
  908.             }
  909.             const { tag, tagColor, displayName, username, title, membership, carID, carHueAngle } = user.profile,
  910.                 carImgSrc = raceObj.props.getCarUrl(carID, false, carHueAngle, false)
  911.             updatingDB = updatingDB.concat(userID)
  912.             return db.users
  913.                 .put({
  914.                     id: userID,
  915.                     username,
  916.                     displayName,
  917.                     isGold: membership === "gold",
  918.                     title,
  919.                     team: tag,
  920.                     teamColor: tagColor,
  921.                     carID: tagColor,
  922.                     carHueAngle: tagColor,
  923.                     carImgSrc,
  924.                     status,
  925.                 })
  926.                 .then(() => {
  927.                     updatingDB = updatingDB.filter((uid) => uid !== userID)
  928.                     return true
  929.                 })
  930.         }
  931.  
  932.         const muteUser = (userID) => {
  933.             const user = raceObj.state.racers.find((r) => r.userID === userID)
  934.             if (!user) {
  935.                 logging.warn("Chat")("Muting user not found", userID)
  936.                 return
  937.             }
  938.             updateUser(userID, "MUTE").then(() => {
  939.                 addMessage("system", user, "Has been muted =)")
  940.                 const muteButton = root.querySelector(`#${racerContactIDPrefix}${userID} .nt-safe-space-btn-mute`)
  941.                 muteButton.classList.remove("nt-safe-space-btn-mute")
  942.                 muteButton.classList.add("nt-safe-space-btn-unmute")
  943.                 muteButton.querySelector(".nt-safe-space-contact-menu-label").textContent = "Unmute"
  944.             })
  945.         }
  946.  
  947.         const unmuteUser = (userID) => {
  948.             if (updatingDB.includes(userID)) {
  949.                 return
  950.             }
  951.             const user = raceObj.state.racers.find((r) => r.userID === userID)
  952.             if (!user) {
  953.                 logging.warn("Chat")("Muting user not found", userID)
  954.                 return
  955.             }
  956.             updatingDB = updatingDB.concat(userID)
  957.             db.users.delete(user.userID).then(() => {
  958.                 addMessage("system", user, "Has been unmuted =)")
  959.                 updatingDB = updatingDB.filter((uid) => uid !== userID)
  960.                 const muteButton = root.querySelector(`#${racerContactIDPrefix}${userID} .nt-safe-space-btn-unmute`)
  961.                 muteButton.classList.remove("nt-safe-space-btn-unmute")
  962.                 muteButton.classList.add("nt-safe-space-btn-mute")
  963.                 muteButton.querySelector(".nt-safe-space-contact-menu-label").textContent = "Mute"
  964.             })
  965.         }
  966.  
  967.         const blockUser = (userID) => {
  968.             const user = raceObj.state.racers.find((r) => r.userID === userID)
  969.             if (!user) {
  970.                 logging.warn("Chat")("Muting user not found", userID)
  971.                 return
  972.             }
  973.             updateUser(userID, "BLOCK").then(() => {
  974.                 addMessage("system", user, "Has been blocked =)")
  975.                 removeRacer(userID)
  976.             })
  977.         }
  978.  
  979.         // Chat Contact Template
  980.         const chatContacts = root.querySelector(".nt-safe-space-contacts"),
  981.             chatContactTemplate = document.createElement("div")
  982.         chatContactTemplate.classList.add("nt-safe-space-contact-item")
  983.         chatContactTemplate.innerHTML = `
  984.             <div class="nt-safe-space-contact-item-name">
  985.                 <img class="icon icon-nt-gold-s" src="/dist/site/images/themes/profiles/gold/nt-gold-icon-xl.png" alt="Nitro Gold">
  986.                 <span class="nt-safe-space-chatroom-message-team"></span>
  987.                 <span class="nt-safe-space-chatroom-message-name nt-gold-user"></span>
  988.                 <span class="nt-safe-space-chatroom-message-friend">${friendIconSVG}</span>
  989.             </div>
  990.             <div class="nt-safe-space-contact-item-body">
  991.                 <div class="nt-safe-space-contact-player">
  992.                     <div class="nt-safe-space-contact-avatar">
  993.                         <img />
  994.                     </div>
  995.                     <div class="nt-safe-space-contact-speech-bubble nt-safe-space-hidden">
  996.                         <div class="nt-safe-space-contact-speech-bubble-img"></div>
  997.                     </div>
  998.                 </div>
  999.                 <div class="nt-safe-space-contact-menu">
  1000.                     <button class="nt-safe-space-contact-menu-item nt-safe-space-btn nt-safe-space-btn-mute">
  1001.                         <span class="nt-safe-space-contact-menu-icon">${muteIconSVG}</span>
  1002.                         <span class="nt-safe-space-contact-menu-label">Mute</span>
  1003.                     </button>
  1004.                     <button class="nt-safe-space-contact-menu-item nt-safe-space-btn nt-safe-space-btn-block">
  1005.                         <span class="nt-safe-space-contact-menu-icon">${blockIconSVG}</span>
  1006.                         <span class="nt-safe-space-contact-menu-label">Block</span>
  1007.                     </button>
  1008.                  </div>
  1009.             </div>`
  1010.  
  1011.         const handleContactOptionButtonClick = (e) => {
  1012.             e.preventDefault()
  1013.             const targetElement = e.target.closest(".nt-safe-space-btn"),
  1014.                 userContact = e.target.closest(".nt-safe-space-contact-item"),
  1015.                 targetUserID = parseInt(userContact?.dataset.user, 10)
  1016.             if (!targetUserID) {
  1017.                 return
  1018.             }
  1019.             if (targetElement.classList.contains("nt-safe-space-btn-mute")) {
  1020.                 muteUser(targetUserID)
  1021.             } else if (targetElement.classList.contains("nt-safe-space-btn-unmute")) {
  1022.                 unmuteUser(targetUserID)
  1023.             } else if (targetElement.classList.contains("nt-safe-space-btn-block")) {
  1024.                 blockUser(targetUserID)
  1025.             }
  1026.         }
  1027.  
  1028.         // Chat Message Template
  1029.         const chatMessageTemplate = document.createElement("div")
  1030.         chatMessageTemplate.classList.add("nt-safe-space-chatroom-message")
  1031.         chatMessageTemplate.innerHTML = `
  1032.             <div class="nt-safe-space-chatroom-message-heading">
  1033.                 <img class="icon icon-nt-gold-s" src="/dist/site/images/themes/profiles/gold/nt-gold-icon-xl.png" alt="Nitro Gold">
  1034.                 <span class="nt-safe-space-chatroom-message-team"></span>
  1035.                 <span class="nt-safe-space-chatroom-message-name nt-gold-user"></span>
  1036.                 <span class="nt-safe-space-chatroom-message-friend">${friendIconSVG}</span>
  1037.                 <div class="nt-safe-space-chatroom-message-time"></div>
  1038.             </div>
  1039.             <div class="nt-safe-space-chatroom-message-body">
  1040.                 <span class="nt-safe-space-chatroom-message-text"></span>
  1041.                 <div class="nt-safe-space-chatroom-mesasge-img"></div>
  1042.             </div>`
  1043.  
  1044.         const chatNameTemplate = chatMessageTemplate.querySelector(".nt-safe-space-chatroom-message-heading").cloneNode(true)
  1045.         chatNameTemplate.querySelector(".nt-safe-space-chatroom-message-time").remove()
  1046.  
  1047.         // Setup Custom Sticker Shortcut Handler
  1048.         const handleKeyPress = (t, n) => {
  1049.             if (t !== "keydown") {
  1050.                 return false
  1051.             }
  1052.             let selectedButton
  1053.             const { key } = n
  1054.  
  1055.             if (key.toLowerCase() === "s") {
  1056.                 selectedButton = buttonSticker
  1057.             } else if (key.toLowerCase() === "c" && isFriendRace) {
  1058.                 selectedButton = buttonChat
  1059.             }
  1060.             if (selectedButton) {
  1061.                 if (selectedButton.classList.contains("selected")) {
  1062.                     selectedButton.classList.remove("selected")
  1063.                     toggleChatOptions(false)
  1064.                     return false
  1065.                 }
  1066.                 toggleChatOptions(true)
  1067.                 isStickers = selectedButton.classList.contains("option-sticker")
  1068.                 refreshChatOptions()
  1069.                 root.querySelectorAll(".nt-safe-space-chatroom-reply-toolbar-option").forEach((optionElement) => {
  1070.                     optionElement.classList.remove("selected")
  1071.                 })
  1072.                 selectedButton.classList.add("selected")
  1073.                 return false
  1074.             }
  1075.  
  1076.             // Handle Chat Send (if the menu is opened)
  1077.             const selected = root.querySelector(".nt-safe-space-chatroom-reply-toolbar-option.selected")
  1078.             if (!selected) {
  1079.                 return false
  1080.             }
  1081.             if (/^[1-8]$/.test(key) && raceKeyboardObj) {
  1082.                 const index = parseInt(key - 1, 10)
  1083.                 if (isStickers) {
  1084.                     originalChatObj.sendMessage(userStickers[index].id, userStickers[index].src, "sticker")
  1085.                 } else {
  1086.                     originalChatObj.sendMessage(index, raceObj.props.chatTexts[index], "text")
  1087.                 }
  1088.                 flashChatButton(index)
  1089.                 return false
  1090.             }
  1091.         }
  1092.  
  1093.         const addMessage = (type, user, message, imgSrc) => {
  1094.             const { userID } = user,
  1095.                 { tag, tagColor, displayName, username } = user.profile,
  1096.                 isMe = userID == currentUserID,
  1097.                 isGold = user.profile.membership === "gold",
  1098.                 isFriend = friendIDs && friendIDs.includes(userID) ? true : user.isFriend,
  1099.                 newMessageElement = chatMessageTemplate.cloneNode(true),
  1100.                 stamp = new Date(),
  1101.                 newMessageTeamNode = newMessageElement.querySelector(".nt-safe-space-chatroom-message-team"),
  1102.                 newMessageNameNode = newMessageElement.querySelector(".nt-safe-space-chatroom-message-name"),
  1103.                 newMessageTextNode = newMessageElement.querySelector(".nt-safe-space-chatroom-message-text"),
  1104.                 newMessageImageNode = newMessageElement.querySelector(".nt-safe-space-chatroom-mesasge-img")
  1105.             newMessageElement.querySelector(".nt-safe-space-chatroom-message-time").textContent = `- ${stamp.toLocaleTimeString("en-US")}`
  1106.             newMessageElement.dataset.user = userID
  1107.             newMessageNameNode.textContent = displayName || username
  1108.             newMessageTextNode.textContent = message
  1109.             if (isMe) {
  1110.                 newMessageElement.classList.add("is-me")
  1111.             }
  1112.             if (tag) {
  1113.                 newMessageTeamNode.textContent = `[${tag}]`
  1114.                 newMessageTeamNode.style.color = `#${tagColor}`
  1115.             } else {
  1116.                 newMessageTeamNode.remove()
  1117.             }
  1118.             if (!isGold) {
  1119.                 newMessageNameNode.classList.remove("nt-gold-user")
  1120.                 newMessageElement.querySelector(".icon-nt-gold-s").remove()
  1121.             }
  1122.             if (!isFriend) {
  1123.                 newMessageElement.querySelector(".nt-safe-space-chatroom-message-friend").remove()
  1124.             }
  1125.             if (type === "system") {
  1126.                 newMessageTextNode.classList.add("system-message")
  1127.             }
  1128.             if (imgSrc) {
  1129.                 newMessageImageNode.style.backgroundImage = `url(${imgSrc})`
  1130.             } else {
  1131.                 newMessageImageNode.remove()
  1132.             }
  1133.  
  1134.             chatMessages.appendChild(newMessageElement)
  1135.             chatMessages.scrollTop = chatMessages.scrollHeight
  1136.         }
  1137.  
  1138.         // Return Chat component
  1139.         return {
  1140.             root: root,
  1141.             systemUser,
  1142.             addRacer,
  1143.             removeRacer,
  1144.             getRacer,
  1145.             addMessage,
  1146.             updateUser,
  1147.             assignStickers: (stickers = []) => {
  1148.                 userStickers = stickers
  1149.                 refreshChatOptions()
  1150.             },
  1151.             enableKeyListener: (kbObj, chatObj) => {
  1152.                 if (!kbObj) {
  1153.                     throw new Error("Keyboard React Object is required")
  1154.                 }
  1155.                 if (!chatObj) {
  1156.                     throw new Error("Chat React Object is required")
  1157.                 }
  1158.                 originalChatObj = chatObj
  1159.                 raceKeyboardObj = kbObj
  1160.                 raceKeyboardObj.input.initialize({
  1161.                     boundElement: raceKeyboardObj.typingInputRef.current,
  1162.                     keyHandler: (t, n) => {
  1163.                         let continueEvent = true
  1164.                         if (!raceKeyboardObj.props.started) {
  1165.                             continueEvent = handleKeyPress(t, n)
  1166.                         }
  1167.                         if (continueEvent) {
  1168.                             raceKeyboardObj.handleKeyPress(t, n)
  1169.                         }
  1170.                     },
  1171.                 })
  1172.             },
  1173.             disableChat: () => {
  1174.                 toggleChat(false)
  1175.                 if (raceKeyboardObj) {
  1176.                     raceKeyboardObj.input.initialize({
  1177.                         boundElement: raceKeyboardObj.typingInputRef.current,
  1178.                         keyHandler: raceKeyboardObj.handleKeyPress,
  1179.                     })
  1180.                 }
  1181.             },
  1182.             displaySpeechBubble: (userID, imgSrc) => {
  1183.                 const speechBubble = document.querySelector(`#${racerContactIDPrefix}${userID} .nt-safe-space-contact-speech-bubble-img`)
  1184.                 if (speechBubble) {
  1185.                     if (userSpeechBubbleTimer[userID]) {
  1186.                         clearTimeout(userSpeechBubbleTimer[userID])
  1187.                     }
  1188.                     speechBubble.style.backgroundImage = `url(${imgSrc})`
  1189.                     speechBubble.parentNode.classList.remove("nt-safe-space-hidden")
  1190.                     userSpeechBubbleTimer[userID] = setTimeout(() => {
  1191.                         speechBubble.parentNode.classList.add("nt-safe-space-hidden")
  1192.                         userSpeechBubbleTimer[userID] = null
  1193.                     }, 4e3)
  1194.                 }
  1195.             },
  1196.             getChatUser: (userID) => {
  1197.                 return db.users.get(userID)
  1198.             },
  1199.         }
  1200.     })(root, raceObj, db)
  1201.  
  1202.     /** Displays Information about Race Status and Results. */
  1203.     const InfoSection = (() => {
  1204.         const root = document.createElement("div")
  1205.         root.classList.add("nt-safe-space-info")
  1206.         root.innerHTML = `
  1207.             <div class="nt-safe-space-info-status">
  1208.                 <div class="nt-safe-space-info-status-title">Setting up Typing Test</div>
  1209.                 <div class="nt-safe-space-info-status-subtitle"></div>
  1210.                 <div class="nt-safe-space-info-status-wampus"><img src="/images/loot/sticker_1630508306.png" alt="Laughing Wampus" /></div>
  1211.             </div>
  1212.             <div class="nt-safe-space-info-footer">
  1213.             </div>`
  1214.  
  1215.         const status = root.querySelector(".nt-safe-space-info-status"),
  1216.             statusTitle = root.querySelector(".nt-safe-space-info-status-title"),
  1217.             statusSubTitle = root.querySelector(".nt-safe-space-info-status-subtitle"),
  1218.             statusWampus = root.querySelector(".nt-safe-space-info-status-wampus"),
  1219.             statusFooter = root.querySelector(".nt-safe-space-info-footer")
  1220.  
  1221.         statusSubTitle.remove()
  1222.         statusWampus.remove()
  1223.  
  1224.         const updateStatusTitle = (text) => {
  1225.             statusTitle.textContent = text
  1226.         }
  1227.  
  1228.         const updateStatusSubTitle = (text) => {
  1229.             if (text) {
  1230.                 statusSubTitle.textContent = text
  1231.                 if (statusWampus.isConnected) {
  1232.                     statusWampus.before(statusSubTitle)
  1233.                 } else {
  1234.                     status.append(statusSubTitle)
  1235.                 }
  1236.             } else {
  1237.                 statusSubTitle.remove()
  1238.             }
  1239.         }
  1240.  
  1241.         const updatePlayer = (node) => {
  1242.             statusFooter.append(node)
  1243.         }
  1244.  
  1245.         const toggleWampus = (show) => {
  1246.             if (show) {
  1247.                 status.append(statusWampus)
  1248.             } else {
  1249.                 statusWampus.remove()
  1250.             }
  1251.         }
  1252.  
  1253.         const COUNTDOWN_STATES = [["Get Ready!", "It's Typing Test Time! Get ready..."], ["3..."], ["2..."], ["1..."], ["Let's Go!", "Go go go! GLHF!"]]
  1254.         let countdownTimer,
  1255.             lastCountdown = 0
  1256.  
  1257.         const updateText = (state, chat) => {
  1258.             let [status, systemChatMessage] = COUNTDOWN_STATES[state]
  1259.             systemChatMessage = systemChatMessage || status
  1260.             chat.addMessage("system", chat.systemUser, systemChatMessage)
  1261.             updateStatusTitle(status)
  1262.         }
  1263.  
  1264.         return {
  1265.             root,
  1266.             updateStatusTitle,
  1267.             updateStatusSubTitle,
  1268.             updatePlayer,
  1269.             toggleWampus,
  1270.             startCountdown: (chat) => {
  1271.                 if (countdownTimer) {
  1272.                     logging.warn("Status")("You can only initiate countdown once")
  1273.                     return
  1274.                 }
  1275.                 lastCountdown = 0
  1276.                 updateText(lastCountdown, chat)
  1277.                 countdownTimer = setInterval(() => {
  1278.                     if (lastCountdown + 1 < COUNTDOWN_STATES.length - 1) {
  1279.                         updateText(++lastCountdown, chat)
  1280.                     }
  1281.                 }, 1e3)
  1282.             },
  1283.             stopCountdown: (chat) => {
  1284.                 clearTimeout(countdownTimer)
  1285.                 lastCountdown = COUNTDOWN_STATES.length - 1
  1286.                 updateText(lastCountdown, chat)
  1287.             },
  1288.         }
  1289.     })()
  1290.  
  1291.     ////////////////////////
  1292.     //  Backend Handling  //
  1293.     ////////////////////////
  1294.  
  1295.     let disqualifiedUsers = [],
  1296.         reloadRaceRequested = false,
  1297.         canReloadRace = false,
  1298.         isWampusRace = false
  1299.  
  1300.     const server = raceObj.server,
  1301.         currentUserID = raceObj.props.user.userID,
  1302.         friendIDs = raceObj.props.friendIDs,
  1303.         stickerList = raceObj.stickers,
  1304.         chatTextList = raceObj.props.chatTexts
  1305.  
  1306.     /** Reload next race earlier than usual. */
  1307.     const requestNextRaceASAP = (e) => {
  1308.         ChatRoom.addMessage("system", ChatRoom.systemUser, "No don't leave me :(")
  1309.         if (canReloadRace) {
  1310.             InfoSection.updateStatusSubTitle("Starting new race...")
  1311.             raceObj.raceAgain(e)
  1312.             return
  1313.         }
  1314.         reloadRaceRequested = true
  1315.         InfoSection.updateStatusSubTitle("Loading new race, please wait...")
  1316.     }
  1317.  
  1318.     /** Key Event handler to allow early race reloading. */
  1319.     const nextRaceASAPKeyHandler = (e) => {
  1320.         if (e.key === "Enter") {
  1321.             window.removeEventListener("keypress", nextRaceASAPKeyHandler)
  1322.             requestNextRaceASAP(e)
  1323.         }
  1324.     }
  1325.  
  1326.     // Setup User's stickers
  1327.     let userStickers = raceObj.userStickers
  1328.         .filter((s) => s.equipped)
  1329.         .sort((a, b) => a.equipped - b.equipped)
  1330.         .map((s) => s.lootID)
  1331.     if (userStickers.length === 0) {
  1332.         userStickers = raceObj.props.lootConfig.sticker.defaults
  1333.     }
  1334.     ChatRoom.assignStickers(
  1335.         userStickers.map((id) => {
  1336.             const s = raceObj.props.loot.find((s) => s.lootID === id)
  1337.             return {
  1338.                 id,
  1339.                 name: s.name,
  1340.                 src: s.options.src,
  1341.             }
  1342.         })
  1343.     )
  1344.  
  1345.     // Track Speed Range and Race Mode
  1346.     server.on("setup", (e) => {
  1347.         if (typeof e.trackLeader === "string" && e.trackLeader !== "") {
  1348.             if (e.trackLeader === raceObj.props.user.username) {
  1349.                 InfoSection.updateStatusTitle("Creating Friendly Typing Test")
  1350.             } else {
  1351.                 InfoSection.updateStatusTitle("Joining Friendly Typing Test")
  1352.             }
  1353.         }
  1354.  
  1355.         let subTitle = ""
  1356.         if ((typeof e.trackLeader !== "string" || e.trackLeader !== raceObj.props.user.username) && e.scores && e.scores.length === 2) {
  1357.             const [from, to] = e.scores
  1358.             subTitle = `Speed Range: ${from} WPM - ${to} WPM`
  1359.         } else {
  1360.             subTitle = `${e.scoringMode.toUpperCase()} mode`
  1361.             server.on("settings", (e) => {
  1362.                 InfoSection.updateStatusSubTitle(`${e.scoringMode.toUpperCase()} mode`)
  1363.             })
  1364.         }
  1365.         if (subTitle) {
  1366.             InfoSection.updateStatusSubTitle(subTitle)
  1367.         }
  1368.     })
  1369.  
  1370.     // Track Race Status
  1371.     server.on("status", (e) => {
  1372.         const raceStatus = e.status
  1373.         if (raceStatus === "countdown") {
  1374.             logging.info("Racing")("Start countdown")
  1375.             if (isWampusRace) {
  1376.                 InfoSection.toggleWampus(false)
  1377.             }
  1378.             InfoSection.startCountdown(ChatRoom)
  1379.         } else if (raceStatus === "racing") {
  1380.             logging.info("Racing")("Start racing")
  1381.             InfoSection.stopCountdown(ChatRoom)
  1382.             ChatRoom.disableChat()
  1383.  
  1384.             const lastLetter = raceContainer.querySelector(".dash-copy .dash-word:last-of-type .dash-letter:nth-last-of-type(2)")
  1385.             if (lastLetter) {
  1386.                 lastLetterObserver.observe(lastLetter, { attributes: true })
  1387.             } else {
  1388.                 logging.warn("Init")("Unable to setup finish race tracker")
  1389.             }
  1390.         }
  1391.     })
  1392.  
  1393.     // Track New Racers
  1394.     server.on("joined", (user) => {
  1395.         if (user.robot) {
  1396.             if (user.profile.specialRobot === "wampus") {
  1397.                 isWampusRace = true
  1398.                 InfoSection.toggleWampus(true)
  1399.             }
  1400.             return
  1401.         }
  1402.         ChatRoom.getChatUser(user.userID).then((data) => {
  1403.             if (!data || data.status !== "BLOCK") {
  1404.                 const chatNode = ChatRoom.addRacer(user, data?.status)
  1405.                 if (user.userID === currentUserID) {
  1406.                     InfoSection.updatePlayer(chatNode)
  1407.                 }
  1408.                 ChatRoom.addMessage("system", user, "Has joined the chatroom")
  1409.             }
  1410.             if (data?.status === "MUTE") {
  1411.                 ChatRoom.addMessage("system", user, "Has been muted =)")
  1412.             }
  1413.             if (data?.status === "BLOCK") {
  1414.                 logging.info("Chat")("This user is blocked", JSON.stringify(user))
  1415.             }
  1416.             if (data) {
  1417.                 ChatRoom.updateUser(user.userID, data.status, user).then(() => {
  1418.                     logging.info("Chat")(`Sync user details (${data.status})`, JSON.stringify(user))
  1419.                 })
  1420.             }
  1421.         })
  1422.     })
  1423.  
  1424.     // Track Players Leaving (Friend Race)
  1425.     server.on("left", (e) => {
  1426.         if (!e) {
  1427.             return
  1428.         }
  1429.         ChatRoom.getChatUser(e).then((data) => {
  1430.             if (data?.status !== "BLOCK") {
  1431.                 const user = ChatRoom.getRacer(e)
  1432.                 if (user) {
  1433.                     ChatRoom.addMessage("system", user, "Has left the chatroom =(")
  1434.                 }
  1435.             }
  1436.         })
  1437.         ChatRoom.removeRacer(e)
  1438.     })
  1439.  
  1440.     // Track New Chat Messages
  1441.     server.on("chat", (e) => {
  1442.         const user = raceObj.state.racers.find((r) => r.userID === e.from)
  1443.         if (!user) {
  1444.             logging.warn("Chat")("Received message from unknown user", JSON.stringify(e))
  1445.             return
  1446.         }
  1447.         ChatRoom.getChatUser(user.userID).then((data) => {
  1448.             let message, imgSrc
  1449.             if (e.chatType === "sticker" && stickerList) {
  1450.                 const sticker = stickerList.find((s) => s.lootID === e.chatID)
  1451.                 if (sticker) {
  1452.                     message = sticker.name
  1453.                     imgSrc = sticker.options.src
  1454.                 }
  1455.             } else if (e.chatType === "text" && chatTextList) {
  1456.                 message = chatTextList[e.chatID]
  1457.                 imgSrc = `/dist/site/images/chat/canned/chat_${e.chatID}.png`
  1458.             } else {
  1459.                 message = "???"
  1460.             }
  1461.             if (!data || !["MUTE", "BLOCK"].includes(data.status)) {
  1462.                 ChatRoom.addMessage("msg", user, message, imgSrc)
  1463.                 ChatRoom.displaySpeechBubble(user.userID, imgSrc)
  1464.             } else {
  1465.                 logging.info("Chat")(`${data.status} message received`, JSON.stringify({ ...e, message, imgSrc }))
  1466.             }
  1467.         })
  1468.     })
  1469.  
  1470.     // Track Racing Updates for disqualify and completion
  1471.     server.on("update", (e) => {
  1472.         e?.racers?.forEach((user) => {
  1473.             if (!user.robot && user.disqualified && !disqualifiedUsers.includes(user.userID)) {
  1474.                 disqualifiedUsers = disqualifiedUsers.concat(user.userID)
  1475.                 ChatRoom.getChatUser(user.userID).then((data) => {
  1476.                     if (data?.status !== "BLOCK") {
  1477.                         ChatRoom.addMessage("system", user, "Has left the chatroom =(")
  1478.                     }
  1479.                 })
  1480.             }
  1481.             if (user.userID === currentUserID && user.progress.completeStamp > 0 && user.profile && !canReloadRace && !raceContainer.querySelector(".race-results")) {
  1482.                 if (reloadRaceRequested) {
  1483.                     InfoSection.updateStatusSubTitle("Starting new race...")
  1484.                     raceObj.raceAgain(e)
  1485.                 } else {
  1486.                     canReloadRace = true
  1487.                 }
  1488.             }
  1489.         })
  1490.     })
  1491.  
  1492.     /** Rank suffixes for Race Result. */
  1493.     const RANK_SUFFIX = ["st", "nd", "rd"]
  1494.  
  1495.     /** Mutation obverser to track whether results screen showed up. */
  1496.     const resultObserver = new MutationObserver(([mutation], observer) => {
  1497.         for (const newNode of mutation.addedNodes) {
  1498.             if (newNode.classList?.contains("race-results")) {
  1499.                 observer.disconnect()
  1500.                 window.removeEventListener("keypress", nextRaceASAPKeyHandler)
  1501.  
  1502.                 const currentUserResult = raceObj.state.racers.find((r) => r.userID === currentUserID)
  1503.                 if (!currentUserResult || !currentUserResult.progress || typeof currentUserResult.place === "undefined") {
  1504.                     logging.warn("Finish")("Unable to find race results")
  1505.                     return
  1506.                 }
  1507.  
  1508.                 const resultMain = raceContainer.querySelector(".raceResults"),
  1509.                     resultContainer = resultMain.parentNode,
  1510.                     obj = resultContainer ? findReact(resultContainer) : null
  1511.                 if (!resultContainer || !obj) {
  1512.                     logging.warn("Finish")("Unable to hide result screen by default")
  1513.                     return
  1514.                 }
  1515.                 resultMain.style.marginLeft = "-10000px"
  1516.                 resultContainer.classList.add("is-minimized", "has-minimized")
  1517.                 obj.state.isHidden = true
  1518.                 obj.state.hasMinimized = true
  1519.  
  1520.                 setTimeout(() => {
  1521.                     resultMain.style.marginLeft = ""
  1522.                 }, 500)
  1523.  
  1524.                 const { typed, skipped, startStamp, completeStamp, errors } = currentUserResult.progress,
  1525.                     wpm = Math.round((typed - skipped) / 5 / ((completeStamp - startStamp) / 6e4)),
  1526.                     time = ((completeStamp - startStamp) / 1e3).toFixed(2),
  1527.                     acc = ((1 - errors / (typed - skipped)) * 100).toFixed(2),
  1528.                     points = Math.round((100 + wpm / 2) * (1 - errors / (typed - skipped))),
  1529.                     place = currentUserResult.place,
  1530.                     rankSuffix = place >= 1 && place <= 3 ? RANK_SUFFIX[place - 1] : "th"
  1531.                 InfoSection.updateStatusTitle("Race Results")
  1532.                 InfoSection.updateStatusSubTitle(`${place}${rankSuffix} | ${acc}% Acc | ${wpm} WPM | ${points} points | ${time} secs`)
  1533.  
  1534.                 logging.info("Finish")("Display Alternative Result Screen")
  1535.                 break
  1536.             }
  1537.         }
  1538.     })
  1539.  
  1540.     /** Mutation observer to track whether last letter was typed (just finished race). */
  1541.     const lastLetterObserver = new MutationObserver(([mutation], observer) => {
  1542.         if (mutation.target.classList.contains("is-correct")) {
  1543.             observer.disconnect()
  1544.             window.addEventListener("keypress", nextRaceASAPKeyHandler)
  1545.             InfoSection.updateStatusTitle("Finished")
  1546.             if (isWampusRace) {
  1547.                 InfoSection.toggleWampus(true)
  1548.             }
  1549.             ChatRoom.addMessage("system", ChatRoom.systemUser, "Done! Time to review your result :)")
  1550.             resultObserver.observe(raceContainer, { childList: true })
  1551.         }
  1552.     })
  1553.  
  1554.     /////////////
  1555.     //  Final  //
  1556.     /////////////
  1557.  
  1558.     // Hide chat (Nitro Type will break if the DOM element is removed)
  1559.     const registerChatNode = (node, inputNode) => {
  1560.         if (!node?.classList?.contains("raceChat")) {
  1561.             if (node !== null) {
  1562.                 logging.warn("Init")("Invalid node element for registering chat.")
  1563.             }
  1564.             return
  1565.         }
  1566.  
  1567.         const raceKeyboardObj = findReact(inputNode),
  1568.             originalChatObj = findReact(node)
  1569.         node.style.display = "none"
  1570.         if (raceKeyboardObj && originalChatObj) {
  1571.             ChatRoom.enableKeyListener(raceKeyboardObj, originalChatObj)
  1572.         } else {
  1573.             logging.warn("Init")("Unable to overwrite chat system")
  1574.         }
  1575.     }
  1576.     const typingInputObserver = new MutationObserver((mutations, observer) => {
  1577.         for (const m of mutations) {
  1578.             for (const node of m.addedNodes) {
  1579.                 if (node.classList?.contains("dash-copy-input")) {
  1580.                     observer.disconnect()
  1581.                     const raceChatNode = raceContainer.querySelector(".raceChat")
  1582.                     if (raceChatNode) {
  1583.                         registerChatNode(raceChatNode, node)
  1584.                     } else {
  1585.                         logging.warn("Init")("Unable to overwrite chat system")
  1586.                     }
  1587.                     break
  1588.                 }
  1589.             }
  1590.         }
  1591.     })
  1592.  
  1593.     const raceChatNode = raceContainer.querySelector(".raceChat"),
  1594.         typingInputNode = raceContainer.querySelector(".dash-copy-input")
  1595.     if (raceChatNode && typingInputNode) {
  1596.         registerChatNode(raceChatNode, typingInputNode)
  1597.     } else {
  1598.         typingInputObserver.observe(raceContainer.querySelector(".dash-center"), { childList: true })
  1599.     }
  1600.  
  1601.     // Setup Race Track
  1602.     root.append(InfoSection.root, ChatRoom.root)
  1603.  
  1604.     // Replace Race Track
  1605.     canvasTrack.replaceWith(root)
  1606.  
  1607.     logging.info("Init")("Race Track has been updated")
  1608. }