fix compatible issue with Safari

src/assets/cards.css

@@ -49,7 +49,7 @@
     text-align: center;
     font-size: 1.5em; /* @change: adjust this value to make bigger or smaller cards */
     font-weight: normal;
-    font-family: Arial, sans-serif;
+    font-family: Arial, sans-serif, PingFangSC-Regular, sans-serif;
     position: relative;
     background-color: #fff;
     -moz-box-shadow: .2em .2em .5em #333;
@@ -95,7 +95,7 @@
     background-color: #ccc;
     background-repeat: no-repeat;
     background-image: url("./faces/pokerback.png"); /* image is "Pattern 069" from http://www.squidfingers.com/patterns/ */
-    background-size: 100% 100%;
+    /* background-size: 100% 100%; */
     background-position: bottom;
     /*background-image: -moz-repeating-linear-gradient(34% 6% 135deg,#0F1E59, #75A1BF, #3E3E63 50%);*/
     /*background-image: -webkit-gradient(radial, center center, 20, center center, 80, from(#3c3), color-stop(0.4, #363), to(#030));*/
@@ -531,7 +531,7 @@
 /* big suits in middle */
 .playingCards.simpleCards .card .suit:after,
 .playingCards .card.rank-a .suit:after {
-    font-family: Arial, sans-serif;
+    font-family: Arial, sans-serif, PingFangSC-Regular, sans-serif;;
     line-height: .9;
     bottom: .35em;
 }

src/assets/doudizhu.scss

@@ -4,6 +4,9 @@
     width: 100%;
     height: 100%;
     position: relative;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
    
     #gameboard-background {
         width: 100%;

src/assets/gameview.scss

@@ -81,6 +81,9 @@
 }
 
 .game-controller {
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
     .game-controller-paper {
         margin: 5px;
         padding: 2px 10px;
@@ -108,6 +111,12 @@
         line-height: 51px;
         vertical-align: middle;
     }
+
+    .switch-control {
+        .MuiTypography-root.MuiFormControlLabel-label.MuiTypography-body1{
+            font-family: 'Arvo', 'Rockwell', monospace, PingFangSC-Regular, sans-serif;
+        }
+    }
 }
 
 .doudizhu-view-container {
@@ -115,7 +124,9 @@
     margin-top: 5px;
     margin-left: auto;
     margin-right: auto;
-
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 
 
     .doudizhu-gameboard-paper {

src/assets/index.scss

@@ -4,7 +4,7 @@ body {
   background-color: rgb(241, 241, 241);
   margin: 0;
   color: #606266;
-  font-family: 'Arvo', 'Rockwell', monospace;
+  font-family: 'Arvo', 'Rockwell', monospace, PingFangSC-Regular, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

src/assets/leducholdem.scss

@@ -3,11 +3,14 @@
     width: 100%;
     height: 100%;
     //background-color: #C3CDFF;
-     background-image: url("./images/gameboard.png");
-     background-repeat: no-repeat;
-     background-size: 100% 132%;
-     background-position: bottom;
+    background-image: url("./images/gameboard.png");
+    background-repeat: no-repeat;
+    background-size: 100% 132%;
+    background-position: bottom;
     position: relative;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 
     .played-card-area {
         font-size: 12px;

src/components/GameBoard/DoudizhuGameBoard.js

@@ -7,7 +7,7 @@ import '../../assets/doudizhu.scss';
 import Landlord_wName from '../../assets/images/Portrait/Landlord_wName.png';
 import Peasant_wName from '../../assets/images/Portrait/Peasant_wName.png';
 import PlaceHolderPlayer from '../../assets/images/Portrait/Player.png';
-import { computeHandCardsWidth, millisecond2Second, translateCardData, sortDoudizhuCards } from '../../utils';
+import { computeHandCardsWidth, millisecond2Second, sortDoudizhuCards, translateCardData } from '../../utils';
 
 class DoudizhuGameBoard extends React.Component {
     computePlayerPortrait(playerId, playerIdx) {
@@ -296,7 +296,7 @@ class DoudizhuGameBoard extends React.Component {
                             style={{ width: '225px' }}
                             variant="contained"
                             color="primary"
-                            startIcon={<img src={Peasant_wName} alt="Peasant" width="48px" />}
+                            startIcon={<img src={Peasant_wName} alt="Peasant" width="48px" height="48px" />}
                         >
                             Play as Peasant
                             <br />
@@ -307,7 +307,7 @@ class DoudizhuGameBoard extends React.Component {
                             style={{ width: '225px', marginTop: '20px', marginBottom: '20px' }}
                             variant="contained"
                             color="primary"
-                            startIcon={<img src={Landlord_wName} alt="Peasant" width="48px" />}
+                            startIcon={<img src={Landlord_wName} alt="Peasant" width="48px" height="48px" />}
                         >
                             Play as Landlord
                         </Button>
@@ -316,7 +316,7 @@ class DoudizhuGameBoard extends React.Component {
                             style={{ width: '225px' }}
                             variant="contained"
                             color="primary"
-                            startIcon={<img src={Peasant_wName} alt="Peasant" width="48px" />}
+                            startIcon={<img src={Peasant_wName} alt="Peasant" width="48px" height="48px" />}
                         >
                             Play as Peasant
                             <br />