From 3651936497fd0fd14b7b527aac990e52f0873c20 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Thu, 14 Jul 2022 23:28:58 +0300
Subject: [PATCH] use styled-jsx in StoreView

---
 src/components/board/StoreView.tsx | 94 +++++++++++++++---------------
 1 file changed, 48 insertions(+), 46 deletions(-)

diff --git a/src/components/board/StoreView.tsx b/src/components/board/StoreView.tsx
index f149d30..58f762e 100644
--- a/src/components/board/StoreView.tsx
+++ b/src/components/board/StoreView.tsx
@@ -7,50 +7,52 @@ import PitViewModel from "../../viewmodel/PitViewModel";
 import StoneView from "./StoneView";
 
 const StoreView: FunctionComponent<{
-    context: Context;
-    pitViewModel: PitViewModel;
-    gridColumn: string;
-    gridRow: string;
-  }> = ({ context, pitViewModel, gridColumn, gridRow }) => {
-    const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
-      <StoneView key={index} color={pitViewModel.stoneColor} />
-    ));
-    const textColor = getColorByBrightness(
-      pitViewModel.pitColor,
-      context.themeManager.theme.textColor,
-      context.themeManager.theme.textLightColor
-    );
-    return (
-      <div
-        style={{
-          gridColumn: gridColumn,
-          gridRow: gridRow,
-          background: pitViewModel.pitColor,
-          margin: "5px",
-          borderRadius: "10vw",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          alignContent: "center",
-          flexWrap: "wrap",
-          position: "relative",
-        }}
-      >
-        {stones}
-        <span
-          style={{
-            position: "absolute",
-            bottom: "2vw",
-            fontFamily: "monospace",
-            fontWeight: "bold",
-            fontSize: "2vw",
-            color: textColor,
-          }}
-        >
-          {stones.length}
-        </span>
-      </div>
-    );
-  };
+  context: Context;
+  pitViewModel: PitViewModel;
+  gridColumn: string;
+  gridRow: string;
+}> = ({ context, pitViewModel, gridColumn, gridRow }) => {
+  const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
+    <StoneView key={index} color={pitViewModel.stoneColor} />
+  ));
+  const textColor = getColorByBrightness(
+    pitViewModel.pitColor,
+    context.themeManager.theme.textColor,
+    context.themeManager.theme.textLightColor
+  );
+  return (
+    <div
+      className="store"
+      style={{
+        background: pitViewModel.pitColor,
+        gridColumn: gridColumn,
+        gridRow: gridRow
+      }}>
+      {stones}
+      <span className="store-stone-count-text" style={{ color: textColor }}>
+        {stones.length}
+      </span>
+      <style jsx>{`
+          .store {
+            margin: 5px;
+            border-radius: 10vw;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            align-content: center;
+            flex-wrap: wrap;
+            position: relative;
+          }
+          .store-stone-count-text {
+            position: absolute;
+            bottom: 2vw;
+            font-family: monospace;
+            font-weight: bold;
+            font-size: 2vw;
+          }
+        `}</style>
+    </div>
+  );
+};
 
-  export default StoreView;
\ No newline at end of file
+export default StoreView;
\ No newline at end of file