+ )
+
+}
\ No newline at end of file
diff --git a/ui/src/index.html b/ui/src/index.html
index fccece6..06fa78b 100644
--- a/ui/src/index.html
+++ b/ui/src/index.html
@@ -2,11 +2,12 @@
- hello-wasm example
+
+ Word Grid
-
+
diff --git a/ui/src/index.js b/ui/src/index.js
index 8f4415e..c7a01ba 100644
--- a/ui/src/index.js
+++ b/ui/src/index.js
@@ -1,50 +1,49 @@
- // Use ES module import syntax to import functionality from the module
- // that we have compiled.
- //
- // Note that the `default` import is an initialization function which
- // will "boot" the module and make it ready to use. Currently browsers
- // don't support natively imported WebAssembly as an ES module, but
- // eventually the manual initialization won't be required!
- import init, { greet, GameWasm } from '../node_modules/word_grid/word_grid.js';
+import init, {greet, GameWasm} from '../node_modules/word_grid/word_grid.js';
+import {TileTray} from "./elements";
+import ReactDOM from "react-dom";
+import {createRoot} from "react-dom/client";
- async function run() {
- // First up we need to actually load the wasm file, so we use the
- // default export to inform it where the wasm file is located on the
- // server, and then we wait on the returned promise to wait for the
- // wasm to be loaded.
- //
- // It may look like this: `await init('./pkg/without_a_bundler_bg.wasm');`,
- // but there is also a handy default inside `init` function, which uses
- // `import.meta` to locate the wasm file relatively to js file.
- //
- // Note that instead of a string you can also pass in any of the
- // following things:
- //
- // * `WebAssembly.Module`
- //
- // * `ArrayBuffer`
- //
- // * `Response`
- //
- // * `Promise` which returns any of the above, e.g. `fetch("./path/to/wasm")`
- //
- // This gives you complete control over how the module is loaded
- // and compiled.
- //
- // Also note that the promise, when resolved, yields the wasm module's
- // exports which is the same as importing the `*_bg` module in other
- // modes
- await init();
+async function run() {
+ // First up we need to actually load the wasm file, so we use the
+ // default export to inform it where the wasm file is located on the
+ // server, and then we wait on the returned promise to wait for the
+ // wasm to be loaded.
+ //
+ // It may look like this: `await init('./pkg/without_a_bundler_bg.wasm');`,
+ // but there is also a handy default inside `init` function, which uses
+ // `import.meta` to locate the wasm file relatively to js file.
+ //
+ // Note that instead of a string you can also pass in any of the
+ // following things:
+ //
+ // * `WebAssembly.Module`
+ //
+ // * `ArrayBuffer`
+ //
+ // * `Response`
+ //
+ // * `Promise` which returns any of the above, e.g. `fetch("./path/to/wasm")`
+ //
+ // This gives you complete control over how the module is loaded
+ // and compiled.
+ //
+ // Also note that the promise, when resolved, yields the wasm module's
+ // exports which is the same as importing the `*_bg` module in other
+ // modes
+ await init();
- greet("Heyo!");
+ greet("Heyo!");
- let game = new GameWasm(1234n);
- let tray = game.get_tray();
+ let game = new GameWasm(1234n);
+ let tray = game.get_tray();
- console.log({tray});
+ console.log({tray});
- // And afterwards we can use all the functionality defined in wasm.
+ const root = createRoot(document.getElementById("root"));
+ root.render();
- }
+ // And afterwards we can use all the functionality defined in wasm.
- run();
+}
+
+run();
diff --git a/ui/src/style.less b/ui/src/style.less
new file mode 100644
index 0000000..e47a171
--- /dev/null
+++ b/ui/src/style.less
@@ -0,0 +1,34 @@
+@tile-width: 55px;
+@tile-font-size: 35px;
+
+.tray {
+ display: grid;
+ grid-template-columns: repeat(7, @tile-width);
+ grid-gap: 5px;
+ height: @tile-width;
+ width: fit-content;
+ background-color: #bbb59d;
+ margin: 10px;
+}
+
+.letter {
+ background-color: #e5cca9;
+ position: relative; // Used for the positioning of the sub-components
+
+ .text {
+ position: absolute;
+ width: 100%;
+ text-align: center;
+ top: 5px;
+ font-size: @tile-font-size;
+ }
+
+ .letter-points {
+ font-size: 15px;
+ position: absolute;
+ bottom: 2px;
+ right: -1px;
+ padding-right: 5px;
+ }
+
+}
\ No newline at end of file