Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make Smithe Multi-Page #71

Merged
merged 3 commits into from
Jan 2, 2024
Merged

Make Smithe Multi-Page #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
08dff4a
Make Smithe Multi-Page
danbugs Jan 2, 2024
01a1372
fix && fmt
danbugs Jan 2, 2024
7252952
sorting tournaments and fetched players
danbugs Jan 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions Cargo.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions frontend/Cargo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ serde = { version = "1", features = ["derive"]}
country-emoji = "0.2"
js-sys = "0.3"
wasm-bindgen = "0.2"
yew-router = "0.18"

[dependencies.web-sys]
version = "0.3"
Expand Down
2 changes: 1 addition & 1 deletion frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<link data-trunk rel="copy-dir" href="assets/">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin' rel='stylesheet' type='text/css' />
<link rel="icon" type="image/png" href="./assets/favicon.png" />
<link rel="icon" type="image/png" href="/assets/favicon.png" />
<style type="text/css">
body {
font-family: 'Ubuntu', sans-serif;
Expand Down
15 changes: 7 additions & 8 deletions frontend/src/components/header.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
use yew::{function_component, html, Html, Properties};

#[derive(Properties, PartialEq)]
pub struct Props {
pub display: bool,
}
use yew::{function_component, html, Html};
use yew_router::hooks::use_location;

#[function_component(Header)]
pub fn header(props: &Props) -> Html {
if props.display {
pub fn header() -> Html {
let location = use_location().unwrap();
let display = if location.path() == "/" { true } else { false };

if display {
html! {
<div class="text-center p-5" style="background-color:#C6263E;">
<img src="assets/smithe_header.svg" width="75%" height="75%" class="img-fluid" alt="" />
Expand Down
34 changes: 23 additions & 11 deletions frontend/src/components/navbar.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,34 @@
use web_sys::KeyboardEvent;
use yew::{function_component, html, Callback, Html, Properties};
use web_sys::{HtmlInputElement, KeyboardEvent};
use yew::{function_component, html, Callback, Html, TargetCast};
use yew_router::{components::Link, hooks::use_navigator};

#[derive(Properties, PartialEq)]
pub struct Props {
pub onkeypress: Callback<KeyboardEvent>,
}
use crate::Route;

#[function_component(NavBar)]
pub fn navbar(props: &Props) -> Html {
pub fn navbar() -> Html {
let navigator = use_navigator().unwrap();
let onkeypress = Callback::from(move |e: KeyboardEvent| {
if e.key() == "Enter" {
let input: HtmlInputElement = e.target_unchecked_into();
let value = input.value();
input.set_value("");
navigator.replace(&Route::PlayerList {
gamer_tag: value.clone(),
});
}
});

html! {
<nav class="navbar navbar-light" style="background-color:#C6263E">
<div class="container-fluid">
<a class="navbar-brand" href="">
<img src="assets/smithe_logo-white_variant.png" style="width: 50%; height: 50%" alt="logo" class="d-inline-block align-text-top"/>
</a>
<div class="navbar-brand">
<Link<Route> to={Route::Home}>
<img src="/assets/smithe_logo-white_variant.png" style="width: 50%; height: 50%" alt="logo" class="d-inline-block align-text-top"/>
</Link<Route>>
</div>
<div class="navbar-nav ms-auto">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for a player" onkeypress={props.onkeypress.clone()}/>
<input type="text" class="form-control" placeholder="Search for a player" {onkeypress}/>
</div>
</div>
</div>
Expand Down
168 changes: 104 additions & 64 deletions frontend/src/components/player_list.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,80 +1,120 @@
use country_emoji::flag;
use web_sys::MouseEvent;
use yew::{function_component, html, Callback, Html, Properties};
use gloo_net::http::Request;

use crate::models::Player;
use yew::{function_component, html, use_effect_with, use_state, Callback, Html, Properties};
use yew_router::hooks::use_navigator;

use crate::{components::loading_spinner::LoadingSpinner, models::Player};

#[derive(Properties, PartialEq)]
pub struct Props {
pub full_display: bool,
pub alternate_display: bool,
pub search_results: Vec<Player>,
pub onclick: Callback<MouseEvent>,
pub gamer_tag: String,
}

#[function_component(PlayerList)]
pub fn player_list(props: &Props) -> Html {
if props.full_display {
html! {
let navigator = use_navigator().unwrap();

let gamer_tag = props.gamer_tag.clone();
let loading = use_state(|| false);
let search_results = use_state(|| Vec::<Player>::new());

{
let search_results = search_results.clone();
let loading = loading.clone();

use_effect_with(gamer_tag.clone(), move |_| {
wasm_bindgen_futures::spawn_local(async move {
loading.set(true);

let endpoint = format!("{}/players/{}", env!("SERVER_ADDRESS"), gamer_tag);
let mut fetched_players: Vec<Player> = Request::get(&endpoint)
.send()
.await
.unwrap()
.json()
.await
.unwrap();

fetched_players.sort_by_key(|e| e.player_id);

search_results.set(fetched_players);

loading.set(false);
});
});
}

html! {
<>
if *loading {
<div class="col-md-12 mb-5">
<br/>
<br/>
<ul class="list-group list-group-hover list-group-striped">
{
props.search_results.iter().map(|p| {
html! {
<button type="button"
class="list-group-item d-flex justify-content-between align-items-center"
onclick={props.onclick.clone()}
id={p.player_id.to_string()}
key={p.player_id}>
<div class="d-flex align-items-center">
<img referrerpolicy="no-referrer" src={
if let Some(ppp) = p.profile_picture.clone() {
ppp
} else {
"https://i.imgur.com/78M17SL.png".to_string()
}} alt="profile_picture" style="width: 45px; height: 45px"
class="rounded-circle" />
<div class="ms-3">
<p class="fw-bold mb-1">
{
if p.prefix.is_none() || p.prefix.as_ref().unwrap().is_empty() {
(&p.gamer_tag).to_string()
} else {
format!("{} | {}", p.prefix.as_ref().unwrap(), &p.gamer_tag)
}
}</p>
</div>
</div>
<span>
{
if let Some(pc) = p.country.clone() {
flag(&pc).unwrap_or("".to_string())
} else {
"".to_string()
}
}
</span>
</button>
}
}).collect::<Html>()
}
</ul>
<br/>
</div>
}
} else if props.alternate_display {
html! {
<div class="text-center" style="color:#C6263E">
<br/>
<br/>
<h2>{"• • •"}</h2>
<LoadingSpinner/>
</div>
} else {
if (*search_results).is_empty() {
<div class="text-center" style="color:#C6263E">
<br/>
<br/>
<h2>{"No results"}</h2>
</div>
} else {
<div class="col-md-12 mb-5">
<br/>
<br/>
<ul class="list-group list-group-hover list-group-striped">
{
(*search_results).iter().map(|p| {
let player_id = p.player_id;
let navigator = navigator.clone();
let onclick = Callback::from(move |_| {
navigator.replace(&crate::Route::PlayerProfile { player_id });
});
html! {
<button type="button"
class="list-group-item d-flex justify-content-between align-items-center"
{onclick}
id={p.player_id.to_string()}
key={p.player_id}>
<div class="d-flex align-items-center">
<img referrerpolicy="no-referrer" src={
if let Some(ppp) = p.profile_picture.clone() {
ppp
} else {
"https://i.imgur.com/78M17SL.png".to_string()
}} alt="profile_picture" style="width: 45px; height: 45px"
class="rounded-circle" />
<div class="ms-3">
<p class="fw-bold mb-1">
{
if p.prefix.is_none() || p.prefix.as_ref().unwrap().is_empty() {
(&p.gamer_tag).to_string()
} else {
format!("{} | {}", p.prefix.as_ref().unwrap(), &p.gamer_tag)
}
}</p>
</div>
</div>
<span>
{
if let Some(pc) = p.country.clone() {
flag(&pc).unwrap_or("".to_string())
} else {
"".to_string()
}
}
</span>
</button>
}
}).collect::<Html>()
}
</ul>
<br/>
</div>
}
}
} else {
html! {
<div></div>
}
</>
}
}
Loading
Loading