Client (#90)

* fix build

* glcanvas is already present

* screen size

* minimize

* add test

* screen size

* cleanup

* use primitives directly

* avoid option in actions because mongo strips null values

* cleanup

* cleanup

* cleanup

* cleanup

Author: zeitlinger

README.md

@@ -19,7 +19,7 @@
 
 - `cd server`
 - `cargo install wasm-pack` (if you haven't already)
-- `./build-wasm.sh`
+- `./build-remote-server.sh`
 
 # Notes
 

client/Cargo.lock

@@ -27,6 +27,8 @@ log = "0.4.20"
 async-std = "1.13.0"
 serde-wasm-bindgen = "0.6.5"
 console_error_panic_hook = "0.1.7"
+web-sys = { version = "0.3.72", features = ["Window"] }
+js-sys = "0.3.72"
 
 [[bin]]
 name = "local_client"

client/Cargo.toml

@@ -44,6 +44,10 @@ export class Control extends EventEmitter {
         this.emit("ready");
     }
 
+    get canvas_size() {
+        return document.getElementById("glcanvas").getBoundingClientRect();
+    }
+
     get assets_url() {
         return this._assets_url;
     }
@@ -53,9 +57,6 @@ export class Control extends EventEmitter {
     }
 }
 
-export function get_control() {
-    return window.clash_control;
-}
 
 
 

client/js/src/control.js

@@ -9,32 +9,24 @@ function dynamicallyLoadScript(url, onload) {
 }
 
 export async function run({selector, control}) {
-    const root = document.querySelector(selector);
-    const canvas = document.createElement("canvas");
-    canvas.setAttribute("id", "glcanvas");
-    canvas.setAttribute("style", ` 
-                margin: 0px;
-                padding: 0px;
-                width: 100%;
-                height: 100%;
-                overflow: hidden;
-                position: absolute;
-                z-index: 0;
-    `);
-    root.appendChild(canvas);
-
-    dynamicallyLoadScript("https://not-fl3.github.io/miniquad-samples/mq_js_bundle.js", async () => {
         let wbg = await init();
-        miniquad_add_plugin({
-            register_plugin: (a) => (a.wbg = wbg),
-            on_init: () => set_wasm(wasm_exports),
-            version: "0.0.1",
-            name: "wbg",
-        });
-        const src = document.head.getElementsByTagName("script")[0].src;
-        control.assets_url = src.replace("client.js", "assets/");
-        const url = src.replace("client.js", "client.wasm");
-        console.log("Loading wasm from", url);
-        await load(url);
-    });
+         miniquad_add_plugin({
+             register_plugin: (a) => {
+                 console.log("register_plugin", a);
+                 return (a.wbg = wbg)
+             },
+             on_init: () => {
+                 console.log("on_init", wasm_exports);
+                 window.clash_control.send_ready()
+                 return set_wasm(wasm_exports)
+             },
+             version: "0.0.1",
+             name: "wbg",
+         });
+         const src = document.body.getElementsByTagName("script")[1].src;
+         control.assets_url = src.replace("client.js", "assets/");
+         const url = src.replace("client.js", "client.wasm");
+         console.log("Loading wasm from", url);
+         await load(url);
+         console.log("Loaded wasm");
 }

client/js/src/run.js

@@ -6,7 +6,7 @@ module.exports = {
     }, resolve: {
         fallback: {"events": require.resolve("events/")}
     }, optimization: {
-        minimize: false
+        minimize: true
     },
 };
 

client/js/webpack.config.js

@@ -21,7 +21,9 @@ use crate::status_phase_ui::raze_city_confirm_dialog;
 use crate::{combat_ui, dialog_ui, influence_ui, move_ui, recruit_unit_ui, status_phase_ui};
 
 pub async fn init(features: &Features) -> State {
-    State::new(features).await
+    let state = State::new(features).await;
+    root_ui().push_skin(&state.assets.skin);
+    state
 }
 
 pub fn render_and_update(
@@ -45,13 +47,14 @@ pub fn render_and_update(
 }
 
 fn render(game: &Game, state: &mut State, features: &Features) -> StateUpdate {
-    root_ui().push_skin(&state.assets.skin);
     clear_background(BLACK);
 
     let player = &state.shown_player(game);
 
+    let s = state.screen_size;
+
     state.camera = Camera2D {
-        zoom: vec2(state.zoom, state.zoom * screen_width() / screen_height()),
+        zoom: vec2(state.zoom, state.zoom * s.x / s.y),
         offset: state.offset,
         ..Default::default()
     };

client/src/client.rs

@@ -221,6 +221,7 @@ pub struct ShownPlayer {
     pub can_play_action: bool,
     pub active_dialog: ActiveDialog,
     pub pending_update: bool,
+    pub screen_size: Vec2,
 }
 
 impl ShownPlayer {
@@ -239,6 +240,7 @@ pub struct State {
     pub camera: Camera2D,
     pub zoom: f32,
     pub offset: Vec2,
+    pub screen_size: Vec2,
 }
 
 pub const ZOOM: f32 = 0.001;
@@ -257,6 +259,7 @@ impl State {
             },
             zoom: ZOOM,
             offset: OFFSET,
+            screen_size: vec2(0., 0.),
         }
     }
 
@@ -270,6 +273,7 @@ impl State {
             can_play_action: control && game.state == GameState::Playing && game.actions_left > 0,
             active_dialog: self.active_dialog.clone(),
             pending_update: self.pending_update.is_some(),
+            screen_size: self.screen_size,
         }
     }
 
