From 07bf32568c09a111bebe0af2f9f4df0144a91d62 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Thu, 14 Jul 2022 23:17:34 +0300
Subject: [PATCH] use styled-jsx in PitView

---
 src/components/board/PitView.tsx | 32 +++++++++++++++-----------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/components/board/PitView.tsx b/src/components/board/PitView.tsx
index 5691042..f3a2850 100644
--- a/src/components/board/PitView.tsx
+++ b/src/components/board/PitView.tsx
@@ -4,7 +4,6 @@ import Util from "../../util/Util";
 import PitViewModel from "../../viewmodel/PitViewModel";
 import StoneView from "./StoneView";
 
-
 const PitView: FunctionComponent<{
     pitViewModel: PitViewModel;
     onClick: () => void;
@@ -14,23 +13,22 @@ const PitView: FunctionComponent<{
     ));
 
     return (
-        <div
-            onClick={onClick}
-            style={{
-                background: pitViewModel.pitColor,
-                margin: "5px",
-                padding: "5px",
-                borderRadius: "10vw",
-                transition: "background-color 0.5s",
-                display: "flex",
-                alignItems: "center",
-                alignContent: "center",
-                justifyContent: "center",
-                justifyItems: "center",
-                flexWrap: "wrap",
-            }}
-        >
+        <div className="pit" onClick={onClick} style={{ background: pitViewModel.pitColor }}>
             {stones}
+            <style jsx>{`
+                .pit {
+                    margin: 5px;
+                    padding: 5px;
+                    border-radius: 10vw;
+                    transition: background-color 0.5s;
+                    display: flex;
+                    align-items: center;
+                    align-content: center;
+                    justify-content: center;
+                    justify-items: center;
+                    flex-wrap: wrap;
+                }
+            `}</style>
         </div>
     );
 };