From 7d647512e3564e781488dfce961587e8f6f6dd14 Mon Sep 17 00:00:00 2001
From: Alec Maier <Maier.144@osu.edu>
Date: Mon, 9 Sep 2019 23:52:45 -0400
Subject: [PATCH] Added art for villager and werwolf cards, updated footer

---
 assets/images/roles/Villager.png | Bin 0 -> 3112 bytes
 assets/images/roles/Werewolf.png | Bin 0 -> 3738 bytes
 static/game.js                   |   5 ++++
 static/styles.css                |  42 ++++++++++++++++++++++++++++---
 views/index.html                 |  10 ++++++--
 5 files changed, 51 insertions(+), 6 deletions(-)
 create mode 100644 assets/images/roles/Villager.png
 create mode 100644 assets/images/roles/Werewolf.png

diff --git a/assets/images/roles/Villager.png b/assets/images/roles/Villager.png
new file mode 100644
index 0000000000000000000000000000000000000000..9bc99612a552c9911aaeebda406d90e9c7fbc231
GIT binary patch
literal 3112
zcmZWr30M=?7LK(--N5RzNGyU<Lba_x2oDJ)s2~c3D2t-3QbLdbQXzqdkc1Y6XC+__
zLIMH;5)dRvWihO!Jj5W2VM!!xRglFHQW7A-K<K2@GJY>#X6Bna_x|_%=lti~bK?x|
z<n}G_Eif2tyZtF!7Z_}Vw(9ys4IIhe;j9HdHbl6bJPzY@em(`hd>nYp=@<-Fp0ah>
zZxi^w`TJ8BB499$X4SQ!HLM5^4(=zNI8U+(5AY)eg<aNj3knT@A&pHe(8j929?}?X
zYJoOE>W*7g!(dx)+1nm-`;U)g$hRoqtd9C0+T~xj(Dr<)f6eXQjoq8fG?%`6(StX_
znC<^`>{pcL?sIdA*?Ip}>S37oHJzFBcej0f%q1yx({&W{`1QHpZNAV*a4-;IBz^PK
zecZq-ib5%=U$Ds04Ds5g7_9ALMKp5evnmx9AAx47e&iz=%B>HtNQa^t?<TC0-?nQv
zTJEj+az#t;+N}-8H*4#qk_{|#!wPR(V+->wn5=C(9G<~)uc;o!TW{j<i>GK-87I4P
z!gNA#??1qDmj|$qZz+sjr4iaoK&YuH2=g9IKc89SY7wzS63<GXOtDeKImsCkO5K#P
zwi`HY3cu&X2#zp`3z*a}sFAav%W(<Ly@DTJnw#!}V5$a(f7nK$E_BrW=BW0G0Y2``
zakWnh7=Ak`WdUvd=B`E`%(l0U`WMAAC%3DtcX6!hLB0ueZ>FsTaLMa3S^|XsgJR`w
z@t1zvUnO<_(40dcma8=LAO>5=*zoe!-z;%#7cE~BJ~VNMq$QnA3G0otPVXMo#n7<y
za{~n$h(N@~Ydeugzudp^S~t%vuea&071bWTeN-l_SY4G3`PSXCE1?hZZKau0qViPq
z9ZnTDp2y<-?RZ!&33=z4CCg|qk_>kmEz!g>?C9QNyaV-*J6(m&ql2zpY(BQp^Tv9#
z+G@&oqFM7bkzZ2E4BE2L5ePcG`t#ZYbU2z74*`C-*U-gNo$=g~H8_aQxNS3C8?+Lu
z)6vwv=2Des(X5|SXS7^B4H+f%`K&k`!G^HLL`5j8{S<LTtLJQ}@ZV>To{WG&{f>B6
zMK(4-!?W6teE@f#6zc3-E8uMlP0&e6MnIww+JSxqN-qi#-FoJ&TMc!kYVXqg<iKLm
z(3IDa7@`E2E#9SIJNrw;J(nu$%W@>r;&sZzDskNdDGL}I$v&O`bYsf0sfui5Vz}&`
zK~V3LnfY|KbCOHqt|5LZnq|0;_B9<Y9QocKUdm={I1;xO$lee^bmdTvffOIk&$5va
zX%tx}VKSNB%d1;W)&*Vd8P$NH!v}i#%=O?9fH0}6l#zQGy!H27rKNG4MB~X%*TrNu
zfJ02|tCtHDR1<?;gZk$U8Ia{wY=*W6sny1O7wHg%{1zWxkUah_Yl0xZ3YmoP6s}B9
z@_n*e0Uv5~w^`6|ztu9`v%APyBzzPsixCYkvm%0enSK+uJprn6vaif3|EafPB-<{N
zdkDD8#-O$1Hi7B`V^%~IkfTq^t5WLFbU5vuva!49=P2ajXyQzW13(}l#dpx47!)mI
zI*v0#>DAIJ%d?HxEW47S@admW#Je$X`%xlyi8x?g(#2IE17R{kdQrLjYhq8)>^Q^P
zG5_g{takC`VCl_wK>QGga`1*y$#pSwy-Epu!LJxL8i^h?3#t%>t@4###Zrv?_=kbO
z?|(dbF)d}TRo!Dc^8&W!?UFpaQQ4<o8t>Qf$Gmr4Vp>Y>H|Vq#e}2=~x;K*vi!XOk
zu!)3qqcWyP1ahA-W6ZZ&1;IJt6a{arW+sybU|F%gj+eJC@G6FN7aN$dx{jO*Bf@EA
ztfzGt4j@33+82pTr%s*?s$fmf=A<Z((qKb|c*(-CmP%uB6e+xp6^{ZN64E<I8iIyH
zgnz65MV|iosQX6#HYGmIZ}ce_oIcZeCgcC2BGiJ373$R5u9r@PClFa*_<T0UC(Vw|
z0lo|8=RB_n2JkgLC2m2|UvOe+wRqytn{%<9E+fKxGSy6y3CWnVj}IRvqY8kIq@kuU
z8E)L%H!SLucl}hU1SlC((0C_kmtA<D#R}#{3SW*2N9{@EL9lW~GS&p|7Ak&CNn8xM
zA3(8Wj!@*k_*k!Eawv!CaBoG&@|zS%%;308Y8`24+DtLYQeuIbc%CK8X0WHaj0h#|
zR+-hFEy$3~m5PPGDy-&cz)m&FWl+i9IaJQPyh`H1)}D@MRYdUKq-Z`l_rTV0<Fwk}
zdMp=qcqfT?B#D=-%!rKSb_WJdaOz&Sp@?;_URDO7lDZqxy*2?C1q}_9vTsB`;t;~C
z^-rfSK|<wUwzc+B>HgMXL)W)npjIx3xEvjvZvn-a8;4^H#bygw=HO2n2=fJLHcss&
z4m>SXrA@VrS;6Q(TGn}Q>~-7g)t2<`iwB}xcMd&B-PhQ(;ul`I!l4VG$sYNDu~~A)
z0YFk^ou}_Rk7oD_3!F#CALlsa_sKMVp9OID`GmvPSNDU}g*yETMNI8neYGnJoHJFJ
z4JL&;byb2QIu5aHts8!$7<*6Q<0N`(#kR5|tKDO9#V)~TG#$<K65<G#q77ZqtD#bS
z)kR%LcRw9Eq}l~rvL-tX(yf)>hH>@j@B)fSC3#PQybC-gR;L<J#3V`sw|g||QN%$$
z4<`TOeLcTdKDkGrGr*aT)zWE~l}}zuOTpaK2wXh!{wM==(N`x3DV5jEFj!03j|zfm
z*v02YZ0Gzciormn#AQ>?35<E^NF(-xWHGzmE^Fjg3*sXlO&X`AoJcH>-4T4{n{IFm
zQ1uuf=4f}*)l%VCBj!EV*I5*^E2l*J*b4x!o#JaxRdT!Kyf<A&LPf0k6WyfYf}QI}
zP0>MNX{iQ6dPWxPlrV#L2wn;v2Dm7ZV~~;KgXTRkMox2!sSPxHrCc6!pzIyc)8y6$
zDZ%6DNC}piYsp%sBKJOg<vEcah4ha?RJ_sY>akw+fJ=IK(D}Q$$=<b^2zOCycO~OO
z?wl7Hxx0tgp1y86G1G=nZs&`Q+YBkw2Wo#3G%%Ju@&^B^y(S#=m9QzUM$Kuqbj2;4
z50Hq~z5sswImECFhKwlV(^ks!@RldaguOjQ<$3vh-nLVQ&8rY#J25_daU}pZEN?==
z?S^M3@q!-Sjur^cIJ&AY8ayQr(cufchlLD2ul)|h+BWjED4AWheMXnDw}QbVORVxN
znYTrq?uMqm5GV5l<yxKDM6#ZZlwm=g;1;8`mp~*4@8S${$S{BI>;U%vzKoMYO7tx#
z;sUU)V>B^2c7U1$U(@~Sp>SSQbQed!LNXT3a-S0w_Eb0blfOczali%#3GK=>%G?ue
z0@3L#$mnKPvnT1}<XH{EKP~A$4boo?DlC^cOnada>BW3??;{8)i}}wAlI_$t?p_C5
fYliP_Ihnky&T7{`D0?}{Q;pf5z}a$+U;Ob;mh{+B

literal 0
HcmV?d00001

diff --git a/assets/images/roles/Werewolf.png b/assets/images/roles/Werewolf.png
new file mode 100644
index 0000000000000000000000000000000000000000..40357eb425ef16e3066aed2669c17d13301c731a
GIT binary patch
literal 3738
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
PJ{uZz?30?qG2i?Lk-$}{

literal 0
HcmV?d00001

diff --git a/static/game.js b/static/game.js
index ac17d15..7a560c9 100644
--- a/static/game.js
+++ b/static/game.js
@@ -1,6 +1,7 @@
 import {utility} from './util.js'
 
 const socket = io();
+const finishedArtArray = ["Villager", "Werewolf"];
 let clock;
 let currentGame = null;
 let cardFlippedOver = false;
@@ -129,6 +130,9 @@ function renderGame() {
 
 function renderPlayerCard(player) {
     const card = player.card;
+    const cardArt = finishedArtArray.includes(card.role) ?
+        "<img alt='" + card.role + "' src='../assets/images/roles/" + card.role + ".png' />"
+        : "<div class='placeholder'></div>";
     const cardClass = player.card.team === "good" ? "game-card-inner village" : "game-card-inner wolf";
     const playerCard = document.createElement("div");
     playerCard.setAttribute("id", "game-card");
@@ -137,6 +141,7 @@ function renderPlayerCard(player) {
         "<div class='" + cardClass + "'>" +
             "<div class='game-card-front'>" +
                 "<h2>" + card.role + "</h2>" +
+                cardArt +
                 "<p>" + card.description + "</p>" +
                 "<p id='flip-instruction'>Click to flip</p>" +
             "</div>" +
diff --git a/static/styles.css b/static/styles.css
index 1a448c5..eefcead 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -191,20 +191,32 @@ html, body {
 #footer {
     position: absolute;
     bottom: 0;
+    margin: 0 0 1.5em 0;
     width: 100%;
     height: 5rem;
+    font-size: 0.75em;
     text-align: center;
     align-items: center;
     display: flex;
+    flex-direction: column;
     justify-content: center;
 }
 
+#footer div {
+    display: flex;
+    align-items: center;
+}
+
+#footer p {
+    margin: 0 0 0 1em;
+    color: gray;
+}
+
 #footer a {
-    font-size: 0.9em;
     color: #bd2a2a;
     text-decoration: #bd2a2a;
     cursor: pointer;
-    margin-left: 1em;
+    margin: 0 0 0 1em;
 }
 
 #footer a:hover {
@@ -412,7 +424,11 @@ button {
 #create-game-container, #join-game-container {
     display: inline-block;
     text-align: left;
-    margin: 3em 1em;
+    margin: 3em 0.5em;
+}
+
+#create-game-container button {
+    margin-right: 1em;
 }
 
 #game-size {
@@ -570,6 +586,15 @@ label {
     transform-style: preserve-3d;
 }
 
+#game-card img {
+    width: 160px;
+}
+
+.placeholder {
+    width: 160px;
+    height: 160px;
+}
+
 .village h2 {
     color: #171469;
 }
@@ -590,12 +615,14 @@ label {
 }
 
 #game-card h2 {
-    font-size: 2em;
+    font-size: 1.7em;
     font-family: 'diavlo', sans-serif;
+    margin: 0.3em;
 }
 
 #game-card p {
     padding: 0.5em;
+    font-size: 0.7em;
 }
 
 .game-container {
@@ -630,6 +657,12 @@ label {
     transform: rotateY(180deg);
 }
 
+.game-card-front p:first-of-type {
+    margin: 0.7em;
+    border: 1px solid gray;
+    border-radius: 3px;
+}
+
 .killed-btn {
     border-radius: 5px;
     width: 13em;
@@ -652,6 +685,7 @@ label {
 
 #flip-instruction {
     color: gray;
+    margin: 0;
 }
 
 #game-header {
diff --git a/views/index.html b/views/index.html
index 245b079..c606959 100644
--- a/views/index.html
+++ b/views/index.html
@@ -27,8 +27,14 @@
             </a>
         </div>
         <footer id="footer">
-            <img src="../assets/images/vanilla_js.png">
-            <a href="https://github.com/AlecM33/Werewolf">Github</a>
+            <div>
+                <img src="../assets/images/vanilla_js.png">
+                <p>Created by Alec M.</p>
+                <a href="https://github.com/AlecM33/Werewolf">Github</a>
+            </div>
+            <div>
+                <p>Werewolf created by Andrew Plotkin</p>
+            </div>
         </footer>
     </body>
 </html>