Add dev tailwind and icons

Leundai · Oct 19, 2023 · 96939df · 96939df
1 parent 90764c6
commit 96939df
Show file tree

Hide file tree

Showing 12 changed files with 1,104 additions and 90 deletions.
diff --git a/src/lib.rs b/src/lib.rs
@@ -132,8 +132,8 @@ impl Universe {
     pub fn new() -> Universe {
         utils::set_panic_hook();
 
-        let width: u32 = 64;
-        let height: u32 = 64;
+        let width: u32 = 200;
+        let height: u32 = 200;
         let cells = (0..width * height)
             .map(|_| {
                 if js_sys::Math::random() < 0.5 {

diff --git a/www/dist/0.bootstrap.js b/www/dist/0.bootstrap.js
diff --git a/www/dist/5f9dd2697807a7c9ae41.module.wasm b/www/dist/5f9dd2697807a7c9ae41.module.wasm
diff --git a/www/dist/bootstrap.js b/www/dist/bootstrap.js
@@ -174,7 +174,7 @@
 /******/ 				promises.push(installedWasmModuleData);
 /******/ 			else {
 /******/ 				var importObject = wasmImportObjects[wasmModuleId]();
-/******/ 				var req = fetch(__webpack_require__.p + "" + {"../pkg/wasm_game_of_life_bg.wasm":"e302bc301b8706c4bc11"}[wasmModuleId] + ".module.wasm");
+/******/ 				var req = fetch(__webpack_require__.p + "" + {"../pkg/wasm_game_of_life_bg.wasm":"5f9dd2697807a7c9ae41"}[wasmModuleId] + ".module.wasm");
 /******/ 				var promise;
 /******/ 				if(importObject instanceof Promise && typeof WebAssembly.compileStreaming === 'function') {
 /******/ 					promise = Promise.all([WebAssembly.compileStreaming(req), importObject]).then(function(items) {

diff --git a/www/dist/index.html b/www/dist/index.html
@@ -5,25 +5,29 @@
     <title>Hello wasm-pack!</title>
     <style>
       body {
-        position: absolute;
-        top: 0;
-        left: 0;
         width: 100%;
         height: 100%;
+        padding: 1em;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
       }
     </style>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"
+    />
   </head>
-  <body>
-    <noscript
-      >This page contains webassembly and javascript content, please enable
-      javascript in your browser.</noscript
+  <body class="bg-neutral-200">
+    <canvas class="w-2/4" id="game-of-life-canvas"></canvas>
+    <button
+      class="inline-block rounded-md border border-transparent bg-indigo-600 px-3 py-3 text-center text-white hover:bg-indigo-700 my-4"
+      id="play-pause"
     >
-    <canvas id="game-of-life-canvas"></canvas>
-    <button id="play-pause"></button>
+      <i id="play-pause-icon"></i>
+    </button>
     <script src="./bootstrap.js"></script>
   </body>
 </html>
diff --git a/www/index.html b/www/index.html
@@ -5,25 +5,29 @@
     <title>Hello wasm-pack!</title>
     <style>
       body {
-        position: absolute;
-        top: 0;
-        left: 0;
         width: 100%;
         height: 100%;
+        padding: 1em;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
       }
     </style>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"
+    />
   </head>
-  <body>
-    <noscript
-      >This page contains webassembly and javascript content, please enable
-      javascript in your browser.</noscript
+  <body class="bg-neutral-200">
+    <canvas class="w-2/4" id="game-of-life-canvas"></canvas>
+    <button
+      class="inline-block rounded-md border border-transparent bg-indigo-600 px-3 py-3 text-center text-white hover:bg-indigo-700 my-4"
+      id="play-pause"
     >
-    <canvas id="game-of-life-canvas"></canvas>
-    <button id="play-pause"></button>
+      <i id="play-pause-icon"></i>
+    </button>
     <script src="./bootstrap.js"></script>
   </body>
 </html>
diff --git a/www/index.js b/www/index.js
@@ -1,7 +1,7 @@
 import { Universe, Cell } from "wasm-game-of-life";
 import { memory } from "wasm-game-of-life/wasm_game_of_life_bg";
 
-const CELL_SIZE = 10; // px
+const CELL_SIZE = 5; // px
 const GRID_COLOR = "#CCCCCC";
 const DEAD_COLOR = "#FFFFFF";
 const ALIVE_COLOR = "#000000";
@@ -35,14 +35,15 @@ const isPaused = () => {
 };
 
 const playPauseButton = document.getElementById("play-pause");
+const playPauseIcon = document.getElementById("play-pause-icon");
 
 const play = () => {
-  playPauseButton.textContent = "⏸";
+  playPauseIcon.className = "bi bi-pause-fill";
   renderLoop();
 };
 
 const pause = () => {
-  playPauseButton.textContent = "▶️";
+  playPauseIcon.className = "bi bi-play-fill";
   drawGrid();
   drawCells();
   cancelAnimationFrame(animationId);