itsscb/wordl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: adds solution on game over

Browse Source
This commit is contained in:
itsscb 2024-08-22 21:33:05 +02:00
parent 6b9e50ef43
commit 6e26cff4d9
8 changed files with 113 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/dist/index.html vendored
View File

@ -4,18 +4,18 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>wordl</title> <title>wordl</title>
<link rel="stylesheet" href="/styles-ee33d68e538eb411.css" integrity="sha384&#x2D;VemAqPaskVP87p4noZgkqPXi9J04CRYEjIS2QPGi7Odp6o&#x2B;XdpPGWYbkxwQuac0P"/> <link rel="stylesheet" href="/styles-156da33909a8dcda.css" integrity="sha384&#x2D;OUAnLtgaHRtUJCqGxKaXB&#x2B;08L7WjOJ8noyHNKzUmIF0MVaX8OvQp2nEwcOuWTE2c"/>
<!-- <link data-trunk href="./assets/favicon.ico" rel="icon" type="image/x-icon"> --> <!-- <link data-trunk href="./assets/favicon.ico" rel="icon" type="image/x-icon"> -->
<link rel="manifest" href="public/manifest.json" /> <link rel="manifest" href="public/manifest.json" />
<link rel="modulepreload" href="/wordl-frontend-f12cb96db58e762c.js" crossorigin=anonymous integrity="sha384-bBxFiVwzR66Z1hv0ruG4aGTidjq8XBRcL0Crsv4fRIK6kj1hmLn4dH0tm6t9qsCH"> <link rel="modulepreload" href="/wordl-frontend-590cf90ac3202d86.js" crossorigin=anonymous integrity="sha384-YfcyUtskzvmk1ZFFoDAlBKcXGliokP+ONHDzdyJ+ackDIvDUSi8e+7NWFKvrIDPt">
<link rel="preload" href="/wordl-frontend-f12cb96db58e762c_bg.wasm" crossorigin=anonymous integrity="sha384-rH9nswm1hLZCk8ksVMGninp4DCq3b/MGGV6gv4p6gPvfWUVvNswadaIr2RbcyaNS" as="fetch" type="application/wasm"></head> <link rel="preload" href="/wordl-frontend-590cf90ac3202d86_bg.wasm" crossorigin=anonymous integrity="sha384-bhZ9Dih2QagSkTdJkriTyWwvkqvh6kxGpgZQ5Vd85yjQA/yaLz4DDnb3s/nv+SrG" as="fetch" type="application/wasm"></head>
<body class="bg-black text-white"> <body class="bg-black text-white">
<script type="module" nonce="FBx2FAPOfqu3mKchrgJ5jg=="> <script type="module" nonce="/KYzfPoyPTVa0oOSCHhDrQ==">
import init, * as bindings from '/wordl-frontend-f12cb96db58e762c.js'; import init, * as bindings from '/wordl-frontend-590cf90ac3202d86.js';
const wasm = await init('/wordl-frontend-f12cb96db58e762c_bg.wasm'); const wasm = await init('/wordl-frontend-590cf90ac3202d86_bg.wasm');
window.wasmBindings = bindings; window.wasmBindings = bindings;

18
frontend/dist/public/styles.css vendored
View File

