From 1cc38665e562c7b447f073fd786a0167c4444271 Mon Sep 17 00:00:00 2001
From: Elijah Steres <elijahsteres@gmail.com>
Date: Tue, 29 Dec 2020 22:21:47 -0500
Subject: [PATCH] nearly done with the html/css; grids are the worst

---
 static/.DS_Store           | Bin 0 -> 6148 bytes
 static/games_page.css      | 164 ++++++++++++++++++++++++++++++++++++-
 static/img/base_empty.png  | Bin 0 -> 1169 bytes
 static/img/base_filled.png | Bin 0 -> 1194 bytes
 static/img/out_in.png      | Bin 0 -> 4094 bytes
 static/img/out_out.png     | Bin 0 -> 3443 bytes
 templates/index.html       |  56 ++++++++++++-
 7 files changed, 217 insertions(+), 3 deletions(-)
 create mode 100644 static/.DS_Store
 create mode 100644 static/img/base_empty.png
 create mode 100644 static/img/base_filled.png
 create mode 100644 static/img/out_in.png
 create mode 100644 static/img/out_out.png

diff --git a/static/.DS_Store b/static/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..a09a1797229b394436d0b5a793040fb34b159a6f
GIT binary patch
literal 6148
zcmeHKJ5Iwu5S<|@EYYN(K%&_z<OU`(2SB+13XuX*ET>8Dj+1Z^dai_c^WhV%a7hup
zk!GHEKD+iSc03}YtK)VlvJjC5YA7#eYO%O!B^T+L1J(9et{;c~P~}ZItac{P(#vkY
ztLih-4_&v}4;$n*H&^$sAMbCsKXv`EoroTus$HkvhcPlh2FL&zAOq*l0D87ba~ViW
z2FL&z_-4TFhXOTh6URWmI$(SR0NQW73!Z(J02Xrq+r%*t9*9OMFiJH?42^R5OXjtS
zV_=kv`pMWQPu84J)K7=Mc)DmCNJ|FDz$pW>ST3yp-$DPF|4)m!A_HXLtQgRFx9(Q>
zr0lKL$62o}&<E(3AlK7jycGkz6=Pwo`1)5~v1i2F#4*sz;rDVNe*}yd3K{qh20j5E
C#U?cX

literal 0
HcmV?d00001

diff --git a/static/games_page.css b/static/games_page.css
index 92fb9c8..fd2aabd 100644
--- a/static/games_page.css
+++ b/static/games_page.css
@@ -8,7 +8,7 @@ body {
     font-family: 'Alegreya', serif;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 100px 300px;
+    grid-template-rows: 100px 330px;
     grid-gap: 50px 30px; /*space between rows, then columns*/
     align-items: center;
     justify-items: center;
@@ -16,6 +16,11 @@ body {
     grid-auto-flow: row;
 }
 
+#title {
+    grid-column: 2;
+    grid-row: 1;
+}
+
 .h1 {
     margin: auto;
     width: 45%;
@@ -34,10 +39,165 @@ body {
 .game {
     font-family: 'Alegreya', serif;
     color: white;
+    align-self: stretch;
+    justify-self: stretch;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    background: #2f3136; /*discord dark theme background-secondary - the same color as the embeds*/
+    border: 4px solid;
+    border-radius: 4px;
+    border-color: rgb(113, 54, 138); /*matteo purple™*/
+    border-top: none;
+    border-right: none;
+    border-bottom: none;
 }
 
 h2 {
     font-family: 'Alegreya', serif;
     color: white;
     text-align: center;
-}
\ No newline at end of file
+}
+
+.header {
+    width: 100%;
+    background-color: #4f545c; /*discord's background-tertiary*/
+    border-top-right-radius: 4px;
+    height: max-content;
+    
+}
+
+.inning {
+    float: left;
+    margin: 5px;
+}
+
+.weather {
+    float: right;
+    margin: 5px;
+}
+
+.body {
+    margin: 10px;
+    display: grid;
+    grid-template-columns: 3fr 2fr;
+    grid-template-areas:
+      "scores info"
+      "players players"
+      "update update";
+    grid-template-rows: 130px;
+    grid-row-gap: 10px;
+    grid-column-gap: 10px;
+    flex: 1;
+}
+
+.scores {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.team {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.team_name {
+    overflow: hidden;
+}
+
+.info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    background: #4f545c;
+    padding-top: 8px;
+    padding-bottom: 4px;
+    margin-left: 15%;
+    border-radius: 4px;
+}
+
+.batting {
+    grid-area: batting;
+    font-size: 10pt;
+    text-align: left;
+    height: max-content;
+    padding: 5px;
+}
+
+.outs {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 60%;
+}
+
+.outs_title {
+    font-weight: bolder;
+}
+
+.outs_count {
+    display: flex;
+}
+
+.out {
+    height: 20px;
+}
+
+.team_name, .score {
+    font-size: 25px
+}
+
+.score {
+    background: #4f545c; /*discord's background-accent*/
+    width: 40px;
+    height: 40px;
+    border-radius: 20px;
+}
+
+.players {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    grid-area: players;
+    height: max-content;
+    width: 100%;
+}
+
+.player {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    max-width: 330px;
+}
+
+.player_name {
+    overflow: hidden;
+    margin-left: 15px;
+}
+
+.update {
+    grid-area: update;
+}
+
+.update_emoji, .update_text {
+    display: inline
+}
+
+.field {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: column;
+}
+
+.base1, .base2, .base3 {
+    height: 60px;
+}
+
+.base2 {
+    margin-bottom: -25%
+}
diff --git a/static/img/base_empty.png b/static/img/base_empty.png
new file mode 100644
index 0000000000000000000000000000000000000000..f989c7cb02f127d74e6f700e7af8803a4b88049f
GIT binary patch
literal 1169
zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1|$#LC7xzrU~I{Bb`J1#c2+1T%1_J8No8Qr
zm{>c}*5j~)%+dJZ?nR>P-5nMwE9UBSbXj<bb|);{A{td{u=5M|EE5$?y}qXGg9rPM
zu4?YyypC^Olfn<iM^9cXd7-5GPhWFO$Hxad<ln!ueRq%1Y4M?u&Dl%=rl&oQCMTI~
z*DBku)S>uAv7zILkL|>`GY5)m?jAmVeYeK>Pj=s*zX<=N#$2QHQRXslcSUnW+T}}@
z?}ghVJcByUcOK{6rSMVtdg}E17UHsE6=^3<EP2-Hd?aaO^HaVwRcF<CYJA$O+<rP;
zOKtrumcBJ8d2RJ4akkI5yk@;NaTh!;B;?`L(j#?h#Q~=&VZ9>4nz#BZf4IxkPl_?x
zc`D&agoCJ-%5naG?E80{atBY&3o>A1iOcz&%=6+N>#Wk-|LnHCea88qo^9QhZToLA
zq}h9}-@f&Opuq;-n3(ORmHa#IFt*JvIXOY*q<^r6NW*vIU&~|+D!9L_+qrk^x58fx
zDJxb#m45I*phHBn`tIYqwsZIXtzLHZK7X21(W0Bp-j2X%VN3FMcVYMsf(!O8p9~b?
zEbxddW?;}$24TjErS@e&LG}_)Usv`gJYw8DN-fOa>w!X&C9V-A&iT2ysd*&~&PAz-
zC8;S2<(VZJ3hti10pX2&;tUK-nVv3=Ar-gY-cjs|4wPtnIRB7nq=W0-H3~^Sp$l%$
zFwo`<)x2tW(>W!`ZAxII!vm+3MXR)o0)!=I248mYojhaZ&w28EF@+Y-YTrFw5k1v5
ze$}h+(7pP?=JQvt`WtDlaH5yL@rOVMoH%l%zNRK;^;NE>BR}~0`QKL9Y`Yd!U02tp
zVEV68fuj$u5URz|<<H@V7v{~Ir{K}^|I?>SZi@p~ui6%)r|8jJA1A<ayxpOO;|Q6A
zznemx0n^83!4CNzhd&7{kJyz3>?In19OO8{Pe7_^{dBXw<Bz}n`c-wgfBO6P?_GcK
zXK#$S(~__^F5dd}^WCd{RlE!`km1WVkcio9DaY6T>i51gx6h|-UU}`-)!Op%^3c$$
zrFZvltFf@J*{zalHv6th-tN0q&i5;PmtQWkn!9e>jkjgn=X`&e&r69f|CEs8D=cBL
zkmJ|B{K+R>{-m%xa#pZ|6Lm&##Q`jzf9`qvz53&1U_kaQcy0BumJ=2w;7~pH{mYO2
Zj7cdjD^nWI)d5o`gQu&X%Q~loCIE+802u%P

literal 0
HcmV?d00001

diff --git a/static/img/base_filled.png b/static/img/base_filled.png
new file mode 100644
index 0000000000000000000000000000000000000000..84e24edcff0924f8db5ff4fbf808277de863a55f
GIT binary patch
literal 1194
zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1|$#LC7xzrU~I{Bb`J1#c2+1T%1_J8No8Qr
zm{>c}*5j~)%+dJZ?nR>P-5nMwE9UBSbXj<bb|);{A{td{u=5M|EE5$?y}qXGg9rPM
zu4?YyypC^Olfn<iM^9cXd7-5GPhWFO$Hxad<ln!ueRq%1Y4M?u&Dl%=rl&oQCMTI~
z*DBku)S>uAv7zILkL|>`GY5)m?jAmVeYeK>Pj=s*zX<=N#$2QHQRXslcSUnW+T}}@
z?}ghVJcByUcOK{6rSMVtdg}E17UHsE6=^3<EP2-Hd?aaO^HaVwRcF<CYJA$O+<rP;
zOKtrumcBJ8d2RJ4akkI5yk@;NaTh!;B;?`L(j#?h#Q~=&VZ9>4nz#BZf4IxkPl_?x
zc`D&agoCJ-%5naG?E80{atBY&3o>A1iOcz&%=6+N>#Wk-|LnHCea88qo^9QhZToLA
zq}h9}-@f&Opuq;-n3(ORmHa#IFt*JvIXOY*q<^r6NW*vIU&~|+D!9L_+qrk^x58fx
zDJxb#m45I*phHBn`tIYqwsZIXtzLHZK7X21(W0Bp-j2X%VN3FMcLCBs@Y8vBJ&@uo
z@Q5sCV9-+rVaAH3_GLgp_7YEDSN117V%*$nXY`jY1PV!(xJHyX=jZ08=9Mrw7o{ea
zq^2m8XO?6rxO@5rgg5euGcYhUdAc};RNQ)db7R)zM26Of&5F+3_4x8+xo#Tmn6Yth
z&y={X*%sw5MJ+6^c`~(DNuPZ3<b}|S8~2wsc}xy*RJ1(b=-{#MWxc%91Mgkm^-g|Q
z(N8X|o}E%rQ`@@0+>YguvjUt55dQz^Q_+r{I~x}m{;RQ*zxMj80ngzL5jqMPz5j~^
zM2@#R)NmZ30`aGc<&n6uz<!CwA4fTk=({P@88UtB7VL=carl!&s??tQWgi|rO4_l1
z|96+~1?A=Cy9H{hCq6m5&7Sr0OA~i@_l<vVpFHU~DaA%E-|AD=lqb%Uu6wHa&)u<i
z@7a$Z3)42wRNv(uy*A9!*4B5Djg3u?RheB?&F4btrlU!W2j?A~@1wT6Z?5`JqhC*%
zIZi!NKlx(2zJf;Ae-Q?bu1EPy433_Eav2mfI`(rju&~Shw`5STc<|#qE5pIYWB-L2
z1Y{Ea?7zD_XJ^8WUAv07Klg8o(JPOA$K!eKAG-@j*JGsMM??e`)^%zH7jhtr9Q^wA
z>xQVcNAiJDVA=GsLT6t*(?>-Cc@P1Loz~xX<o>hovz)v|;z&adFv&7_y85}Sb4q9e
E0AKt8jsO4v

literal 0
HcmV?d00001

diff --git a/static/img/out_in.png b/static/img/out_in.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e6fa3eecb05372367899dc5b10ed0d4939ebfb2
GIT binary patch
literal 4094
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
VaMp0zzperhMN3T&Uax8s^<N6No9zGq

literal 0
HcmV?d00001

diff --git a/static/img/out_out.png b/static/img/out_out.png
new file mode 100644
index 0000000000000000000000000000000000000000..fd9a96ae6db9c6bcd775243567bc12657ca4d1f7
GIT binary patch
literal 3443
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
PwR;07B--?e2`=G($$vw&

literal 0
HcmV?d00001

diff --git a/templates/index.html b/templates/index.html
index af42576..ab2df6c 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -16,7 +16,61 @@
         </div>
         <div></div>
         <div class="emptyslot"></div>
-        <div class="emptyslot"></div>
+        <div class="game">
+            <div class="header">
+                <div class="inning">
+                    Inning: 🔼 1/9
+                </div>
+                <div class="weather">
+                    🌟 Supernova
+                </div>
+            </div>
+            <div class="body">
+                <div class="scores">
+                    <div class="team">
+                        <div class="team_name">Halifax Fire Sharks</div>
+                        <div class="score">0</div>
+                    </div>
+                    <div class="team">
+                        <div class="team_name">Dead Batteries</div>
+                        <div class="score">1</div>
+                    </div>
+                </div>
+                <div class="info">
+                    <div class="field">
+                        <img class="base2" src="/static/img/base_filled.png"/>
+                        <div style="display: flex;">
+                            <img class="base3" src="/static/img/base_empty.png"/>
+                            <img class="base1" src="/static/img/base_empty.png"/>
+                        </div>
+                    </div>
+                    <div class="outs">
+                        <div class="outs_title">OUTS</div>
+                        <div class="outs_count">
+                            <img class="out" src="/static/img/out_out.png"/>
+                            <img class="out" src="/static/img/out_in.png"/>
+                        </div>
+                    </div>
+                </div>
+                <div class="players">
+                    <div class="player">
+                        <div class="player_type">Pitcher:</div>
+                        <div class="player_name">Hot Fish Summer</div>
+                    </div>
+                    <div class="player">
+                        <div class="player_type">Batter:</div>
+                        <div class="player_name">Shape Batteries</div>
+                    </div>
+                </div>
+                <div class="update">
+                    <div class="update_emoji">🏏</div>
+                    <div class="update_text">Shape Batteries grounds out to Honk For Santa.</div>
+                </div>
+            </div>
+            <div class="footer">
+                <div class="batting">Dead Batteries batting</div>
+            </div>
+        </div>
         <div class="emptyslot"></div>
         <div class="emptyslot"></div>
         <div class="emptyslot"></div>