From e8221919448f79c8956a5311131b1814068862f4 Mon Sep 17 00:00:00 2001 From: Inga Date: Tue, 19 Nov 2024 18:32:45 +0000 Subject: [PATCH] css for prettier game board --- src/backend/components/boardgame.tsx | 4 +- src/backend/main/index.tsx | 6 +-- src/frontend/components/board-game.ts | 3 ++ src/frontend/static/o.png | Bin 0 -> 955 bytes src/frontend/static/style.css | 55 ++++++++++++++++++++++++++ src/frontend/static/x.png | Bin 0 -> 1477 bytes 6 files changed, 63 insertions(+), 5 deletions(-) create mode 100644 src/frontend/static/o.png create mode 100644 src/frontend/static/x.png diff --git a/src/backend/components/boardgame.tsx b/src/backend/components/boardgame.tsx index b397fa3..0fd4f3b 100644 --- a/src/backend/components/boardgame.tsx +++ b/src/backend/components/boardgame.tsx @@ -24,7 +24,7 @@ const getCellHtml = ({ const { isDisabled, nextGameState, text } = getCellDisplayData({ gameState, currentOutcome, row, column }); return ( - ); @@ -55,7 +55,7 @@ export const getBoardgameHtml = (key: string, gameState: BoardgameStateType, rul Current player: {gameState.currentPlayerName}

- +
{sequence(gameState.rows).map((row) => ( diff --git a/src/backend/main/index.tsx b/src/backend/main/index.tsx index 28ba9cf..8b66087 100644 --- a/src/backend/main/index.tsx +++ b/src/backend/main/index.tsx @@ -32,7 +32,7 @@ export const mainPageHandler: RequestHandler = (req, res) => { Hi -
+

Just a small demo of progressive form and tracker web components.
@@ -72,8 +72,8 @@ export const mainPageHandler: RequestHandler = (req, res) => { ))}

-
{board1}
-
{board2}
+
{board1}
+
{board2}
, ); diff --git a/src/frontend/components/board-game.ts b/src/frontend/components/board-game.ts index 9ae050d..478f3a0 100644 --- a/src/frontend/components/board-game.ts +++ b/src/frontend/components/board-game.ts @@ -74,6 +74,9 @@ export class BoardGameComponent extends HTMLElement { if (button.innerText !== text) { button.innerText = text; } + if (button.className !== `square-${text}`) { + button.className = `square-${text}`; + } } } } diff --git a/src/frontend/static/o.png b/src/frontend/static/o.png new file mode 100644 index 0000000000000000000000000000000000000000..cbd7afd266eb05262c11c760a0c22e541c2f0767 GIT binary patch literal 955 zcmV;s14R6ZP)~fC7O3{r%d8#B2Zn16WB!K~#90y;(bwoG=iD9T-wJ za;nTJN6-=Q4RnMFT*VQb`p6z&1l{T{nqBu+?SQ)V^wb|AMAN)4ZSzq!jZJfV7q;u_ z`%c{bh}(iuHN7Gu>NO<0Vy?edQo!W zkfLfnFX1%Rp#=UYs@Mw%xI5MX5tX{&DZ{cX4;d`zV=Y;(F@b{vk$ALRV~55EqIJ^8 zS0{6!KQkA0NeoJV7YnVs8rHJ^Z+12&0LvB6fvyIDF+E30`_JH_FmU4+I@ku5ju8>i z@Of2724NFUo5OezU@S7#tv=dOqGo=ChFFyYi0D+&CX}d)dl}~Me zO{Jyo10?}ufEg?O0D;zo5u%iBOmuC*RRQP>Mq;x8BsYL*(`ibvnD(o%|3u8rTCbEq z-2s5Sf!SL;LSU&VD>3#s_t>tYWs?}lvv<^pz2lE6-#u|X$u{Eek@BLbyV0u@3Jg^900oBG`I%PQUj}hX%H^}EJh(v zfSG8GYA*pI(XIrPlU98SECC#I9-zYnG@)Sv>!a-f-Az&m0tI*-o>|!J5zdlDCvZD^ zPdHYCgupc>mBPX_7am{%;He>Lq&>GF1ruRm2}puYE+3#}y#`qvJ9+8B5XS^S+>+3f zW#O8@@%S4h1o2b{=Tne4!139c(?$fL(wAi5$9GBla&r}duths>&Dj3h*Qv-iCwpM_ z)5>?tFHy6leE5nnHV}Fi$eO(*5-n-r&ne5$$d4cKJlyy;m~{0O!B7F+2|4!Hh7x+} dAJWd``v>a*2uNCG!}tII002ovPDHLkV1nEFx!?c* literal 0 HcmV?d00001 diff --git a/src/frontend/static/style.css b/src/frontend/static/style.css index 124d5cf..ca976c6 100644 --- a/src/frontend/static/style.css +++ b/src/frontend/static/style.css @@ -1,3 +1,24 @@ +body { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: min-content 1fr; + grid-template-areas: + "counters counters" + "game1 game2"; +} + +section.counters { + grid-area: counters; +} + +section.game1 { + grid-area: game1; +} + +section.game2 { + grid-area: game2; +} + .counter { font-weight: bold; color: red; @@ -18,3 +39,37 @@ board-game:not(.game-in-progress) .when-game-in-progress, board-game:not(.game-not-in-progress) .when-game-not-in-progress { display: none; } + +table.game-board-table { + border: solid 7px transparent; + border-collapse: collapse; +} + +table.game-board-table tbody.game-board td { + border: solid 6px black; + padding: 3px +} + +tbody.game-board button, +tbody.game-board button:disabled, +tbody.game-board button:hover { + width: 4em; + height: 4em; + border: none; + background-color: transparent; + color:transparent; +} + +tbody.game-board button.square-X { + background-image: url("x.png"); + background-size: 100% 100%; +} + +tbody.game-board button.square-O { + background-image: url("o.png"); + background-size: 100% 100%; +} + +tbody.game-board button.square-_ { + cursor: pointer; +} diff --git a/src/frontend/static/x.png b/src/frontend/static/x.png new file mode 100644 index 0000000000000000000000000000000000000000..f9e0d1e2fcb330604522843c2d584644351a9de2 GIT binary patch literal 1477 zcmV;$1v>hPP)C0000#P)t-s|NsC0 z{r~^}{{8>||Nj5~|NZ^_|Nj5~fItBM{{DbM0D?dOfj|KN{r-SK0DwRN|Ns1eKmz~# z|A0UP{{Q}-V(Y#D00luwL_t(|oYh+icGNHooopnuFhha+pB1t>S}n5Rg>< zq^`H+l{xcWr@Yp*4BI~;cn;a28w?@;5~5r=t-WwqR%1gB^mFaWo$v@kIMnonau zlZ7HES*jg#RALzbdA4_{aU$R$_^cQR9imMZ#+!HIG{(U6Xx^@F2|+~RHw8f1mM+heVqRcC zOQ|8B1i|vYjK2qxN<=)fNH`+1sQ&xr`SMP0L#6f+1?7v5ZC=+6rjhI$-6gSWc$W1P zjyqh6Ao)sq8VvzYexn=+{k-Oeyi;1_Tk3=+Kt74l?AI;mMLK4;eLD|Jyja}!X%9SW`UlbWy3`=TW&GHDxO35v z#uyl_+IPrw{5YXwWtKxC`65$;t+0nGpVy>J_dQL2ROY^U&a2H?(p zOGwC^Dw~;CHOt>h3!iYtd>;VO{&p;%h)juIddNc&TvagAAu3Q%IdNWqW_j|Ew_km_ zwH!M-H3)|L^#{yEz1FQS`@`Q|v&V1TBaVRThcyZXHx-``!DQQSbHcCNxW#{dZ$&kN z?Qhdcj&P1-kk}dp1QR=SX&nEKzomxO&t}Pf^r$X39ugwD8ufpwIbsuxwco#=GYLk_02TDgUzq5rpjn=U^hb;*|!Sq(e!gcs<>4 zuWw-@k889SL(*{sZ*}ok*f%rx&wee+AHD^;vaz@|1TX%mGgW-AOm@`BHq`!*NBS z=I)*%$^1KB4&ABP`RVj5mW+YI$m={w8yN|9_(%HyZ#4Z!QG)mO7^t`Kxho=LC7f@agg!pL+! z8Xv33B&;TUIwVAe2vju{Q$ZXQp?>$5M^zqR67*|0DYr-kL`|Pt_zVOE0l7LU0DxD~ z7mmZJX!0)7>zrRTIn-xaZ~@pJeUn!VxrBcUN_OGT#Xa;jaaJB>i=FlEH|}&2jD1;; zXH;AP2jf82m1m26u7qGV_X658twh8yYB#_o5_XRThW&}_3J(p0tr-lX79v+V7t;y? zRhcscJ3eDw6^>bL-A z<|P^ZShE<|QU>G}FBIEg4WRbHgjQ#OMnkF102l%I$A>KruQJiiZ1UQQ