Fixed font sizes and added hurry message

frontend/index.html

@@ -7,8 +7,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="favicon.ico">
-    <link rel="manifest" href="manifest.json">
+    <link rel="icon" href="favicon.png">
     <title>Флекспатруль мультиплеер</title>
     <script type="module" src="/src/main.js"></script>
   </head>

frontend/package.json

@@ -35,7 +35,8 @@
       "eslint:recommended"
     ],
     "rules": {
-      "vue/multi-word-component-names": 0
+      "vue/multi-word-component-names": 0,
+      "no-unused-vars": 0
     },
     "globals": {
       "defineProps": "readonly",

frontend/public/manifest.json

@@ -1,8 +0,0 @@
-{
-  "name": "Vk Bingo",
-  "short_name": "Bingo",
-  "lang": "ru-RU",
-  "start_url": "/",
-  "scope": "/",
-  "display": "standalone"
-}

frontend/src/App.vue

@@ -30,7 +30,7 @@
   --clr-bg-secondary: #fbf2cf;
   --clr-accent: #37ffac;
   --clr-text: #141414;
-  --clr-text-secondary: rgb(20, 20, 20, .5);
+  --clr-text-secondary: #14141480;
 }
 
 body {

frontend/src/components/IconInfo.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    class="bi bi-info-circle"
+    viewBox="0 0 16 16"
+  >
+    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+    <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
+  </svg>
+</template>

frontend/src/views/Login/Index.vue

@@ -1,5 +1,13 @@
 <template>
+  <div class="cardWrapper">
     <div class="authCard">
+      <!-- <div 
+            class="info"
+            @click="showQr = !showQr"
+          >
+            <IconInfo />
+          </div> -->
+
       <h1>Авторизация:</h1>
 
       <div class="auth">
@@ -46,6 +54,18 @@
         </button>
       </div>
     </div>
+  </div>
+
+  <!-- <a 
+    class="author"
+    href="https://kopyl.dev"
+    target="_blank"
+  >
+    <img 
+      src="kopyl_frame_white.png"
+      class="authorLogo"
+    >
+  </a> -->
 </template>
 
 <script setup>
@@ -53,6 +73,10 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import useStore from '../../store'
 import axios from 'axios'
+import VuePeel from 'vue-peel'
+import 'vue-peel/style.css'
+import IconInfo from '@/components/IconInfo.vue'
+
 axios.defaults.withCredentials = true
 
 const question = import.meta.env.VITE_APP_QUESTION
@@ -64,6 +88,7 @@ const mode = ref("player")
 const answer = ref()
 const username = ref()
 const wrongPassword = ref()
+const showQr = ref()
 
 function switchMode() {
   mode.value = mode.value === 'player' ? 'screen' : 'player'
@@ -113,23 +138,47 @@ async function loginScreen() {
   align-items: center;
 }
 
-.authCard {
+.cardWrapper {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background: var(--clr-text);
+  display: flex;
+  gap: 64px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.authCard {
+  position: relative;
   color: var(--clr-text);
   width: 400px;
   margin: auto;
   border-radius: 32px;
   padding: 40px 40px;
   box-sizing: border-box;
-  background: white;
+  background-color: white;
   border: 3px solid var(--clr-text);
   @include filled-shadow(16);
 }
 
+.info {
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: 16px;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+
+  svg {
+    width: 20px;
+    height: 20px;
+    color: var(--clr-text-secondary);
+  }
+}
+
 .input {
   font-size: 16px;
   padding: 16px;
@@ -186,11 +235,41 @@ async function loginScreen() {
   @include filled-shadow(4);
 }
 
+.author {
+  width: 64px;
+  height: 64px;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  padding: 16px;
+}
+
+.authorLogo {
+  width: 100%;
+  height: 100%;
+}
+
 @media only screen and (max-width: 520px) {
   .authCard {
     width: calc(100% - 90px);
     margin: auto;
     padding: 40px 20px;
   }
+
+  .flag {
+    transform: translate(calc(-50vw + 70px), -175%) rotate(90deg);
+
+    &.-open {
+      transform: translate(calc(-50vw + 70px), -175%) rotate(0);
+    }
+
+    &.-short {
+      transform: translate(calc(-50vw + 70px), -160%) rotate(90deg);
+
+      &.-open {
+        transform: translate(calc(-50vw + 70px), -160%) rotate(0);
+      }
+    }
+  }
 }
 </style>

frontend/src/views/Screen/Index.vue

@@ -87,11 +87,19 @@
 
   <Countdown v-if="correctAnswer" />
   <!-- <FunFact /> -->
+  <Transition name="slide-out">
+    <div 
+      v-if="hurryLast"
+      class="hurryLast"
+    >
+      {{ lastPlayer.name }}, поторопись!
+    </div>
+  </Transition>
 </template>
 
 <script setup>
 import axios from 'axios'
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, computed, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import useServerEvents from '@/composables/useServerEvents'
 import Answer from './Answer.vue'
@@ -108,6 +116,7 @@ const users = ref([])
 const correctAnswer = ref()
 const loading = ref()
 const score = ref({})
+const hurryLast = ref()
 
 async function getCard() {
   loading.value = true
@@ -141,6 +150,26 @@ const maxScore = computed(() => {
   return score.value[leader]
 })
 
+const lastPlayer = computed(() => {
+  if (unansweredPlayers.value.length === 1) {
+    return unansweredPlayers.value[0]
+  }
+
+  return null
+})
+
+let countdownToHurry = undefined
+watch(lastPlayer, () => {
+  if (!lastPlayer.value) {
+    clearTimeout(countdownToHurry)
+    hurryLast.value = false
+  } else {
+    countdownToHurry = setTimeout(() => {
+      hurryLast.value = true
+    }, 5000)
+  }
+})
+
 addAnswerListener((data) => {
   users.value = users.value.map((user) => {
     if (user.name === data.username) {
@@ -168,6 +197,9 @@ addRevealListener((data) => {
   correctAnswer.value = data.correctAnswer
   score.value = data.score
 
+  clearTimeout(countdownToHurry)
+  hurryLast.value = false
+
   setTimeout(() => {
     getCard()
     correctAnswer.value = null
@@ -197,10 +229,9 @@ onMounted(() => {
   top: 0;
   display: flex;
   justify-content: space-evenly;
-  gap: 64px;
+  gap: 16px;
   align-items: center;
-  padding: 64px;
-  background: var(--clr-bg);
+  padding: 8px 8px 24px 8px;
   box-sizing: border-box;
   color: var(--clr-text);
 }
@@ -233,7 +264,7 @@ onMounted(() => {
   background: var(--clr-text);
   border: 3px solid var(--clr-text);
   @include filled-shadow(16);
-  border-radius: 64px;
+  border-radius: 16px;
   // animation-name: rock;
   // animation-duration: 5s;
   // animation-direction: alternate;
@@ -308,10 +339,43 @@ onMounted(() => {
 .answersState {
   display: flex;
   flex-shrink: 0;
-  height: 300px;
+  height: 400px;
+  font-size: 32px;
 }
 
 .loader {
   margin-top: 50%;
 }
+
+.hurryLast {
+  padding: 16px 32px;
+  border-radius: 16px;
+  font-size: 32px;
+  border: 3px solid var(--clr-text);
+  @include filled-shadow(16);
+  position: fixed;
+  right: 32px;
+  bottom: 32px;
+  background: var(--clr-bg-secondary);
+  animation-name: pulse;
+  animation-delay: 10s;
+  animation-duration: 100s;
+  animation-fill-mode: forwards;
+  transition: transform 1s;
+}
+
+.slide-out-enter-from,
+.slide-out-leave-to {
+  transform: translateY(200px);
+}
+
+@keyframes pulse {
+  from {
+    background: var(--clr-bg-secondary);
+  }
+
+  to {
+    background: red;
+  }
+}
 </style>