108 lines
4.2 KiB
Plaintext
108 lines
4.2 KiB
Plaintext
(->>
|
|
const err = -> console.error it
|
|
const $opponent-hand = document.query-selector '#opponent-hand'
|
|
const $own-hand = document.query-selector '#own-hand'
|
|
const $view-card = document.query-selector '#view-card'
|
|
const $view-card-container = document.query-selector '#view-card-container'
|
|
const $param = document.query-selector '#param'
|
|
const [push-param, pop-param] = (->
|
|
param = ""
|
|
clear-param-timer = 0
|
|
setInterval (->
|
|
clear-param-timer-- if clear-param-timer
|
|
param := "" unless clear-param-timer
|
|
$param.inner-text = param
|
|
), 100
|
|
const push-param = ->
|
|
param += it
|
|
$param.inner-text = param
|
|
clear-param-timer := 20
|
|
const pop-full-param = ->
|
|
ret = param
|
|
param := ""
|
|
$param.inner-text = param
|
|
if ret == ""
|
|
1
|
|
else
|
|
+ret
|
|
[push-param, pop-full-param]
|
|
)!
|
|
|
|
const gen-array = -> Array.from { length: it }, (_, i) -> i
|
|
const cards = await fetch \./cards.json .then (.json!) .catch err
|
|
const make-card = ->
|
|
img = document.create-element \img
|
|
img.src = it
|
|
img
|
|
const make-blank-card = -> make-card \assets/card_back.jpg
|
|
const gen-opponent-cards$ = ->
|
|
diff = it - $opponent-hand.child-element-count
|
|
switch
|
|
| diff < 0
|
|
while diff++
|
|
$opponent-hand.remove-child $opponent-hand.first-child
|
|
| diff > 0
|
|
$opponent-hand.append ...(gen-array diff .map make-blank-card)
|
|
| _
|
|
void
|
|
const get-state = ->>
|
|
player-state-json = await fetch \./get_state .then (.text!) .catch err
|
|
player-state = JSON.parse player-state-json
|
|
events-json = await fetch \/get_events .then (.text!) .catch err
|
|
events = JSON.parse events-json
|
|
return { player-state-json, player-state, events-json, events }
|
|
|
|
const show-card$ = (e) ->
|
|
const hide-card$ = ->
|
|
$view-card.style.opacity = 0
|
|
e.target.remove-event-listener \mouseleave hide-card$
|
|
$view-card.src = e.target.get-attribute \data-png
|
|
$view-card.style.opacity = 1
|
|
e.target.add-event-listener \mouseleave hide-card$
|
|
state = await get-state!
|
|
window.state = state
|
|
const apply-state$ = ->
|
|
gen-opponent-cards$ it.opponent_cards_in_hand
|
|
#const my-card-ids = [...$own-hand.children].map ->
|
|
# it.get-attribute \data-id*/
|
|
if document.body.class-list.contains \my-turn
|
|
document.body.class-list.remove \my-turn if it.you != it.turn_player
|
|
else
|
|
document.body.class-list.add \my-turn if it.you == it.turn_player
|
|
if it.hand.length != $own-hand.children.length
|
|
$own-hand.innerHTML = ''
|
|
it.hand.for-each (card-id, index) ->
|
|
card-data = cards[card-id]
|
|
card = make-card card-data.jpg
|
|
card.set-attribute \data-index index
|
|
card.add-event-listener \mouseenter show-card$
|
|
card.set-attribute \data-png card-data.png
|
|
$own-hand.append-child card
|
|
apply-state$ state.player-state
|
|
|
|
set-interval (->>
|
|
const new-state = await get-state!
|
|
unless new-state.player-state-json == state.player-state-json
|
|
apply-state$ new-state.player-state
|
|
state := new-state
|
|
), 1000
|
|
mouse-x = mouse-y = 0
|
|
document
|
|
..addEventListener \mousemove ->
|
|
mouse-x = it.client-x
|
|
mouse-y = it.client-y
|
|
if mouse-x > window.inner-width / 2
|
|
$view-card-container.class-list.remove \right
|
|
else
|
|
$view-card-container.class-list.add \right
|
|
..addEventListener \keyup ->
|
|
current-mouse-node = [...document.query-selector-all \:hover][* - 1]
|
|
switch it.key
|
|
| \c => fetch "./draw/#{pop-param!}"
|
|
| \e => fetch "./pass"
|
|
| \0 \1 \2 \3 \4 \5 \6 \7 \8 \9 => push-param that
|
|
| \t =>
|
|
if current-mouse-node?.has-attribute \data-index
|
|
fetch "./fade/#{current-mouse-node.get-attribute \data-index}"
|
|
)!
|