From ef3144ac5fd0d421c0ef20f6ab369c45c8036930 Mon Sep 17 00:00:00 2001
From: Chase Manning <chase@manning.dev>
Date: Tue, 5 Sep 2023 09:37:27 +0300
Subject: [PATCH] :lipstick: add dynamic scaling to gameboy
---
src/App.tsx | 2 +
src/components/Gameboy.tsx | 87 ++++++++++++++++++++------------------
src/components/gameboy.css | 15 +++++--
3 files changed, 59 insertions(+), 45 deletions(-)
diff --git a/src/App.tsx b/src/App.tsx
index a1c917f..3101f29 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,6 +8,8 @@ const StyledApp = styled.div`
display: flex;
justify-content: center;
align-items: center;
+ padding: 5px;
+ padding-bottom: 28px;
`;
const App = () => {
diff --git a/src/components/Gameboy.tsx b/src/components/Gameboy.tsx
index 49119ca..8fee09b 100644
--- a/src/components/Gameboy.tsx
+++ b/src/components/Gameboy.tsx
@@ -3,58 +3,61 @@ import "./gameboy.css";
const Gameboy = () => {
return (
<div className="gameboy" id="GameBoy">
- <div className="screen-area">
- <div className="power">
- <div className="indicator">
- <div className="led"></div>
- <span className="arc" style={{ zIndex: 2 }}></span>
- <span className="arc" style={{ zIndex: 1 }}></span>
- <span className="arc" style={{ zIndex: 0 }}></span>
+ <div className="section">
+ <div className="screen-area">
+ <div className="power">
+ <div className="indicator">
+ <div className="led"></div>
+ <span className="arc" style={{ zIndex: 2 }}></span>
+ <span className="arc" style={{ zIndex: 1 }}></span>
+ <span className="arc" style={{ zIndex: 0 }}></span>
+ </div>
+ POWER
</div>
- POWER
- </div>
- <canvas className="display" id="mainCanvas"></canvas>
+ <canvas className="display" id="mainCanvas"></canvas>
- <div className="label">
- <div className="title">GAME BOY</div>
- <div className="subtitle">
- <span className="c">C</span>
- <span className="o1">O</span>
- <span className="l">L</span>
- <span className="o2">O</span>
- <span className="r">R</span>
+ <div className="label">
+ <div className="title">GAME BOY</div>
+ <div className="subtitle">
+ <span className="c">C</span>
+ <span className="o1">O</span>
+ <span className="l">L</span>
+ <span className="o2">O</span>
+ <span className="r">R</span>
+ </div>
</div>
</div>
+
+ <div className="nintendo">Nintendo</div>
</div>
-
- <div className="nintendo">Nintendo</div>
-
- <div className="controls">
- <div className="dpad">
- <div className="up">
- <i className="fa fa-caret-up"></i>
+ <div className="section">
+ <div className="controls">
+ <div className="dpad">
+ <div className="up">
+ <i className="fa fa-caret-up"></i>
+ </div>
+ <div className="right">
+ <i className="fa fa-caret-right"></i>
+ </div>
+ <div className="down">
+ <i className="fa fa-caret-down"></i>
+ </div>
+ <div className="left">
+ <i className="fa fa-caret-left"></i>
+ </div>
+ <div className="middle"></div>
</div>
- <div className="right">
- <i className="fa fa-caret-right"></i>
+ <div className="a-b">
+ <div className="b">B</div>
+ <div className="a">A</div>
</div>
- <div className="down">
- <i className="fa fa-caret-down"></i>
- </div>
- <div className="left">
- <i className="fa fa-caret-left"></i>
- </div>
- <div className="middle"></div>
</div>
- <div className="a-b">
- <div className="b">B</div>
- <div className="a">A</div>
- </div>
- </div>
- <div className="start-select">
- <div className="select">SELECT</div>
- <div className="start">START</div>
+ <div className="start-select">
+ <div className="select">SELECT</div>
+ <div className="start">START</div>
+ </div>
</div>
<div className="speaker">
diff --git a/src/components/gameboy.css b/src/components/gameboy.css
index 9adcf58..f224c39 100644
--- a/src/components/gameboy.css
+++ b/src/components/gameboy.css
@@ -1,7 +1,10 @@
.gameboy {
position: relative;
- width: 350px;
- height: 570px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ width: 100%;
+ height: 100%;
border-radius: 20px;
padding: 20px;
background-color: #4f50db;
@@ -37,6 +40,12 @@
box-shadow: 0px 5px 0px #3d38b5;
border-bottom: 2px solid #9998eb;
}
+
+.gameboy .section {
+ width: 100%;
+ min-height: 199px;
+}
+
.gameboy .screen-area {
position: relative;
padding: 35px 50px 5px 50px;
@@ -111,7 +120,7 @@
.gameboy .screen-area .display {
background-color: #929d97;
height: 190px;
- width: 210px;
+ width: 100%;
border-radius: 3px;
margin-bottom: 15px;
}