Mobile compatibility

apps/hanabi.css

@@ -9,7 +9,7 @@
     padding: 1px;
     grid-gap: 1px;
     grid-template-columns: repeat(var(--ncols), 1fr);
-    height: 40vh;
+    height: 30vh;
 }
 .col:before {
     position: relative;
@@ -77,3 +77,6 @@
 .counter {
     font-family: monospace;
 }
+.drag-target {
+    background-color: orange !important;
+}

apps/hanabi.js

@@ -60,6 +60,11 @@ const Hanabi = {
                 ev.dataTransfer.setData('idx', card.id)
                 ev.dataTransfer.dropEffect = 'move'
             },
+            ondragend: (ev) => {
+                for(const el of document.querySelectorAll('.drag-target')) {
+                    el.classList.remove('drag-target')
+                }
+            },
             class: ['card', card.color, card.faceUp && 'face-up'].join(' '),
             draggable: true,
         }
@@ -79,6 +84,10 @@ const Hanabi = {
             ondragenter: (ev) => {
                 /* needed for drag-drop shim */
                 ev.preventDefault()
+                for(const el of document.querySelectorAll('.drag-target')) {
+                    el.classList.remove('drag-target')
+                }
+                ev.target.classList.add('drag-target')
             },
             ondragover: (ev) => {
                 ev.preventDefault()

pico.css

@@ -68,7 +68,7 @@ body {
     grid-auto-flow: column;
     justify-content: start;
     overflow-x: scroll;
-    height: 200px;
+    height: 50px;
     resize: vertical;
     position: relative;
 }

pico.html

@@ -15,7 +15,10 @@
 <script src="/pico.js" defer></script>
 
 <script>
-MobileDragDrop.polyfill({})
+MobileDragDrop.polyfill({
+    dragImageOffset: {x: 0, y: -15},
+    elementFromPoint: (x, y) => document.elementFromPoint(x, y - 15),
+})
 addEventListener('touchmove', () => {})
 </script>
 

pico.js

@@ -445,11 +445,11 @@ const connect = (username) => {
         if(message.online) {
             const difference = (l1, l2) => l1.filter(u => !l2.includes(u))
             difference(message.online, State.online).forEach(username => {
-                State.posts.push({ts: message.ts, value: `${username} joined`})
+                signal({kind: 'post', ts: message.ts, value: `${username} joined`})
                 signal({kind: 'join', username: username})
             })
             difference(State.online, message.online).forEach(username => {
-                State.posts.push({ts: message.ts, value: `${username} left`})
+                signal({kind: 'post', ts: message.ts, value: `${username} left`})
                 signal({kind: 'leave', username: username})
             })
         }