Add initial/final genome displays

author: Brian Cully <bjc@kublai.com> 2021-02-19 20:11:23 -0500
committer: Brian Cully <bjc@kublai.com> 2021-02-19 20:11:23 -0500
commit: 6fc5f812561ecd556d185084e2b9a611c5b9ccd8 (patch)
tree: 315513fc7585fe1290e01a03320f473f7289a9af
parent: bdf1d88883256c0d2731600d604af22d27d8ee7f (diff)
download: molsim2-6fc5f812561ecd556d185084e2b9a611c5b9ccd8.tar.gz
molsim2-6fc5f812561ecd556d185084e2b9a611c5b9ccd8.zip
7 files changed, 124 insertions, 64 deletions
diff --git a/genome-list.mjs b/genome-list.mjs
index 8969a8c..ddb5361 100644
--- a/genome-list.mjs
+++ b/genome-list.mjs
@@ -1,13 +1,14 @@
 class GenomeList {
     constructor(elt) {
 	this.genomes = [];
-	this.elt = elt;
+        this.elt = elt
     }
 
     push(genome) {
 	this.genomes.push(genome)
-	this.elt.appendChild(genome.elt)
-        window.genome = genome
+        const li = document.createElement('li')
+        li.appendChild(genome.elt)
+	this.historyElt.appendChild(li)
         genome.elt.scrollIntoView(false)
     }
 
@@ -18,6 +19,31 @@ class GenomeList {
 	    return undefined
 	}
     }
+
+    get historyElt() {
+        if (this._historyElt === undefined) {
+            this._historyElt = document.createElement('ol')
+            this.elt.querySelector('.history').appendChild(this._historyElt)
+        }
+        return this._historyElt
+    }
+
+    set initialGenome(genome) {
+        this.initialElt.appendChild(genome.elt)
+    }
+
+    set finalGenome(genome) {
+        this.finalElt.appendChild(genome.elt)
+        this.finalElt.classList.remove('hidden')
+    }
+
+    get initialElt() {
+        return this.elt.querySelector('.initial')
+    }
+
+    get finalElt() {
+        return this.elt.querySelector('.final')
+    }
 }
 
 export default GenomeList
