diff --git a/build b/build index e82efdd..85a80d2 100755 --- a/build +++ b/build @@ -1,5 +1,5 @@ #!/usr/bin/env bash lsc --no-header -bco web/static/ web/src/script.ls || exit 1 -npx sass --no-source-map web/src/style.scss web/static/style.css || exit 2 +npx sass --no-source-map web/src/style.scss web/dynamic/style.css || exit 2 rustfmt src/*.rs || exit 3 cargo $(basename $0) "${@:1}" diff --git a/web/src/script.ls b/web/src/script.ls index 5fce680..6541e99 100644 --- a/web/src/script.ls +++ b/web/src/script.ls @@ -5,6 +5,7 @@ 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 $play = document.query-selector '#play' const [push-param, pop-param] = (-> param = "" clear-param-timer = 0 @@ -28,6 +29,7 @@ [push-param, pop-full-param] )! + const unwrap_uuid = (.replace /^\{|\}$/g '') const gen-array = -> Array.from { length: it }, (_, i) -> i const cards = await fetch \./cards.json .then (.json!) .catch err const make-card = -> @@ -51,6 +53,7 @@ events-json = await fetch \/get_events .then (.text!) .catch err 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) -> @@ -62,52 +65,75 @@ e.target.add-event-listener \mouseleave hide-card$ state = await get-state! const apply-state$ = -> - gen-opponent-cards$ it.opponent_cards_in_hand + { 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 it.you != it.turn_player + document.body.class-list.remove \my-turn if player-state.you != player-state.turn_player else - document.body.class-list.add \my-turn if it.you == it.turn_player - if it.hand.length != $own-hand.children.length + document.body.class-list.add \my-turn if player-state.you == player-state.turn_player + if player-state.hand.length != $own-hand.children.length $own-hand.innerHTML = '' - it.hand.for-each (card-id, index) -> + player-state.hand.for-each (card-id, index) -> card-data = cards[card-id] card = make-card card-data.jpg - card.set-attribute \data-index index - card.set-attribute \data-text card-data.txt - card.add-event-listener \mouseenter show-card$ - card.set-attribute \data-png card-data.png + card + ..set-attribute \data-hand-index index + ..set-attribute \data-text card-data.txt + ..set-attribute \data-png card-data.png + ..add-event-listener \mouseenter show-card$ $own-hand.append-child card - apply-state$ state.player-state - + next-play-id-list = [...player-state.play.map (.play_id)].sort!join \| + if play-id-list !== next-play-id-list + $play.innerHTML = '' + player-state.play.for-each -> + card-data = cards[unwrap_uuid it.id] + img = make-card card-data.jpg + img + ..class-list.add \in-play-card + ..style + ..transform = 'translate(-50%, -50%)' + ..left = it.position_x + \% + ..top = it.position_y + \% + ..set-attribute \data-png card-data.png + ..set-attribute \data-play-id it.play_id + ..add-event-listener \mouseenter show-card$ + $play.append-child img + apply-state$ 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 + apply-state$ new-state state := new-state window.state = state ), 1000 mouse-x = mouse-y = 0 document - ..addEventListener \mousemove -> + ..add-event-listener \mousemove -> mouse-x = it.client-x mouse-y = it.client-y - if mouse-x > window.inner-width / 2 + if mouse-x > window.inner-width * 2 / 3 $view-card-container.class-list.remove \right - else + else if mouse-x < window.inner-width / 3 $view-card-container.class-list.add \right - ..addEventListener \keyup -> + ..add-event-listener \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}" + if current-mouse-node?.has-attribute \data-hand-index + fetch "./fade/#{current-mouse-node.get-attribute \data-hand-index}" | \y => - if current-mouse-node?.has-attribute \data-index - fetch "./fade_bottom/#{current-mouse-node.get-attribute \data-index}" + if current-mouse-node?.has-attribute \data-hand-index + fetch "./fade_bottom/#{current-mouse-node.get-attribute \data-hand-index}" | ' ' => - if current-mouse-node?.has-attribute \data-index - fetch "./play/#{current-mouse-node.get-attribute \data-index}" + if current-mouse-node?.has-attribute \data-hand-index + fetch "./play/#{current-mouse-node.get-attribute \data-hand-index}" + | \r => + if current-mouse-node?.has-attribute \data-play-id + fetch "./bounce/#{current-mouse-node.get-attribute \data-play-id}" + )! diff --git a/web/src/style.scss b/web/src/style.scss index dbc48db..cbab9e9 100644 --- a/web/src/style.scss +++ b/web/src/style.scss @@ -1,5 +1,7 @@ $view-container-side-offset: 5%; $param-container-side-offset: 5%; +$img-hand-height: 95%; +$hand-height: 14%; *, *::before, *::after { box-sizing: border-box; @@ -24,7 +26,7 @@ main { } .hand { - height: 14%; + height: $hand-height; width: 100%; background-color: #0002; display: flex; @@ -34,7 +36,7 @@ main { align-items: center; img { display: flex; - height: 95%; + height: $img-hand-height; } } @@ -93,3 +95,12 @@ aside { #play { flex-grow: 1; } + +#play { + position: relative; +} + +.in-play-card { + position: absolute; + height: calc(($img-hand-height / 100%) * ($hand-height / 100%) * 100vh); +}