Rewrite web component with Sinatra

2 files changed, 79 insertions, 0 deletions

@@ -0,0 +1,24 @@
+!!! 5
+%html
+  %head
+    %title LINGO Bot Scoreboard
+    %link{ rel: "stylesheet", href: "style.css", type: "text/css"}
+  %body
+    #header
+      %img{ src: "header.png" }
+    #content
+      %h2 Bot Puzzles Scoreboard
+      %table#scores
+        %tr.scores-header
+          %th
+          %th{colspan: 2} Player
+          %th Score
+        - row_cycle = ["even", "odd"].cycle
+        - @scores.each_with_index do |score,index|
+          %tr{class: row_cycle.next}
+            %td.score-index #{index+1}.
+            %td.score-pfp
+              - if !score.avatar_url.nil?
+                %img{ src: score.avatar_url }
+            %td.score-name= score.username
+            %td.score-value= score.score
@@ -0,0 +1,55 @@
+body {
+  background-color: black;
+  color: white;
+  font-family: sans-serif;
+}
+
+#header {
+  width: 100%;
+
+  img {
+    max-width: 80%;
+    margin: 0 auto;
+    display: block;
+  }
+}
+
+h2 {
+  text-align: center;
+}
+
+#scores {
+  margin: 0 auto;
+  border-spacing: 0px;
+  tr {
+    &.even {
+      background-color: gray;
+    }
+    &.odd {
+      background-color: purple;
+    }
+    th {
+      text-align: left;
+      padding-left: 0.5em;
+      padding-bottom: 0.5em;
+    }
+    td {
+      padding-right: 1em;
+      padding-top: 0.5em;
+      padding-bottom: 0.5em;
+      border-collapse: collapse;
+      &:first-child {
+        padding-left: 1em;
+      }
+      img {
+        width: 2em;
+      }
+      &.score-pfp {
+        width: 2em;
+      }
+      &.score-value {
+        text-align: center;
+      }
+    }
+  }
+}
\ No newline at end of file