Finally get nucleotide selector working without hacks

At least, I think without hacks. I don’t know what I’m doing.

2 files changed, 24 insertions, 19 deletions

diff --git a/mobile.css b/mobile.css
index 475c40c..c965da0 100644
--- a/mobile.css
+++ b/mobile.css
@@ -75,6 +75,10 @@ button {
     background-color: white;
 }
 
+.genome .codon>ol {
+    display: flex;
+}
+
 .genome .codon .amino-acid {
     border-top: 1px solid black;
     text-align: center;
@@ -87,14 +91,17 @@ button {
     height: 32px;
     width: 32px;
     font-size: 18px;
-    text-align: center;
     flex-wrap: wrap;
     justify-content: space-around;
     align-items: center;
 }
 
 .genome .nucleotide span {
-    display: inline-block;
+    display: inline-flex;
+    height: 32px;
+    width: 32px;
+    justify-content: space-around;
+    align-items: center;
 }
 
 #instructions {
@@ -152,10 +159,8 @@ button {
 
 #nucleotide-selector {
     position: relative;
+    display: flex;
     white-space: nowrap;
-    word-spacing: -6px; /* TODO: 0 doesn't work. And for some reason whitespace is being renderded between <li> elements? */
-    width: 8em; /* TODO: this shouldn't be hard coded. */
-
     background-color: ivory;
     border: 1px solid black;
 }
@@ -165,6 +170,15 @@ button {
     cursor: pointer;
 }
 
+#nucleotide-selector li {
+    display: inline-flex;
+    height: 32px;
+    width: 32px;
+    font-size: 18px;
+    justify-content: space-around;
+    align-items: center;
+}
+
 #nucleotide-selector li:hover,
 .genome:not(.locked) .nucleotide:hover {
     background-color: orange;
@@ -220,15 +234,6 @@ button {
     background-color: red;
 }
 
-#nucleotide-selector li {
-    display: inline-block;
-    width: 2em;
-    flex-basis: 2em;
-    text-align: center;
-    padding-top: 1ex;
-    padding-bottom: 1ex;
-}
-
 #lethality-selector {
     position: fixed;
     left: 50%;
diff --git a/rules.mjs b/rules.mjs
index 9f6fb7d..f36a956 100644
--- a/rules.mjs
+++ b/rules.mjs
@@ -376,11 +376,11 @@ class Rules {
         // TODO: debugging
         if (false) {
             this._debugStartAtRollForMutation()
-        } else if (false) {
-            this._debugStartAtPerformMutation(3)
+        } else if (true) {
+            this._debugStartAtPerformMutation(9)
         } else if (false) {
             this._debugStartAtSelectAminoAcid()
-        } else if (true) {
+        } else if (false) {
             this._debugStartAtSelectLethality()
         } else if (false) {
             this._debugStartWithError()
@@ -418,8 +418,8 @@ class Rules {
         })
 
         this.currentState = new PerformMutation(this)
-        this.die.value = 15
-        const nucleotide = this.currentGenome.nucleotides[15]
+        this.die.value = 18
+        const nucleotide = this.currentGenome.nucleotides[this.die.value-1]
         this.currentGenome.selectedNucleotide = nucleotide
     }