From 96aa07160649a5002f5ae5faf9a8b881e3e6dd32 Mon Sep 17 00:00:00 2001 From: Alex Plisov Date: Sat, 20 Jan 2024 00:43:36 -0500 Subject: [PATCH 1/2] Added an 'Options' section on the left with the ability to toggle a grid on or off --- index.html | 1206 ++++++++++++++++++++++++++++++++++------------------ 1 file changed, 784 insertions(+), 422 deletions(-) diff --git a/index.html b/index.html index 37d4af0..a78c9b6 100644 --- a/index.html +++ b/index.html @@ -1,449 +1,811 @@ - - Javascript Tetris - - - - - -
- - - - + + //------------------------------------------------------------------------- + // FINALLY, lets run the game + //------------------------------------------------------------------------- - + run(); + + From b5fec2082044fdd1f0c6c6a37545e0a14542be05 Mon Sep 17 00:00:00 2001 From: Alex Plisov Date: Sat, 20 Jan 2024 00:45:17 -0500 Subject: [PATCH 2/2] Moved styles to a separate file --- index.html | 191 +---------------------------------------------------- styles.css | 188 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 189 insertions(+), 190 deletions(-) create mode 100644 styles.css diff --git a/index.html b/index.html index a78c9b6..16752a4 100644 --- a/index.html +++ b/index.html @@ -2,196 +2,7 @@ Javascript Tetris - + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..61936fe --- /dev/null +++ b/styles.css @@ -0,0 +1,188 @@ +body { + font-family: Helvetica, sans-serif; + } + #tetris { + margin: 1em auto; + padding: 1em; + border: 4px solid black; + border-radius: 10px; + background-color: #f8f8f8; + } + #stats { + display: inline-block; + vertical-align: top; + } + #canvas { + display: inline-block; + vertical-align: top; + background: url(texture.jpg); + box-shadow: 10px 10px 10px #999; + border: 2px solid #333; + } + #menu { + display: inline-block; + vertical-align: top; + position: relative; + } + #menu p { + margin: 0.5em 0; + text-align: center; + } + #menu p a { + text-decoration: none; + color: black; + } + #upcoming { + display: block; + margin: 0 auto; + background-color: #e0e0e0; + } + #score { + color: red; + font-weight: bold; + vertical-align: middle; + } + #rows { + color: blue; + font-weight: bold; + vertical-align: middle; + } + #stats { + position: absolute; + bottom: 0em; + right: 1em; + } + @media screen and (min-width: 0px) and (min-height: 0px) { + #tetris { + font-size: 0.75em; + width: 250px; + } + #menu { + width: 100px; + height: 200px; + } + #upcoming { + width: 50px; + height: 50px; + } + #canvas { + width: 100px; + height: 200px; + } + } /* 10px chunks */ + @media screen and (min-width: 400px) and (min-height: 400px) { + #tetris { + font-size: 1em; + width: 350px; + } + #menu { + width: 150px; + height: 300px; + } + #upcoming { + width: 75px; + height: 75px; + } + #canvas { + width: 150px; + height: 300px; + } + } /* 15px chunks */ + @media screen and (min-width: 500px) and (min-height: 500px) { + #tetris { + font-size: 1.25em; + width: 450px; + } + #menu { + width: 200px; + height: 400px; + } + #upcoming { + width: 100px; + height: 100px; + } + #canvas { + width: 200px; + height: 400px; + } + } /* 20px chunks */ + @media screen and (min-width: 600px) and (min-height: 600px) { + #tetris { + font-size: 1.5em; + width: 550px; + } + #menu { + width: 250px; + height: 500px; + } + #upcoming { + width: 125px; + height: 125px; + } + #canvas { + width: 250px; + height: 500px; + } + } /* 25px chunks */ + @media screen and (min-width: 700px) and (min-height: 700px) { + #tetris { + font-size: 1.75em; + width: 650px; + } + #menu { + width: 300px; + height: 600px; + } + #upcoming { + width: 150px; + height: 150px; + } + #canvas { + width: 300px; + height: 600px; + } + } /* 30px chunks */ + @media screen and (min-width: 800px) and (min-height: 800px) { + #tetris { + font-size: 2em; + width: 750px; + } + #menu { + width: 350px; + height: 700px; + } + #upcoming { + width: 175px; + height: 175px; + } + #canvas { + width: 350px; + height: 700px; + } + } /* 35px chunks */ + @media screen and (min-width: 900px) and (min-height: 900px) { + #tetris { + font-size: 2.25em; + width: 850px; + } + #menu { + width: 400px; + height: 800px; + } + #upcoming { + width: 200px; + height: 200px; + } + #canvas { + width: 400px; + height: 800px; + } + } /* 40px chunks */ + + .header { + font-weight: bold; + } + + .option { + font-size: 0.75em; + } \ No newline at end of file