Rarity-color ranges in outputs and link to first ordinal in ranges (#348

)

src/subcommand/server/templates/output.rs

@@ -30,8 +30,8 @@ mod tests {
  <h1>Output 4a5e1e4baab89f3a32518a88c31bc87f618f76673e2cc77ab2127b7afdeda33b:0</h1>
  <h2>Ordinal Ranges</h2>
  <ul>
- <li><a href=/range/0/1>[0,1)</a></li>
- <li><a href=/range/1/2>[1,2)</a></li>
+ <li><a href=/range/0/1 class=mythic>[0,1)</a></li>
+ <li><a href=/range/1/2 class=common>[1,2)</a></li>
  </ul>
  "
  .unindent()

src/subcommand/server/templates/range.rs

@@ -28,7 +28,7 @@ mod tests {
  <h1>Ordinal range [0,1)</h1>
  <dl>
  <dt>size</dt><dd>1</dd>
- <dt>first</dt><dd><a href=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/ordinal/0>0</a></dd>
+ <dt>first</dt><dd><a href=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/ordinal/0 class=mythic>0</a></dd>
  </dl>
  "
  .unindent()
@@ -47,7 +47,7 @@ mod tests {
  <h1>Ordinal range [1,10)</h1>
  <dl>
  <dt>size</dt><dd>9</dd>
- <dt>first</dt><dd><a href=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/ordinal/1>1</a></dd>
+ <dt>first</dt><dd><a href=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/ordinal/1 class=common>1</a></dd>
  </dl>
  "
  .unindent()

static/index.css

@@ -36,32 +36,56 @@ nav {
  justify-content: left;
 }
 
-.common, .uncommon, .rare, .epic, .legendary, .mythic {
+span.common, span.uncommon, span.rare, span.epic, span.legendary, span.mythic {
  border-radius: 0.25rem;
  padding: 0.125rem 0.25rem 0.125rem 0.25rem;
 }
 
-.common {
- background-color: whitesmoke;
+span.common {
+ background-color: grey;
 }
 
-.uncommon {
+span.uncommon {
  background-color: forestgreen;
 }
 
-.rare {
+span.rare {
  background-color: cornflowerblue;
 }
 
-.epic {
+span.epic {
  background-color: darkorchid;
 }
 
-.legendary {
+span.legendary {
  background-color: gold;
 }
 
-.mythic {
+span.mythic {
  background-color: #f2a900;
  color: white;
 }
+
+a.common {
+ color: grey;
+}
+
+a.uncommon {
+ color: forestgreen;
+}
+
+a.rare {
+ color: cornflowerblue;
+}
+
+a.epic {
+ color: darkorchid;
+}
+
+a.legendary {
+ color: gold;
+}
+
+a.mythic {
+ color: #f2a900;
+}

templates/output.html

@@ -4,7 +4,7 @@ <h1>Output {{self.outpoint}}</h1>
 <h2>Ordinal Ranges</h2>
 <ul>
 %% for (start, end) in ranges {
- <li><a href=/range/{{start}}/{{end}}>[{{start}},{{end}})</a></li>
+ <li><a href=/range/{{start}}/{{end}} class={{Ordinal(*start).rarity()}}>[{{start}},{{end}})</a></li>
 %% }
 </ul>
 %% }

templates/range.html

@@ -1,5 +1,5 @@
 <h1>Ordinal range [{{self.start}},{{self.end}})</h1>
 <dl>
  <dt>size</dt><dd>{{self.end.n() - self.start.n()}}</dd>
- <dt>first</dt><dd><a href=/ordinal/{{self.start.n()}}>{{self.start.n()}}</a></dd>
+ <dt>first</dt><dd><a href=/ordinal/{{self.start.n()}} class={{self.start.rarity()}}>{{self.start.n()}}</a></dd>
 </dl>

tests/server.rs

@@ -52,7 +52,7 @@ fn range() {
  r".*<title>Ordinal range \[0,1\)</title>.*<h1>Ordinal range \[0,1\)</h1>
 <dl>
  <dt>size</dt><dd>1</dd>
- <dt>first</dt><dd><a href=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/ordinal/0>0</a></dd>
+ <dt>first</dt><dd><a href=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/ordinal/0 class=mythic>0</a></dd>
 </dl>.*",
  );
 }
@@ -116,7 +116,7 @@ fn output() {
  ".*<title>Output 4a5e1e4baab89f3a32518a88c31bc87f618f76673e2cc77ab2127b7afdeda33b:0</title>.*<h1>Output 4a5e1e4baab89f3a32518a88c31bc87f618f76673e2cc77ab2127b7afdeda33b:0</h1>
 <h2>Ordinal Ranges</h2>
 <ul>
- <li><a href=/range/0/5000000000>\\[0,5000000000\\)</a></li>
+ <li><a href=/range/0/5000000000 class=mythic>\\[0,5000000000\\)</a></li>
 </ul>.*",
  );
 }
@@ -155,7 +155,7 @@ fn spent_output_returns_200() {
  ".*<title>Output {txid}:0</title>.*<h1>Output {txid}:0</h1>
 <h2>Ordinal Ranges</h2>
 <ul>
- <li><a href=/range/5000000000/10000000000>\\[5000000000,10000000000\\)</a></li>
+ <li><a href=/range/5000000000/10000000000 class=uncommon>\\[5000000000,10000000000\\)</a></li>
 </ul>.*"
  ),
  );