Tweaks to UI
|
@ -1372,7 +1372,7 @@
|
||||||
"version": "18.2.18",
|
"version": "18.2.18",
|
||||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.18.tgz",
|
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.18.tgz",
|
||||||
"integrity": "sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==",
|
"integrity": "sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==",
|
||||||
"devOptional": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@types/react": "*"
|
"@types/react": "*"
|
||||||
}
|
}
|
||||||
|
@ -1390,24 +1390,6 @@
|
||||||
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
|
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
|
||||||
"integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
|
"integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
|
||||||
},
|
},
|
||||||
"node_modules/@types/stats.js": {
|
|
||||||
"version": "0.17.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz",
|
|
||||||
"integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==",
|
|
||||||
"peer": true
|
|
||||||
},
|
|
||||||
"node_modules/@types/three": {
|
|
||||||
"version": "0.160.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@types/three/-/three-0.160.0.tgz",
|
|
||||||
"integrity": "sha512-jWlbUBovicUKaOYxzgkLlhkiEQJkhCVvg4W2IYD2trqD2om3VK4DGLpHH5zQHNr7RweZK/5re/4IVhbhvxbV9w==",
|
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@types/stats.js": "*",
|
|
||||||
"@types/webxr": "*",
|
|
||||||
"fflate": "~0.6.10",
|
|
||||||
"meshoptimizer": "~0.18.1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@types/webxr": {
|
"node_modules/@types/webxr": {
|
||||||
"version": "0.5.10",
|
"version": "0.5.10",
|
||||||
"resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.10.tgz",
|
"resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.10.tgz",
|
||||||
|
@ -2251,12 +2233,6 @@
|
||||||
"three": ">=0.137"
|
"three": ">=0.137"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/meshoptimizer": {
|
|
||||||
"version": "0.18.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
|
|
||||||
"integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==",
|
|
||||||
"peer": true
|
|
||||||
},
|
|
||||||
"node_modules/methods": {
|
"node_modules/methods": {
|
||||||
"version": "1.1.2",
|
"version": "1.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
|
||||||
|
|
Before Width: | Height: | Size: 548 KiB After Width: | Height: | Size: 500 KiB |
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 408 KiB |
Before Width: | Height: | Size: 130 KiB After Width: | Height: | Size: 393 KiB |
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 510 KiB |
|
@ -42,7 +42,6 @@ function App() {
|
||||||
|
|
||||||
actions.setId(state.id);
|
actions.setId(state.id);
|
||||||
|
|
||||||
|
|
||||||
state.onQuit(() => {
|
state.onQuit(() => {
|
||||||
actions.removePlayer(state);
|
actions.removePlayer(state);
|
||||||
|
|
||||||
|
|
|
@ -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]);
|
}, [setupStatus]);
|
||||||
|
|
||||||
if (gameStarted) {
|
if (gameStarted) {
|
||||||
|
@ -49,7 +60,12 @@ export const Landing = () => {
|
||||||
<img ref={logo} src="./logo.png" alt="logo" />
|
<img ref={logo} src="./logo.png" alt="logo" />
|
||||||
</div>
|
</div>
|
||||||
<div className="start" ref={startButton}>
|
<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
|
PRESS ENTER TO START
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -63,23 +79,31 @@ export const Landing = () => {
|
||||||
<div className="articles">
|
<div className="articles">
|
||||||
<div className={controlStyle === "keyboard" ? "article selected" : "article"} onClick={() =>
|
<div className={controlStyle === "keyboard" ? "article selected" : "article"} onClick={() =>
|
||||||
setControlStyle("keyboard")}>
|
setControlStyle("keyboard")}>
|
||||||
<h2>Keyboard</h2>
|
|
||||||
<img src="./images/keyboard.png" alt="keyboard" />
|
<img src="./images/keyboard.png" alt="keyboard" />
|
||||||
|
<div className="article_label">
|
||||||
|
<p>Keyboard</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={controlStyle === "gamepad" ? "article selected" : "article"} onClick={() =>
|
<div className={controlStyle === "gamepad" ? "article selected" : "article"} onClick={() =>
|
||||||
setControlStyle("gamepad")}>
|
setControlStyle("gamepad")}>
|
||||||
<h2>Gamepad</h2>
|
|
||||||
<img src="./images/gamepad.png" alt="gamepad" />
|
<img src="./images/gamepad.png" alt="gamepad" />
|
||||||
|
<div className="article_label">
|
||||||
|
<p>Gamepad</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={controlStyle === "mouseKeyboard" ? "article selected" : "article"} onClick={() =>
|
<div className={controlStyle === "mouseKeyboard" ? "article selected" : "article"} onClick={() =>
|
||||||
setControlStyle("mouseKeyboard")}>
|
setControlStyle("mouseKeyboard")}>
|
||||||
<h2>Mouse & Keybaord</h2>
|
|
||||||
<img src="./images/mousekeyboard.png" alt="mouse & keyboard" />
|
<img src="./images/mousekeyboard.png" alt="mouse & keyboard" />
|
||||||
|
<div className="article_label">
|
||||||
|
<p>Mouse & Keyboard</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={controlStyle === "touch" ? "article mobile selected" : "article mobile"} onClick={() =>
|
<div className={controlStyle === "touch" ? "article selected" : "article"} onClick={() =>
|
||||||
setControlStyle("touch")}>
|
setControlStyle("touch")}>
|
||||||
<h2>Mobile</h2>
|
|
||||||
<img src="./images/mobile.png" alt="mobile" />
|
<img src="./images/mobile.png" alt="mobile" />
|
||||||
|
<div className="article_label">
|
||||||
|
<p>Mobile</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
230
src/index.css
|
@ -155,98 +155,20 @@ body::-webkit-scrollbar {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
display: grid;
|
display: grid;
|
||||||
place-content: center;
|
place-content: center;
|
||||||
gap: 400px;
|
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
font-family: "Hanken Grotesk";
|
font-family: "Hanken Grotesk";
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
img {
|
img {
|
||||||
width: 1200px;
|
width: 1200px;
|
||||||
}
|
margin: 150px;
|
||||||
}
|
|
||||||
|
|
||||||
.glassy {
|
|
||||||
width: 1280px;
|
|
||||||
height: 720px;
|
|
||||||
background: rgba(95, 95, 95, 0.25);
|
|
||||||
/* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
|
|
||||||
backdrop-filter: blur(0px);
|
|
||||||
-webkit-backdrop-filter: blur(0px);
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
||||||
color: white;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 40px;
|
|
||||||
transition: all 0.5s ease 0s;
|
|
||||||
animation : froze 2s ease 1s both;
|
|
||||||
.articles {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
padding: 80px;
|
|
||||||
gap: 40px;
|
|
||||||
.article {
|
|
||||||
background: rgba(216, 216, 216, 0.25);
|
|
||||||
width: 100%;
|
|
||||||
height: 300px;
|
|
||||||
border-radius: 6px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 20px;
|
|
||||||
transition: all 0.2s ease 0s;
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover {
|
|
||||||
background: rgba(216, 216, 216, 0.5);
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
width: 200px;
|
|
||||||
filter: drop-shadow(5px 5px 5px #0000008f);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.article.selected {
|
|
||||||
background: rgba(216, 216, 216, 0.7);
|
|
||||||
box-shadow: 0 0 20px 0 rgb(255, 255, 255);
|
|
||||||
}
|
|
||||||
|
|
||||||
.article.mobile {
|
|
||||||
img {
|
|
||||||
width: 100px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.submit {
|
|
||||||
font-weight: 900;
|
|
||||||
color: rgba(255, 255, 255, 0.795);
|
|
||||||
|
|
||||||
font-size: 27px;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.start {
|
.start {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
margin: 175px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
|
@ -279,6 +201,114 @@ body::-webkit-scrollbar {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.glassy {
|
||||||
|
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);
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||||
|
color: white;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 40px;
|
||||||
|
transition: all 0.5s ease 0s;
|
||||||
|
animation : froze 2s ease 1s both;
|
||||||
|
.articles {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
width: 100%;
|
||||||
|
column-gap: 4%;
|
||||||
|
padding: 80px;
|
||||||
|
|
||||||
|
.article {
|
||||||
|
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 {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
filter: drop-shadow(5px 5px 5px #0000008f);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.article.selected {
|
||||||
|
background: rgba(216, 216, 216, 0.7);
|
||||||
|
box-shadow: 0 0 20px 0 rgb(255, 255, 255);
|
||||||
|
}
|
||||||
|
|
||||||
|
.article.mobile {
|
||||||
|
img {
|
||||||
|
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, 0.541);
|
||||||
|
color: white;
|
||||||
|
opacity: 1;
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
all: unset;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.disabled {
|
.disabled {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
@ -336,23 +366,33 @@ body::-webkit-scrollbar {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.glassy{
|
@media screen and (max-width: 1000px) {
|
||||||
width: 100%;
|
.glassy {
|
||||||
height: 100vh;
|
width: 80vw;
|
||||||
.articles{
|
height: 90vh;
|
||||||
gap:5px;
|
padding: 20px;
|
||||||
padding: 0;
|
.articles {
|
||||||
.article{
|
display: flex;
|
||||||
height: 200px;
|
flex-wrap: wrap;
|
||||||
padding: 10px;
|
justify-content: space-between;
|
||||||
img{
|
align-items: flex-start;
|
||||||
width: 100px;
|
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;}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|