From d04f806c5741de18fc01d47d30151cc1fcf3d521 Mon Sep 17 00:00:00 2001
From: Felipe Contreras Salinas <felipe@bstr.cl>
Date: Sat, 15 Mar 2025 20:37:49 -0300
Subject: [PATCH] chore: improve number display and other comsmetic fixes

---
 README.md                    |  7 +++-
 public/styles.scss           | 24 +++++++++---
 rust-analyzer.toml           |  2 +
 rustfmt.toml                 |  1 +
 src/components/calculator.rs | 71 ++++++++++++++++++++----------------
 5 files changed, 66 insertions(+), 39 deletions(-)
 create mode 100644 rust-analyzer.toml
 create mode 100644 rustfmt.toml

diff --git a/README.md b/README.md
index 562cd6f..f244c92 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,12 @@ rustup target add wasm32-unknown-unknown
 
 We will also use the [Trunk] tool to run and build our project.
 
+Finally, it's recommended to install the `leptosfmt` tool, since plain `rustfmt`
+can't dealt with `view!` macros very well.
+```sh
+cargo install leptosfmt
+```
+
 ## Developing
 
 To develop the project, run
@@ -18,7 +24,6 @@ trunk serve --port 3000 --open
 ```
 which, will open the app in your default browser at `http://localhost:3000`.
 
-
 ## Deploying
 
 To build the project for release, use the command
diff --git a/public/styles.scss b/public/styles.scss
index 56b7814..46fde96 100644
--- a/public/styles.scss
+++ b/public/styles.scss
@@ -21,6 +21,16 @@ body {
   align-items: center;
 }
 
+header {
+  display: flex;
+  align-items: center;
+  justify-content: end;
+}
+
+header > select {
+  margin: 0 1em;
+}
+
 h1,
 h2,
 h3,
@@ -35,6 +45,7 @@ h6 {
 h1.title {
   width: 80vw;
   max-inline-size: 80vw;
+  padding-top: 1rem;
 }
 
 p {
@@ -62,21 +73,22 @@ form input {
   width: 4em;
 }
 
-form > div.results {
+div.results {
   display: grid;
-  grid-template-columns: 1fr 8em 5em 1fr;
+  grid-template-columns: 1fr 7em 1rem 5em 1fr;
+  padding-top: 1em;
   min-width: 20em;
   max-width: 30em;
   width: 30vw;
   font-size: 1.2em;
 }
 
-form > div.results > span.left {
+div.results > span.left {
   grid-column: 2 / 3;
   text-align: right;
-  padding-right: 1em;
 }
 
-form > div.results > span.right {
-  grid-column: 3 / 4;
+div.results > span.right {
+  grid-column: 4 / 5;
+  text-align: left;
 }
diff --git a/rust-analyzer.toml b/rust-analyzer.toml
new file mode 100644
index 0000000..c111f76
--- /dev/null
+++ b/rust-analyzer.toml
@@ -0,0 +1,2 @@
+[rustfmt] 
+overrideCommand = ["leptosfmt", "--stdin", "--rustfmt"]
diff --git a/rustfmt.toml b/rustfmt.toml
new file mode 100644
index 0000000..f216078
--- /dev/null
+++ b/rustfmt.toml
@@ -0,0 +1 @@
+edition = "2024"
diff --git a/src/components/calculator.rs b/src/components/calculator.rs
index 209d77d..8211455 100644
--- a/src/components/calculator.rs
+++ b/src/components/calculator.rs
@@ -77,38 +77,45 @@ pub fn Calculator() -> impl IntoView {
                     }
                 />
             </p>
-            <div class="results">
-                <span class="left">
-                    <span>"P(X = "</span>
-                    <span>{sample_successes}</span>
-                    <span>"): "</span>
-                </span>
-                <span class="right">{move || result().exactly}</span>
-                <span class="left">
-                    <span>"P(X < "</span>
-                    <span>{sample_successes}</span>
-                    <span>"): "</span>
-                </span>
-                <span class="right">{move || result().less_than}</span>
-                <span class="left">
-                    <span>"P(X ≤ "</span>
-                    <span>{sample_successes}</span>
-                    <span>"): "</span>
-                </span>
-                <span class="right">{move || result().less_or_equal}</span>
-                <span class="left">
-                    <span>"P(X > "</span>
-                    <span>{sample_successes}</span>
-                    <span>"): "</span>
-                </span>
-                <span class="right">{move || result().greater_than}</span>
-                <span class="left">
-                    <span>"P(X ≥ "</span>
-                    <span>{sample_successes}</span>
-                    <span>"): "</span>
-                </span>
-                <span class="right">{move || result().greater_or_equal}</span>
-            </div>
         </form>
+        <div class="results">
+            <span class="left">
+                <span>"P(X = "</span>
+                <span>{sample_successes}</span>
+                <span>"): "</span>
+            </span>
+            <span class="right">{move || display_rounded(result().exactly)}</span>
+            <span class="left">
+                <span>"P(X < "</span>
+                <span>{sample_successes}</span>
+                <span>"): "</span>
+            </span>
+            <span class="right">{move || display_rounded(result().less_than)}</span>
+            <span class="left">
+                <span>"P(X ≤ "</span>
+                <span>{sample_successes}</span>
+                <span>"): "</span>
+            </span>
+            <span class="right">{move || display_rounded(result().less_or_equal)}</span>
+            <span class="left">
+                <span>"P(X > "</span>
+                <span>{sample_successes}</span>
+                <span>"): "</span>
+            </span>
+            <span class="right">{move || display_rounded(result().greater_than)}</span>
+            <span class="left">
+                <span>"P(X ≥ "</span>
+                <span>{sample_successes}</span>
+                <span>"): "</span>
+            </span>
+            <span class="right">{move || display_rounded(result().greater_or_equal)}</span>
+        </div>
     }
 }
+
+fn display_rounded(x: f64) -> String {
+    format!("{x:.5}")
+        .trim_end_matches("0")
+        .trim_end_matches(".")
+        .to_string()
+}