@ -566,8 +566,8 @@ video {
order: 9999; order: 9999;
} }
.mt-12 { .mt-6 {
margin-top: 3rem; margin-top: 1.5rem;
} }
.mt-8 { .mt-8 {
@ -582,8 +582,8 @@ video {
height: 4rem; height: 4rem;
} }
.h-4\/6 { .h-5\/6 {
height: 66.666667%; height: 83.333333%;
} }
.h-screen { .h-screen {
@ -646,6 +646,11 @@ video {
background-color: rgb(55 65 81 / var(--tw-bg-opacity)); background-color: rgb(55 65 81 / var(--tw-bg-opacity));
} }
.bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.bg-green-400 { .bg-green-400 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(74 222 128 / var(--tw-bg-opacity)); background-color: rgb(74 222 128 / var(--tw-bg-opacity));
@ -656,6 +661,11 @@ video {
background-color: rgb(21 128 61 / var(--tw-bg-opacity)); background-color: rgb(21 128 61 / var(--tw-bg-opacity));
} }
.bg-red-200 {
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}
.bg-yellow-400 { .bg-yellow-400 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(250 204 21 / var(--tw-bg-opacity)); background-color: rgb(250 204 21 / var(--tw-bg-opacity));

18
frontend/dist/styles-ee33d68e538eb411.css → frontend/dist/styles-156da33909a8dcda.css vendored
View File

@ -566,8 +566,8 @@ video {
order: 9999; order: 9999;
} }
.mt-12 { .mt-6 {
margin-top: 3rem; margin-top: 1.5rem;
} }
.mt-8 { .mt-8 {
@ -582,8 +582,8 @@ video {
height: 4rem; height: 4rem;
} }
.h-4\/6 { .h-5\/6 {
height: 66.666667%; height: 83.333333%;
} }
.h-screen { .h-screen {
@ -646,6 +646,11 @@ video {
background-color: rgb(55 65 81 / var(--tw-bg-opacity)); background-color: rgb(55 65 81 / var(--tw-bg-opacity));
} }
.bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.bg-green-400 { .bg-green-400 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(74 222 128 / var(--tw-bg-opacity)); background-color: rgb(74 222 128 / var(--tw-bg-opacity));
@ -656,6 +661,11 @@ video {
background-color: rgb(21 128 61 / var(--tw-bg-opacity)); background-color: rgb(21 128 61 / var(--tw-bg-opacity));
} }
.bg-red-200 {
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}
.bg-yellow-400 { .bg-yellow-400 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(250 204 21 / var(--tw-bg-opacity)); background-color: rgb(250 204 21 / var(--tw-bg-opacity));

12
frontend/dist/wordl-frontend-f12cb96db58e762c.js → frontend/dist/wordl-frontend-590cf90ac3202d86.js vendored
View File

@ -958,16 +958,16 @@ function __wbg_get_imports() {
const ret = wasm.memory; const ret = wasm.memory;
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbindgen_closure_wrapper916 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper919 = function(arg0, arg1, arg2) {
const ret = makeClosure(arg0, arg1, 381, __wbg_adapter_38); const ret = makeClosure(arg0, arg1, 382, __wbg_adapter_38);
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbindgen_closure_wrapper1023 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper1026 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 408, __wbg_adapter_41); const ret = makeMutClosure(arg0, arg1, 409, __wbg_adapter_41);
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbindgen_closure_wrapper1116 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper1119 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 446, __wbg_adapter_44); const ret = makeMutClosure(arg0, arg1, 447, __wbg_adapter_44);
return addHeapObject(ret); return addHeapObject(ret);
}; };

BIN
frontend/dist/wordl-frontend-590cf90ac3202d86_bg.wasm vendored Normal file
View File

Binary file not shown.

BIN
frontend/dist/wordl-frontend-f12cb96db58e762c_bg.wasm vendored
View File

Binary file not shown.

18
frontend/public/styles.css
View File

@ -566,8 +566,8 @@ video {
order: 9999; order: 9999;
} }
.mt-12 { .mt-6 {
margin-top: 3rem; margin-top: 1.5rem;
} }
.mt-8 { .mt-8 {
@ -582,8 +582,8 @@ video {
height: 4rem; height: 4rem;
} }
.h-4\/6 { .h-5\/6 {
height: 66.666667%; height: 83.333333%;
} }
.h-screen { .h-screen {
@ -646,6 +646,11 @@ video {
background-color: rgb(55 65 81 / var(--tw-bg-opacity)); background-color: rgb(55 65 81 / var(--tw-bg-opacity));
} }
.bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.bg-green-400 { .bg-green-400 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(74 222 128 / var(--tw-bg-opacity)); background-color: rgb(74 222 128 / var(--tw-bg-opacity));
@ -656,6 +661,11 @@ video {
background-color: rgb(21 128 61 / var(--tw-bg-opacity)); background-color: rgb(21 128 61 / var(--tw-bg-opacity));
} }
.bg-red-200 {
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}
.bg-yellow-400 { .bg-yellow-400 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(250 204 21 / var(--tw-bg-opacity)); background-color: rgb(250 204 21 / var(--tw-bg-opacity));

97
frontend/src/pages/home.rs
View File

@ -1,13 +1,10 @@
// use gloo_console::log; use tracing::{debug, error};
use tracing::{debug, error, info};
use gloo_net::http::Request; use gloo_net::http::Request;
use serde::{Deserialize, Serialize};
use web_sys::wasm_bindgen::convert::OptionIntoWasmAbi; use web_sys::wasm_bindgen::convert::OptionIntoWasmAbi;
use web_sys::wasm_bindgen::JsCast; use web_sys::wasm_bindgen::JsCast;
use web_sys::HtmlElement; use web_sys::HtmlElement;
use yew::prelude::*; use yew::prelude::*;
use yew::{classes, function_component, Callback, Html}; use yew::{classes, function_component, Callback, Html};
// use yew::{FetchTask, Request, Response, FetchService};
use crate::CharStatus; use crate::CharStatus;
@ -41,7 +38,7 @@ fn string_to_html(input: &[CharStatus<String>]) -> Html {
"font-bold", "font-bold",
"text-lg", "text-lg",
); );
html! { html! (
<ul <ul
class={ class={
classes!( classes!(
@ -67,7 +64,7 @@ fn string_to_html(input: &[CharStatus<String>]) -> Html {
s s
}, },
CharStatus::NotContained(s) => { CharStatus::NotContained(s) => {
classes.push("bg-gray-700"); classes.push("bg-gray-900");
classes.push("border-white"); classes.push("border-white");
classes.push("border-2"); classes.push("border-2");
s s
@ -96,35 +93,7 @@ fn string_to_html(input: &[CharStatus<String>]) -> Html {
}}).collect::<Html>() }}).collect::<Html>()
} }
</ul> </ul>
} )
}
#[derive(Serialize, Deserialize, Debug)]
struct Word(String);
#[allow(dead_code)]
fn get_word(handle: UseStateHandle<String>) {
use_effect_with((), move |()| {
wasm_bindgen_futures::spawn_local(async move {
info!("retreiving word");
let res = Request::get(NEW_WORD_URI).send().await;
debug!(RESULT = format!("{res:?}"));
match res {
Ok(r) => {
debug!(RESPONSE = format!("{r:?}"));
match r.text().await {
Ok(w) => {
debug!(WORD = &w);
handle.set(w);
}
Err(e) => error!(ERROR = format!("{e:?}"),"failed to get request body"),
}
}
Err(e) => error!(ERROR = format!("{e:?}"),"failed to retreive word"),
}
});
|| ()
});
} }
fn fetch_new_word( fn fetch_new_word(
@ -249,7 +218,7 @@ pub fn Home() -> Html {
let length = length.clone(); let length = length.clone();
let word = word.clone(); let word = word.clone();
let node_refs = node_refs.clone(); let node_refs = node_refs.clone();
let loading = loading.clone(); let loading = loading.clone();
Callback::from(move |_e: MouseEvent| { Callback::from(move |_e: MouseEvent| {
@ -271,6 +240,8 @@ let loading = loading.clone();
let mut new_items = (*submitted_words).clone(); let mut new_items = (*submitted_words).clone();
new_items.push(crate::compare_strings(&word, &values.join(""))); new_items.push(crate::compare_strings(&word, &values.join("")));
submitted_words.set(new_items); submitted_words.set(new_items);
input_values.set(vec![String::new(); word.len()]);
set_focus(0);
game_over_check.emit(MouseEvent::none()); game_over_check.emit(MouseEvent::none());
}) })
}; };
@ -295,7 +266,7 @@ let loading = loading.clone();
classes!( classes!(
"flex", "flex",
"flex-col", "flex-col",
"mt-12", "mt-6",
"items-center", "items-center",
"h-screen", "h-screen",
) )
@ -303,7 +274,7 @@ let loading = loading.clone();
> >
// <h1>{(*word).clone()} {" NODE_REFS: "}{node_refs.len()} {" WORD_LEN: "}{*length}</h1> // <h1>{(*word).clone()} {" NODE_REFS: "}{node_refs.len()} {" WORD_LEN: "}{*length}</h1>
<div <div
class="h-4/6 flex flex-col" class="h-5/6 flex flex-col"
> >
<form <form
class="order-last mt-8" class="order-last mt-8"
@ -323,6 +294,56 @@ let loading = loading.clone();
if *loading { if *loading {
html!(<p>{"Loading..."}</p>) html!(<p>{"Loading..."}</p>)
} }
else if *game_over {
html! (
<div>
<h1>{"WANTED"}</h1>
<ul
class={
classes!(
"flex",
"flex-row",
"gap-4",
"notranslate",
)
}
>
{
word.chars().map(|e|{
let text = e;
html!{
<li
class={
classes!(
"flex",
"items-center"
)
}
>
<span
class={
classes!(
"bg-gray-700",
"w-16",
"h-16",
"text-center",
"py-4",
"font-bold",
"text-lg",
"bg-red-200",
)
}
>
{text}
</span>
</li>
}}).collect::<Html>()
}
</ul>
</div>
)
}
else if !*game_over { else if !*game_over {
node_refs.iter().enumerate().map(|(index, node_ref)| { node_refs.iter().enumerate().map(|(index, node_ref)| {
let on_input = { let on_input = {