Trianta/trianta.dev
1
0
Fork 0
Code Issues 13 Pull Requests Packages Projects Releases 4 Wiki Activity

rewrite: major rework of home page #1

Merged
Trianta merged 2 commits from rewrite into main 2024-08-09 03:04:41 -05:00
Conversation 0 Commits 2 Files Changed 7 +316 -61
4 changed files with 316 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e3268f2abb - Show all commits

93
css/home.css
View File

@ -2,12 +2,13 @@
body { body {
font-family: Helvetica, Arial, sans-serif; font-family: Helvetica, Arial, sans-serif;
font-size: 1rem; font-size: 1rem;
color: #4c4f69; color: #cad3f5;
line-height: 1.5; line-height: 1.5;
width: 800px; width: 800px;
margin-inline: auto; margin-inline: auto;
background: white; background: #24273a;
padding: 10px 10px 10px 10px; padding: 6px;
margin: 10px auto;
} }
/* /*
@ -16,22 +17,38 @@ body {
} }
*/ */
#top {
margin-bottom: 6px;
border-radius: 16px;
border-top-left-radius: 0px;
margin: 4px auto;
margin-top: 0px;
height: 55px;
}
#main {
background: #1e2030;
}
/* Title of the resume */ /* Title of the resume */
h1 { h1 {
color: #df8e1d; width: 130px;
font-size: 2.1rem;
text-align: center; text-align: center;
margin-top: 0px; display: inline-block;
margin-bottom: 0px; font-size: 1.8rem;
margin: 0px;
padding: 8px;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
} }
/* Titles of categories */ /* Titles of categories */
h2 { h2 {
color: #df8e1d; color: #f5a97f;
font-size: 1.6rem; font-size: 1.8rem;
text-align: center;
margin-top: 0; margin-top: 0;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
border-bottom: 1px solid black;
} }
h3 { h3 {
@ -48,13 +65,6 @@ h4 {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
h6 {
font-size: 0.9rem;
text-align: center;
margin: 0;
padding-bottom: 9px;
}
/* Definitions */ /* Definitions */
dt { dt {
float: left; float: left;
@ -73,13 +83,28 @@ p {
/* Links */ /* Links */
a { a {
text-decoration: none; text-decoration: none;
color: #1e66f5; padding: 8px;
color: #8aadf4;
} }
a:hover, a:active { a:hover, a:active {
background-color: #7287fd; border-radius: 9px;
color: #FFFFFF;
text-decoration: underline; text-decoration: underline;
text-shadow: 1px 1px 1px #333; text-shadow: 1px 1px 1px #333;
animation: animate 3s linear infinite;
}
a.button {
margin: 14px 10%;
padding: 4px 12px;
border: 1px outset #494d64;
border-radius: 9px;
color: #8aadf4;
display: inline-block;
background-color: #363a4f;
text-decoration: none;
width: 80px;
text-align: center;
} }
/* Horizontal separators */ /* Horizontal separators */
@ -101,3 +126,31 @@ p, li {
line-height: 1.6; line-height: 1.6;
} }
@keyframes animate {
0% { box-shadow: 0 0 8px 4px #24273a; }
15% { box-shadow: 0 0 8px 4px #494d64; }
50% { box-shadow: 0 0 8px 4px #b7bdf8; }
85% { box-shadow: 0 0 8px 4px #494d64; }
100% { box-shadow: 0 0 8px 4px #24273a; }
}
.card {
background: #363a4f;
text-align: center;
border-radius: 6px;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
}
.card-top {
background: #1e2030;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
}
#pong {
margin: 6px;
border-radius: 9px;
background: #494d64;
}

28
home.html
View File

@ -28,17 +28,25 @@
<![endif]--> <![endif]-->
</head> </head>
<body> <body>
<h1 id="trianta">Trianta</h1> <div>
<h6 id="github-profile-.-personal-projects"> <h1 style="background: #1e2030">Trianta</h1>
[ <a href="https://www.github.com/trimutex">GitHub Profile</a> ] <h1><a href="https://www.github.com/trimutex">GitHub</a></h1>
. [ <a href="https://lab.trianta.dev/Trianta">Personal Projects</a> ] <h1><a href="https://lab.trianta.dev/Trianta">Projects</a></h1>
</h6> </div>
<h2 id="interactive-projects">Interactive Projects</h2> <div id="main">
<div class="card"> <div class="card">
<p>Snakeplusplus</p> <h2 class="card-top">Pong</h3>
<p>Pong</p> <div>
<button class="button" type="button" onclick="window.location.href='pong.html'">Start Game</button> <canvas width="750" height="585" id="pong"></canvas>
<script src = "js/pong.js"></script> <script src="js/pong.js"></script>
<div id="gameover" hidden="true">
<h1>Game Over</h1>
</div>
<div id="restart" hidden="true">
<button class="button" type="button" onclick = "restartGame()">Restart Game</a>
</div>
</div>
</div>
</div> </div>
</body> </body>
</html> </html>

236
js/pong.js
View File

@ -1,22 +1,224 @@
html, body { const canvas = document.getElementById('pong');
height: 100%; const context = canvas.getContext('2d');
margin: 0; const grid = 15;
const paddleHeight = grid * 5; // 80
const maxPaddleY = canvas.height - grid - paddleHeight;
var paddleSpeed = 6;
var ballSpeed = 5;
var leftScore = 0;
var rightScore = 0;
const leftPaddle = {
// start in the middle of the game on the left side
x: grid * 2,
y: canvas.height / 2 - paddleHeight / 2,
width: grid,
height: paddleHeight,
// paddle velocity
dy: 0
};
const rightPaddle = {
// start in the middle of the game on the right side
x: canvas.width - grid * 3,
y: canvas.height / 2 - paddleHeight / 2,
width: grid,
height: paddleHeight,
// paddle velocity
dy: 0
};
const ball = {
// start in the middle of the game
x: canvas.width / 2,
y: canvas.height / 2,
width: grid,
height: grid,
// keep track of when need to reset the ball position
resetting: false,
// ball velocity (start going to the top-right corner)
dx: ballSpeed,
dy: -ballSpeed
};
// check for collision between two objects using axis-aligned bounding box (AABB)
// @see https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection
function collides(obj1, obj2) {
return obj1.x < obj2.x + obj2.width &&
obj1.x + obj1.width > obj2.x &&
obj1.y < obj2.y + obj2.height &&
obj1.y + obj1.height > obj2.y;
} }
body { function gameOver() {
background: black; context.clearRect(0, 0, canvas.width, canvas.height);
display: flex; let restartGame = document.getElementById("restart");
align-items: center; let gameOverText = document.getElementById("gameover");
justify-content: center; restartGame.hidden = false;
gameOverText.hidden = false;
} }
.button { function restartGame() {
background: blue; leftScore = 0;
color: white; rightScore = 0;
padding: 15px 20px; let restartGame = document.getElementById("restart");
font-size: 32px; restartGame.hidden = true;
font-family: Arial, Helvetica, sans-serif; requestAnimationFrame(loop);
text-transform: uppercase;
cursor: pointer;
position: relative;
} }
function BotMovesPaddle(paddle) {
ballRegion = Math.floor(ball.y / 15);
paddleRegion = Math.floor(paddle.y / 15);
if (ballRegion < paddleRegion) paddle.dy = -paddleSpeed;
if (ballRegion > paddleRegion) paddle.dy = paddleSpeed;
if (ballRegion === paddleRegion) paddle.dy = 0;
}
// game loop
function loop() {
//if (leftScore < 7 && rightScore < 7) {
requestAnimationFrame(loop);
//} else if (leftScore >= 7 || rightScore >= 7) {
// gameOver();
//}
context.clearRect(0,0,canvas.width,canvas.height);
if (ball.dx < 0) {
BotMovesPaddle(leftPaddle);
}
if (ball.dx > 0) {
BotMovesPaddle(rightPaddle);
}
// move paddles by their velocity
leftPaddle.y += leftPaddle.dy;
rightPaddle.y += rightPaddle.dy;
// prevent paddles from going through walls
if (leftPaddle.y < grid) {
leftPaddle.y = grid;
}
else if (leftPaddle.y > maxPaddleY) {
leftPaddle.y = maxPaddleY;
}
if (rightPaddle.y < grid) {
rightPaddle.y = grid;
}
else if (rightPaddle.y > maxPaddleY) {
rightPaddle.y = maxPaddleY;
}
// draw paddles
context.fillStyle = 'white';
context.fillRect(leftPaddle.x, leftPaddle.y, leftPaddle.width, leftPaddle.height);
context.fillRect(rightPaddle.x, rightPaddle.y, rightPaddle.width, rightPaddle.height);
// move ball by its velocity
ball.x += ball.dx;
ball.y += ball.dy;
// prevent ball from going through walls by changing its velocity
if (ball.y < grid) {
ball.y = grid;
ball.dy *= -1;
}
else if (ball.y + grid > canvas.height - grid) {
ball.y = canvas.height - grid * 2;
ball.dy *= -1;
}
// reset ball if it goes past paddle (but only if we haven't already done so)
if ( (ball.x < 0 || ball.x > canvas.width) && !ball.resetting) {
ball.resetting = true;
if (ball.x < 0) {
rightScore++;
}
if (ball.x > canvas.width) {
leftScore++;
}
// give some time for the player to recover before launching the ball again
setTimeout(() => {
ball.resetting = false;
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
}, 400);
}
// check to see if ball collides with paddle. if they do change x velocity
if (collides(ball, leftPaddle)) {
ball.dx *= -1;
leftPaddle.dy = 0;
// move ball next to the paddle otherwise the collision will happen again
// in the next frame
ball.x = leftPaddle.x + leftPaddle.width;
}
else if (collides(ball, rightPaddle)) {
ball.dx *= -1;
rightPaddle.dy = 0;
// move ball next to the paddle otherwise the collision will happen again
// in the next frame
ball.x = rightPaddle.x - ball.width;
}
// draw score
context.font = "30px Arial";
context.fillText(leftScore, 200, 50);
context.fillText(rightScore, 560, 50);
// draw ball
context.fillRect(ball.x, ball.y, ball.width, ball.height);
// draw walls
context.fillStyle = "#f4dbd6";
context.fillRect(0, 0, canvas.width, grid);
context.fillRect(0, canvas.height - grid, canvas.width, canvas.height);
// draw dotted line down the middle
for (let i = grid; i < canvas.height - grid; i += grid * 2) {
context.fillRect(canvas.width / 2 - grid / 2, i, grid, grid);
}
}
// listen to keyboard events to move the paddles
document.addEventListener('keydown', function(e) {
// up arrow key
if (e.which === 38) {
rightPaddle.dy = -paddleSpeed;
}
// down arrow key
else if (e.which === 40) {
rightPaddle.dy = paddleSpeed;
}
// w key
if (e.which === 87) {
leftPaddle.dy = -paddleSpeed;
}
// a key
else if (e.which === 83) {
leftPaddle.dy = paddleSpeed;
}
});
// listen to keyboard events to stop the paddle if key is released
document.addEventListener('keyup', function(e) {
if (e.which === 38 || e.which === 40) {
rightPaddle.dy = 0;
}
if (e.which === 83 || e.which === 87) {
leftPaddle.dy = 0;
}
});
// start the game
requestAnimationFrame(loop);

8
pong.html
View File

@ -7,14 +7,6 @@
<link rel="stylesheet" href="css/pong.css"> <link rel="stylesheet" href="css/pong.css">
</head> </head>
<body> <body>
<canvas width="750" height="585" id="game"></canvas>
<script src="js/pong.js"></script>
<div id="gameover" hidden="true">
<h1>Game Over</h1>
</div>
<div id="restart" hidden="true">
<button class="button" type="button" onclick = "restartGame()">Restart Game</a>
</div>
</body> </body>
</html> </html>