@@ -374,7 +378,7 @@ impl State {
             GameState::StatusPhase(state) => match state {
                 StatusPhaseState::CompleteObjectives => ActiveDialog::CompleteObjectives,
                 StatusPhaseState::FreeAdvance => ActiveDialog::FreeAdvance,
-                StatusPhaseState::RaseSize1City => ActiveDialog::RazeSize1City,
+                StatusPhaseState::RazeSize1City => ActiveDialog::RazeSize1City,
                 StatusPhaseState::ChangeGovernmentType => ActiveDialog::ChangeGovernmentType,
                 StatusPhaseState::DetermineFirstPlayer => ActiveDialog::DetermineFirstPlayer,
             },

client/src/client_state.rs

@@ -1,4 +1,4 @@
-use server::action::{Action, CombatAction};
+use server::action::{Action, CombatAction, PlayActionCard};
 use server::game::Game;
 use server::position::Position;
 use server::unit::Unit;
@@ -105,7 +105,9 @@ pub fn remove_casualties_dialog(
 pub fn play_action_card_dialog(player: &ShownPlayer) -> StateUpdate {
     active_dialog_window(player, "Play action card", |ui| {
         if ui.button(None, "None") {
-            return StateUpdate::Execute(Action::Combat(CombatAction::PlayActionCard(None)));
+            return StateUpdate::Execute(Action::Combat(CombatAction::PlayActionCard(
+                PlayActionCard::None,
+            )));
         }
         StateUpdate::None
     })

client/src/combat_ui.rs

@@ -10,7 +10,7 @@ use server::city_pieces::Building;
 use server::content::custom_actions::CustomAction;
 use server::game::Game;
 use server::map::{Map, Terrain};
-use server::playing_actions::PlayingAction;
+use server::playing_actions::{Construct, PlayingAction};
 use server::position::Position;
 use server::resource_pile::PaymentOptions;
 use server::unit::UnitType;
@@ -106,13 +106,13 @@ pub fn pay_construction_dialog(
         |cp| cp.payment.get(ResourceType::Discount).selectable.current == 0,
         |cp| match &cp.project {
             ConstructionProject::Building(b, pos) => StateUpdate::execute_activation(
-                Action::Playing(PlayingAction::Construct {
+                Action::Playing(PlayingAction::Construct(Construct {
                     city_position: cp.city_position,
                     city_piece: b.clone(),
                     payment: cp.payment.to_resource_pile(),
                     port_position: *pos,
                     temple_bonus: None,
-                }),
+                })),
                 vec![],
                 game.get_any_city(cp.city_position).unwrap(),
             ),

client/src/construct_ui.rs

@@ -2,10 +2,8 @@ use crate::client_state::{PendingUpdate, ShownPlayer, StateUpdate};
 use crate::layout_ui::{cancel_pos, ok_only_pos, ok_pos};
 use macroquad::hash;
 use macroquad::math::{vec2, Vec2};
-use macroquad::prelude::screen_height;
 use macroquad::ui::widgets::Window;
 use macroquad::ui::{root_ui, Ui};
-use macroquad::window::screen_width;
 
 pub fn active_dialog_window<F>(player: &ShownPlayer, title: &str, f: F) -> StateUpdate
 where
@@ -24,11 +22,12 @@ pub fn dialog<F>(player: &ShownPlayer, title: &str, f: F) -> StateUpdate
 where
     F: FnOnce(&mut Ui) -> StateUpdate,
 {
-    let width = screen_width() - 20.;
+    let size = player.screen_size;
+    let width = size.x - 20.;
     let size = if player.active_dialog.is_map_dialog() {
         vec2(width / 2.0, 270.)
     } else {
-        vec2(width, screen_height() - 40.)
+        vec2(width, size.y - 40.)
     };
     custom_dialog(title, vec2(10., 10.), size, f)
 }

client/src/dialog_ui.rs

@@ -1,49 +1,58 @@
 use crate::client_state::ShownPlayer;
 use macroquad::math::{vec2, Vec2};
-use macroquad::prelude::screen_height;
 use macroquad::ui::root_ui;
-use macroquad::window::screen_width;
 
 pub fn top_left_label(p: Vec2, label: &str) {
     root_ui().label(p, label);
 }
 
-pub fn top_center_label(p: Vec2, label: &str) {
-    root_ui().label(vec2(screen_width() / 2.0, 0.) + p, label);
+pub fn top_center_label(player: &ShownPlayer, p: Vec2, label: &str) {
+    root_ui().label(vec2(player.screen_size.x / 2.0, 0.) + p, label);
 }
 
-pub fn right_center_label(p: Vec2, label: &str) {
-    root_ui().label(vec2(screen_width(), screen_height() / 2.0) + p, label);
+pub fn right_center_label(player: &ShownPlayer, p: Vec2, label: &str) {
+    root_ui().label(
+        vec2(player.screen_size.x, player.screen_size.y / 2.0) + p,
+        label,
+    );
 }
 
-pub fn right_center_button(p: Vec2, label: &str) -> bool {
-    root_ui().button(vec2(screen_width(), screen_height() / 2.0) + p, label)
+pub fn right_center_button(player: &ShownPlayer, p: Vec2, label: &str) -> bool {
+    root_ui().button(
+        vec2(player.screen_size.x, player.screen_size.y / 2.0) + p,
+        label,
+    )
 }
 
-pub fn bottom_left_button(p: Vec2, label: &str) -> bool {
-    root_ui().button(vec2(0., screen_height()) + p, label)
+pub fn bottom_left_button(player: &ShownPlayer, p: Vec2, label: &str) -> bool {
+    root_ui().button(vec2(0., player.screen_size.y) + p, label)
 }
 
-pub fn bottom_right_button(p: Vec2, label: &str) -> bool {
-    root_ui().button(vec2(screen_width(), screen_height()) + p, label)
+pub fn bottom_right_button(player: &ShownPlayer, p: Vec2, label: &str) -> bool {
+    root_ui().button(vec2(player.screen_size.x, player.screen_size.y) + p, label)
 }
 
 pub fn cancel_pos(player: &ShownPlayer) -> Vec2 {
     small_dialog(player)
-        .then(|| Vec2::new(screen_width() / 4.0, 190.))
-        .unwrap_or_else(|| Vec2::new(screen_width() / 2., screen_height() - 130.))
+        .then(|| Vec2::new(player.screen_size.x / 4.0, 190.))
+        .unwrap_or_else(|| Vec2::new(player.screen_size.x / 2., player.screen_size.y - 130.))
 }
 
 pub fn ok_pos(player: &ShownPlayer) -> Vec2 {
     small_dialog(player)
-        .then(|| Vec2::new(screen_width() / 4.0 - 150., 190.))
-        .unwrap_or_else(|| Vec2::new(screen_width() / 2. - 150., screen_height() - 130.))
+        .then(|| Vec2::new(player.screen_size.x / 4.0 - 150., 190.))
+        .unwrap_or_else(|| {
+            Vec2::new(
+                player.screen_size.x / 2. - 150.,
+                player.screen_size.y - 130.,
+            )
+        })
 }
 
 pub fn ok_only_pos(player: &ShownPlayer) -> Vec2 {
     small_dialog(player)
-        .then(|| Vec2::new(screen_width() / 4.0 - 75., 190.))
-        .unwrap_or_else(|| Vec2::new(screen_width() / 2. - 75., screen_height() - 130.))
+        .then(|| Vec2::new(player.screen_size.x / 4.0 - 75., 190.))
+        .unwrap_or_else(|| Vec2::new(player.screen_size.x / 2. - 75., player.screen_size.y - 130.))
 }
 
 fn small_dialog(player: &ShownPlayer) -> bool {

client/src/layout_ui.rs

@@ -2,7 +2,8 @@
 
 use client::client::{init, render_and_update, Features, GameSyncRequest, GameSyncResult};
 use macroquad::miniquad::window::set_window_size;
-use macroquad::prelude::next_frame;
+use macroquad::prelude::{next_frame, screen_width, vec2};
+use macroquad::window::screen_height;
 use server::city::City;
 use server::game::{Game, GameData};
 use server::leader::Leader;
@@ -39,6 +40,7 @@ pub async fn run(mut game: Game, features: &Features) {
     state.show_player = game.active_player();
     loop {
         state.control_player = Some(game.active_player());
+        state.screen_size = vec2(screen_width(), screen_height());
 
         let message = render_and_update(&game, &mut state, &sync_result, features);
         sync_result = GameSyncResult::None;