Skip to content

Commit

Permalink
formatting stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
@vuonghy2442
vuonghy2442 committed Apr 7, 2024
1 parent 0ddfd6c commit b62c7cb
Show file tree
Hide file tree
Showing 4 changed files with 598 additions and 607 deletions.
208 changes: 102 additions & 106 deletions css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,180 +1,176 @@
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
touch-action: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
touch-action: none;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-family: Arial, Helvetica, sans-serif;
}

body,
html {
margin: 0;
padding: 0;
margin: 0;
padding: 0;
}

#game_view {
width: 100vw;
height: 100vh;
width: 100vw;
height: 100vh;

background: #050;
padding: 0;
background: #050;
padding: 0;

overflow: clip;
overflow: clip;
}

#game_header {
width: 100%;
height: 50pt;
background: #00000055;
overflow: clip;
display: flex;
width: 100%;
height: 50pt;
background: #00000055;
overflow: clip;
display: flex;
}


#game_footer {
width: 100%;
height: 50pt;
background: #00000055;
overflow: clip;
display: flex;
width: 100%;
height: 50pt;
background: #00000055;
overflow: clip;
display: flex;
}

#game_main {
width: 100%;
height: calc(100% - 100pt);
overflow: clip;
width: 100%;
height: calc(100% - 100pt);
overflow: clip;
}

#game_box {
max-width: 100%;
max-height: 100%;
aspect-ratio: 1.6;
margin: auto;
background: #00000011;
position: relative;
max-width: 100%;
max-height: 100%;
aspect-ratio: 1.6;
margin: auto;
background: #00000011;
position: relative;
}

#top_row {
width: 100%;
height: 25%;
background: #00000011;
width: 100%;
height: 25%;
background: #00000011;
}


#game_header>div {
background-color: DodgerBlue;
color: white;
width: 200px;
margin: 5px;
text-align: center;
line-height: 60px;
font-size: 30px;
#game_header > div {
background-color: DodgerBlue;
color: white;
width: 200px;
margin: 5px;
text-align: center;
line-height: 60px;
font-size: 30px;
}

.card,
#deal {
position: absolute;
height: 20%;
aspect-ratio: 2.5/3.5;
perspective: 1000px;
position: absolute;
height: 20%;
aspect-ratio: 2.5/3.5;
perspective: 1000px;

-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;

box-shadow: 0 0 5px #0009;
overflow: clip;
box-shadow: 0 0 5px #0009;
overflow: clip;
}

#deal {
top: 2.5%;
left: 2.5%;
top: 2.5%;
left: 2.5%;

background-image: url('../images/back.svg');
background-size: 100%;
background-image: url("../images/back.svg");
background-size: 100%;
}

.flipped {
transform: rotateY(-180deg);
transform: rotateY(-180deg);
}

.card_inner {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}

.card_front,
.card_back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.card_front {
background-color: #fff;
background-size: 100%;
background-color: #fff;
background-size: 100%;
}

.card_back {
transform: rotateY(180deg);
background-image: url('../images/back.svg');
background-size: 100%;
transform: rotateY(180deg);
background-image: url("../images/back.svg");
background-size: 100%;
}

/* stack */

#stack {
display: flex;
position: absolute;
height: 20%;
left: 45.5%;
right: 2.5%;
top: 2.5%;
justify-content: space-between;
display: flex;
position: absolute;
height: 20%;
left: 45.5%;
right: 2.5%;
top: 2.5%;
justify-content: space-between;
}

#stack>div {
height: 100%;
aspect-ratio: 2.5/3.5;
background-color: #0012;

border-style: solid;
border-width: 5px;
border-color: #631;
#stack > div {
height: 100%;
aspect-ratio: 2.5/3.5;
background-color: #0012;

border-style: solid;
border-width: 5px;
border-color: #631;
}

#tableau {
display: flex;
position: absolute;
justify-content: space-between;
height: 20%;
left: 2.5%;
right: 2.5%;
display: flex;
position: absolute;
justify-content: space-between;
height: 20%;
left: 2.5%;
right: 2.5%;
}

#tableau>div {
margin-top: 2.5%;
height: 100%;
aspect-ratio: 2.5/3.5;
background-color: #0012;

border-style: solid;
border-width: 2px;
border-color: #F75;
#tableau > div {
margin-top: 2.5%;
height: 100%;
aspect-ratio: 2.5/3.5;
background-color: #0012;

border-style: solid;
border-width: 2px;
border-color: #f75;
}

.card,
#deal,
#tableau>div,
#stack>div {
border-radius: 0.7cqw;
}
#tableau > div,
#stack > div {
border-radius: 0.7cqw;
}
9 changes: 4 additions & 5 deletions images/back.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
82 changes: 37 additions & 45 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,50 @@
<!DOCTYPE html>
<html lang="en">

<head>
<head>
<title>LonelyBot</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<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=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
</head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/style.css" />
</head>

<body>
<body>
<div id="game_view" draggable="false">
<div id="game_header">
<div id="title">
<span>Solitaire bot</span>
</div>
<div id="score">
<span>Score:</span>
<span>0</span>
</div>
<div id="game_header">
<div id="title">
<span>Solitaire bot</span>
</div>
<div id="score">
<span>Score:</span>
<span>0</span>
</div>
</div>

<div id="game_main">
<div id="game_box">
<div id="top_row">
<div id="deal"> </div>
<div id="stack">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div id="tableau">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="game_main">
<div id="game_box">
<div id="top_row">
<div id="deal"></div>
<div id="stack">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div id="tableau">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>

<div id="game_footer">

</div>
<div id="game_footer"></div>
</div>

<script src="js/game.js"></script>
</body>

</html>
</body>
</html>
Loading

0 comments on commit b62c7cb

Please sign in to comment.