From 2e96f58cce9ad6083ecaaf9a0359e8f700f12f19 Mon Sep 17 00:00:00 2001
From: Sami Mokaddem <mokaddem.sami@gmail.com>
Date: Mon, 15 Jul 2024 12:07:49 +0200
Subject: [PATCH] new: [front:active players] Added UI to show active players
 before an exercise is selected

---
 src/components/ThePlayerGrid.vue | 46 ++++++++++++++++++++++++++++++++
 src/components/TheScores.vue     | 27 ++++++++++++++++---
 2 files changed, 70 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ThePlayerGrid.vue

diff --git a/src/components/ThePlayerGrid.vue b/src/components/ThePlayerGrid.vue
new file mode 100644
index 0000000..99bc327
--- /dev/null
+++ b/src/components/ThePlayerGrid.vue
@@ -0,0 +1,46 @@
+<script setup>
+  import { ref, computed } from "vue";
+  import { progresses, userCount } from "@/socket";
+  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+  import { darkModeEnabled } from "@/settings.js"
+  import LiveLogsUserActivityGraph from "./LiveLogsUserActivityGraph.vue"
+
+
+  const compactGrid = computed(() => { return userCount.value > 70 })
+  const sortedProgress = computed(() => Object.values(progresses.value).sort((a, b) => {
+    if (a.email < b.email) {
+      return -1;
+    }
+    if (a.email > b.email) {
+      return 1;
+    }
+    return 0;
+  }))
+</script>
+
+<template>
+  <div :class="`flex flex-wrap ${compactGrid ? 'gap-1' : 'gap-2'}`">
+    <span
+      v-for="(progress) in sortedProgress"
+      :key="progress.user_id"
+      class="bg-slate-200 dark:bg-slate-900 rounded border drop-shadow-lg border-slate-700"
+    >
+      <span class="
+        flex p-2 mb-1
+        text-slate-600 dark:text-slate-400
+      ">
+        <span :class="`flex flex-col ${compactGrid ? 'w-[120px]' : 'w-60'}`">
+          <span :title="progress.user_id" class="text-nowrap inline-block leading-5 truncate mb-1">
+            <span :class="`${compactGrid ? 'text-base' : 'text-lg'} font-bold font-mono leading-5 tracking-tight`">{{ progress.email.split('@')[0] }}</span>
+            <span :class="`${compactGrid ? 'text-xs' : 'text-xs'} font-mono tracking-tight`">@{{ progress.email.split('@')[1] }}</span>
+          </span>
+          <LiveLogsUserActivityGraph
+            :user_id="progress.user_id"
+            :compact_view="compactGrid"
+            :ultra_compact_view="false"
+          ></LiveLogsUserActivityGraph>
+        </span>
+      </span>
+    </span>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/TheScores.vue b/src/components/TheScores.vue
index 5b7379f..ec77ca5 100644
--- a/src/components/TheScores.vue
+++ b/src/components/TheScores.vue
@@ -2,9 +2,10 @@
   import { ref, computed } from "vue";
   import { active_exercises as exercises } from "@/socket";
   import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-  import { faGraduationCap, faUpRightAndDownLeftFromCenter, faDownLeftAndUpRightToCenter } from '@fortawesome/free-solid-svg-icons'
+  import { faGraduationCap, faUpRightAndDownLeftFromCenter, faDownLeftAndUpRightToCenter, faWarning, faUser } from '@fortawesome/free-solid-svg-icons'
   import TheScoreTable from "./scoreViews/TheScoreTable.vue"
   import TheFullScreenScoreGrid from "./scoreViews/TheFullScreenScoreGrid.vue"
+  import ThePlayerGrid from "./ThePlayerGrid.vue"
   import { fullscreenModeOn } from "@/settings.js"
 
   const hasExercises = computed(() => exercises.value.length > 0)
@@ -29,9 +30,29 @@
 
   <div
     v-if="!hasExercises"
-    class="text-center text-slate-600 dark:text-slate-400 p-3 pl-6"
+    class="text-slate-600 dark:text-slate-400 p-3 pl-6"
   >
-    <i>- No Exercise available -</i>
+    <div class="
+      p-2 border-l-4 text-left rounded
+      dark:bg-yellow-300 dark:text-slate-900 dark:border-yellow-700 
+      bg-yellow-200 text-slate-900 border-yellow-700 
+    ">
+      <FontAwesomeIcon :icon="faWarning" class="text-yellow-700 text-lg mx-3"></FontAwesomeIcon>
+      <strong class="">No Exercise available.</strong>
+      <span class="ml-1">Select an exercise in the <i class="underline">Admin panel</i>.</span>
+    </div>
+
+    <div class="
+      mt-2 px-2 py-1 rounded border
+      bg-slate-600 border-slate-800
+    ">
+      <h4 class="text-xl mb-2 font-bold text-blue-500 dark:text-blue-400">
+        <FontAwesomeIcon :icon="faUser"></FontAwesomeIcon>
+        Active Players
+      </h4>
+
+      <ThePlayerGrid></ThePlayerGrid>
+    </div>
   </div>
 
   <template