GuillaumeHemmen/pokemon-js
1
0
Fork 0
mirror of https://github.com/chase-manning/pokemon-js.git synced 2025-08-14 06:39:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

💄 add dynamic scaling to gameboy

Browse source
This commit is contained in:
Chase Manning 2023-09-05 09:37:27 +03:00
commit ef3144ac5f
3 changed files with 59 additions and 45 deletions

2
src/App.tsx
View file

@ -8,6 +8,8 @@ const StyledApp = styled.div`
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
padding-bottom: 28px;
`;
const App = () => {

87
src/components/Gameboy.tsx
View file

@ -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">

15
src/components/gameboy.css
View file

@ -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;
}