9 files changed, 140 insertions(+), 26 deletions(-)

M server/src/component.rs
M server/src/main.rs
M server/src/packet.rs
M starkingdoms-client/index.html
M starkingdoms-client/src/css/hud.css
M starkingdoms-client/src/css/popup.css
M starkingdoms-client/src/hub.ts
M starkingdoms-client/src/main.ts
M starkingdoms-client/src/protocol.ts

@@ 13,10 13,19 @@ pub enum PartType {
     Hearty,
 }
 
+#[derive(Component, Clone, Copy, Serialize, Deserialize, Debug, Default)]
+pub struct Input {
+    pub up: bool,
+    pub down: bool,
+    pub left: bool,
+    pub right: bool,
+}
+
 #[derive(Component)]
 pub struct Player {
     pub addr: SocketAddr,
     pub username: String,
+    pub input: Input,
 }
 
 #[derive(Bundle)]

@@ 63,7 63,7 @@ fn spawn_planets(mut commands: Commands) {
 fn on_message(
     mut commands: Commands,
     planet_query: Query<(Entity, &PlanetType, &Transform)>,
-    player_query: Query<(Entity, &Player)>,
+    mut player_query: Query<(Entity, &mut Player)>,
     part_query: Query<(Entity, &PartType, &Transform)>,
     mut packet_recv: Local<ManualEventReader<ServerEvent>>,
     mut packet_event_send: ResMut<Events<ServerEvent>>,


@@ 95,6 95,7 @@ fn on_message(
                             player: Player {
                                 addr: *addr,
                                 username: username.to_string(),
+                                input: component::Input::default(),
                             },
                         })
                         .insert(Collider::cuboid(25.0 / SCALE, 25.0 / SCALE))


@@ 229,6 230,16 @@ fn on_message(
                         event_queue.push(ServerEvent::Broadcast(MessageType::Text, buf));
                     }
                 }
+                Packet::PlayerInput { up, down, left, right } => {
+                    for (_, mut q_player) in &mut player_query {
+                        if q_player.addr == *addr {
+                            q_player.input.up = up;
+                            q_player.input.down = down;
+                            q_player.input.left = left;
+                            q_player.input.right = right;
+                        }
+                    }
+                }
                 _ => continue,
             }
         }

@@ 50,6 50,12 @@ pub enum Packet {
         target: Option<String>,
         content: String,
     },
+    PlayerInput {
+        up: bool,
+        down: bool,
+        left: bool,
+        right: bool,
+    },
     // clientbound
     SpawnPlayer {
         id: u32,

@@ 74,23 74,31 @@ Here be dragons! You have a <b>prerelease server</b> selected. Expect bugs, and 
             <input placeholder="Enter message or command here..." class="chat-box" id="chatentry" required autocomplete="off"/>
         </div>
 
-        <div class="popup hud hidden popup-max-width-300" id="hud">
-            <table>
-                <thead>
-                    <tr>
-                        <th class="hud-d"></th>
-                        <th class="hud-d"></th>
-                        <th class="hud-d"></th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td id="pos">Position: --, --</td>
-                        <td id="velocity">Velocity: --</td>
-                        <td id="track">Track Angle: --</td>
-                    </tr>
-                </tbody>
-            </table>
+        <div class="hud hidden" id="hud">
+            <div class="popup" id="hud-content-wrapper">  
+                <table>
+                    <thead>
+                        <tr>
+                            <th class="hud-d">Position</th>
+                            <th class="hud-d">Velocity</th>
+                            <th class="hud-d">Track Angle</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                          <td id="pos">
+                              <span id="pos-val-x">--</span>, <span id="pos-val-y">--</span>
+                          </td>
+                          <td id="velocity">
+                              <span id="velocity-val">--</span>
+                          </td>
+                          <td id="track">
+                              <span id="track-val">--</span>
+                          </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
         </div>
 
         <span class="footer-left" id="footer-left"></span>

@@ 1,12 1,24 @@
 .hud {
     position: absolute;
-    left: 50%;
-    bottom: 10px;
-    transform: translate(-50%);
-    margin: 0 0;
-    width: 25vw;
-    min-width: 640px;
+    bottom: .5em;
+    left: .5em;
+    width: calc(100% - 1em);
 }
+
+#hud-content-wrapper {
+    width: min(100vw, 620px);
+    margin: 0 auto;
+}
+
+#hud-content-wrapper > table {
+    width: 100%;
+    table-layout: fixed;
+}
+
+#hud-content-wrapper td {
+    text-align: center;
+}
+
 .hud-d {
     margin-left: 5px;
     margin-right: 5px;

@@ 31,4 31,5 @@
 }
 .hidden {
     display: none;
+    visibility: hidden;
 }

