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 ${this.codon.value} does not code for ${aminoAcid}` 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; } -- cgit v1.2.3