- Add active staff members to home page

- Add better coordinate copying
- AFK people color gradient

Author: coalaura

app/Http/Controllers/HomeController.php

@@ -5,9 +5,11 @@
 use App\Ban;
 use App\Helpers\GeneralHelper;
 use App\Http\Resources\BanResource;
+use App\Http\Resources\PlayerIndexResource;
 use App\Server;
 use App\Player;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
 use Inertia\Inertia;
 use Inertia\Response;
 
@@ -38,10 +40,18 @@ public function render(Request $request): Response
             ->orderByDesc('timestamp')
             ->limit(8)->get())->toArray($request);
 
+        $playerList = Player::getAllOnlinePlayers(true);
+        $players = array_keys($playerList);
+        usort($players, function ($a, $b) use ($playerList) {
+            return $playerList[$a]['id'] <=> $playerList[$b]['id'];
+        });
+        $staff = Player::query()->where('is_staff', '=', true)->whereIn('steam_identifier', $players)->get();
+
         return Inertia::render('Home', [
             'quote'     => $quote,
             'bans'      => $bans,
             'playerMap' => Player::fetchSteamPlayerNameMap($bans, 'identifier'),
+            'staff'     => PlayerIndexResource::collection($staff),
         ]);
     }
 

package-lock.json

@@ -42,6 +42,7 @@
         "leaflet": "^1.7.1",
         "leaflet-gesture-handling": "^1.2.1",
         "leaflet-rotatedmarker": "^0.2.0",
+        "rainbowvis.js": "^1.0.1",
         "vue-clipboard2": "^0.3.1",
         "vue-linkify": "^1.0.1",
         "vue2-circle-progress": "^1.2.3"

package.json

@@ -74,6 +74,17 @@
             </table>
         </div>
 
+        <div class="mt-5">
+            <h3 class="dark:text-white">
+                {{ t('home.staff') }}
+            </h3>
+            <div class="flex flex-wrap -mx-3">
+                <inertia-link class="block px-4 py-2 font-semibold text-center text-white bg-green-600 rounded m-3" v-for="player in staff" :key="player.id" :href="'/players/' + player.identifier">
+                    {{ player.playerName }}
+                </inertia-link>
+            </div>
+        </div>
+
     </div>
 </template>
 
@@ -147,6 +158,10 @@ export default {
             type: Array,
             required: true,
         },
+        staff: {
+            type: Array,
+            required: true,
+        },
         playerMap: {
             type: Object,
             required: true,

resources/js/Pages/Home.vue

@@ -32,7 +32,7 @@
             <div class="-mt-12" id="map-wrapper">
                 <div class="relative">
                     <div id="map" class="w-map max-w-full relative h-max"></div>
-                    <pre class="bg-opacity-70 bg-white coordinate-attr absolute bottom-0 left-0 cursor-pointer z-1k" @click="copyText($event, clickedCoords)" v-if="clickedCoords">{{ clickedCoords }}</pre>
+                    <pre class="bg-opacity-70 bg-white coordinate-attr absolute bottom-0 left-0 cursor-pointer z-1k" v-if="clickedCoords"><span @click="copyText($event, clickedCoords)">{{ clickedCoords }}</span> / <span @click="copyText($event, coordsCommand)">{{ t('map.command') }}</span></pre>
                 </div>
                 <div v-if="afkPeople" class="w-map-right pt-4">
                     <h3 class="mb-2">{{ t('map.afk_title') }}</h3>
@@ -51,6 +51,7 @@ import L from "leaflet";
 import {GestureHandling} from "leaflet-gesture-handling";
 import "leaflet-rotatedmarker";
 import custom_icons from "../../data/vehicles.json";
+const Rainbow = require('rainbowvis.js');
 
 (function(global){
     let MarkerMixin = {
@@ -99,6 +100,7 @@ export default {
             trackedPlayer: window.location.hash.substr(1),
             firstRefresh: true,
             clickedCoords: '',
+            coordsCommand: '',
             afkPeople: '',
             openPopup: null
         };
@@ -194,7 +196,7 @@ export default {
             };
 
             $.each(custom_icons, function(type, cfg) {
-                if (cfg.models.includes(vehicle.model)) {
+                if (cfg.models.includes(vehicle.model+"")) {
                     ret.type = type;
                     ret.size = cfg.size;
                 }
@@ -370,16 +372,22 @@ export default {
                         const lastExtra = attributes.pop();
                         extra += '<br><i>Is ' + (attributes.length > 0 ? attributes.join(', ') + ' and ' : '') + lastExtra + '</i>';
 
-                        if (player.afk > 300) {
+                        if (player.afk > 15 * 60) {
                             extra += '<br><i>Hasn\'t moved in ' + _this.formatSeconds(player.afk) + '</i>';
                         }
-                        if (player.afk > 15 * 60) {
-                            const linkColor = isStaff ? 'text-green-600 dark:text-green-400' : 'text-indigo-600 dark:text-indigo-400';
+                        if (player.afk > 30 * 60) {
+                            const linkColor = isStaff ? 'rgb(16, 185, 129)' : (() => {
+                                let rainbow = new Rainbow();
+                                rainbow.setNumberRange(30 * 60, 3 * 60 * 60);
+                                rainbow.setSpectrum('#d9ff00', '#ffbf00', '#ff6600', '#ff0000');
+
+                                return '#' + rainbow.colourAt(player.afk);
+                            })();
 
                             afkList.push(`<tr title="` + (isStaff ? 'Is a staff member' : '') + `">
-    <td class="pr-2"><a class="` + linkColor + `" target="_blank" href="/players/` + player.steamIdentifier + `">` + player.character.fullName + `</a></td>
+    <td class="pr-2"><a style="color: ` + linkColor + `" target="_blank" href="/players/` + player.steamIdentifier + `">` + player.character.fullName + `</a></td>
     <td class="pr-2">hasn't moved in ` + _this.formatSeconds(player.afk) + `</td>
-    <td><a class="` + linkColor + ` track-cid" href="#" data-trackid="` + id + `" data-popup="true">[Track]</a></td>
+    <td><a class="track-cid" style="color: ` + linkColor + `" href="#" data-trackid="` + id + `" data-popup="true">[Track]</a></td>
 </tr>`.replace(/\r?\n(\s{4})?/gm, ''));
                         }
 
@@ -507,6 +515,7 @@ export default {
                 };
 
                 _this.clickedCoords = "[X=" + Math.round(game.x) + ",Y=" + Math.round(game.y) + "] / [X=" + map.x + ",Y=" + map.y + "]";
+                _this.coordsCommand = "/tp_coords " + Math.round(game.x) + " " + Math.round(game.y);
 
                 console.info('Clicked coordinates', map);
             });

resources/js/Pages/Map/Index.vue

@@ -49,7 +49,8 @@
             "length": "Length",
             "time": "Created at"
         },
-        "no_bans": "No recent bans by you"
+        "no_bans": "No recent bans by you",
+        "staff": "Active Staff members"
     },
     "map": {
         "title": "Live-Map",
@@ -61,7 +62,8 @@
         "pause": "Pause update",
         "track": "Track character",
         "stop_track": "Stop tracking character",
-        "afk_title": "AFK Players"
+        "afk_title": "AFK Players",
+        "command": "tp"
     },
     "nav": {
         "dark": "Dark",