From 1f4bd88e7599fe9b9af92d461741a92e1d2a69ec Mon Sep 17 00:00:00 2001
From: S-N-O-R-L-A-X <S-N-O-R-L-A-X@users.noreply.github.com>
Date: Sun, 31 Dec 2023 11:28:14 +0800
Subject: [PATCH] feat: make statistics horizontal align

---
 architecture.drawio                     | 25 ++++++++++++++-----------
 src/Components/PlayBoard/ShowTricks.tsx |  2 +-
 src/views/Analysis/Analysis.tsx         | 13 +++++++------
 src/views/Analysis/analysis.css         |  8 ++++++++
 4 files changed, 30 insertions(+), 18 deletions(-)
 create mode 100644 src/views/Analysis/analysis.css

diff --git a/architecture.drawio b/architecture.drawio
index 132be27..dad457d 100644
--- a/architecture.drawio
+++ b/architecture.drawio
@@ -1,6 +1,6 @@
 <mxfile host="65bd71144e">
     <diagram id="YeBg9FEWrei1k_hzMAZt" name="第 1 页">
-        <mxGraphModel dx="880" dy="579" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+        <mxGraphModel dx="880" dy="515" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
             <root>
                 <mxCell id="0"/>
                 <mxCell id="1" parent="0"/>
@@ -20,10 +20,10 @@
                     <mxGeometry x="771" y="420" width="120" height="60" as="geometry"/>
                 </mxCell>
                 <mxCell id="8" value="OfflineBridgeSolver" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-                    <mxGeometry x="951" y="400" width="120" height="60" as="geometry"/>
+                    <mxGeometry x="950" y="490" width="120" height="60" as="geometry"/>
                 </mxCell>
                 <mxCell id="9" value="ShowTricks" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-                    <mxGeometry x="1121" y="400" width="120" height="60" as="geometry"/>
+                    <mxGeometry x="780" y="680" width="120" height="60" as="geometry"/>
                 </mxCell>
                 <mxCell id="11" value="" style="endArrow=classic;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;exitX=1;exitY=0.25;exitDx=0;exitDy=0;" parent="1" source="3" target="4" edge="1">
                     <mxGeometry width="50" height="50" relative="1" as="geometry">
@@ -43,13 +43,13 @@
                         <mxPoint x="621" y="350" as="targetPoint"/>
                     </mxGeometry>
                 </mxCell>
-                <mxCell id="16" value="" style="endArrow=classic;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;exitX=1;exitY=0.25;exitDx=0;exitDy=0;" parent="1" source="7" target="8" edge="1">
+                <mxCell id="16" value="" style="endArrow=classic;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;exitX=1;exitY=0.75;exitDx=0;exitDy=0;" parent="1" source="7" target="8" edge="1">
                     <mxGeometry width="50" height="50" relative="1" as="geometry">
                         <mxPoint x="891" y="430" as="sourcePoint"/>
                         <mxPoint x="631" y="360" as="targetPoint"/>
                     </mxGeometry>
                 </mxCell>
-                <mxCell id="17" value="" style="endArrow=classic;html=1;entryX=0;entryY=0.25;entryDx=0;entryDy=0;exitX=1;exitY=0.25;exitDx=0;exitDy=0;" parent="1" source="8" target="9" edge="1">
+                <mxCell id="17" value="" style="endArrow=classic;html=1;entryX=0.7;entryY=0.033;entryDx=0;entryDy=0;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryPerimeter=0;" parent="1" source="8" target="9" edge="1">
                     <mxGeometry width="50" height="50" relative="1" as="geometry">
                         <mxPoint x="581" y="435" as="sourcePoint"/>
                         <mxPoint x="641" y="370" as="targetPoint"/>
@@ -62,9 +62,9 @@
                     </mxGeometry>
                 </mxCell>
                 <mxCell id="20" value="ShowOneHand" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-                    <mxGeometry x="951" y="510" width="120" height="60" as="geometry"/>
+                    <mxGeometry x="950" y="380" width="120" height="60" as="geometry"/>
                 </mxCell>
-                <mxCell id="21" value="" style="endArrow=classic;html=1;exitX=1;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;" parent="1" source="7" target="20" edge="1">
+                <mxCell id="21" value="" style="endArrow=classic;html=1;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;" parent="1" source="7" target="20" edge="1">
                     <mxGeometry width="50" height="50" relative="1" as="geometry">
                         <mxPoint x="1161" y="540" as="sourcePoint"/>
                         <mxPoint x="1211" y="490" as="targetPoint"/>
