Skip to content

Commit

Permalink
Tweaks to UI
Browse files Browse the repository at this point in the history
  • Loading branch information
[Naman Kishwan] committed Feb 16, 2024
1 parent ef51e33 commit a12ccb3
Show file tree
Hide file tree
Showing 8 changed files with 134 additions and 95 deletions.
26 changes: 1 addition & 25 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file modified public/images/gamepad.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/keyboard.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/mobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/mousekeyboard.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@ function App() {

actions.setId(state.id);


state.onQuit(() => {
actions.removePlayer(state);

Expand Down
36 changes: 30 additions & 6 deletions src/Landing.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,17 @@ export const Landing = () => {
});
}
}

const handleKeyDown = (event) => {
if (event.key === 'Enter') {
setSetupStatus(1);
}
};

document.body.addEventListener('keydown', handleKeyDown);
return () => {
document.body.removeEventListener('keydown', handleKeyDown);
};
}, [setupStatus]);

if (gameStarted) {
Expand All @@ -49,7 +60,12 @@ export const Landing = () => {
<img ref={logo} src="./logo.png" alt="logo" />
</div>
<div className="start" ref={startButton}>
<button className="start-button" onClick={() => setSetupStatus(1)}>
<button className="start-button"
onClick={() => setSetupStatus(1)}
onKeyDown={(event) => {
if (event.key === 'Enter') {
setSetupStatus(1);
}}} autoFocus>
PRESS ENTER TO START
</button>
</div>
Expand All @@ -63,23 +79,31 @@ export const Landing = () => {
<div className="articles">
<div className={controlStyle === "keyboard" ? "article selected" : "article"} onClick={() =>
setControlStyle("keyboard")}>
<h2>Keyboard</h2>
<img src="./images/keyboard.png" alt="keyboard" />
<div className="article_label">
<p>Keyboard</p>
</div>
</div>
<div className={controlStyle === "gamepad" ? "article selected" : "article"} onClick={() =>
setControlStyle("gamepad")}>
<h2>Gamepad</h2>
<img src="./images/gamepad.png" alt="gamepad" />
<div className="article_label">
<p>Gamepad</p>
</div>
</div>
<div className={controlStyle === "mouseKeyboard" ? "article selected" : "article"} onClick={() =>
setControlStyle("mouseKeyboard")}>
<h2>Mouse & Keybaord</h2>
<img src="./images/mousekeyboard.png" alt="mouse & keyboard" />
<div className="article_label">
<p>Mouse & Keyboard</p>
</div>
</div>
<div className={controlStyle === "touch" ? "article mobile selected" : "article mobile"} onClick={() =>
<div className={controlStyle === "touch" ? "article selected" : "article"} onClick={() =>
setControlStyle("touch")}>
<h2>Mobile</h2>
<img src="./images/mobile.png" alt="mobile" />
<div className="article_label">
<p>Mobile</p>
</div>
</div>

</div>
Expand Down
166 changes: 103 additions & 63 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,20 +155,56 @@ body::-webkit-scrollbar {
height: 100vh;
display: grid;
place-content: center;
gap: 400px;
z-index: 2;
font-family: "Hanken Grotesk";

.logo {
img {
width: 1200px;
margin: 150px;
}
}

.start {
opacity: 0;
display: flex;
margin: 175px;
justify-content: center;
align-items: center;
font-weight: 900;
color: rgba(255, 255, 255, 0.795);

font-size: 60px;
text-shadow: 0 0 10px rgba(0, 0, 0, 1);
background: linear-gradient(
to right,
rgba(54, 54, 54, 0),
rgb(54, 54, 54),
rgba(54, 54, 54, 0)
);
animation: blinking 2s infinite;
transition: all 0.2s ease 0s;
cursor: pointer;
&:hover {
text-shadow: 0 0 40px rgba(255, 255, 255, 1);
color: white;
opacity: 1;
animation: none;
}
button {
all: unset;
display: flex;
justify-content: center;
align-items: center;
display: inline-block;
}
}
}

.glassy {
width: 1280px;
height: 720px;
background: rgba(95, 95, 95, 0.25);
width: 80vw;
height: 90vh;
background: #0000008f;
/* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
Expand All @@ -186,27 +222,33 @@ body::-webkit-scrollbar {
.articles {
display: flex;
justify-content: space-between;
align-items: center;
align-items: flex-start;
width: 100%;
column-gap: 4%;
padding: 80px;
gap: 40px;

.article {
background: rgba(216, 216, 216, 0.25);
width: 100%;
height: 300px;
border-radius: 6px;
position: relative;
background: rgba(35, 35, 53, 0.685);
width: calc((100% - 3 * 4%) / 4);
aspect-ratio: 1;
border: 3px solid #ffffff;
border-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
padding: 20px;
transition: all 0.2s ease 0s;
cursor: pointer;
overflow: hidden;
&:hover {
background: rgba(216, 216, 216, 0.5);
transform: scale(1.05);
}
img {
width: 200px;
max-width: 100%;
height: auto;
filter: drop-shadow(5px 5px 5px #0000008f);
}
}
Expand All @@ -220,16 +262,39 @@ body::-webkit-scrollbar {
width: 100px;
}
}

.article_label {
position: absolute;
display: flex;
justify-content: center;
left: 0;
top: 80%;
background: rgba(6, 6, 6, 0.936);
border: 2px solid #272727;
width: 100%;
height: 100%;
overflow: hidden;
}

.article_label p {
margin-top: 6px;
font-size: calc(0.01 * (80vw - 400px) + 10px);
color: white;
}
}

.submit {
font-weight: 900;
padding: 10px;
color: rgba(255, 255, 255, 0.795);

border: 3px solid #ffffff;
background: rgba(35, 35, 53, 0.685);
border-radius: 10px;
font-size: 27px;
transition: all 0.2s ease 0s;
cursor: pointer;
&:hover {
text-shadow: 0 0 40px rgba(255, 255, 255, 1);
text-shadow: 0 0 40px rgba(255, 255, 255, 0.541);
color: white;
opacity: 1;
animation: none;
Expand All @@ -244,41 +309,6 @@ body::-webkit-scrollbar {
}
}

.start {
opacity: 0;
display: flex;
justify-content: center;
align-items: center;
font-weight: 900;
color: rgba(255, 255, 255, 0.795);

font-size: 60px;
text-shadow: 0 0 10px rgba(0, 0, 0, 1);
background: linear-gradient(
to right,
rgba(54, 54, 54, 0),
rgb(54, 54, 54),
rgba(54, 54, 54, 0)
);
animation: blinking 2s infinite;
transition: all 0.2s ease 0s;
cursor: pointer;
&:hover {
text-shadow: 0 0 40px rgba(255, 255, 255, 1);
color: white;
opacity: 1;
animation: none;
}
button {
all: unset;
display: flex;
justify-content: center;
align-items: center;
display: inline-block;
}
}
}

.disabled {
pointer-events: none;
cursor: not-allowed;
Expand Down Expand Up @@ -336,23 +366,33 @@ body::-webkit-scrollbar {
font-size: 30px;
}

.glassy{
width: 100%;
height: 100vh;
.articles{
gap:5px;
padding: 0;
.article{
height: 200px;
padding: 10px;
img{
width: 100px;
@media screen and (max-width: 1000px) {
.glassy {
width: 80vw;
height: 90vh;
padding: 20px;
.articles {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
column-gap: 4%;
row-gap: 20px;
.article {
width: calc((100% - 3 * 4%) / 2 - 10px);
aspect-ratio: 1;
padding: 10px;
transition: transform 0.3s ease;
img {
width: 100%;
height: auto;
}
&:hover {
transform: scale(1.05);
}
}
}
}
.article.mobile{
img{width:50px;}
}
}
}
}
}

0 comments on commit a12ccb3

Please sign in to comment.