seoxi/dandadan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added movement functionality to the frontend 💣

Browse Source
This commit is contained in:
Seoxi Ryouko
2025-02-14 07:55:51 -06:00
parent 9b52a818e5
commit 1f7fccb172
5 changed files with 97 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
web/src/script.ls
View File

@ -1,5 +1,10 @@
(->>
const err = -> console.error it
const fetch-log = ->
fetch it .then (->
console.log it
it
) .catch err
const $opponent-hand = document.query-selector '#opponent-hand'
const $own-hand = document.query-selector '#own-hand'
const $view-card = document.query-selector '#view-card'
@ -29,9 +34,11 @@
[push-param, pop-full-param]
)!
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 cards = await fetch \./cards.json .then (.json!) .catch err
const cards = await fetch-log \./cards.json .then (.json!)
const make-card = ->
img = document.create-element \img
img.src = it
@ -48,9 +55,9 @@
| _
void
const get-state = ->>
player-state-json = await fetch \./get_state .then (.text!) .catch err
player-state-json = await fetch \./get_state .then (.text!)
player-state = JSON.parse player-state-json
events-json = await fetch \/get_events .then (.text!) .catch err
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 \|
@ -66,7 +73,6 @@
state = await get-state!
const apply-state$ = ->
{ player-state, play-id-list } = it
console.log 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
@ -88,16 +94,53 @@
$play.innerHTML = ''
player-state.play.for-each ->
card-data = cards[unwrap_uuid it.id]
if it.owner == player-state.you
relative-y = it.position_y
else
relative-y = 100 - it.position_y
img = make-card card-data.jpg
img
..class-list.add \in-play-card
..style
..transform = 'translate(-50%, -50%)'
#..transform = 'translate(-50%, -50%)'
..left = it.position_x + \%
..top = it.position_y + \%
..top = relative-y + \%
..set-attribute \data-png card-data.png
..set-attribute \data-play-id it.play_id
..set-attribute \data-play-x it.position_x
..set-attribute \data-play-y relative-y
..set-attribute \draggable \true
..set-attribute \data-owner it.owner
..set-attribute \data-tapped it.tapped
..add-event-listener \mouseenter show-card$
..add-event-listener \dragstart ->
it.target.set-attribute \data-start-x it.target.offset-left
it.target.set-attribute \data-start-y it.target.offset-top
it.target.set-attribute \data-client-x it.client-x
it.target.set-attribute \data-client-y it.client-y
..add-event-listener \dragend ->
const start-x = +it.target.get-attribute \data-start-x
const start-y = +it.target.get-attribute \data-start-y
const start-client-x = +it.target.get-attribute \data-client-x
const start-client-y = +it.target.get-attribute \data-client-y
const new-x = it.client-x + (start-x - start-client-x)
const new-y = it.client-y + (start-y - start-client-y)
const scale-x = +start-x / +(it.target.get-attribute \data-play-x)
const scale-y = +start-y / +(it.target.get-attribute \data-play-y)
const x = clamp 5 Math.round(new-x / scale-x), 95
const y = clamp 5 Math.round(new-y / scale-y), 95
it.target.style
..left = x + \%
..top = y + \%
it.target.set-attribute \data-play-x x
it.target.set-attribute \data-play-y y
if state.player-state.you == it.target.get-attribute \data-owner
absolute-y = y
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
apply-state$ state
@ -120,20 +163,22 @@
..add-event-listener \keyup ->
current-mouse-node = [...document.query-selector-all \:hover][* - 1]
switch it.key
| \c => fetch "./draw/#{pop-param!}"
| \e => fetch "./pass"
| \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 "./fade/#{current-mouse-node.get-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 "./fade_bottom/#{current-mouse-node.get-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 "./play/#{current-mouse-node.get-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}"
| \r =>
if current-mouse-node?.has-attribute \data-play-id
fetch "./bounce/#{current-mouse-node.get-attribute \data-play-id}"
fetch-log "./bounce/#{current-mouse-node.get-attribute \data-play-id}"
)!