Adding frame showing to the moving action.

js-src/components/game.tsx

@@ -42,6 +42,7 @@ export default function Game (props: GameProps): JSX.Element {
     const [error, setError] = React.useState<string | null>(null)
     const [scrollLog, setScrollLog] = React.useState<number | null>(null)
     const [movingTo, setMovingTo] = React.useState<Location | null>(null)
+    const [remainingFrames, setRemainingFrames] = React.useState<number | null>(null)
     const logPresentationRef = React.useRef<HTMLDivElement>(null)
     window.setTimeout(() => {
         setWebsocket((websocket): WebSocket | null => {
@@ -66,7 +67,7 @@ export default function Game (props: GameProps): JSX.Element {
                 const inputPackets = new InputPackets(setTeamPJs,
                     setCurrentLocation, setConnectedLocations,
                     logLines, setLogLines, setError, setScrollLog,
-                    logPresentationRef, setMovingTo)
+                    logPresentationRef, setMovingTo, setRemainingFrames)
                 webSocket.onmessage = (event) => {
                     const packet = JSON.parse(event.data)
                     inputPackets.handle(packet)
@@ -91,7 +92,8 @@ export default function Game (props: GameProps): JSX.Element {
                 logLines={logLines}
                 websocket={websocket}
                 logPresentationRef={logPresentationRef}
-                movingTo={movingTo}/>
+                movingTo={movingTo}
+                remainingFrames={remainingFrames}/>
             <BottomPanel/>
         </>
     )

js-src/components/upper-panel.tsx

@@ -16,6 +16,7 @@ interface UpperPanelProps {
     websocket: WebSocket | null
     logPresentationRef: React.RefObject<HTMLDivElement>
     movingTo: Location | null
+    remainingFrames: number | null
 }
 
 export default function UpperPanel (props: UpperPanelProps): JSX.Element {
@@ -64,6 +65,7 @@ export default function UpperPanel (props: UpperPanelProps): JSX.Element {
             </>
         )
     }
+
     function showLocationMenuHeaderText (): JSX.Element {
         if (currentLocation === null) {
             return <></>
@@ -80,6 +82,18 @@ export default function UpperPanel (props: UpperPanelProps): JSX.Element {
         </p>
     }
 
+    function showRemainingFrames (): JSX.Element {
+        if (props.movingTo === null) {
+            return <></>
+        }
+        if (props.remainingFrames === null) {
+            return <></>
+        }
+        return (
+            <p>Te quedan <b>{props.remainingFrames}</b> frames para terminar la acción.</p>
+        )
+    }
+
     return (
         <Presentation>
             <PresentationItem>
@@ -96,6 +110,9 @@ export default function UpperPanel (props: UpperPanelProps): JSX.Element {
                 {
                     showLocationMenuHeaderText()
                 }
+                {
+                    showRemainingFrames()
+                }
                 {
                     availableLocationsToMove()
                 }

js-src/input-packets.ts

@@ -16,6 +16,7 @@ type SetScrollLogCallback = (set: number | null) => number | null
 type SetScrollLog = (set: number | null | SetScrollLogCallback) => void
 type LogPresentationRef = React.RefObject<HTMLDivElement>
 type SetMovingTo = (set: Location | null) => void
+type SetRemainingFrames = (set: number | null) => void
 
 interface Packet {
     command: string
@@ -35,6 +36,7 @@ export default class InputPackets {
     setScrollLog: SetScrollLog
     logPresentationRef: LogPresentationRef
     setMovingTo: SetMovingTo
+    setRemainingFrames: SetRemainingFrames
     constructor (setTeamPJs: SetTeamPJs,
         setCurrentLocation: SetCurrentLocation,
         setConnectedLocations: SetConnectedLocations,
@@ -43,7 +45,8 @@ export default class InputPackets {
         setError: SetError,
         setScrollLog: SetScrollLog,
         logPresentationRef: LogPresentationRef,
-        setMovingTo: SetMovingTo) {
+        setMovingTo: SetMovingTo,
+        setRemainingFrames: SetRemainingFrames) {
         this.setTeamPJs = setTeamPJs
         this.setCurrentLocation = setCurrentLocation
         this.setConnectedLocations = setConnectedLocations
@@ -53,6 +56,7 @@ export default class InputPackets {
         this.setScrollLog = setScrollLog
         this.logPresentationRef = logPresentationRef
         this.setMovingTo = setMovingTo
+        this.setRemainingFrames = setRemainingFrames
     }
 
     handle (packet: Packet): void {
@@ -121,6 +125,9 @@ export default class InputPackets {
                         this.setMovingTo(null)
                     }
                 }
+                if (data.remaining_frames !== undefined) {
+                    this.setRemainingFrames(data.remaining_frames)
+                }
                 if (data.set_log !== undefined) {
                     saveScroll()
                     this.setLogLines(data.set_log)

lib/LasTres/Controller/Websocket/InputPacket/Init.pm

@@ -129,6 +129,16 @@ sub _on_redis_event ( $self, $ws, $session, $message, $topic, $topics ) {
         $info_packet_to_send->send($ws);
         return;
     }
+    if ($data->{command} eq 'show-frame') {
+        my $current_frame = $pj->team->action_frame;
+        if ($pj->team->is_moving) {
+            my $last_frame = $pj->team->location->parent->frames_to_move;
+            LasTres::Controller::Websocket::OutputPacket::Info->new(
+                remaining_frames => $last_frame - $current_frame
+            )->send($ws);
+        }
+        return;
+    }
 }
 
 sub _get_connected_places ( $self, $pj ) {

lib/LasTres/Controller/Websocket/OutputPacket/Info.pm

@@ -22,6 +22,8 @@ has location_data => ( is => 'rw', );
 has set_log    => ( is => 'rw', );
 has append_log => ( is => 'rw' );
 
+has remaining_frames => ( is => 'rw' );
+
 sub identifier {
     return 'info';
 }
@@ -32,6 +34,7 @@ sub data ($self) {
     my $location_data    = $self->location_data;
     my $set_log          = $self->set_log;
     my $append_log       = $self->append_log;
+    my $remaining_frames = $self->remaining_frames;
     return {
         (
               ( defined $clear ) ? ( clear => $clear )
@@ -50,8 +53,12 @@ sub data ($self) {
             : ()
         ),
         (
-              ( defined $append_log )
-            ? ( append_log => $append_log )
+              ( defined $append_log ) ? ( append_log => $append_log )
+            : ()
+        ),
+        (
+              ( defined $remaining_frames )
+            ? ( remaining_frames => $remaining_frames )
             : ()
         )
     };

lib/LasTres/EventLoop.pm

@@ -10,17 +10,11 @@ use feature 'signatures';
 use Moo;
 use JSON qw/to_json from_json/;
 
-has _app => (
-    is => 'lazy'
-);
+has _app => ( is => 'lazy' );
 
-has _schema => (
-    is => 'lazy'
-);
+has _schema => ( is => 'lazy' );
 
-has _redis => (
-    is => 'lazy'
-);
+has _redis => ( is => 'lazy' );
 
 sub _build__app {
     require LasTres;
@@ -72,14 +66,17 @@ sub _increment_frame_for_mover($self, $team) {
     $team->action_frame( ++$frame );
     $team->update;
     my $location = $team->location;
-    my $target_location = LasTres::Location::get(from_json($team->moving_to)->@*);
+    my $target_location =
+      LasTres::Location::get( from_json( $team->moving_to )->@* );
     if ( $frame >= $location->parent->frames_to_move ) {
         $team->action_frame(0);
         $team->is_moving(0);
         $team->moving_to('null');
         $team->update;
         $target_location->place_team($team);
+        return;
     }
+    $team->send_frame_to_members;
 }
 
 sub _real_loop ($self) {

lib/LasTres/Location.pm

@@ -91,6 +91,7 @@ sub move ( $self, $team ) {
     }
     my $schema;
     $team->is_moving(1);
+    $team->action_frame(0);
     $team->moving_to( $self->to_json_array );
     $team->update;
     $self->on_team_moving($team);
@@ -102,6 +103,7 @@ sub on_team_moving ( $self, $team ) {
     for my $pj ( $team->members ) {
         $self->on_pj_moving($pj);
     }
+    $team->send_frame_to_members;
 }
 
 sub on_pj_moving ( $self, $pj ) {

lib/LasTres/Planet/Bahdder/BosqueDelHeroe/TribuDeLaLima.pm

@@ -27,7 +27,7 @@ sub get_auto_discover($self) {
 }
 
 sub frames_to_move {
-    return 0;
+    return 3;
 }
 
 sub identifier {

lib/LasTres/Schema/Result/Team.pm

@@ -8,6 +8,7 @@ use warnings;
 use parent 'DBIx::Class::Core';
 
 use LasTres::Location;
+use JSON qw/to_json from_json/;
 
 __PACKAGE__->table('teams');
 
@@ -87,9 +88,20 @@ sub location {
     $area       = $self->_area;
     $super_area = $self->_super_area;
     $planet     = $self->_planet;
-    $location = LasTres::Location::get($planet, $super_area, $area, $location);
+    $location =
+      LasTres::Location::get( $planet, $super_area, $area, $location );
     return $location;
 }
+
+sub send_frame_to_members ($self) {
+    require LasTres::Redis;
+    my $redis = LasTres::Redis->new;
+    $self = $self->get_from_storage;
+    for my $pj ( $self->members ) {
+        $redis->publish( $redis->pj_subscription($pj),
+            to_json( { command => 'show-frame' } ) );
+    }
+}
 __PACKAGE__->set_primary_key('uuid');
 __PACKAGE__->add_unique_constraint( u_name => ['name'] );
 __PACKAGE__->has_many( 'members', 'LasTres::Schema::Result::PJ', 'team' );