@@ -97,16 +97,19 @@
                         <mxPoint x="250" y="420" as="targetPoint"/>
                     </mxGeometry>
                 </mxCell>
-                <mxCell id="30" style="edgeStyle=none;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="1" source="29" target="5">
+                <mxCell id="30" style="edgeStyle=none;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" parent="1" source="29" target="5" edge="1">
                     <mxGeometry relative="1" as="geometry"/>
                 </mxCell>
-                <mxCell id="32" style="edgeStyle=none;html=1;exitX=1;exitY=0.75;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="29" target="31">
+                <mxCell id="32" style="edgeStyle=none;html=1;exitX=1;exitY=0.75;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="29" target="31" edge="1">
                     <mxGeometry relative="1" as="geometry"/>
                 </mxCell>
-                <mxCell id="29" value="ShowResults" style="whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                <mxCell id="29" value="ShowResults" style="whiteSpace=wrap;html=1;" parent="1" vertex="1">
                     <mxGeometry x="400" y="420" width="120" height="60" as="geometry"/>
                 </mxCell>
-                <mxCell id="31" value="Analysis" style="whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                <mxCell id="33" style="edgeStyle=none;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=0.25;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="31" target="9">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="31" value="Analysis" style="whiteSpace=wrap;html=1;" parent="1" vertex="1">
                     <mxGeometry x="591" y="525" width="120" height="60" as="geometry"/>
                 </mxCell>
             </root>
diff --git a/src/Components/PlayBoard/ShowTricks.tsx b/src/Components/PlayBoard/ShowTricks.tsx
index a4c7ee3..304448c 100644
--- a/src/Components/PlayBoard/ShowTricks.tsx
+++ b/src/Components/PlayBoard/ShowTricks.tsx
@@ -26,7 +26,7 @@ export default function ShowTricks(props: ShowTricksProps) {
   }
 
   return (
-    <table>
+    <table className="showTricks">
       <tbody>
         <tr><td></td>{CONTRACTCOLORS.map((v) => <td key={v}>{v}</td>)}</tr>
         {tricks.map((trick, idx) => <tr key={"row" + idx}><td>{PROGRAM_POSITIONS[idx]}</td>{trick.map((t, idx2) => <td key={"row" + idx + "col" + idx2}>{t}</td>)}</tr>)}
diff --git a/src/views/Analysis/Analysis.tsx b/src/views/Analysis/Analysis.tsx
index 7608122..520b899 100644
--- a/src/views/Analysis/Analysis.tsx
+++ b/src/views/Analysis/Analysis.tsx
@@ -1,7 +1,8 @@
 import { useContext, useEffect, useState } from "react";
 import ShowTricks from "../../Components/PlayBoard/ShowTricks";
 import { analyzeOffline } from "../../Utils/utils";
-import { CompleteBoard, ShowResultsContext } from "../Show/ShowResults";
+import { ShowResultsContext } from "../Show/ShowResults";
+import "./analysis.css"
 
 function MatrixAdd(a: number[][], b: (string | number)[][]) {
   for (let i = 0; i < a.length; ++i) {
@@ -35,7 +36,7 @@ export default function Analysis() {
       }
       return Promise.resolve();
     }
-    countTricks().then(()=>{
+    countTricks().then(() => {
       if (all_boards.length > 0) {
         setTable(MatrixDivide(table, all_boards.length));
       }
@@ -43,10 +44,10 @@ export default function Analysis() {
   }, [all_boards.length])
 
   return (
-    <>
-      The average tricks:
-      <ShowTricks ddtricks={table} />
-    </>
+      <fieldset  className="showStatistics">
+        <legend>The average tricks:</legend>
+        <ShowTricks ddtricks={table} />
+      </fieldset>
   )
 }
 
diff --git a/src/views/Analysis/analysis.css b/src/views/Analysis/analysis.css
new file mode 100644
index 0000000..0e90595
--- /dev/null
+++ b/src/views/Analysis/analysis.css
@@ -0,0 +1,8 @@
+.showStatistics {
+	max-width: fit-content;
+	margin: 0 auto;
+}
+
+.showStatistics .showTricks {
+	margin: 0 auto;
+}
\ No newline at end of file