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

ft/reorders html elements and adds next focus on input

Browse Source
This commit is contained in:
itsscb 2024-06-23 23:33:50 +02:00
parent 30cb361c24
commit 19a5ce6d72
10 changed files with 544 additions and 479 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/Cargo.toml
View File

@ -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"

141
frontend/dist/index.html vendored
View File

@ -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&#x2D;gBtRF8AZNuyiqW77oeeQ3vvVnN7LannIbfF4tCrknbd7ZGl4KDroyDlBfuhmsLaX"/>
<link rel="stylesheet" href="/styles-62f31a7ac0d15d40.css" integrity="sha384&#x2D;iBFbymeolxY9g&#x2B;4zN6o&#x2B;eoSTHonPTFiTdAJ&#x2F;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>

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

@ -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 {

56
frontend/dist/styles-2541dfb893d8d665.css → frontend/dist/styles-62f31a7ac0d15d40.css vendored
View File

@ -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 {

410
frontend/dist/wordl-frontend-68fa4b7d7830dfbb.js → frontend/dist/wordl-frontend-16b1e360c4ee323a.js vendored
View File

@ -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);
};

BIN
frontend/dist/wordl-frontend-16b1e360c4ee323a_bg.wasm vendored Normal file
View File

Binary file not shown.

BIN
frontend/dist/wordl-frontend-68fa4b7d7830dfbb_bg.wasm vendored
View File

Binary file not shown.

56
frontend/public/styles.css
View File

@ -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 {

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

@ -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>
// }
}

0
frontend/src/pages.rs → frontend/src/pages/mod.rs
View File