Added piles, cleaned up dragging positioning, various improvements 📈
This commit is contained in:
Seoxi Ryouko
@ -11,39 +11,50 @@
|
||||
const $view-card-container = document.query-selector '#view-card-container'
|
||||
const $param = document.query-selector '#param'
|
||||
const $play = document.query-selector '#play'
|
||||
const $discard-pile = document.query-selector '#discard-pile'
|
||||
const $discard-pile-img = document.query-selector '#discard-pile-img'
|
||||
const $discard-pile-count = document.query-selector '#discard-pile-count'
|
||||
const $shadow-realm = document.query-selector '#shadow-realm'
|
||||
const $shadow-realm-img = document.query-selector '#shadow-realm-img'
|
||||
const $shadow-realm-count = document.query-selector '#shadow-realm-count'
|
||||
const $deck = document.query-selector '#deck'
|
||||
const $deck-count = document.query-selector '#deck-count'
|
||||
const $extra = document.query-selector '#extra'
|
||||
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
|
||||
$param.inner-text = param && "\xa0#param\xa0"
|
||||
), 100
|
||||
const push-param = ->
|
||||
param += it
|
||||
$param.inner-text = param
|
||||
$param.inner-text = "\xa0#param\xa0"
|
||||
clear-param-timer := 20
|
||||
const pop-full-param = ->
|
||||
ret = param
|
||||
param := ""
|
||||
$param.inner-text = param
|
||||
$param.inner-text = "\xa0#param\xa0"
|
||||
if ret == ""
|
||||
1
|
||||
else
|
||||
+ret
|
||||
[push-param, pop-full-param]
|
||||
)!
|
||||
play-id-list = ""
|
||||
|
||||
const clamp = (n, v, x) -> Math.min (Math.max v, n), x
|
||||
const unwrap_uuid = (.replace /^\{|\}$/g '')
|
||||
const get-play-size = -> $play.get-bounding-client-rect!
|
||||
const gen-array = -> Array.from { length: it }, (_, i) -> i
|
||||
const gen-array-of = (it, val) -> Array.from { length: it }, -> val
|
||||
const cards = await fetch-log \./cards.json .then (.json!)
|
||||
const make-card = ->
|
||||
img = document.create-element \img
|
||||
img.src = it
|
||||
img
|
||||
const make-blank-card = -> make-card \./card_back.png
|
||||
const $make-card = ->
|
||||
$img = document.create-element \img
|
||||
$img.src = it
|
||||
$img
|
||||
const $make-blank-card = -> $make-card \./card_back.png
|
||||
const gen-opponent-cards$ = ->
|
||||
diff = it - $opponent-hand.child-element-count
|
||||
switch
|
||||
@ -51,7 +62,7 @@
|
||||
while diff++
|
||||
$opponent-hand.remove-child $opponent-hand.first-child
|
||||
| diff > 0
|
||||
$opponent-hand.append ...(gen-array diff .map make-blank-card)
|
||||
$opponent-hand.append ...(gen-array diff .map $make-blank-card)
|
||||
| _
|
||||
void
|
||||
const get-state = ->>
|
||||
@ -60,7 +71,6 @@
|
||||
events-json = await fetch \/get_events .then (.text!)
|
||||
events = JSON.parse events-json
|
||||
play-map = new Map player-state.play.map -> [it.id, it]
|
||||
play-id-list = [...player-state.play.map (.play_id)].sort!join \|
|
||||
return { player-state-json, player-state, events-json, events, play-map }
|
||||
|
||||
const show-card$ = (e) ->
|
||||
@ -72,17 +82,39 @@
|
||||
e.target.add-event-listener \mouseleave hide-card$
|
||||
state = await get-state!
|
||||
const apply-state$ = ->
|
||||
{ player-state, play-id-list } = it
|
||||
{ player-state } = it
|
||||
gen-opponent-cards$ player-state.opponent_cards_in_hand
|
||||
if document.body.class-list.contains \my-turn
|
||||
document.body.class-list.remove \my-turn if player-state.you != player-state.turn_player
|
||||
else
|
||||
document.body.class-list.add \my-turn if player-state.you == player-state.turn_player
|
||||
$deck-count.inner-text = player-state.deck_size
|
||||
if player-state.discard_pile.length
|
||||
top-id = player-state.discard_pile[* - 1]
|
||||
$discard-pile-img.src = cards[top-id].jpg
|
||||
$discard-pile-img.set-attribute \data-png cards[top-id].png
|
||||
else
|
||||
$discard-pile-img.src = ""
|
||||
$discard-pile-count.inner-text = player-state.discard_pile.length
|
||||
if player-state.shadow_realm.length
|
||||
top-id = player-state.shadow_realm[* - 1]
|
||||
$shadow-realm-img.src = cards[top-id].jpg
|
||||
$shadow-realm-img.set-attribute \data-png cards[top-id].png
|
||||
else
|
||||
$shadow-realm-img.src = ""
|
||||
$shadow-realm-count.inner-text = player-state.shadow_realm.length
|
||||
if $extra.has-attribute \data-pile-type
|
||||
const list = switch $extra.get-attribute \data-pile-type
|
||||
| \discard => player-state.discard_pile
|
||||
| \shadow => player-state.shadow_realm
|
||||
| \deck => gen-array-of state.player-state.deck_size, null
|
||||
| _ => (console.log that) || []
|
||||
open-list list, $extra.get-attribute \data-pile-type
|
||||
if player-state.hand.length != $own-hand.children.length
|
||||
$own-hand.innerHTML = ''
|
||||
player-state.hand.for-each (card-id, index) ->
|
||||
card-data = cards[card-id]
|
||||
card = make-card card-data.jpg
|
||||
card = $make-card card-data.jpg
|
||||
card
|
||||
..set-attribute \data-hand-index index
|
||||
..set-attribute \data-text card-data.txt
|
||||
@ -98,11 +130,10 @@
|
||||
relative-y = it.position_y
|
||||
else
|
||||
relative-y = 100 - it.position_y
|
||||
img = make-card card-data.jpg
|
||||
img = $make-card card-data.jpg
|
||||
img
|
||||
..class-list.add \in-play-card
|
||||
..style
|
||||
#..transform = 'translate(-50%, -50%)'
|
||||
..left = it.position_x + \%
|
||||
..top = relative-y + \%
|
||||
..set-attribute \data-png card-data.png
|
||||
@ -111,6 +142,7 @@
|
||||
..set-attribute \data-play-y relative-y
|
||||
..set-attribute \draggable \true
|
||||
..set-attribute \data-owner it.owner
|
||||
..set-attribute \data-owned it.owner == player-state.you
|
||||
..set-attribute \data-tapped it.tapped
|
||||
..add-event-listener \mouseenter show-card$
|
||||
..add-event-listener \dragstart ->
|
||||
@ -139,11 +171,49 @@
|
||||
else
|
||||
absolute-y = 100 - y
|
||||
fetch-log "./move/#{it.target.get-attribute \data-play-id}/#x/#absolute-y"
|
||||
#it.target.style.left = new-x + \px
|
||||
#it.target.style.top = new-y + \px
|
||||
$play.append-child img
|
||||
play-id-list := next-play-id-list
|
||||
else
|
||||
player-state.play.for-each ->
|
||||
$element = document.query-selector "[data-play-id=\"#{it.play_id}\"]"
|
||||
if it.owner == player-state.you
|
||||
relative-y = it.position_y
|
||||
else
|
||||
relative-y = 100 - it.position_y
|
||||
$element.set-attribute \data-tapped it.tapped
|
||||
$element.style
|
||||
..left = it.position_x + \%
|
||||
..top = relative-y + \%
|
||||
$element.set-attribute \data-play-x it.position_x
|
||||
$element.set-attribute \data-play-y relative-y
|
||||
|
||||
|
||||
apply-state$ state
|
||||
|
||||
|
||||
const open-list = (list, list-type) -->
|
||||
const $card-list = list.map (card-id, index) ->
|
||||
if card-id
|
||||
ret = $make-card cards[card-id].jpg
|
||||
ret.set-attribute \data-png cards[card-id].png
|
||||
ret.set-attribute "data-index" index
|
||||
ret.set-attribute "data-list-type" list-type
|
||||
ret.add-event-listener \mouseenter show-card$
|
||||
ret
|
||||
else
|
||||
$make-blank-card!
|
||||
$extra.innerHTML = ""
|
||||
$card-list.for-each -> $extra.append it
|
||||
$extra.set-attribute \data-pile-type list-type
|
||||
$extra.class-list.remove \hidden
|
||||
|
||||
$discard-pile-img.add-event-listener \mouseenter show-card$
|
||||
$shadow-realm-img.add-event-listener \mouseenter show-card$
|
||||
$play.add-event-listener \dragover (.prevent-default!)
|
||||
|
||||
$discard-pile-img.add-event-listener \click -> open-list state.player-state.discard_pile, \discard
|
||||
$shadow-realm-img.add-event-listener \click -> open-list state.player-state.shadow_realm, \shadow
|
||||
$deck.add-event-listener \click -> open-list (gen-array-of state.player-state.deck_size, null), \deck
|
||||
|
||||
set-interval (->>
|
||||
const new-state = await get-state!
|
||||
unless new-state.player-state-json == state.player-state-json
|
||||
@ -161,24 +231,51 @@
|
||||
else if mouse-x < window.inner-width / 3
|
||||
$view-card-container.class-list.add \right
|
||||
..add-event-listener \keyup ->
|
||||
current-mouse-node = [...document.query-selector-all \:hover][* - 1]
|
||||
$current-mouse-node = [...document.query-selector-all \:hover][* - 1]
|
||||
switch it.key
|
||||
| \c => fetch-log "./draw/#{pop-param!}"
|
||||
| \e => fetch-log "./pass"
|
||||
| \0 \1 \2 \3 \4 \5 \6 \7 \8 \9 => push-param that
|
||||
| \t =>
|
||||
if current-mouse-node?.has-attribute \data-hand-index
|
||||
fetch-log "./fade/#{current-mouse-node.get-attribute \data-hand-index}"
|
||||
if $current-mouse-node?.has-attribute \data-hand-index
|
||||
fetch-log "./fade/#{$current-mouse-node.get-attribute \data-hand-index}"
|
||||
| \y =>
|
||||
if current-mouse-node?.has-attribute \data-hand-index
|
||||
fetch-log "./fade_bottom/#{current-mouse-node.get-attribute \data-hand-index}"
|
||||
if $current-mouse-node?.has-attribute \data-hand-index
|
||||
fetch-log "./fade_bottom/#{$current-mouse-node.get-attribute \data-hand-index}"
|
||||
| ' ' =>
|
||||
if current-mouse-node?.has-attribute \data-hand-index
|
||||
fetch-log "./play/#{current-mouse-node.get-attribute \data-hand-index}"
|
||||
else if current-mouse-node?.has-attribute \data-play-id
|
||||
fetch-log "./tap/#{current-mouse-node.get-attribute \data-play-id}"
|
||||
if $current-mouse-node?.has-attribute \data-hand-index
|
||||
fetch-log "./play/#{$current-mouse-node.get-attribute \data-hand-index}"
|
||||
else if $current-mouse-node?.has-attribute \data-play-id
|
||||
if \true == $current-mouse-node.get-attribute \data-tapped
|
||||
$current-mouse-node.set-attribute \data-tapped \false
|
||||
else
|
||||
$current-mouse-node.set-attribute \data-tapped \true
|
||||
fetch-log "./tap/#{$current-mouse-node.get-attribute \data-play-id}"
|
||||
else if $current-mouse-node?.has-attribute \data-list-type
|
||||
switch $current-mouse-node.get-attribute \data-list-type
|
||||
| \discard
|
||||
fetch-log "./unkill/#{$current-mouse-node.get-attribute \data-index}"
|
||||
| \shadow
|
||||
fetch-log "./unbanish/#{$current-mouse-node.get-attribute \data-index}"
|
||||
$current-mouse-node.parent-element.remove-child $current-mouse-node
|
||||
if !$extra.child-element-count
|
||||
$extra.class-list.add \hidden
|
||||
$extra.remove-attribute \data-pile-type
|
||||
| \r =>
|
||||
if current-mouse-node?.has-attribute \data-play-id
|
||||
fetch-log "./bounce/#{current-mouse-node.get-attribute \data-play-id}"
|
||||
if $current-mouse-node?.has-attribute \data-play-id
|
||||
fetch-log "./bounce/#{$current-mouse-node.get-attribute \data-play-id}"
|
||||
| \d =>
|
||||
if $current-mouse-node?.has-attribute \data-hand-index
|
||||
fetch-log "./discard/#{$current-mouse-node.get-attribute \data-hand-index}"
|
||||
else if $current-mouse-node?.has-attribute \data-play-id
|
||||
fetch-log "./kill/#{$current-mouse-node.get-attribute \data-play-id}"
|
||||
| \s =>
|
||||
if $current-mouse-node?.has-attribute \data-hand-index
|
||||
fetch-log "./forget/#{$current-mouse-node.get-attribute \data-hand-index}"
|
||||
else if $current-mouse-node?.has-attribute \data-play-id
|
||||
fetch-log "./banish/#{$current-mouse-node.get-attribute \data-play-id}"
|
||||
| \q =>
|
||||
$extra.class-list.add \hidden
|
||||
$extra.remove-attribute \data-pile-type
|
||||
|
||||
)!
|
||||
|
||||
Reference in New Issue
Block a user