+ 55
- 1
apps/hanabi.js
查看文件
| return cards | return cards | ||||
| } | } | ||||
| const clip = (v, vmin, vmax) => { | |||||
| return Math.min(Math.max(v, vmin), vmax) | |||||
| } | |||||
| const clipToElement = ([x, y], selector) => { | |||||
| const boundingArea = document.querySelector(selector) | |||||
| const {offsetLeft, offsetTop, offsetWidth, offsetHeight} = boundingArea | |||||
| x = clip(x, offsetLeft, offsetLeft + offsetWidth) | |||||
| y = clip(y, offsetTop, offsetTop + offsetHeight) | |||||
| return [x, y] | |||||
| } | |||||
| const findNearestDropzoneBFS = (cx, cy) => { | |||||
| try { | |||||
| const dropzone = ['stack', 'card'] | |||||
| const [x, y] = clipToElement([cx, cy], '.stacks') | |||||
| const deque = [JSON.stringify([x, y])] | |||||
| const seen = new Set(deque) | |||||
| while(deque.length && deque.length < 50) { | |||||
| const coord = deque.shift() | |||||
| const [x, y] = JSON.parse(coord) | |||||
| for(const dx of [-1, 0, 1]) { | |||||
| for(const dy of [-1, 0, 1]) { | |||||
| const [nx, ny] = [x + dx, y + dy] | |||||
| const ncoord = JSON.stringify([nx, ny]) | |||||
| if(!seen.has(ncoord)) { | |||||
| deque.push(ncoord) | |||||
| seen.add(ncoord) | |||||
| } | |||||
| } | |||||
| } | |||||
| target = document.elementFromPoint(x - scrollX, y - scrollY) | |||||
| isValid = target && dropzone.filter(s => target.classList.contains(s)).length | |||||
| if(isValid) { | |||||
| return target | |||||
| } | |||||
| } | |||||
| throw 'dropzone not found' | |||||
| } | |||||
| catch(error) { | |||||
| Chat.log(error) | |||||
| const stacks = [...document.querySelectorAll('.stack')] | |||||
| return stacks[Hanabi.nrows * Hanabi.ncols - 1] | |||||
| } | |||||
| } | |||||
| const Counter = { | const Counter = { | ||||
| step: (name, delta) => () => { | step: (name, delta) => () => { | ||||
| Hanabi.counters[name] += delta | Hanabi.counters[name] += delta | ||||
| const stack = stacks[pos] | const stack = stacks[pos] | ||||
| stack.sort((a, b) => a.ts - b.ts) | stack.sort((a, b) => a.ts - b.ts) | ||||
| const attrs = { | const attrs = { | ||||
| pos: pos, | |||||
| ondrop: (ev) => { | ondrop: (ev) => { | ||||
| ev.preventDefault() | ev.preventDefault() | ||||
| const card = Hanabi.cards.get(+ev.dataTransfer.getData('idx')) | const card = Hanabi.cards.get(+ev.dataTransfer.getData('idx')) | ||||
| ) | ) | ||||
| }, | }, | ||||
| view: () => m('.hanabi', | view: () => m('.hanabi', | ||||
| Hanabi.renderStacks(), | |||||
| m(Counter, {name: 'clues'}), | m(Counter, {name: 'clues'}), | ||||
| m(Counter, {name: 'bombs'}), | m(Counter, {name: 'bombs'}), | ||||
| Hanabi.renderStacks(), | |||||
| ), | ), | ||||
| } | } | ||||
| // requires mobile-drag-drop.js | |||||
| MobileDragDrop.polyfill({ | |||||
| elementFromPoint: findNearestDropzoneBFS, | |||||
| }) | |||||
| addEventListener('touchmove', () => {}) | |||||
+ 1
- 1
makefile
查看文件
| venv/bin/python -u pico.py | venv/bin/python -u pico.py | ||||
| deploy: libs/ | deploy: libs/ | ||||
| rsync --archive --exclude=.git --exclude-from=.gitignore . root@roderic.ca:/home/pico.chat/ | |||||
| rsync --archive --delete --exclude=.git --exclude=venv . root@roderic.ca:/home/pico.chat/ | |||||
| ssh root@roderic.ca "cd /home/pico.chat/ && service pico.chat restart" | ssh root@roderic.ca "cd /home/pico.chat/ && service pico.chat restart" | ||||
| venv/: requirements.txt | venv/: requirements.txt |
+ 0
- 8
pico.html
查看文件
| <link rel="stylesheet" href="/pico.css" /> | <link rel="stylesheet" href="/pico.css" /> | ||||
| <script src="/pico.js" defer></script> | <script src="/pico.js" defer></script> | ||||
| <script> | |||||
| MobileDragDrop.polyfill({ | |||||
| dragImageOffset: {x: 0, y: -15}, | |||||
| elementFromPoint: (x, y) => document.elementFromPoint(x, y - 15), | |||||
| }) | |||||
| addEventListener('touchmove', () => {}) | |||||
| </script> | |||||
| <body>PicoChat requires JS</body> | <body>PicoChat requires JS</body> | ||||
| </html> | </html> |
+ 4
- 1
pico.js
查看文件
| const listen = (kind, handler) => addEventListener(kind, handler) | const listen = (kind, handler) => addEventListener(kind, handler) | ||||
| listen('login', ({detail}) => State.username = detail.value) | listen('login', ({detail}) => State.username = detail.value) | ||||
| listen('state', ({detail}) => Object.assign(State, detail)) | listen('state', ({detail}) => Object.assign(State, detail)) | ||||
| listen('post', ({detail}) => State.posts.push(detail)) | |||||
| listen('post', ({detail}) => {State.posts.push(detail); m.redraw()}) | |||||
| listen('peerInfo', (e) => onPeerInfo(e)) | listen('peerInfo', (e) => onPeerInfo(e)) | ||||
| const doNotLog = new Set(['login', 'state', 'post', 'peerInfo', 'join', 'leave']) | const doNotLog = new Set(['login', 'state', 'post', 'peerInfo', 'join', 'leave']) | ||||
| }, | }, | ||||
| } | } | ||||
| const Chat = { | const Chat = { | ||||
| log: (message) => { | |||||
| signal({kind: 'post', ts: +new Date(), value: '' + message}) | |||||
| }, | |||||
| prettifyTime: (ts) => { | prettifyTime: (ts) => { | ||||
| const dt = new Date(ts) | const dt = new Date(ts) | ||||
| const H = `0${dt.getHours()}`.slice(-2) | const H = `0${dt.getHours()}`.slice(-2) |
Loading…