Skip to content

Commit

Permalink
add intro dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
@HuiGong-dev
HuiGong-dev committed Jan 9, 2022
1 parent dbc8c81 commit 018fee2
Show file tree
Hide file tree
Showing 4 changed files with 822 additions and 2 deletions.
30 changes: 30 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,36 @@

</div>

<!-- intro dialog -->
<div class="intro">

<div class="intro__content">
<div class="intro__content__logo">
<div class="intro__content__logo__x"></div>
<div class="intro__content__logo__o">
<i class="fa-solid fa-circle-dot"></i>
</div>
</div>
<div class="intro__content__pick-mark">
<div class="intro__content__pick-mark__top-text">PICK PLAYER 1'S MARK</div>
<div class="intro__content__logo">
<div class="intro__content__logo__x"></div>
<div class="intro__content__logo__o">
<i class="fa-solid fa-circle-dot"></i>
</div>
</div>
<div class="intro__content__pick-mark__bottom-text">REMEMBER : X GOES FIRST</div>
</div>
<div class="intro__content__buttons">
<button class="intro__content__buttons__vs-cpu">NEW GAME (VS CPU)</button>
<button class="intro__content__buttons__vs-player">NEW GAME (VS PLAYER)</button>
</div>
</div>


</div>



</body>

Expand Down
167 changes: 165 additions & 2 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ body {
transform: rotate(-45deg);
}