diff --git a/genome.mjs b/genome.mjs
index bb5c09a..3dd294f 100644
--- a/genome.mjs
+++ b/genome.mjs
@@ -4,20 +4,17 @@ import { randomItem } from './utils.mjs'
 
 class Genome {
     constructor(nucleotides) {
-        const codonList = document.createElement('ol')
-
         this.codons = []
         let tmpCodon = []
         nucleotides.forEach(base => {
             tmpCodon.push(base)
             if (tmpCodon.length == 3) {
                 const c = new Codon(...tmpCodon)
-                codonList.appendChild(c.elt)
+                this.elt.appendChild(c.elt)
                 this.codons.push(c)
                 tmpCodon = []
             }
         })
-        this.elt.appendChild(codonList)
 
         this.lock()
         this._boundNucleotideClickedHandler =
@@ -31,7 +28,7 @@ class Genome {
 
     get elt() {
         if (this._elt === undefined) {
-            this._elt = document.createElement('li')
+            this._elt = document.createElement('ol')
             this._elt.classList.add('genome')
         }
         return this._elt
diff --git a/index.html b/index.html
index 3b41efc..302e8c8 100644
--- a/index.html
+++ b/index.html
@@ -18,8 +18,11 @@
   </head>
 
   <body>
-    <ol id='genome-history' start='0'></ol>
-    </ol>
+    <div id='genome-list'>
+      <div class='initial'></div>
+      <div class='history'></div>
+      <div class='final hidden'></div>
+    </div>
 
     <div id='instructions'>
       <div id='die'>
diff --git a/main.mjs b/main.mjs
index cb2b207..99277a7 100644
--- a/main.mjs
+++ b/main.mjs
@@ -1,7 +1,7 @@
 import Rules from './rules.mjs'
 
 function init() {
-    const genomeList = document.querySelector('#genome-history')
+    const genomeList = document.querySelector('#genome-list')
     const die = document.querySelector('#die')
     const aminoAcidSelector = document.querySelector('#amino-acid-selector')
     const nucleotideSelector = document.querySelector('#nucleotide-selector')
diff --git a/mobile.css b/mobile.css
index ef541e1..4bdb760 100644
--- a/mobile.css
+++ b/mobile.css
@@ -1,10 +1,16 @@
+* {
+    padding: 0;
+    margin: 0;
+}
+
 body {
     display: flex;
+    flex-wrap: nowrap;
     flex-direction: column;
     align-items: stretch;
     margin: 0;
 
-    background-color: #eee;
+    background-color: #ddd;
 
     position: absolute;
     top: 0;
@@ -35,13 +41,72 @@ body {
     margin-bottom: 5px;
 }
 
-#genome-history {
+#genome-list {
     margin: 0;
     overflow: scroll;
     align-self: stretch;
     flex-basis: 50%;
 }
 
+#genome-list .initial,
+#genome-list .history,
+#genome-list .final {
+    padding-left: 2.5em;
+}
+
+#genome-list .initial {
+    border-bottom: 1px dashed black;
+}
+
+#genome-list .history {
+    background-color: #eee;
+}
+
+#genome-list .final {
+    border-top: 1px dashed black;
+}
+
+.genome {
+    padding: 0;
+}
+
+.genome.locked {
+    cursor: text
+}
+
+.genome .codon {
+    display: inline-block;
+    margin: 5px;
+    border: 1px solid black;
+
+    background-color: white;
+}
+
+.genome .codon>ol {
+    padding: 1ex 0.5em;
+}
+
+.genome .codon .amino-acid {
+    border-top: 1px solid black;
+    text-align: center;
+    padding-top: 0.5ex;
+    padding-bottom: 0.5ex;
+}
+
+.genome .nucleotide {
+    display: inline-block;
+    width: 28px;
+    font-size: 18px;
+    text-align: center;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.genome .nucleotide span {
+    display: inline-block;
+}
+
 #instructions {
     padding: 1ex;
     margin: 0;
@@ -57,6 +122,11 @@ body {
     border-bottom-width: 0;
 }
 
+#instructions ol,
+#instructions ul {
+    padding-left: 2.5em;
+}
+
 #instructions .step {
     padding: 5px;
 }
@@ -183,44 +253,3 @@ body {
     background-color: ivory;
     border: 1px solid black;
 }
