fix compatible issue with Safari

This commit is contained in:
Songyi Huang 2021-05-17 22:00:39 -07:00
parent 2d3a587f16
commit d0f0e78c69
6 changed files with 30 additions and 13 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -7,7 +7,7 @@ import '../../assets/doudizhu.scss';
import Landlord_wName from '../../assets/images/Portrait/Landlord_wName.png'; import Landlord_wName from '../../assets/images/Portrait/Landlord_wName.png';
import Peasant_wName from '../../assets/images/Portrait/Peasant_wName.png'; import Peasant_wName from '../../assets/images/Portrait/Peasant_wName.png';
import PlaceHolderPlayer from '../../assets/images/Portrait/Player.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 { class DoudizhuGameBoard extends React.Component {
computePlayerPortrait(playerId, playerIdx) { computePlayerPortrait(playerId, playerIdx) {
@ -296,7 +296,7 @@ class DoudizhuGameBoard extends React.Component {
style={{ width: '225px' }} style={{ width: '225px' }}
variant="contained" variant="contained"
color="primary" 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 Play as Peasant
<br /> <br />
@ -307,7 +307,7 @@ class DoudizhuGameBoard extends React.Component {
style={{ width: '225px', marginTop: '20px', marginBottom: '20px' }} style={{ width: '225px', marginTop: '20px', marginBottom: '20px' }}
variant="contained" variant="contained"
color="primary" 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 Play as Landlord
</Button> </Button>
@ -316,7 +316,7 @@ class DoudizhuGameBoard extends React.Component {
style={{ width: '225px' }} style={{ width: '225px' }}
variant="contained" variant="contained"
color="primary" 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 Play as Peasant
<br /> <br />