Added movement functionality to the frontend 💣

README.md

@@ -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

src/game.rs

@@ -27,8 +27,8 @@ pub enum Player {
 struct InPlay {
     #[serde(with = "uuid::serde::braced")]
     id: Uuid,
-    position_x: u16,
+    position_x: u8,
-    position_y: u16,
+    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;
+    }
+}

src/main.rs

@@ -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::A);
-    game::draw(&mut game_state, 7, Player::B);
+    //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 {

web/src/script.ls

@@ -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!}"
+                | \c => fetch-log "./draw/#{pop-param!}"
-                | \e => fetch "./pass"
+                | \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}"
 
 )!

web/src/style.scss

@@ -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);
+}