diff --git a/frontend/Cargo.toml b/frontend/Cargo.toml
index 25019e7..3267f17 100644
--- a/frontend/Cargo.toml
+++ b/frontend/Cargo.toml
@@ -6,7 +6,7 @@ edition = "2021"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies]
-web-sys = {version="0.3.69", features = ["HtmlInputElement"]}
+web-sys = { version = "0.3.69", features = ["HtmlElement", "HtmlInputElement", "KeyboardEvent"] }
yew = { version = "0.21.0", features = ["csr"] }
yew-router = { version = "0.18.0"}
gloo-console = "0.3.0"
diff --git a/frontend/dist/index.html b/frontend/dist/index.html
index 78f31f6..f3562fb 100644
--- a/frontend/dist/index.html
+++ b/frontend/dist/index.html
@@ -4,18 +4,18 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>wordl</title>
- <link rel="stylesheet" href="/styles-2541dfb893d8d665.css" integrity="sha384-gBtRF8AZNuyiqW77oeeQ3vvVnN7LannIbfF4tCrknbd7ZGl4KDroyDlBfuhmsLaX"/>
+ <link rel="stylesheet" href="/styles-62f31a7ac0d15d40.css" integrity="sha384-iBFbymeolxY9g+4zN6o+eoSTHonPTFiTdAJ/ggyMztm7uHSK9zqHN1pNtnpl4TkK"/>
<!-- <link data-trunk href="./assets/favicon.ico" rel="icon" type="image/x-icon"> -->
<link rel="manifest" href="public/manifest.json" />
-<link rel="modulepreload" href="/wordl-frontend-68fa4b7d7830dfbb.js" crossorigin=anonymous integrity="sha384-YU/CU4gGFFrFoyOJ2eYCXSd22OAUpef1K/A82O5ijuRwX9cmbHT7kOuYnGw8arKW">
-<link rel="preload" href="/wordl-frontend-68fa4b7d7830dfbb_bg.wasm" crossorigin=anonymous integrity="sha384-n64t6Tt+75vEM47HI00t9d7w31GunZpvU/dTe9sswC1Gff9YDj55GVYexRRUrdP3" as="fetch" type="application/wasm"></head>
+<link rel="modulepreload" href="/wordl-frontend-16b1e360c4ee323a.js" crossorigin=anonymous integrity="sha384-iqrw7WlLIzk+1Y65/9QKxUfDPwC7SPkX1QWrdVdpdQCqG76MP05QK1QNXpdNy/gT">
+<link rel="preload" href="/wordl-frontend-16b1e360c4ee323a_bg.wasm" crossorigin=anonymous integrity="sha384-GooTbyTLftDpqVgJSdiBBSZXPMG+xxANPFX1DmCAwHJsRknOoqjvT2PEtBSasTuF" as="fetch" type="application/wasm"></head>
<body class="bg-black text-white">
-<script type="module" nonce="yL/PHBkhXPSvs3JOymxI8w==">
-import init, * as bindings from '/wordl-frontend-68fa4b7d7830dfbb.js';
-const wasm = await init('/wordl-frontend-68fa4b7d7830dfbb_bg.wasm');
+<script type="module" nonce="aSNqJ1c01Hq9DuVd/ew0ag==">
+import init, * as bindings from '/wordl-frontend-16b1e360c4ee323a.js';
+const wasm = await init('/wordl-frontend-16b1e360c4ee323a_bg.wasm');
window.wasmBindings = bindings;
@@ -23,5 +23,134 @@ window.wasmBindings = bindings;
dispatchEvent(new CustomEvent("TrunkApplicationStarted", {detail: {wasm}}));
+</script><script>"use strict";
+
+(function () {
+
+ const address = '{{__TRUNK_ADDRESS__}}';
+ const base = '{{__TRUNK_WS_BASE__}}';
+ let protocol = '';
+ protocol =
+ protocol
+ ? protocol
+ : window.location.protocol === 'https:'
+ ? 'wss'
+ : 'ws';
+ const url = protocol + '://' + address + base + '.well-known/trunk/ws';
+
+ class Overlay {
+ constructor() {
+ // create an overlay
+ this._overlay = document.createElement("div");
+ const style = this._overlay.style;
+ style.height = "100vh";
+ style.width = "100vw";
+ style.position = "fixed";
+ style.top = "0";
+ style.left = "0";
+ style.backgroundColor = "rgba(222, 222, 222, 0.5)";
+ style.fontFamily = "sans-serif";
+ // not sure that's the right approach
+ style.zIndex = "1000000";
+ style.backdropFilter = "blur(1rem)";
+
+ const container = document.createElement("div");
+ // center it
+ container.style.position = "absolute";
+ container.style.top = "30%";
+ container.style.left = "15%";
+ container.style.maxWidth = "85%";
+
+ this._title = document.createElement("div");
+ this._title.innerText = "Build failure";
+ this._title.style.paddingBottom = "2rem";
+ this._title.style.fontSize = "2.5rem";
+
+ this._message = document.createElement("div");
+ this._message.style.whiteSpace = "pre-wrap";
+
+ const icon= document.createElement("div");
+ icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="#dc3545" viewBox="0 0 16 16"><path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg>';
+ this._title.prepend(icon);
+
+ container.append(this._title, this._message);
+ this._overlay.append(container);
+
+ this._inject();
+ window.setInterval(() => {
+ this._inject();
+ }, 250);
+ }
+
+ set reason(reason) {
+ this._message.textContent = reason;
+ }
+
+ _inject() {
+ if (!this._overlay.isConnected) {
+ // prepend it
+ document.body?.prepend(this._overlay);
+ }
+ }
+
+ }
+
+ class Client {
+ constructor(url) {
+ this.url = url;
+ this.poll_interval = 5000;
+ this._overlay = null;
+ }
+
+ start() {
+ const ws = new WebSocket(this.url);
+ ws.onmessage = (ev) => {
+ const msg = JSON.parse(ev.data);
+ switch (msg.type) {
+ case "reload":
+ this.reload();
+ break;
+ case "buildFailure":
+ this.buildFailure(msg.data)
+ break;
+ }
+ };
+ ws.onclose = this.onclose;
+ }
+
+ onclose() {
+ window.setTimeout(
+ () => {
+ // when we successfully reconnect, we'll force a
+ // reload (since we presumably lost connection to
+ // trunk due to it being killed, so it will have
+ // rebuilt on restart)
+ const ws = new WebSocket(this.url);
+ ws.onopen = () => window.location.reload();
+ ws.onclose = this.onclose;
+ },
+ this.poll_interval);
+ }
+
+ reload() {
+ window.location.reload();
+ }
+
+ buildFailure({reason}) {
+ // also log the console
+ console.error("Build failed:", reason);
+
+ console.debug("Overlay", this._overlay);
+
+ if (!this._overlay) {
+ this._overlay = new Overlay();
+ }
+ this._overlay.reason = reason;
+ }
+ }
+
+ new Client(url).start();
+
+})()
</script></body>
</html>
diff --git a/frontend/dist/public/styles.css b/frontend/dist/public/styles.css
index a18b48b..8c691f7 100644
--- a/frontend/dist/public/styles.css
+++ b/frontend/dist/public/styles.css
@@ -554,22 +554,22 @@ video {
--tw-contain-style: ;
}
-.mt-24 {
- margin-top: 6rem;
+.\!order-first {
+ order: -9999 !important;
}
-.mt-32 {
- margin-top: 8rem;
+.order-last {
+ order: 9999;
+}
+
+.mt-12 {
+ margin-top: 3rem;
}
.mt-8 {
margin-top: 2rem;
}
-.mt-\[15\%\] {
- margin-top: 15%;
-}
-
.flex {
display: flex;
}
@@ -598,10 +598,6 @@ video {
width: 18rem;
}
-.flex-1 {
- flex: 1 1 0%;
-}
-
.flex-row {
flex-direction: row;
}
@@ -614,16 +610,8 @@ video {
align-items: center;
}
-.justify-center {
- justify-content: center;
-}
-
-.justify-items-center {
- justify-items: center;
-}
-
-.gap-8 {
- gap: 2rem;
+.gap-4 {
+ gap: 1rem;
}
.rounded-xl {
@@ -669,21 +657,6 @@ video {
background-color: rgb(250 204 21 / var(--tw-bg-opacity));
}
-.object-center {
- -o-object-position: center;
- object-position: center;
-}
-
-.px-4 {
- padding-left: 1rem;
- padding-right: 1rem;
-}
-
-.py-2 {
- padding-top: 0.5rem;
- padding-bottom: 0.5rem;
-}
-
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
@@ -698,12 +671,13 @@ video {
line-height: 2rem;
}
-.font-bold {
- font-weight: 700;
+.text-lg {
+ font-size: 1.125rem;
+ line-height: 1.75rem;
}
-.leading-tight {
- line-height: 1.25;
+.font-bold {
+ font-weight: 700;
}
.text-white {
diff --git a/frontend/dist/styles-2541dfb893d8d665.css b/frontend/dist/styles-62f31a7ac0d15d40.css
similarity index 96%
rename from frontend/dist/styles-2541dfb893d8d665.css
rename to frontend/dist/styles-62f31a7ac0d15d40.css
index a18b48b..8c691f7 100644
--- a/frontend/dist/styles-2541dfb893d8d665.css
+++ b/frontend/dist/styles-62f31a7ac0d15d40.css
@@ -554,22 +554,22 @@ video {
--tw-contain-style: ;
}
-.mt-24 {
- margin-top: 6rem;
+.\!order-first {
+ order: -9999 !important;
}
-.mt-32 {
- margin-top: 8rem;
+.order-last {
+ order: 9999;
+}
+
+.mt-12 {
+ margin-top: 3rem;
}
.mt-8 {
margin-top: 2rem;
}
-.mt-\[15\%\] {
- margin-top: 15%;
-}
-
.flex {
display: flex;
}
@@ -598,10 +598,6 @@ video {
width: 18rem;
}
-.flex-1 {
- flex: 1 1 0%;
-}
-
.flex-row {
flex-direction: row;
}
@@ -614,16 +610,8 @@ video {
align-items: center;
}
-.justify-center {
- justify-content: center;
-}
-
-.justify-items-center {
- justify-items: center;
-}
-
-.gap-8 {
- gap: 2rem;
+.gap-4 {
+ gap: 1rem;
}
.rounded-xl {
@@ -669,21 +657,6 @@ video {
background-color: rgb(250 204 21 / var(--tw-bg-opacity));
}
-.object-center {
- -o-object-position: center;
- object-position: center;
-}
-
-.px-4 {
- padding-left: 1rem;
- padding-right: 1rem;
-}
-
-.py-2 {
- padding-top: 0.5rem;
- padding-bottom: 0.5rem;
-}
-
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
@@ -698,12 +671,13 @@ video {
line-height: 2rem;
}
-.font-bold {
- font-weight: 700;
+.text-lg {
+ font-size: 1.125rem;
+ line-height: 1.75rem;
}
-.leading-tight {
- line-height: 1.25;
+.font-bold {
+ font-weight: 700;
}
.text-white {
diff --git a/frontend/dist/wordl-frontend-68fa4b7d7830dfbb.js b/frontend/dist/wordl-frontend-16b1e360c4ee323a.js
similarity index 95%
rename from frontend/dist/wordl-frontend-68fa4b7d7830dfbb.js
rename to frontend/dist/wordl-frontend-16b1e360c4ee323a.js
index f8d6873..6ab7932 100644
--- a/frontend/dist/wordl-frontend-68fa4b7d7830dfbb.js
+++ b/frontend/dist/wordl-frontend-16b1e360c4ee323a.js
@@ -8,18 +8,6 @@ function getObject(idx) { return heap[idx]; }
let heap_next = heap.length;
-function dropObject(idx) {
- if (idx < 132) return;
- heap[idx] = heap_next;
- heap_next = idx;
-}
-
-function takeObject(idx) {
- const ret = getObject(idx);
- dropObject(idx);
- return ret;
-}
-
function addHeapObject(obj) {
if (heap_next === heap.length) heap.push(heap.length + 1);
const idx = heap_next;
@@ -47,6 +35,18 @@ function getStringFromWasm0(ptr, len) {
return cachedTextDecoder.decode(getUint8Memory0().subarray(ptr, ptr + len));
}
+function dropObject(idx) {
+ if (idx < 132) return;
+ heap[idx] = heap_next;
+ heap_next = idx;
+}
+
+function takeObject(idx) {
+ const ret = getObject(idx);
+ dropObject(idx);
+ return ret;
+}
+
let WASM_VECTOR_LEN = 0;
const cachedTextEncoder = (typeof TextEncoder !== 'undefined' ? new TextEncoder('utf-8') : { encode: () => { throw Error('TextEncoder not available') } } );
@@ -227,7 +227,7 @@ function addBorrowedObject(obj) {
}
function __wbg_adapter_38(arg0, arg1, arg2) {
try {
- wasm._dyn_core__ops__function__Fn___A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__he428fd8036f4940a(arg0, arg1, addBorrowedObject(arg2));
+ wasm._dyn_core__ops__function__Fn___A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h3c0eab9fae2944ad(arg0, arg1, addBorrowedObject(arg2));
} finally {
heap[stack_pointer++] = undefined;
}
@@ -258,12 +258,12 @@ function makeMutClosure(arg0, arg1, dtor, f) {
return real;
}
function __wbg_adapter_41(arg0, arg1, arg2) {
- wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hf16c47ad16b773e6(arg0, arg1, addHeapObject(arg2));
+ wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h6d9fad0d31a18c51(arg0, arg1, addHeapObject(arg2));
}
function __wbg_adapter_44(arg0, arg1, arg2) {
try {
- wasm._dyn_core__ops__function__FnMut___A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hb4e7c9d9a2b0b926(arg0, arg1, addBorrowedObject(arg2));
+ wasm._dyn_core__ops__function__FnMut___A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h6c9adf3ab2d4dc3d(arg0, arg1, addBorrowedObject(arg2));
} finally {
heap[stack_pointer++] = undefined;
}
@@ -331,41 +331,14 @@ async function __wbg_load(module, imports) {
function __wbg_get_imports() {
const imports = {};
imports.wbg = {};
- imports.wbg.__wbindgen_object_drop_ref = function(arg0) {
- takeObject(arg0);
- };
imports.wbg.__wbindgen_object_clone_ref = function(arg0) {
const ret = getObject(arg0);
return addHeapObject(ret);
};
- imports.wbg.__wbg_setlistenerid_f2e783343fa0cec1 = function(arg0, arg1) {
- getObject(arg0).__yew_listener_id = arg1 >>> 0;
- };
- imports.wbg.__wbg_listenerid_6dcf1c62b7b7de58 = function(arg0, arg1) {
- const ret = getObject(arg1).__yew_listener_id;
- getInt32Memory0()[arg0 / 4 + 1] = isLikeNone(ret) ? 0 : ret;
- getInt32Memory0()[arg0 / 4 + 0] = !isLikeNone(ret);
- };
imports.wbg.__wbindgen_string_new = function(arg0, arg1) {
const ret = getStringFromWasm0(arg0, arg1);
return addHeapObject(ret);
};
- imports.wbg.__wbg_cachekey_b81c1aacc6a0645c = function(arg0, arg1) {
- const ret = getObject(arg1).__yew_subtree_cache_key;
- getInt32Memory0()[arg0 / 4 + 1] = isLikeNone(ret) ? 0 : ret;
- getInt32Memory0()[arg0 / 4 + 0] = !isLikeNone(ret);
- };
- imports.wbg.__wbg_subtreeid_e80a1798fee782f9 = function(arg0, arg1) {
- const ret = getObject(arg1).__yew_subtree_id;
- getInt32Memory0()[arg0 / 4 + 1] = isLikeNone(ret) ? 0 : ret;
- getInt32Memory0()[arg0 / 4 + 0] = !isLikeNone(ret);
- };
- imports.wbg.__wbg_setsubtreeid_e1fab6b578c800cf = function(arg0, arg1) {
- getObject(arg0).__yew_subtree_id = arg1 >>> 0;
- };
- imports.wbg.__wbg_setcachekey_75bcd45312087529 = function(arg0, arg1) {
- getObject(arg0).__yew_subtree_cache_key = arg1 >>> 0;
- };
imports.wbg.__wbindgen_cb_drop = function(arg0) {
const obj = takeObject(arg0).original;
if (obj.cnt-- == 1) {
@@ -375,16 +348,29 @@ function __wbg_get_imports() {
const ret = false;
return ret;
};
- imports.wbg.__wbg_new_abda76e883ba8a5f = function() {
- const ret = new Error();
- return addHeapObject(ret);
+ imports.wbg.__wbg_listenerid_6dcf1c62b7b7de58 = function(arg0, arg1) {
+ const ret = getObject(arg1).__yew_listener_id;
+ getInt32Memory0()[arg0 / 4 + 1] = isLikeNone(ret) ? 0 : ret;
+ getInt32Memory0()[arg0 / 4 + 0] = !isLikeNone(ret);
};
- imports.wbg.__wbg_stack_658279fe44541cf6 = function(arg0, arg1) {
- const ret = getObject(arg1).stack;
- const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
- const len1 = WASM_VECTOR_LEN;
- getInt32Memory0()[arg0 / 4 + 1] = len1;
- getInt32Memory0()[arg0 / 4 + 0] = ptr1;
+ imports.wbg.__wbg_setlistenerid_f2e783343fa0cec1 = function(arg0, arg1) {
+ getObject(arg0).__yew_listener_id = arg1 >>> 0;
+ };
+ imports.wbg.__wbg_subtreeid_e80a1798fee782f9 = function(arg0, arg1) {
+ const ret = getObject(arg1).__yew_subtree_id;
+ getInt32Memory0()[arg0 / 4 + 1] = isLikeNone(ret) ? 0 : ret;
+ getInt32Memory0()[arg0 / 4 + 0] = !isLikeNone(ret);
+ };
+ imports.wbg.__wbg_setsubtreeid_e1fab6b578c800cf = function(arg0, arg1) {
+ getObject(arg0).__yew_subtree_id = arg1 >>> 0;
+ };
+ imports.wbg.__wbg_cachekey_b81c1aacc6a0645c = function(arg0, arg1) {
+ const ret = getObject(arg1).__yew_subtree_cache_key;
+ getInt32Memory0()[arg0 / 4 + 1] = isLikeNone(ret) ? 0 : ret;
+ getInt32Memory0()[arg0 / 4 + 0] = !isLikeNone(ret);
+ };
+ imports.wbg.__wbg_setcachekey_75bcd45312087529 = function(arg0, arg1) {
+ getObject(arg0).__yew_subtree_cache_key = arg1 >>> 0;
};
imports.wbg.__wbg_error_f851667af71bcfc6 = function(arg0, arg1) {
let deferred0_0;
@@ -397,20 +383,16 @@ function __wbg_get_imports() {
wasm.__wbindgen_free(deferred0_0, deferred0_1, 1);
}
};
- imports.wbg.__wbg_queueMicrotask_3cbae2ec6b6cd3d6 = function(arg0) {
- const ret = getObject(arg0).queueMicrotask;
+ imports.wbg.__wbg_new_abda76e883ba8a5f = function() {
+ const ret = new Error();
return addHeapObject(ret);
};
- imports.wbg.__wbindgen_is_function = function(arg0) {
- const ret = typeof(getObject(arg0)) === 'function';
- return ret;
- };
- imports.wbg.__wbg_queueMicrotask_481971b0d87f3dd4 = function(arg0) {
- queueMicrotask(getObject(arg0));
- };
- imports.wbg.__wbindgen_error_new = function(arg0, arg1) {
- const ret = new Error(getStringFromWasm0(arg0, arg1));
- return addHeapObject(ret);
+ imports.wbg.__wbg_stack_658279fe44541cf6 = function(arg0, arg1) {
+ const ret = getObject(arg1).stack;
+ const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+ const len1 = WASM_VECTOR_LEN;
+ getInt32Memory0()[arg0 / 4 + 1] = len1;
+ getInt32Memory0()[arg0 / 4 + 0] = ptr1;
};
imports.wbg.__wbindgen_string_get = function(arg0, arg1) {
const obj = getObject(arg1);
@@ -420,14 +402,16 @@ function __wbg_get_imports() {
getInt32Memory0()[arg0 / 4 + 1] = len1;
getInt32Memory0()[arg0 / 4 + 0] = ptr1;
};
- imports.wbg.__wbindgen_is_string = function(arg0) {
- const ret = typeof(getObject(arg0)) === 'string';
+ imports.wbg.__wbindgen_is_function = function(arg0) {
+ const ret = typeof(getObject(arg0)) === 'function';
return ret;
};
- imports.wbg.__wbindgen_is_object = function(arg0) {
- const val = getObject(arg0);
- const ret = typeof(val) === 'object' && val !== null;
- return ret;
+ imports.wbg.__wbg_queueMicrotask_481971b0d87f3dd4 = function(arg0) {
+ queueMicrotask(getObject(arg0));
+ };
+ imports.wbg.__wbg_queueMicrotask_3cbae2ec6b6cd3d6 = function(arg0) {
+ const ret = getObject(arg0).queueMicrotask;
+ return addHeapObject(ret);
};
imports.wbg.__wbindgen_is_undefined = function(arg0) {
const ret = getObject(arg0) === undefined;
@@ -437,13 +421,21 @@ function __wbg_get_imports() {
const ret = getObject(arg0) in getObject(arg1);
return ret;
};
- imports.wbg.__wbindgen_jsval_loose_eq = function(arg0, arg1) {
- const ret = getObject(arg0) == getObject(arg1);
+ imports.wbg.__wbindgen_is_object = function(arg0) {
+ const val = getObject(arg0);
+ const ret = typeof(val) === 'object' && val !== null;
return ret;
};
- imports.wbg.__wbindgen_boolean_get = function(arg0) {
- const v = getObject(arg0);
- const ret = typeof(v) === 'boolean' ? (v ? 1 : 0) : 2;
+ imports.wbg.__wbindgen_is_string = function(arg0) {
+ const ret = typeof(getObject(arg0)) === 'string';
+ return ret;
+ };
+ imports.wbg.__wbindgen_error_new = function(arg0, arg1) {
+ const ret = new Error(getStringFromWasm0(arg0, arg1));
+ return addHeapObject(ret);
+ };
+ imports.wbg.__wbindgen_as_number = function(arg0) {
+ const ret = +getObject(arg0);
return ret;
};
imports.wbg.__wbindgen_number_get = function(arg0, arg1) {
@@ -452,8 +444,13 @@ function __wbg_get_imports() {
getFloat64Memory0()[arg0 / 8 + 1] = isLikeNone(ret) ? 0 : ret;
getInt32Memory0()[arg0 / 4 + 0] = !isLikeNone(ret);
};
- imports.wbg.__wbindgen_as_number = function(arg0) {
- const ret = +getObject(arg0);
+ imports.wbg.__wbindgen_boolean_get = function(arg0) {
+ const v = getObject(arg0);
+ const ret = typeof(v) === 'boolean' ? (v ? 1 : 0) : 2;
+ return ret;
+ };
+ imports.wbg.__wbindgen_jsval_loose_eq = function(arg0, arg1) {
+ const ret = getObject(arg0) == getObject(arg1);
return ret;
};
imports.wbg.__wbg_getwithrefkey_edc2c8960f0f1191 = function(arg0, arg1) {
@@ -540,47 +537,36 @@ function __wbg_get_imports() {
imports.wbg.__wbg_setAttribute_3c9f6c303b696daa = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4) {
getObject(arg0).setAttribute(getStringFromWasm0(arg1, arg2), getStringFromWasm0(arg3, arg4));
}, arguments) };
- imports.wbg.__wbg_setchecked_931ff2ed2cd3ebfd = function(arg0, arg1) {
- getObject(arg0).checked = arg1 !== 0;
- };
- imports.wbg.__wbg_value_47fe6384562f52ab = function(arg0, arg1) {
- const ret = getObject(arg1).value;
- const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
- const len1 = WASM_VECTOR_LEN;
- getInt32Memory0()[arg0 / 4 + 1] = len1;
- getInt32Memory0()[arg0 / 4 + 0] = ptr1;
- };
- imports.wbg.__wbg_setvalue_78cb4f1fef58ae98 = function(arg0, arg1, arg2) {
- getObject(arg0).value = getStringFromWasm0(arg1, arg2);
+ imports.wbg.__wbg_instanceof_HtmlElement_3bcc4ff70cfdcba5 = function(arg0) {
+ let result;
+ try {
+ result = getObject(arg0) instanceof HTMLElement;
+ } catch (_) {
+ result = false;
+ }
+ const ret = result;
+ return ret;
};
+ imports.wbg.__wbg_focus_39d4b8ba8ff9df14 = function() { return handleError(function (arg0) {
+ getObject(arg0).focus();
+ }, arguments) };
imports.wbg.__wbg_addEventListener_4283b15b4f039eb5 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4) {
getObject(arg0).addEventListener(getStringFromWasm0(arg1, arg2), getObject(arg3), getObject(arg4));
}, arguments) };
imports.wbg.__wbg_removeEventListener_5d31483804421bfa = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4) {
getObject(arg0).removeEventListener(getStringFromWasm0(arg1, arg2), getObject(arg3), arg4 !== 0);
}, arguments) };
- imports.wbg.__wbg_value_d7f5bfbd9302c14b = function(arg0, arg1) {
- const ret = getObject(arg1).value;
+ imports.wbg.__wbg_state_9cc3f933b7d50acb = function() { return handleError(function (arg0) {
+ const ret = getObject(arg0).state;
+ return addHeapObject(ret);
+ }, arguments) };
+ imports.wbg.__wbg_key_dccf9e8aa1315a8e = function(arg0, arg1) {
+ const ret = getObject(arg1).key;
const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
const len1 = WASM_VECTOR_LEN;
getInt32Memory0()[arg0 / 4 + 1] = len1;
getInt32Memory0()[arg0 / 4 + 0] = ptr1;
};
- imports.wbg.__wbg_setvalue_090972231f0a4f6f = function(arg0, arg1, arg2) {
- getObject(arg0).value = getStringFromWasm0(arg1, arg2);
- };
- imports.wbg.__wbg_bubbles_abce839854481bc6 = function(arg0) {
- const ret = getObject(arg0).bubbles;
- return ret;
- };
- imports.wbg.__wbg_cancelBubble_c0aa3172524eb03c = function(arg0) {
- const ret = getObject(arg0).cancelBubble;
- return ret;
- };
- imports.wbg.__wbg_composedPath_58473fd5ae55f2cd = function(arg0) {
- const ret = getObject(arg0).composedPath();
- return addHeapObject(ret);
- };
imports.wbg.__wbg_href_2edbae9e92cdfeff = function(arg0, arg1) {
const ret = getObject(arg1).href;
const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
@@ -588,13 +574,6 @@ function __wbg_get_imports() {
getInt32Memory0()[arg0 / 4 + 1] = len1;
getInt32Memory0()[arg0 / 4 + 0] = ptr1;
};
- imports.wbg.__wbg_data_f6efcce74d694398 = function(arg0, arg1) {
- const ret = getObject(arg1).data;
- var ptr1 = isLikeNone(ret) ? 0 : passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
- var len1 = WASM_VECTOR_LEN;
- getInt32Memory0()[arg0 / 4 + 1] = len1;
- getInt32Memory0()[arg0 / 4 + 0] = ptr1;
- };
imports.wbg.__wbg_parentNode_6be3abff20e1a5fb = function(arg0) {
const ret = getObject(arg0).parentNode;
return isLikeNone(ret) ? 0 : addHeapObject(ret);
@@ -637,6 +616,76 @@ function __wbg_get_imports() {
const ret = getObject(arg0).removeChild(getObject(arg1));
return addHeapObject(ret);
}, arguments) };
+ imports.wbg.__wbg_value_d7f5bfbd9302c14b = function(arg0, arg1) {
+ const ret = getObject(arg1).value;
+ const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+ const len1 = WASM_VECTOR_LEN;
+ getInt32Memory0()[arg0 / 4 + 1] = len1;
+ getInt32Memory0()[arg0 / 4 + 0] = ptr1;
+ };
+ imports.wbg.__wbg_setvalue_090972231f0a4f6f = function(arg0, arg1, arg2) {
+ getObject(arg0).value = getStringFromWasm0(arg1, arg2);
+ };
+ imports.wbg.__wbg_data_f6efcce74d694398 = function(arg0, arg1) {
+ const ret = getObject(arg1).data;
+ var ptr1 = isLikeNone(ret) ? 0 : passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+ var len1 = WASM_VECTOR_LEN;
+ getInt32Memory0()[arg0 / 4 + 1] = len1;
+ getInt32Memory0()[arg0 / 4 + 0] = ptr1;
+ };
+ imports.wbg.__wbg_setchecked_931ff2ed2cd3ebfd = function(arg0, arg1) {
+ getObject(arg0).checked = arg1 !== 0;
+ };
+ imports.wbg.__wbg_value_47fe6384562f52ab = function(arg0, arg1) {
+ const ret = getObject(arg1).value;
+ const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+ const len1 = WASM_VECTOR_LEN;
+ getInt32Memory0()[arg0 / 4 + 1] = len1;
+ getInt32Memory0()[arg0 / 4 + 0] = ptr1;
+ };
+ imports.wbg.__wbg_setvalue_78cb4f1fef58ae98 = function(arg0, arg1, arg2) {
+ getObject(arg0).value = getStringFromWasm0(arg1, arg2);
+ };
+ imports.wbg.__wbg_bubbles_abce839854481bc6 = function(arg0) {
+ const ret = getObject(arg0).bubbles;
+ return ret;
+ };
+ imports.wbg.__wbg_cancelBubble_c0aa3172524eb03c = function(arg0) {
+ const ret = getObject(arg0).cancelBubble;
+ return ret;
+ };
+ imports.wbg.__wbg_composedPath_58473fd5ae55f2cd = function(arg0) {
+ const ret = getObject(arg0).composedPath();
+ return addHeapObject(ret);
+ };
+ imports.wbg.__wbg_href_706b235ecfe6848c = function() { return handleError(function (arg0, arg1) {
+ const ret = getObject(arg1).href;
+ const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+ const len1 = WASM_VECTOR_LEN;
+ getInt32Memory0()[arg0 / 4 + 1] = len1;
+ getInt32Memory0()[arg0 / 4 + 0] = ptr1;
+ }, arguments) };
+ imports.wbg.__wbg_pathname_5449afe3829f96a1 = function() { return handleError(function (arg0, arg1) {
+ const ret = getObject(arg1).pathname;
+ const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+ const len1 = WASM_VECTOR_LEN;
+ getInt32Memory0()[arg0 / 4 + 1] = len1;
+ getInt32Memory0()[arg0 / 4 + 0] = ptr1;
+ }, arguments) };
+ imports.wbg.__wbg_search_489f12953342ec1f = function() { return handleError(function (arg0, arg1) {
+ const ret = getObject(arg1).search;
+ const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+ const len1 = WASM_VECTOR_LEN;
+ getInt32Memory0()[arg0 / 4 + 1] = len1;
+ getInt32Memory0()[arg0 / 4 + 0] = ptr1;
+ }, arguments) };
+ imports.wbg.__wbg_hash_553098e838e06c1d = function() { return handleError(function (arg0, arg1) {
+ const ret = getObject(arg1).hash;
+ const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+ const len1 = WASM_VECTOR_LEN;
+ getInt32Memory0()[arg0 / 4 + 1] = len1;
+ getInt32Memory0()[arg0 / 4 + 0] = ptr1;
+ }, arguments) };
imports.wbg.__wbg_instanceof_ShadowRoot_9db040264422e84a = function(arg0) {
let result;
try {
@@ -680,78 +729,18 @@ function __wbg_get_imports() {
const ret = new URL(getStringFromWasm0(arg0, arg1), getStringFromWasm0(arg2, arg3));
return addHeapObject(ret);
}, arguments) };
- imports.wbg.__wbg_href_706b235ecfe6848c = function() { return handleError(function (arg0, arg1) {
- const ret = getObject(arg1).href;
- const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
- const len1 = WASM_VECTOR_LEN;
- getInt32Memory0()[arg0 / 4 + 1] = len1;
- getInt32Memory0()[arg0 / 4 + 0] = ptr1;
- }, arguments) };
- imports.wbg.__wbg_pathname_5449afe3829f96a1 = function() { return handleError(function (arg0, arg1) {
- const ret = getObject(arg1).pathname;
- const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
- const len1 = WASM_VECTOR_LEN;
- getInt32Memory0()[arg0 / 4 + 1] = len1;
- getInt32Memory0()[arg0 / 4 + 0] = ptr1;
- }, arguments) };
- imports.wbg.__wbg_search_489f12953342ec1f = function() { return handleError(function (arg0, arg1) {
- const ret = getObject(arg1).search;
- const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
- const len1 = WASM_VECTOR_LEN;
- getInt32Memory0()[arg0 / 4 + 1] = len1;
- getInt32Memory0()[arg0 / 4 + 0] = ptr1;
- }, arguments) };
- imports.wbg.__wbg_hash_553098e838e06c1d = function() { return handleError(function (arg0, arg1) {
- const ret = getObject(arg1).hash;
- const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
- const len1 = WASM_VECTOR_LEN;
- getInt32Memory0()[arg0 / 4 + 1] = len1;
- getInt32Memory0()[arg0 / 4 + 0] = ptr1;
- }, arguments) };
- imports.wbg.__wbg_state_9cc3f933b7d50acb = function() { return handleError(function (arg0) {
- const ret = getObject(arg0).state;
- return addHeapObject(ret);
- }, arguments) };
imports.wbg.__wbg_get_bd8e338fbd5f5cc8 = function(arg0, arg1) {
const ret = getObject(arg0)[arg1 >>> 0];
return addHeapObject(ret);
};
+ imports.wbg.__wbg_from_89e3fc3ba5e6fb48 = function(arg0) {
+ const ret = Array.from(getObject(arg0));
+ return addHeapObject(ret);
+ };
imports.wbg.__wbg_length_cd7af8117672b8b8 = function(arg0) {
const ret = getObject(arg0).length;
return ret;
};
- imports.wbg.__wbg_newnoargs_e258087cd0daa0ea = function(arg0, arg1) {
- const ret = new Function(getStringFromWasm0(arg0, arg1));
- return addHeapObject(ret);
- };
- imports.wbg.__wbg_call_27c0f87801dedf93 = function() { return handleError(function (arg0, arg1) {
- const ret = getObject(arg0).call(getObject(arg1));
- return addHeapObject(ret);
- }, arguments) };
- imports.wbg.__wbg_new_72fb9a18b5ae2624 = function() {
- const ret = new Object();
- return addHeapObject(ret);
- };
- imports.wbg.__wbg_self_ce0dbfc45cf2f5be = function() { return handleError(function () {
- const ret = self.self;
- return addHeapObject(ret);
- }, arguments) };
- imports.wbg.__wbg_window_c6fb939a7f436783 = function() { return handleError(function () {
- const ret = window.window;
- return addHeapObject(ret);
- }, arguments) };
- imports.wbg.__wbg_globalThis_d1e6af4856ba331b = function() { return handleError(function () {
- const ret = globalThis.globalThis;
- return addHeapObject(ret);
- }, arguments) };
- imports.wbg.__wbg_global_207b558942527489 = function() { return handleError(function () {
- const ret = global.global;
- return addHeapObject(ret);
- }, arguments) };
- imports.wbg.__wbg_from_89e3fc3ba5e6fb48 = function(arg0) {
- const ret = Array.from(getObject(arg0));
- return addHeapObject(ret);
- };
imports.wbg.__wbg_instanceof_ArrayBuffer_836825be07d4c9d2 = function(arg0) {
let result;
try {
@@ -762,6 +751,14 @@ function __wbg_get_imports() {
const ret = result;
return ret;
};
+ imports.wbg.__wbg_newnoargs_e258087cd0daa0ea = function(arg0, arg1) {
+ const ret = new Function(getStringFromWasm0(arg0, arg1));
+ return addHeapObject(ret);
+ };
+ imports.wbg.__wbg_call_27c0f87801dedf93 = function() { return handleError(function (arg0, arg1) {
+ const ret = getObject(arg0).call(getObject(arg1));
+ return addHeapObject(ret);
+ }, arguments) };
imports.wbg.__wbg_isSafeInteger_f7b04ef02296c4d2 = function(arg0) {
const ret = Number.isSafeInteger(getObject(arg0));
return ret;
@@ -774,6 +771,10 @@ function __wbg_get_imports() {
const ret = Object.is(getObject(arg0), getObject(arg1));
return ret;
};
+ imports.wbg.__wbg_new_72fb9a18b5ae2624 = function() {
+ const ret = new Object();
+ return addHeapObject(ret);
+ };
imports.wbg.__wbg_resolve_b0083a7967828ec8 = function(arg0) {
const ret = Promise.resolve(getObject(arg0));
return addHeapObject(ret);
@@ -782,21 +783,22 @@ function __wbg_get_imports() {
const ret = getObject(arg0).then(getObject(arg1));
return addHeapObject(ret);
};
- imports.wbg.__wbg_buffer_12d079cc21e14bdb = function(arg0) {
- const ret = getObject(arg0).buffer;
+ imports.wbg.__wbg_globalThis_d1e6af4856ba331b = function() { return handleError(function () {
+ const ret = globalThis.globalThis;
return addHeapObject(ret);
- };
- imports.wbg.__wbg_new_63b92bc8671ed464 = function(arg0) {
- const ret = new Uint8Array(getObject(arg0));
+ }, arguments) };
+ imports.wbg.__wbg_self_ce0dbfc45cf2f5be = function() { return handleError(function () {
+ const ret = self.self;
return addHeapObject(ret);
- };
- imports.wbg.__wbg_set_a47bac70306a19a7 = function(arg0, arg1, arg2) {
- getObject(arg0).set(getObject(arg1), arg2 >>> 0);
- };
- imports.wbg.__wbg_length_c20a40f15020d68a = function(arg0) {
- const ret = getObject(arg0).length;
- return ret;
- };
+ }, arguments) };
+ imports.wbg.__wbg_window_c6fb939a7f436783 = function() { return handleError(function () {
+ const ret = window.window;
+ return addHeapObject(ret);
+ }, arguments) };
+ imports.wbg.__wbg_global_207b558942527489 = function() { return handleError(function () {
+ const ret = global.global;
+ return addHeapObject(ret);
+ }, arguments) };
imports.wbg.__wbg_instanceof_Uint8Array_2b3bbecd033d19f6 = function(arg0) {
let result;
try {
@@ -807,10 +809,25 @@ function __wbg_get_imports() {
const ret = result;
return ret;
};
+ imports.wbg.__wbg_new_63b92bc8671ed464 = function(arg0) {
+ const ret = new Uint8Array(getObject(arg0));
+ return addHeapObject(ret);
+ };
+ imports.wbg.__wbg_length_c20a40f15020d68a = function(arg0) {
+ const ret = getObject(arg0).length;
+ return ret;
+ };
+ imports.wbg.__wbg_set_a47bac70306a19a7 = function(arg0, arg1, arg2) {
+ getObject(arg0).set(getObject(arg1), arg2 >>> 0);
+ };
imports.wbg.__wbg_set_1f9b04f170055d33 = function() { return handleError(function (arg0, arg1, arg2) {
const ret = Reflect.set(getObject(arg0), getObject(arg1), getObject(arg2));
return ret;
}, arguments) };
+ imports.wbg.__wbg_buffer_12d079cc21e14bdb = function(arg0) {
+ const ret = getObject(arg0).buffer;
+ return addHeapObject(ret);
+ };
imports.wbg.__wbindgen_debug_string = function(arg0, arg1) {
const ret = debugString(getObject(arg1));
const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
@@ -818,6 +835,9 @@ function __wbg_get_imports() {
getInt32Memory0()[arg0 / 4 + 1] = len1;
getInt32Memory0()[arg0 / 4 + 0] = ptr1;
};
+ imports.wbg.__wbindgen_object_drop_ref = function(arg0) {
+ takeObject(arg0);
+ };
imports.wbg.__wbindgen_throw = function(arg0, arg1) {
throw new Error(getStringFromWasm0(arg0, arg1));
};
@@ -825,16 +845,16 @@ function __wbg_get_imports() {
const ret = wasm.memory;
return addHeapObject(ret);
};
- imports.wbg.__wbindgen_closure_wrapper910 = function(arg0, arg1, arg2) {
- const ret = makeClosure(arg0, arg1, 358, __wbg_adapter_38);
+ imports.wbg.__wbindgen_closure_wrapper5246 = function(arg0, arg1, arg2) {
+ const ret = makeClosure(arg0, arg1, 422, __wbg_adapter_38);
return addHeapObject(ret);
};
- imports.wbg.__wbindgen_closure_wrapper995 = function(arg0, arg1, arg2) {
- const ret = makeMutClosure(arg0, arg1, 390, __wbg_adapter_41);
+ imports.wbg.__wbindgen_closure_wrapper6586 = function(arg0, arg1, arg2) {
+ const ret = makeMutClosure(arg0, arg1, 502, __wbg_adapter_41);
return addHeapObject(ret);
};
- imports.wbg.__wbindgen_closure_wrapper1018 = function(arg0, arg1, arg2) {
- const ret = makeMutClosure(arg0, arg1, 401, __wbg_adapter_44);
+ imports.wbg.__wbindgen_closure_wrapper6919 = function(arg0, arg1, arg2) {
+ const ret = makeMutClosure(arg0, arg1, 521, __wbg_adapter_44);
return addHeapObject(ret);
};
diff --git a/frontend/dist/wordl-frontend-16b1e360c4ee323a_bg.wasm b/frontend/dist/wordl-frontend-16b1e360c4ee323a_bg.wasm
new file mode 100644
index 0000000..efedd5c
Binary files /dev/null and b/frontend/dist/wordl-frontend-16b1e360c4ee323a_bg.wasm differ
diff --git a/frontend/dist/wordl-frontend-68fa4b7d7830dfbb_bg.wasm b/frontend/dist/wordl-frontend-68fa4b7d7830dfbb_bg.wasm
deleted file mode 100644
index fe07f6d..0000000
Binary files a/frontend/dist/wordl-frontend-68fa4b7d7830dfbb_bg.wasm and /dev/null differ
diff --git a/frontend/public/styles.css b/frontend/public/styles.css
index a18b48b..8c691f7 100644
--- a/frontend/public/styles.css
+++ b/frontend/public/styles.css
@@ -554,22 +554,22 @@ video {
--tw-contain-style: ;
}
-.mt-24 {
- margin-top: 6rem;
+.\!order-first {
+ order: -9999 !important;
}
-.mt-32 {
- margin-top: 8rem;
+.order-last {
+ order: 9999;
+}
+
+.mt-12 {
+ margin-top: 3rem;
}
.mt-8 {
margin-top: 2rem;
}
-.mt-\[15\%\] {
- margin-top: 15%;
-}
-
.flex {
display: flex;
}
@@ -598,10 +598,6 @@ video {
width: 18rem;
}
-.flex-1 {
- flex: 1 1 0%;
-}
-
.flex-row {
flex-direction: row;
}
@@ -614,16 +610,8 @@ video {
align-items: center;
}
-.justify-center {
- justify-content: center;
-}
-
-.justify-items-center {
- justify-items: center;
-}
-
-.gap-8 {
- gap: 2rem;
+.gap-4 {
+ gap: 1rem;
}
.rounded-xl {
@@ -669,21 +657,6 @@ video {
background-color: rgb(250 204 21 / var(--tw-bg-opacity));
}
-.object-center {
- -o-object-position: center;
- object-position: center;
-}
-
-.px-4 {
- padding-left: 1rem;
- padding-right: 1rem;
-}
-
-.py-2 {
- padding-top: 0.5rem;
- padding-bottom: 0.5rem;
-}
-
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
@@ -698,12 +671,13 @@ video {
line-height: 2rem;
}
-.font-bold {
- font-weight: 700;
+.text-lg {
+ font-size: 1.125rem;
+ line-height: 1.75rem;
}
-.leading-tight {
- line-height: 1.25;
+.font-bold {
+ font-weight: 700;
}
.text-white {
diff --git a/frontend/src/pages/home.rs b/frontend/src/pages/home.rs
index 1343003..767c3b7 100644
--- a/frontend/src/pages/home.rs
+++ b/frontend/src/pages/home.rs
@@ -1,21 +1,43 @@
use web_sys::wasm_bindgen::convert::OptionIntoWasmAbi;
+use web_sys::wasm_bindgen::JsCast;
+use web_sys::HtmlElement;
use yew::prelude::*;
use yew::{classes, function_component, html, Callback, Html};
use crate::CharStatus;
-fn string_to_html(input: &Vec<CharStatus<String>>) -> Html {
+fn check_game_over(words: &[CharStatus<String>]) -> bool {
+ if words.iter().all(|i| matches!(i, CharStatus::Match(_))) {
+ return true;
+ }
+ false
+}
+
+fn set_focus(index: usize) {
+ if let Some(next) = web_sys::window()
+ .expect("no global 'window' exists")
+ .document()
+ .expect("should have a document on window")
+ .query_selector(&format!("[tabindex='{}']", index))
+ .ok()
+ .flatten()
+ {
+ if let Some(e) = next.dyn_ref::<HtmlElement>() {
+ e.focus().ok();
+ }
+ }
+}
+
+// fn string_to_html(input: &Vec<CharStatus<String>>) -> Html {
+fn string_to_html(input: &[CharStatus<String>]) -> Html {
let classes = classes!(
"bg-gray-700",
"w-16",
"h-16",
"text-center",
"py-4",
- // "justify-center",
- // // "justify-items-center",
- // "object-center",
- // "items-center",
- // "leading-tight"
+ "font-bold",
+ "text-lg",
);
html! {
<ul
@@ -23,7 +45,7 @@ fn string_to_html(input: &Vec<CharStatus<String>>) -> Html {
classes!(
"flex",
"flex-row",
- "gap-8",
+ "gap-4",
"mt-8",
)
}
@@ -76,17 +98,18 @@ fn string_to_html(input: &Vec<CharStatus<String>>) -> Html {
#[function_component]
pub fn Home() -> Html {
+ let length = 5;
let got_word = "HALLO";
let submitted_words = yew::use_state(std::vec::Vec::new);
- let node_refs = use_state(|| vec![NodeRef::default(); 5]);
- let input_values = use_state(|| vec!["".to_string(); 5]);
+ let node_refs = use_state(|| vec![NodeRef::default(); length]);
+ let input_values = use_state(|| vec!["".to_string(); length]);
let game_over = use_state(|| false);
let game_over_check = {
let submitted_words = submitted_words.clone();
let game_over = game_over.clone();
Callback::from(move |_| {
- if submitted_words.iter().count() >= 4 {
+ if submitted_words.iter().count() >= length - 1 {
game_over.set(true);
}
})
@@ -107,10 +130,9 @@ pub fn Home() -> Html {
let submitted_words = submitted_words.clone();
let game_over = game_over.clone();
let game_over_check = game_over_check.clone();
- Callback::from(move |_| {
+ Callback::from(move |_e: MouseEvent| {
if *game_over {
submitted_words.set(vec![]);
- // input_values.set(vec![]);
game_over.set(false);
return;
}
@@ -125,159 +147,131 @@ pub fn Home() -> Html {
})
};
+ let on_enter = {
+ let input_values = input_values.clone();
+ let submitted_words = submitted_words.clone();
+ let game_over = game_over.clone();
+ let game_over_check = game_over_check.clone();
+ Callback::from(move |e: KeyboardEvent| {
+ if e.key() == "Enter" {
+ if *game_over {
+ submitted_words.set(vec![]);
+ game_over.set(false);
+ return;
+ }
+ let values: Vec<_> = input_values.iter().cloned().collect();
+ if !values.iter().all(|v| !v.is_empty()) {
+ return;
+ }
+ let mut new_items = (*submitted_words).clone();
+ new_items.push(crate::compare_strings(got_word, &values.join("")));
+ submitted_words.set(new_items);
+ game_over_check.emit(KeyboardEvent::none());
+ }
+ })
+ };
+
let view = {
let node_refs = node_refs.clone();
let input_values = input_values.clone();
move || {
html! {
- <div
- class={
- classes!(
- "flex",
- "flex-col",
- "mt-32",
- // "justify-center",
- // "justify-items-center",
- "items-center",
- "h-screen",
- )
- }
- >
- <div
- class="h-4/6"
- >
- <form
- // onsubmit={on_submit}
- >
<div
- class={
- classes!(
- "flex",
- "flex-row",
- "gap-8",
- )
- }
- >
- { node_refs.iter().enumerate().map(|(index, node_ref)| {
- let on_input = {
- let node_ref = node_ref.clone();
- let input_values = input_values.clone();
- Callback::from(move |event: InputEvent| {
- let value = event.data().unwrap();
- let mut values = (*input_values).clone();
- values[index] = value.to_uppercase();
- input_values.set(values);
- if let Some(input) = node_ref.cast::<web_sys::HtmlInputElement>() {
- input.value();
- }
- })
- };
- html! {
- <div
- class="flex gap-8"
- >
- <input
- ref={node_ref.clone()}
- value={input_values[index].clone()}
- oninput={on_input}
- class={
- classes!(
- "w-16",
- "h-16",
- "flex-1",
- "text-center",
- // "px-4",
- // "py-2",
- "bg-gray-600"
- )
- }
- />
- </div>
- }
- }).collect::<Html>() }
- </div>
- </form>
- { for submitted_words.iter().map(string_to_html)}
- </div>
- <button
- class={
- classes!(
- "w-72",
- "h-16",
- // "mt-24",
- "text-2xl",
- "font-bold",
- "rounded-xl",
- "bg-green-700",
+ class={
+ classes!(
+ "flex",
+ "flex-col",
+ "mt-12",
+ "items-center",
+ "h-screen",
)
}
- onclick={on_submit} type="submit">
- {
- if *game_over {
- "Play again"
- }
- else {
- "Submit"
- }
+ >
+ <div
+ class="h-4/6 flex flex-col"
+ >
+ <form
+ class="order-last mt-8"
+ >
+ <div
+ class={
+ classes!(
+ "flex",
+ "flex-row",
+ "font-bold",
+ "text-lg",
+ "gap-4",
+ )
}
- </button>
- </div>
- }
+ >
+ { node_refs.iter().enumerate().map(|(index, node_ref)| {
+ let on_input = {
+ let node_ref = node_ref.clone();
+ let next_index = index +1;
+ let input_values = input_values.clone();
+ Callback::from(move |event: InputEvent| {
+ let value = event.data().unwrap();
+ let mut values = (*input_values).clone();
+ values[index] = value.to_uppercase();
+ input_values.set(values);
+ if let Some(input) = node_ref.cast::<web_sys::HtmlInputElement>() {
+ input.value();
+ set_focus(next_index);
+ }
+ })
+ };
+ let on_enter = on_enter.clone();
+ html! {
+ <input
+ onkeypress={on_enter}
+ tabindex={index.to_string()}
+ ref={node_ref.clone()}
+ value={input_values[index].clone()}
+ oninput={on_input}
+ class={
+ classes!(
+ "w-16",
+ "h-16",
+ "text-center",
+ "bg-gray-600"
+ )
+ }
+ />
+ }
+ }).collect::<Html>() }
+ </div>
+ </form>
+ <div class="!order-first">
+ { for submitted_words.iter().map(|e| {string_to_html(e)})}
+ </div>
+ </div>
+ <button
+ tabindex={"5"}
+ class={
+ classes!(
+ "w-72",
+ "h-16",
+ "text-2xl",
+ "font-bold",
+ "rounded-xl",
+ "bg-green-700",
+ "order-last",
+ )
+ }
+ onclick={on_submit} type="submit">
+ {
+ if *game_over {
+ "Play again"
+ }
+ else {
+ "Submit"
+ }
+ }
+ </button>
+ </div>
+ }
}
};
view()
- // html! {
- // <div
- // class={
- // classes!(
- // "mt-[15%]",
- // "flex",
- // "flex-col",
- // "justify-center",
- // "items-center"
- // )
- // }
- // >
- // <div
- // class={
- // classes!(
- // "flex",
- // "flex-row",
- // "gap-8"
- // )
- // }
- // >
- // {view()}
- // { for input.iter().map(|i| {
- // html!{
- // <input
- // class={
- // classes!(
- // "w-16",
- // "h-16",
- // "bg-gray-600"
- // )
- // }
- // value={<std::string::String as Clone>::clone(&*i)}
- // />
- // }
- // })}
- // </div>
- // <InputString value={" ".to_string()}/>
- // <button
- // class={
- // classes!(
- // "w-72",
- // "h-16",
- // "mt-24",
- // "text-2xl",
- // "font-bold",
- // "rounded-xl",
- // "bg-green-700",
- // )
- // }
- // onclick={on_submit}>{"Submit"}</button>
- // </div>
- // }
}
diff --git a/frontend/src/pages.rs b/frontend/src/pages/mod.rs
similarity index 100%
rename from frontend/src/pages.rs
rename to frontend/src/pages/mod.rs