.fa-circle-dot {
.logo__o i {
color: var(--clr-yellow);
font-size: calc(var(--status-bar-height) * 0.3);
}
Expand Down Expand Up @@ -358,4 +358,167 @@ body {
.winning-message.show {
display: flex;
}


/* intro page */
.intro {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
justify-content: center;
align-items: center;
color: var(--clr-grey);
flex-direction: column;
}

.intro__content {
background-color: var(--clr-shalowdark);
row-gap: 1em;
width: max-content;
height: 100%;
padding: 2em;

display: flex;
flex-direction: column;
align-items: center;
margin: 5em;
}
/* intro logo */
.intro__content__logo {
display: grid;
grid-template-columns: 1fr 1fr;
}
.intro__content__logo__x,
.intro__content__logo__o {
display: flex;
justify-content: center;
align-items: center;
position: relative;

font-size: var(--fs-medium);
}
.intro__content__logo__x {
margin-right: 0.25em;
}
.intro__content__logo__o {
color: var(--clr-yellow);
margin-left: 0.25rem;
}
.intro__content__logo__x::before,
.intro__content__logo__x::after {
background-color: var(--clr-cyan);
position: absolute;
content: "";
position: absolute;
width: calc(var(--status-bar-height) * 0.15);
height: calc(var(--status-bar-height) * 0.6);
}
.intro__content__logo__x::before {
transform: rotate(45deg);
}
.intro__content__logo__x::after {
transform: rotate(-45deg);
}

/* intro pick mark */
.intro__content__pick-mark {
margin-top: 1em;
display: grid;
grid-template-rows: 1fr 1.5fr 1fr;
row-gap: 1em;
border: none;
background-color: var(--clr-lightdark);
border-radius: 10px;
box-shadow: var(--bs);
padding: 1em;
width: 100%;
}

.intro__content__pick-mark__top-text,
.intro__content__pick-mark__bottom-text{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-family: var(--ff-primary);
letter-spacing: 0.125em;
}
.intro__content__pick-mark__top-text {
font-size: 1.2em;
}
.intro__content__pick-mark__bottom-text {
font-size: 1em;
color: var(--clr-light-grey);
}


.intro__content__pick-mark .intro__content__logo {
background-color: var(--clr-shalowdark);
padding: 0.5em;
border-radius: 10px;
}
.intro__content__pick-mark .intro__content__logo__x
{
padding-top:0.5em;
padding-bottom: 0.5em;
padding-left: 2em;
padding-right: 2em;
border-radius: 10px;
}
.intro__content__pick-mark .intro__content__logo__x::before,
.intro__content__pick-mark .intro__content__logo__x::after {
background-color: var(--clr-grey);
}

.intro__content__pick-mark .intro__content__logo__o {
padding-top:0.5em;
padding-bottom: 0.5em;
padding-left: 1em;
padding-right: 1em;
border-radius: 10px;
color: var(--clr-shalowdark);
background-color: var(--clr-grey);
}
/* intro buttons */
.intro__content__buttons {
padding: 2em;
padding-left: 0;
padding-right: 0;
display: grid;
grid-template-rows: 1fr 1fr;
row-gap: 1.5em;
width: 100%;


}
.intro__content__buttons__vs-cpu,
.intro__content__buttons__vs-player {
font-family: var(--ff-primary);
font-size: var(--fs-small);
width: max-content;
padding-top: 1em;
padding-bottom: 1em;
padding-left: 2em;
padding-right: 2em;
width: max-content;
background-color: var(--clr-yellow);
border: none;
border-radius: 6px;
box-shadow: var(--bs-yellow);
font-weight: bold;
letter-spacing: 0.125em;
width: 100%;
}

.intro__content__buttons__vs-player {
background-color: var(--clr-cyan);
padding-left: 2em;
padding-right: 2em;
box-shadow: var(--bs-cyan);
}

.intro.show {
display: flex;
}
114 changes: 114 additions & 0 deletions test.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tic Tac Toe</title>
<!-- font aswsome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Lato:wght@400;900&family=Source+Code+Pro:wght@400;900&family=Source+Sans+Pro:wght@300;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="teststyles.css">
</head>

<body>
<div class="container">
<div class="top-status-bar">
<div class="logo">
<div class="logo__x"></div>
<div class="logo__o">
<i class="fa-solid fa-circle-dot"></i>
</div>
</div>
<div class="turn-indicator">
<i class="fa-solid fa-xmark turn-indicator__icon"></i>
<span class="turn-indicator__text">TURN</span>
</div>
<div class="restart-button">
<a href=""><i class="fas fa-redo"></i></a>
</div>
</div>
<div class="board">
<div class="cell" data-cell></div>
<div class="cell x" data-cell></div>
<div class="cell o" data-cell></div>
<div class="cell x" data-cell></div>
<div class="cell o" data-cell></div>
<div class="cell x" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell o" data-cell></div>
<div class="cell x" data-cell></div>
</div>
<div class="bottom-status-bar">
<div class="x-wins-count">
<span class="x-wins-count__text">X (YOU)</span>
<span class="x-wins-count__number">14</span>
</div>
<div class="tie-count">
<span class="tie-count__text">TIES</span>
<span class="tie-count__number">32</span>
</div>
<div class="o-wins-count">
<span class="o-wins-count__text">O (CPU)</span>
<span class="o-wins-count__number">11</span>
</div>
</div>
</div>
<!-- winning message -->
<div class="winning-message" id="winningMessage">
<div class="winning-message__cover"></div>
<div class="winning-message__banner">
<div class="winning-message__banner__who-wins">YOU WON!</div>
<div class="winning-message__banner__icon-and-text">
<div class="winning-message__banner__icon"></div>
<div class="winning-message__banner__text">TAKES THE ROUND</div>
</div>
<div class="winning-message__banner__button-wrapper">
<button class="winning-message__banner__quit">QUIT</button>
<button class="winning-message__banner__next-round">NEXT ROUND</button>
</div>

</div>

</div>
<!-- intro dialog -->
<div class="intro">

<div class="intro__content">
<div class="intro__content__logo">
<div class="intro__content__logo__x"></div>
<div class="intro__content__logo__o">
<i class="fa-solid fa-circle-dot"></i>
</div>
</div>
<div class="intro__content__pick-mark">
<div class="intro__content__pick-mark__top-text">PICK PLAYER 1'S MARK</div>
<div class="intro__content__logo">
<div class="intro__content__logo__x"></div>
<div class="intro__content__logo__o">
<i class="fa-solid fa-circle-dot"></i>
</div>
</div>
<div class="intro__content__pick-mark__bottom-text">REMEMBER : X GOES FIRST</div>
</div>
<div class="intro__content__buttons">
<button class="intro__content__buttons__vs-cpu">NEW GAME (VS CPU)</button>
<button class="intro__content__buttons__vs-player">NEW GAME (VS PLAYER)</button>
</div>
</div>


</div>


</body>

</html>
Loading

0 comments on commit 018fee2

Please sign in to comment.