From ede07e6e38a346b3ff0bbccefb655f3ae0a32504 Mon Sep 17 00:00:00 2001
From: Star Rauchenberger <fefferburbia@gmail.com>
Date: Wed, 29 Nov 2023 23:01:44 -0500
Subject: Rewrite web component with Sinatra

---
 web/views/index.haml | 24 +++++++++++++++++++++++
 web/views/style.scss | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 79 insertions(+)
 create mode 100644 web/views/index.haml
 create mode 100644 web/views/style.scss

(limited to 'web/views')

diff --git a/web/views/index.haml b/web/views/index.haml
new file mode 100644
index 0000000..186dd40
--- /dev/null
+++ b/web/views/index.haml
@@ -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
diff --git a/web/views/style.scss b/web/views/style.scss
new file mode 100644
index 0000000..a65cd94
--- /dev/null
+++ b/web/views/style.scss
@@ -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
-- 
cgit 1.4.1