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

4
README.md
View File

@ -1,3 +1,5 @@
# dandadan
stupid tabletop game simulator thing
stupid tabletop game simulator thingy
specifically designed to be used when players share a deck
definitely not a shameless untap clone

12
src/game.rs
View File

@ -27,8 +27,8 @@ pub enum Player {
struct InPlay {
#[serde(with = "uuid::serde::braced")]
id: Uuid,
position_x: u16,
position_y: u16,
position_x: u8,
position_y: u8,
owner: Player,
tapped: bool,
#[serde(with = "uuid::serde::braced")]
@ -260,6 +260,7 @@ pub fn bounce(game_state: &mut GameState, play_id: Uuid) {
}
pub fn tap(game_state: &mut GameState, play_id: Uuid) {
//let played_card = game_state.play.remove(&play_id).unwrap();
game_state.events.push(CountedEvent {
id: game_state.events.len(),
event: Event::Tap(play_id.clone()),
@ -267,3 +268,10 @@ pub fn tap(game_state: &mut GameState, play_id: Uuid) {
let played_card = game_state.play.get_mut(&play_id).unwrap();
played_card.tapped = !played_card.tapped;
}
pub fn move_played_card(game_state: &mut GameState, play_id: Uuid, position_x: u8, position_y: u8) {
if let Some(played_card) = game_state.play.get_mut(&play_id) {
played_card.position_x = position_x;
played_card.position_y = position_y;
}
}

24
src/main.rs
View File

@ -74,6 +74,25 @@ fn bounce(
Ok(format!("{}", game::get_events(&game_state)))
}
#[get("/<uuid>/move/<play_id>/<x>/<y>")]
fn move_card(
uuid: Uuid,
play_id: Uuid,
x: u8,
y: u8,
game_state_arc: &State<ArcMutexGameState>,
player_uuids: &State<PlayerUuids>,
) -> Result<String, BadRequest<String>> {
match player_uuids.map.get(&uuid) {
Some(_) => (),
None => return Err(BadRequest(format!("Invalid player {}.", uuid))),
};
let game_state_mutex = Arc::clone(&game_state_arc.state);
let mut game_state = game_state_mutex.lock().unwrap();
game::move_played_card(&mut game_state, play_id, x, y);
Ok(format!("{}", game::get_events(&game_state)))
}
#[get("/<uuid>/tap/<play_id>")]
fn tap(
uuid: Uuid,
@ -220,8 +239,8 @@ struct PlayerUuids {
#[launch]
fn rocket() -> _ {
let mut game_state = game::new();
game::draw(&mut game_state, 7, Player::A);
game::draw(&mut game_state, 7, Player::B);
//game::draw(&mut game_state, 7, Player::A);
//game::draw(&mut game_state, 7, Player::B);
let game_state_arc = Arc::new(Mutex::new(game_state));
#[cfg(debug_assertions)]
@ -262,6 +281,7 @@ fn rocket() -> _ {
play,
bounce,
tap,
move_card,
],
)
.manage(ArcMutexGameState {

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}"
)!

5
web/src/style.scss
View File

@ -102,5 +102,10 @@ aside {
.in-play-card {
position: absolute;
transition: all 0.3s;
height: calc(($img-hand-height / 100%) * ($hand-height / 100%) * 100vh);
}
[data-tapped = true] {
transform: rotate(90deg);
}