-
-.genome>ol {
-    padding: 0;
-}
-
-.genome.locked {
-    cursor: text
-}
-
-.genome .codon {
-    display: inline-block;
-    margin: 5px;
-    border: 1px solid black;
-
-    background-color: white;
-}
-
-.genome .codon>ol {
-    padding: 1ex 0.5em;
-}
-
-.genome .codon .amino-acid {
-    border-top: 1px solid black;
-    text-align: center;
-    padding-top: 0.5ex;
-    padding-bottom: 0.5ex;
-}
-
-.genome .nucleotide {
-    display: inline-block;
-    width: 28px;
-    font-size: 18px;
-    text-align: center;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    align-items: center;
-}
-
-.genome .nucleotide span {
-    display: inline-block;
-}
diff --git a/rules.mjs b/rules.mjs
index 9543ee2..ac8d61b 100644
--- a/rules.mjs
+++ b/rules.mjs
@@ -23,6 +23,8 @@ class RollForNucleotide {
 
     exit() {
         this.rules.die.disable()
+        // TODO: debugging
+        this.rules.die.value = 20
         this.rules.die.onChanged = undefined
     }
 
@@ -65,7 +67,6 @@ class NucleotideSelect {
     }
 
     handleClone(evt) {
-        window.r = this.rules
         if (this.rules.die.value <= this.rules.currentGenome.length) {
             this.rules.error.innerHTML =
                 `Select the ${this.ordinalFor(this.rules.die.value)} nucleotide.`
@@ -75,7 +76,7 @@ class NucleotideSelect {
 
         this.rules.iterations--
         if (this.rules.iterations === 0) {
-            this.rules.next(new PrintResults(this.rules))
+            this.rules.next(new PrintResults(this.rules, this.rules.currentGenome.clone()))
         } else {
             this.rules.genomeList.push(this.rules.currentGenome.clone())
             this.rules.next(new RollForNucleotide(this.rules))
@@ -203,7 +204,6 @@ class SelectAminoAcid {
     }
 
     enter() {
-        window.t = this
         const selector = this.rules.aminoAcidSelector
         this.codon = this.rules.currentGenome.selectedCodon
         this.expected = AminoAcid.codonMap[this.codon.value]
@@ -228,7 +228,7 @@ class SelectAminoAcid {
     handleItemSelected(aminoAcid) {
         if (!this.validSelection(aminoAcid)) {
             this.rules.error.innerHTML =
-                `The codon ${this.codon.value} does not code for ${aminoAcid}`
+                `The codon <strong>${this.codon.value}</strong> does not code for <strong>${aminoAcid}</strong>`
             this.rules.next(new ShowError(this.rules, this))
             return
         }
@@ -304,7 +304,7 @@ class MarkAsLethal {
     nextGoodState(genome) {
         this.rules.iterations--
         if (this.rules.iterations === 0) {
-            this.rules.next(new PrintResults(this.rules))
+            this.rules.next(new PrintResults(this.rules, genome.clone()))
         } else {
             this.rules.genomeList.push(genome.clone())
             this.rules.next(new RollForNucleotide(this.rules))
@@ -313,14 +313,16 @@ class MarkAsLethal {
 }
 
 class PrintResults {
-    constructor(rules) {
+    constructor(rules, finalGenome) {
         this.rules = rules
+        this.finalGenome = finalGenome
 
         this.id = 'print-results'
         this._boundClickHandler = this.clickHandler.bind(this)
     }
 
     enter() {
+        this.rules.genomeList.finalGenome = this.finalGenome
         this.rules.printButton.addEventListener('click', this._boundClickHandler)
         this.rules.printButton.disabled = false
     }
@@ -370,9 +372,12 @@ class Rules {
         this.error = new Error(errors)
 
         this.iterations = Rules.maxIterations
-        this.genomeList.push(new Genome(Rules.initialGenomeBases))
-        this.genomeList.push(this.currentGenome.clone())
 
+        const initialGenome = new Genome(Rules.initialGenomeBases)
+        this.genomeList.initialGenome = initialGenome
+        this.genomeList.push(initialGenome.clone())
+
+        // TODO: debugging
         if (false) {
             this._debugStartAtRollForMutation()
         } else if (false) {
@@ -483,7 +488,7 @@ class Rules {
         this.enterState()
     }
 }
-Rules.maxIterations = 10
+Rules.maxIterations = 3
 Rules.initialGenomeBases = [
     'G', 'C', 'A',
     'C', 'T', 'C',
diff --git a/tablet.css b/tablet.css
index 3774e6c..f14493a 100644
--- a/tablet.css
+++ b/tablet.css
@@ -18,6 +18,6 @@ body {
     display: block;
 }
 
-#genome-history {
+#genome-list {
     flex-grow: 4;
 }
author	Brian Cully <bjc@kublai.com>	2021-02-19 20:11:23 -0500
committer	Brian Cully <bjc@kublai.com>	2021-02-19 20:11:23 -0500
commit	6fc5f812561ecd556d185084e2b9a611c5b9ccd8 (patch)
tree	315513fc7585fe1290e01a03320f473f7289a9af
parent	bdf1d88883256c0d2731600d604af22d27d8ee7f (diff)
download	molsim2-6fc5f812561ecd556d185084e2b9a611c5b9ccd8.tar.gz molsim2-6fc5f812561ecd556d185084e2b9a611c5b9ccd8.zip