Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add initial HAL design #421

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Add initial HAL design #421

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
165 changes: 165 additions & 0 deletions frontend/src/Components/Hal9000/Hal9000.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
.hal-container {
width: 100px;
height: 250px;
border: 4px solid #949494;
background-color: black;
display: grid;
align-content: space-between;
}

.hal-name-container {
height: 20px;
margin: 10px;
border: 3px solid #949494;
display: grid;
grid-template-columns: 45px 1fr;
}

.hal-name-left {
display: flex;
align-items: center;
justify-content: end;
background-color: #0171D5;
height: 100%;
color: white;
font-size: 8px;
font-weight: 700;
padding-right: 2px;
}

.hal-name-right {
display: flex;
align-items: center;
height: 100%;
color: white;
font-size: 8px;
font-weight: 700;
padding-left: 2px;
}

.hal-footer-box {
background-color: gray;
height: 60px;
width: 100px;
}

.hal-eye-container {
display: flex;
justify-content: center;
margin-bottom: 10px;
}

.hal-eye-container * {
border-radius: 100%;
box-sizing: border-box;
position: relative;

&::before,
&::after {
border-radius: inherit;
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
}


.base {
background-image: linear-gradient(45deg, #fefefe 10%, #5d6d94, #050718, #5d6d94, #fefefe 90%);
height: 260px;
width: 260px;
padding: 10px;
position: absolute;
top: 105px;
z-index: 10;
transform: scale(0.3);
}
.base::before {
background-image: linear-gradient(#d9dee5, #151531), linear-gradient(90deg, #434c77, #0b0a1f, #434c77);
background-blend-mode: hard-light, normal;
box-shadow: inset 0 0 14px 9px rgba(5, 7, 24, 0.4);
width: 240px;
height: 240px;
}
.base::after {
background-image: radial-gradient(#b10000 10%, rgba(177, 0, 0, 0) 71%);
mix-blend-mode: lighten;
top: -8px;
left: -10px;
width: 280px;
height: 280px;
}
.lens {
background-image: radial-gradient(#b10000 12%, #120619 67%, #200517);
border: 8px solid #050718;
box-shadow: inset 0 0 0 10px #380014;
top: 12px;
left: 12px;
width: 213px;
height: 213px;
z-index: 10;
}
.lens::before {
background-image: radial-gradient(#f00 20%, #470010 50%, #1a193e 80%);
mix-blend-mode: soft-light;
opacity: 0.8;
z-index: 100;
}
.lens::after {
background-image: radial-gradient(#fff 2px, #fff300 8px, rgba(255, 0, 0, 0.9) 14px, rgba(255, 0, 0, 0.08) 35px, transparent 35px);
z-index: 100;
}
.reflections, .reflections::before, .reflections::after {
background-image: radial-gradient(transparent 19%, #ec32aa 23%, #d4f6fc 28%, #ec32aa 33%, transparent 36%, transparent 38%, #e558d0 40%, #d0fcfe 45%, #ce73df 50%, transparent 52%, transparent 56%, #b883e7 60%, #b7ffff 65%, #3564c7 72%, transparent);
background-size: 182px 182px;
background-position: top center;
border-radius: 15px 15px 5px 5px / 5px 5px 15px 15px;
filter: blur(4px);
position: absolute;
top: 26px;
width: 58px;
height: 75px;
z-index: 10;
}
.reflections {
left: 69px;
transform: perspective(30px) rotate3d(1, 0, 0, -15deg);
transform-origin: top;
}
.reflections::before, .reflections::after {
height: 45px;
top: 28px;
}
.reflections::before {
left: -65px;
transform: rotate(-43deg);
}
.reflections::after {
right: -65px;
transform: rotate(43deg);
}
.animation {
animation: flicker 3s infinite;
background: radial-gradient(#79b4ba, #47696d, #890000);
mix-blend-mode: color-dodge;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
@keyframes flicker {
0% {
opacity: 0;
}
15% {
opacity: 1;
}
75% {
opacity: 0;
}
}
25 changes: 25 additions & 0 deletions frontend/src/Components/Hal9000/Hal9000.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import "./Hal9000.css";

const Hal9000 = () => {
return (
<div className="hal-container">
<div className="hal-name-container">
<div className="hal-name-left">MOXON</div>
<div className="hal-name-right">9000</div>
</div>
<div className="hal-footer-container">
<div className="hal-eye-container">
<div className="base">
<div className="lens">
<div className="reflections"></div>
</div>
<div className="animation"></div>
</div>
</div>
<div className="hal-footer-box"></div>
</div>
</div>
);
};

export default Hal9000;
3 changes: 3 additions & 0 deletions frontend/src/pages/Game/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@
}

.chessboard-box {
display: grid;
grid-template-columns: 1fr 100px;
gap: 20px;
flex: 1;
width: 600px;
padding: 0 0.5em 0 0;
Expand Down
33 changes: 18 additions & 15 deletions frontend/src/pages/Game/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import GameStatus from "../../Components/GameStatus/GameStatus";
import { default as PreGame } from "../../Components/PreGame/PreGame";
import { useGameContext, GameState } from "./GameContext";
import "./index.css";
import Hal9000 from "../../Components/Hal9000/Hal9000";
interface gameProps {
socket: Socket;
}
Expand Down Expand Up @@ -74,7 +75,7 @@ export default function Game(props: gameProps) {
}
};

function startGame() {
function startGame() {
if (props.socket.connected) {
const preferences = {
skill_level: stockfishlevel,
Expand Down Expand Up @@ -103,7 +104,7 @@ export default function Game(props: gameProps) {
}

const handleInvalidMove = () => {
setNotValid(true);
setNotValid(true);
};

const handleOK = () => {
Expand Down Expand Up @@ -185,8 +186,8 @@ export default function Game(props: gameProps) {
}
};

const handleValidMoves = (validMoves: string[]) => {
setValidMoves(validMoves);
const handleValidMoves = (validMoves: string[]) => {
setValidMoves(validMoves);
};

return (
Expand Down Expand Up @@ -228,6 +229,7 @@ export default function Game(props: gameProps) {
<Box className="unclickable-area">
<MyChessboard socket={props.socket} FEN={FEN} />
</Box>
<Hal9000 />
</Box>
{result === undefined && !gameState && (
<AlertComponent
Expand All @@ -252,17 +254,18 @@ export default function Game(props: gameProps) {
player={undefined}
/>
</Box>
)}
{(not_valid ) ? (
<Box className="not-valid-move">
<GameStatus
title="Invalid move!"
moves={valid_moves}
player={undefined}
/>
</Box>
) : <> </>
}
)}
{not_valid ? (
<Box className="not-valid-move">
<GameStatus
title="Invalid move!"
moves={valid_moves}
player={undefined}
/>
</Box>
) : (
<> </>
)}
</Box>
)}
</Box>
Expand Down