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

27
index.html
View File

@ -7,23 +7,24 @@
</head>
<body>
<div id="navigation" style="margin-bottom: 30px;">
<a class="nav-item" href="https://www.github.com/trimutex">GitHub</a>
<a class="nav-item" href="https://lab.trianta.dev/Trianta">Projects</a>
<p class="nav-item" style="text-align: right; flex-grow: 1;">Trianta</p>
<a class="navItem" href="https://www.github.com/trimutex">GitHub</a>
<a class="navItem" href="https://lab.trianta.dev/Trianta">Projects</a>
<p class="navItem" style="text-align: right; flex-grow: 1;">Trianta</p>
</div>
<div id="main">
<div class="card">
<h2 class="card-top">Pong</h2>
<div>
<canvas width="750" height="585" id="pong"></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>
<h2 class="cardTop">Pong</h2>
<canvas width="750" height="585" id="pong"></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>
<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>
</body>

4
js/pong.js
View File

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