Мобильная верстка

frontend/babel.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}

frontend/package.json

@@ -34,10 +34,9 @@
       "plugin:vue/vue3-recommended",
       "eslint:recommended"
     ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
+    "rules": {
+      "vue/multi-word-component-names": 0
+    }
   },
   "browserslist": [
     "> 1%",

frontend/src/views/Game/List.vue

@@ -3,13 +3,13 @@
     class="answers"
   >
     <span 
-      class="option" 
       v-for="name in options" 
       :key="name" 
-      @click="selectAnswer(name)"
+      class="option" 
       :class="{
         '-selected': selection === name
       }"
+      @click="selectAnswer(name)"
     >
       {{ name }}
     </span>

frontend/src/views/Login/Index.vue

@@ -5,14 +5,14 @@
     <div class="auth">
       <p>{{ question }}</p>
       <input 
-        placeholder="Ответ"
         v-model="answer"
+        placeholder="Ответ"
         class="input"
       >
       <input
         v-if="mode === 'player'"
-        placeholder="Ваше имя"
         v-model="username"
+        placeholder="Ваше имя"
         class="input"
       >
       
@@ -32,8 +32,8 @@
       </button>
       
       <button 
-        @click="switchMode"
         class="switchMode"
+        @click="switchMode"
       >
         Я не {{ mode === 'player' ? 'игрок' : 'большой экран' }}!
       </button>
@@ -160,8 +160,9 @@ async function loginScreen() {
 
 @media only screen and (max-width: 520px) {
   .authCard {
-    width: 100%;
-    padding: 40px 0;
+    width: calc(100% - 90px);
+    margin: auto;
+    padding: 40px 20px;
   }
 }
 </style>

frontend/src/views/Screen/Index.vue

@@ -10,31 +10,55 @@
 
     <div class="answersState">
       <div class="users -unanwsered">
-        <h2 class="usersTitle">Не ответили</h2>
+        <h2 class="usersTitle">
+          Не ответили
+        </h2>
         <ul>
           <li
-            class="user"
             v-for="user in unansweredPlayers"
             :key="user.name"
+            class="user"
           >
-            {{ user.name }}
+            <span>
+              {{ user.name }}
+            </span>
+            <span 
+              class="score"
+              :class="{
+                '-leader': leader === user.name
+              }"
+            >
+              {{ score[user.name] }}
+            </span>
           </li>
         </ul>
       </div>
 
       <div class="users">
-        <h2 class="usersTitle">Ответили</h2>
+        <h2 class="usersTitle">
+          Ответили
+        </h2>
         <ul>
           <li
-            class="user"
             v-for="user in answeredPlayers"
             :key="user.name"
+            class="user"
             :class="{
               '-wrong': correctAnswer && user.selected !== correctAnswer,
               '-correct': correctAnswer && user.selected === correctAnswer
             }"
           >
-            {{ user.name }}
+            <span>
+              {{ user.name }}
+            </span>
+            <span 
+              class="score"
+              :class="{
+                '-leader': leader === user.name
+              }"
+            >
+              {{ score[user.name] }}
+            </span>
           </li>
         </ul>
       </div>
@@ -67,6 +91,7 @@ const card = ref()
 const users = ref([])
 const correctAnswer = ref()
 const loading = ref()
+const score = ref({})
 
 async function getCard() {
   loading.value = true
@@ -93,6 +118,12 @@ const unansweredPlayers = computed(() => {
   return users.value.filter((user) => !user.selected)
 })
 
+const leader = computed(() => {
+  return Object.keys(score.value).sort((a, b) => {
+    return score.value[a] - score.value[b]
+  })[0]
+})
+
 addAnswerListener((data) => {
   users.value = users.value.map((user) => {
     if (user.name === data.username) {
@@ -117,6 +148,7 @@ addUserlistListener((data) => {
 
 addRevealListener((data) => {
   correctAnswer.value = data.correctAnswer
+  score.value = data.score
 
   setTimeout(() => {
     getCard()
@@ -191,6 +223,12 @@ onMounted(() => {
   border-right: 1px dashed var(--clr-text);
 }
 
+.user {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .user.-correct {
   color: green;
 }
@@ -199,6 +237,24 @@ onMounted(() => {
   color: red;
 }
 
+.score {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 12px;
+  width: 16px;
+  height: 16px;
+  border-radius: 64px;
+  border: 2px solid var(--clr-text);
+  background: var(--clr-bg);
+  color: var(--clr-text);
+
+  &.-leader {
+    background: var(--clr-accent);
+  }
+}
+
 .usersTitle {
   margin: 0;
 }