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

Added basic play functionality 😏

Browse Source
This commit is contained in:
Seoxi Ryouko
2025-02-13 08:14:36 -06:00
parent 7c3e1fc9e9
commit db00c960d8
3 changed files with 62 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
build
View File

@ -1,5 +1,5 @@
#!/usr/bin/env bash #!/usr/bin/env bash
lsc --no-header -bco web/static/ web/src/script.ls || exit 1 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 rustfmt src/*.rs || exit 3
cargo $(basename $0) "${@:1}" cargo $(basename $0) "${@:1}"

68
web/src/script.ls
View File

@ -5,6 +5,7 @@
const $view-card = document.query-selector '#view-card' const $view-card = document.query-selector '#view-card'
const $view-card-container = document.query-selector '#view-card-container' const $view-card-container = document.query-selector '#view-card-container'
const $param = document.query-selector '#param' const $param = document.query-selector '#param'
const $play = document.query-selector '#play'
const [push-param, pop-param] = (-> const [push-param, pop-param] = (->
param = "" param = ""
clear-param-timer = 0 clear-param-timer = 0
@ -28,6 +29,7 @@
[push-param, pop-full-param] [push-param, pop-full-param]
)! )!
const unwrap_uuid = (.replace /^\{|\}$/g '')
const gen-array = -> Array.from { length: it }, (_, i) -> i const gen-array = -> Array.from { length: it }, (_, i) -> i
const cards = await fetch \./cards.json .then (.json!) .catch err const cards = await fetch \./cards.json .then (.json!) .catch err
const make-card = -> const make-card = ->
@ -51,6 +53,7 @@
events-json = await fetch \/get_events .then (.text!) .catch err events-json = await fetch \/get_events .then (.text!) .catch err
events = JSON.parse events-json events = JSON.parse events-json
play-map = new Map player-state.play.map -> [it.id, it] 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 } return { player-state-json, player-state, events-json, events, play-map }
const show-card$ = (e) -> const show-card$ = (e) ->
@ -62,52 +65,75 @@
e.target.add-event-listener \mouseleave hide-card$ e.target.add-event-listener \mouseleave hide-card$
state = await get-state! state = await get-state!
const apply-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 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 else
document.body.class-list.add \my-turn if it.you == it.turn_player document.body.class-list.add \my-turn if player-state.you == player-state.turn_player
if it.hand.length != $own-hand.children.length if player-state.hand.length != $own-hand.children.length
$own-hand.innerHTML = '' $own-hand.innerHTML = ''
it.hand.for-each (card-id, index) -> player-state.hand.for-each (card-id, index) ->
card-data = cards[card-id] card-data = cards[card-id]
card = make-card card-data.jpg card = make-card card-data.jpg
card.set-attribute \data-index index card
card.set-attribute \data-text card-data.txt ..set-attribute \data-hand-index index
card.add-event-listener \mouseenter show-card$ ..set-attribute \data-text card-data.txt
card.set-attribute \data-png card-data.png ..set-attribute \data-png card-data.png
..add-event-listener \mouseenter show-card$
$own-hand.append-child 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 (->> set-interval (->>
const new-state = await get-state! const new-state = await get-state!
unless new-state.player-state-json == state.player-state-json unless new-state.player-state-json == state.player-state-json
apply-state$ new-state.player-state apply-state$ new-state
state := new-state state := new-state
window.state = state window.state = state
), 1000 ), 1000
mouse-x = mouse-y = 0 mouse-x = mouse-y = 0
document document
..addEventListener \mousemove -> ..add-event-listener \mousemove ->
mouse-x = it.client-x mouse-x = it.client-x
mouse-y = it.client-y 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 $view-card-container.class-list.remove \right
else else if mouse-x < window.inner-width / 3
$view-card-container.class-list.add \right $view-card-container.class-list.add \right
..addEventListener \keyup -> ..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 switch it.key
| \c => fetch "./draw/#{pop-param!}" | \c => fetch "./draw/#{pop-param!}"
| \e => fetch "./pass" | \e => fetch "./pass"
| \0 \1 \2 \3 \4 \5 \6 \7 \8 \9 => push-param that | \0 \1 \2 \3 \4 \5 \6 \7 \8 \9 => push-param that
| \t => | \t =>
if current-mouse-node?.has-attribute \data-index if current-mouse-node?.has-attribute \data-hand-index
fetch "./fade/#{current-mouse-node.get-attribute \data-index}" fetch "./fade/#{current-mouse-node.get-attribute \data-hand-index}"
| \y => | \y =>
if current-mouse-node?.has-attribute \data-index if current-mouse-node?.has-attribute \data-hand-index
fetch "./fade_bottom/#{current-mouse-node.get-attribute \data-index}" fetch "./fade_bottom/#{current-mouse-node.get-attribute \data-hand-index}"
| ' ' => | ' ' =>
if current-mouse-node?.has-attribute \data-index if current-mouse-node?.has-attribute \data-hand-index
fetch "./play/#{current-mouse-node.get-attribute \data-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}"
)! )!

15
web/src/style.scss
View File

@ -1,5 +1,7 @@
$view-container-side-offset: 5%; $view-container-side-offset: 5%;
$param-container-side-offset: 5%; $param-container-side-offset: 5%;
$img-hand-height: 95%;
$hand-height: 14%;
*, *::before, *::after { *, *::before, *::after {
box-sizing: border-box; box-sizing: border-box;
@ -24,7 +26,7 @@ main {
} }
.hand { .hand {
height: 14%; height: $hand-height;
width: 100%; width: 100%;
background-color: #0002; background-color: #0002;
display: flex; display: flex;
@ -34,7 +36,7 @@ main {
align-items: center; align-items: center;
img { img {
display: flex; display: flex;
height: 95%; height: $img-hand-height;
} }
} }
@ -93,3 +95,12 @@ aside {
#play { #play {
flex-grow: 1; flex-grow: 1;
} }
#play {
position: relative;
}
.in-play-card {
position: absolute;
height: calc(($img-hand-height / 100%) * ($hand-height / 100%) * 100vh);
}