@@ 52,6 52,57 @@ export async function hub_connect(url: string, username: string): Promise<Client
         };
         sendPacket(client, packet);
 
+        // input
+        document.onkeydown = (e) => {
+            // currently, input packet is sent on any key down. fix that
+            if(e.key == "ArrowUp" || e.key == "w") {
+                global.up = true;
+            }
+            if(e.key == "ArrowDown" || e.key == "s") {
+                global.down = true;
+            }
+            if(e.key == "ArrowLeft" || e.key == "a") {
+                global.left = true;
+            }
+            if(e.key == "ArrowRight" || e.key == "d") {
+                global.right = true;
+            }
+            let input_packet: Packet = {
+                t: PacketType.PlayerInput,
+                c: {
+                    up: global.up,
+                    down: global.down,
+                    left: global.left,
+                    right: global.right,
+                }
+            }
+            sendPacket(client, input_packet);
+        }
+        document.onkeyup = (e) => {
+            if(e.key == "ArrowUp" || e.key == "w") {
+                global.up = false;
+            }
+            if(e.key == "ArrowDown" || e.key == "s") {
+                global.down = false;
+            }
+            if(e.key == "ArrowLeft" || e.key == "a") {
+                global.left = false;
+            }
+            if(e.key == "ArrowRight" || e.key ==  "d") {
+                global.right = false;
+            }
+            let input_packet: Packet = {
+                t: PacketType.PlayerInput,
+                c: {
+                    up: global.up,
+                    down: global.down,
+                    left: global.left,
+                    right: global.right,
+                }
+            }
+            sendPacket(client, input_packet);
+        }
+
         document.getElementById("chatentry")!.onkeydown = (e) => {
             if (e.key === 'Enter') {
                 let value = (<HTMLInputElement>document.getElementById("chatentry")!).value;

@@ 27,6 27,11 @@ export interface GlobalData {
 
     parts_map: Map<number, Part>,
 
+    up: boolean,
+    down: boolean,
+    left: boolean,
+    right: boolean,
+
     rendering: GlobalRendering | null
 }
 


@@ 46,6 51,10 @@ export const global: GlobalData = {
     inverse_players_map: new Map(),
     planets_map: new Map(),
     parts_map: new Map(),
+    up: false,
+    down: false,
+    left: false,
+    right: false,
     rendering: null
 }
 

@@ 32,6 32,12 @@ export interface PlanetPositionsPacket {
 export interface PartPositionsPacket {
     parts: [number, Part][]
 }
+export interface PlayerInputPacket {
+    up: boolean,
+    down: boolean,
+    left: boolean,
+    right: boolean,
+}
 export interface PlayerListPacket {
     players: [number, string][]
 }


@@ 58,6 64,7 @@ export enum PacketType {
     // serverbound
     ClientLogin = "ClientLogin",
     SendMessage = "SendMessage",
+    PlayerInput = "PlayerInput",
     // clientbound
     SpawnPlayer = "SpawnPlayer",
     PlayerList = "PlayerList",


@@ 69,10 76,10 @@ export enum PacketType {
 
 export interface Packet {
     t: PacketType,
-    c: ClientLoginPacket | SpawnPlayerPacket | PlayerListPacket | PlanetPositionsPacket | PartPositionsPacket | PlayerLeavePacket | SendMessagePacket | MessagePacket
+    c: ClientLoginPacket | SpawnPlayerPacket | PlayerListPacket | PlanetPositionsPacket | PartPositionsPacket | PlayerLeavePacket | SendMessagePacket | MessagePacket | PlayerInputPacket
 }
 
-export const SERVERBOUND = [PacketType.ClientLogin, PacketType.SendMessage];
+export const SERVERBOUND = [PacketType.ClientLogin, PacketType.SendMessage, PacketType.PlayerInput];
 export const CLIENTBOUND = [PacketType.SpawnPlayer, PacketType.PlayerList, PacketType.PlanetPositions, PacketType.PartPositions, PacketType.PlayerLeave, PacketType.Message];
 
 export enum Direction {