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

core: better card styling and var name cleaning

Browse Source
This commit is contained in:
Trianta 2024-08-09 18:46:40 -05:00
parent 71dfedb6ee
commit 6043eb5963
3 changed files with 25 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
css/home.css
View File

@ -16,7 +16,7 @@ body {
border-bottom-right-radius: 18px; border-bottom-right-radius: 18px;
} }
.nav-item { .navItem {
margin: 6px; margin: 6px;
margin-top: 0px; margin-top: 0px;
padding: 8px; padding: 8px;
@ -37,6 +37,10 @@ body {
/*background: #1e2030;*/ /*background: #1e2030;*/
} }
.cardStats {
font-size: 18px;
}
h1 { h1 {
width: 130px; width: 130px;
text-align: center; text-align: center;
@ -121,9 +125,11 @@ a.button {
border-top-left-radius: 18px; border-top-left-radius: 18px;
border-top-right-radius: 18px; border-top-right-radius: 18px;
animation: card 3s linear infinite; animation: card 3s linear infinite;
max-width: 800px;
margin: 0px auto;
} }
.card-top { .cardTop {
background: #1e2030; background: #1e2030;
border-top-left-radius: 18px; border-top-left-radius: 18px;
border-top-right-radius: 18px; border-top-right-radius: 18px;

13
index.html
View File

@ -7,14 +7,13 @@
</head> </head>
<body> <body>
<div id="navigation" style="margin-bottom: 30px;"> <div id="navigation" style="margin-bottom: 30px;">
<a class="nav-item" href="https://www.github.com/trimutex">GitHub</a> <a class="navItem" href="https://www.github.com/trimutex">GitHub</a>
<a class="nav-item" href="https://lab.trianta.dev/Trianta">Projects</a> <a class="navItem" href="https://lab.trianta.dev/Trianta">Projects</a>
<p class="nav-item" style="text-align: right; flex-grow: 1;">Trianta</p> <p class="navItem" style="text-align: right; flex-grow: 1;">Trianta</p>
</div> </div>
<div id="main"> <div id="main">
<div class="card"> <div class="card">
<h2 class="card-top">Pong</h2> <h2 class="cardTop">Pong</h2>
<div>
<canvas width="750" height="585" id="pong"></canvas> <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"> <div id="gameover" hidden="true">
@ -23,7 +22,9 @@
<div id="restart" hidden="true"> <div id="restart" hidden="true">
<button class="button" type="button" onclick = "restartGame()">Restart Game</a> <button class="button" type="button" onclick = "restartGame()">Restart Game</a>
</div> </div>
</div> <p class="cardStats">Left Paddle Height: <span id="leftPaddle"></span></p>
<p class="cardStats">Right Paddle Height: <span id="rightPaddle"></span></p>
<a class="navItem" href="https://lab.trianta.dev/Trianta/trianta.dev/src/branch/main/js/pong.js">View Code</a>
</div> </div>
</div> </div>
</body> </body>

2
js/pong.js
View File

@ -89,9 +89,11 @@ function loop() {
if (ball.dx < 0) { if (ball.dx < 0) {
BotMovesPaddle(leftPaddle); BotMovesPaddle(leftPaddle);
document.getElementById("leftPaddle").innerHTML = leftPaddle.y;
} }
if (ball.dx > 0) { if (ball.dx > 0) {
BotMovesPaddle(rightPaddle); BotMovesPaddle(rightPaddle);
document.getElementById("rightPaddle").innerHTML = rightPaddle.y;
} }
// move paddles by their velocity // move paddles by their velocity