updates

src/components/GamePage.vue

@@ -99,8 +99,10 @@ const visibleTeams = computed(() =>
 )
 const teamsNeedingApplications = computed(
   () =>
-    new Set(
-      (game.value.teams || []).filter((team) => team.applications?.length).map((team) => team.id),
+    new Map(
+      (game.value.teams || [])
+        .filter((team) => team.applications?.length)
+        .map((team) => [team.id, team]),
     ),
 )
 const screens = ref<ScreenState[]>([])
@@ -202,8 +204,11 @@ function startMapDrag(item: MapItem, event: PointerEvent) {
 
 function moveMapDrag(event: PointerEvent) {
   if (!dragState) return
-  dragState.item.x = Math.round(dragState.itemX + event.clientX - dragState.startX)
-  dragState.item.y = Math.round(dragState.itemY + event.clientY - dragState.startY)
+  const step = dragState.item.kind === 'team' ? 20 : 1
+  dragState.item.x =
+    Math.round((dragState.itemX + (event.clientX - dragState.startX) / mapScale.value) / step) * step
+  dragState.item.y =
+    Math.round((dragState.itemY + (event.clientY - dragState.startY) / mapScale.value) / step) * step
 }
 
 async function endMapDrag() {
@@ -820,16 +825,39 @@ useSimplePolling(() => {
                 },
               ]"
               :style="{ left: `${item.x || 0}px`, top: `${item.y || 0}px` }"
-              @pointerdown.stop="startMapDrag(item, $event)"
+              @pointerdown.stop="item.kind === 'screen' && startMapDrag(item, $event)"
             >
+              <div
+                v-if="item.kind === 'team'"
+                class="map-team-handle"
+                @pointerdown.stop="startMapDrag(item, $event)"
+              />
               <span>{{ item.label }}</span>
-              <small v-if="item.kind === 'team' && teamsNeedingApplications.has(item.itemId)">
-                Выдать улики
-              </small>
+              <n-space
+                v-if="item.kind === 'team' && teamsNeedingApplications.has(item.itemId)"
+                class="map-team-applications"
+                vertical
+              >
+                <n-button
+                  v-for="application in teamsNeedingApplications.get(item.itemId)?.applications"
+                  :key="application.name"
+                  size="small"
+                  @click="giveApplication(teamsNeedingApplications.get(item.itemId)!, application)"
+                >
+                  Выдать: {{ application.name }}
+                </n-button>
+              </n-space>
               <small v-if="item.kind === 'screen'"
                 >{{ item.status }}{{ item.soundEnabled ? ' · звук' : '' }}</small
               >
-              <button type="button" @pointerdown.stop @click.stop="toggleMapItem(item)">×</button>
+              <button
+                class="map-item-hide"
+                type="button"
+                @pointerdown.stop
+                @click.stop="toggleMapItem(item)"
+              >
+                ×
+              </button>
             </div>
           </div>
         </div>
@@ -1371,8 +1399,10 @@ useSimplePolling(() => {
   border: 1px dashed rgb(255 255 255 / 20%);
   cursor: grab;
   height: 420px;
+  min-height: 200px;
   overflow: hidden;
   position: relative;
+  resize: vertical;
   touch-action: none;
 }
 
@@ -1409,7 +1439,28 @@ useSimplePolling(() => {
 }
 
 .map-team {
+  background-color: #222;
+}
+
+.map-team,
+.map-team:active {
+  cursor: default;
+}
+
+.map-team-handle {
   background-color: #48633a;
+  border-radius: 6px 6px 0 0;
+  cursor: grab;
+  margin: -8px -24px 8px -10px;
+  padding: 8px 24px 8px 10px;
+}
+
+.map-team-handle:active {
+  cursor: grabbing;
+}
+
+.map-team-applications {
+  margin-top: 8px;
 }
 
 .map-team-needs-applications {
@@ -1421,7 +1472,7 @@ useSimplePolling(() => {
   opacity: 0.75;
 }
 
-.map-item button {
+.map-item-hide {
   background: transparent;
   border: 0;
   color: inherit;
@@ -1432,6 +1483,12 @@ useSimplePolling(() => {
   top: 5px;
 }
 
+.map-team .map-item-hide {
+  line-height: 16px;
+  padding: 0 2px;
+  top: 0;
+}
+
 .map-hidden-items {
   margin-top: 10px;
 }