Interface improvements

src/App.jsx

@@ -1,13 +1,9 @@
 import './App.css'
 import {useState} from "react";
 import {GameOfLifeHashCSS} from "./GameOfLifeCSS/GameOfLifeHashCSS.jsx";
-import {TextInput} from "./TextInput.jsx";
-import {TextBox} from "./TextBox.jsx";
-import {bitStreamToBase64} from "./bitStreamToBase64.js";
 import {PasswordToBits} from "./PasswordToBits.jsx";
 import {BitsToHash} from "./BitsToHash.jsx";
 
-const bitsStream = [1, 0, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0]
 const getStringBits = (string) => {
     let res = '';
     for (let i = 0; i < string.length; i++) {
@@ -25,16 +21,10 @@ const padBitsTo256 = (bits) => {
     } else {
         return bits;
     }
-
 }
 
-const generateSeed = () => [...Array(256)].map(() => Math.random() > 0.5 ? 1 : 0);
-
-
-
-
 function App() {
-    const [seed, setSeed] = useState(generateSeed());
+    const [seed, setSeed] = useState([]);
     const [resultBits, setResultBits] = useState('');
 
     const handleSubmit = (e) => {

src/Arrow.css

@@ -1,8 +1,8 @@
 .arrow {
-    width: 200px;
-    height: 200px;
-    background-color: red;
-    clip-path: polygon(0% 40%, 70% 40%, 70% 25%, 100% 50%, 70% 75%, 70% 60%, 0% 60%);
+    width: 100px;
+    height: 100px;
+    background-color: grey;
+    clip-path: polygon(10% 40%, 60% 40%, 60% 25%, 90% 50%, 60% 75%, 60% 60%, 10% 60%);
 }
 
 .down {

src/BitsToHash.css

@@ -1,3 +1,4 @@
 .b {
     grid-area: b;
-}
+}
+

src/BitsToHash.jsx

@@ -5,9 +5,9 @@ import {bitStreamToBase64} from "./bitStreamToBase64.js";
 export const BitsToHash = ({resultBits}) => {
     return (
         <div className="password-bits b">
-            <TextBox>{resultBits && resultBits.length ? bitStreamToBase64(resultBits.split('')) : 'Digest' }</TextBox>
+            <TextBox className="digest" title="Digest">{resultBits && resultBits.length ? bitStreamToBase64(resultBits.split('')) : '' }</TextBox>
             <Arrow direction="up" />
-            <TextBox>{resultBits && resultBits.length ? resultBits : 'Bits'}</TextBox>
+            <TextBox title="Hashed bits">{resultBits && resultBits.length ? resultBits : ''}</TextBox>
             <Arrow direction="up" />
         </div>
     )

src/GameOfLifeCSS/GameOfLifeDisplayCSS.css

@@ -1,13 +1,18 @@
+:root {
+    --cell-width: 30px;
+}
+
 .grid-container {
     display: grid;
-    grid-template-columns: repeat(16, 20px);
+    grid-template-columns: repeat(16, var(--cell-width));
     gap: 1px;
     background-color: black;
+    border: 1px solid black;
 }
 
 .cell {
-    width: 20px;
-    height: 20px;
+    width: var(--cell-width);
+    height: var(--cell-width);
 }
 
 .alive {

src/GameOfLifeCSS/GameOfLifeHashCSS.jsx

@@ -5,7 +5,7 @@ import {Universe} from "@tgianella/js-game-of-life";
 import "../GameOfLifeHash.css"
 
 export const GameOfLifeHashCSS = ({seed, setResultBits}) => {
-    const universe = new Universe(false, 16, 16, seed);
+    const universe = new Universe(!seed.length, 16, 16, seed.length ? seed : null);
 
     return (
         <div className="game-of-life-wrapper">

src/PasswordToBits.css

@@ -2,7 +2,8 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    align-self: start;
+    align-self: end;
+    gap: 10px;
 }
 
 .a {

src/PasswordToBits.jsx

@@ -10,7 +10,7 @@ export const PasswordToBits = ({handleSubmit, seed}) => {
         <div className="password-bits a">
             <TextInput onSubmit={handleSubmit}/>
             <Arrow direction="down" />
-            <TextBox>{seed.join('')}</TextBox>
+            <TextBox title="Plaintext bits">{seed.join('')}</TextBox>
             <Arrow direction="down" />
         </div>
     )

src/TextBox.css

@@ -1,7 +1,21 @@
 .text-box {
-    width: 200px;
-    border: 1px solid red;
-    max-width: 200px;
+    max-width: 400px;
     text-overflow: ellipsis;
     overflow: hidden;
+    margin-block: 0;
+}
+
+fieldset {
+    width: 400px;
+    max-width: 400px;
+    min-height: 65px;
+}
+
+legend {
+    margin-left: -30%;
+}
+
+.digest {
+    word-wrap: break-word;
+    text-align: start;
 }

src/TextBox.jsx

@@ -1,5 +1,9 @@
-export const TextBox = ({children}) => {
+import './TextBox.css'
+export const TextBox = ({className, children, title}) => {
     return (
-        <p className="text-box">{children}</p>
+        <fieldset>
+            <legend>{title}</legend>
+            <p className={`text-box ${className}`}>{children}</p>
+        </fieldset>
     )
 }

src/TextInput.css

@@ -0,0 +1,12 @@
+.password-form {
+    display: flex;
+    gap: 20px;
+    align-items: center;
+    margin-block: 30px;
+}
+
+.password-input {
+    font-size: 20px;
+    padding-block: 10px;
+    text-align: center;
+}

src/TextInput.jsx

@@ -1,9 +1,9 @@
-import './TextBox.css';
+import './TextInput.css';
 
 export const TextInput = ({onSubmit}) => {
     return (
-        <form onSubmit={onSubmit}>
-            <input name="plaintext" />
+        <form className="password-form" onSubmit={onSubmit}>
+            <input className="password-input" name="plaintext" />
             <button type="submit">Envoyer</button>
         </form>
     )

src/index.css

@@ -2,10 +2,11 @@
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
+  font-size: 20px;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  color: #242424;
+  background-color: white;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;