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

Compare commits

base: trianta:v0.2.2
Branches Tags
trianta:main trianta:design trianta:recolor trianta:pong trianta:angular
trianta:v0.2.2 trianta:v0.2.1 trianta:v0.2.0 trianta:v0.1.0
..
compare: trianta:f3a5359a845fd63c47a8572a03a005edb9008f56
Branches Tags
trianta:main trianta:design trianta:recolor trianta:pong trianta:angular
trianta:v0.2.2 trianta:v0.2.1 trianta:v0.2.0 trianta:v0.1.0

10 Commits
v0.2.2 .. f3a5359a84

Author SHA1 Message Date
Trianta f3a5359a84 core: restyle catppuccin-macchiato to catppuccin-latte 2024-11-25 15:43:19 -06:00
Trianta c27b5c0ea9 core: remove background color on nav bar 2024-11-25 15:37:20 -06:00
Trianta f1346a628c core: make entire card same border radius 2024-11-25 15:34:53 -06:00
Trianta 343af77bd1 snake: make game resizable by user 2024-11-25 15:20:56 -06:00
Trianta 47fd5c7458 core: rearrange navigation and put main projects in a single row 2024-11-25 14:37:17 -06:00
trianta a754319374 Merge pull request 'core: reorganize some pieces for the future' (#10) from reorganize into main 
Reviewed-on: Trianta/trianta.dev#10
 2024-11-16 19:12:30 -06:00
Trianta 4aeed537d7 core: update package to v0.2.2 2024-11-16 19:01:52 -06:00
Trianta f725b4e922 core: propagate changes throughout files 2024-11-16 02:45:38 -06:00
Trianta 8252f38bb7 core: move home page css to root and rename 2024-11-16 02:38:15 -06:00
Trianta e4d9afdd68 pong: remove unused css file 2024-11-16 02:32:58 -06:00
7 changed files with 70 additions and 63 deletions
Expand all files Collapse all files
Dockerfile
+1 -1
View File
@@ -14,9 +14,9 @@ RUN npm run build
WORKDIR /usr/share/nginx/html WORKDIR /usr/share/nginx/html
COPY index.html . COPY index.html .
COPY default.css .
RUN mkdir -p /usr/share/nginx/html/public RUN mkdir -p /usr/share/nginx/html/public
COPY src/*.css ./public
RUN cp /app/build/* ./public RUN cp /app/build/* ./public
src/home.css → default.css
+26 -21
View File
@@ -1,19 +1,16 @@
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
font-size: 14px; font-size: 14px;
color: #cad3f5; color: #4c4f69;
line-height: 1.5; line-height: 1.5;
max-width: 1920px; max-width: 1920px;
margin-inline: auto; margin-inline: auto;
background: #24273a; background: #eff1f5;
margin: 0px auto; margin: 0px auto;
} }
#navigation { #navigation {
background: #181926;
display: flex; display: flex;
border-bottom-left-radius: 18px;
border-bottom-right-radius: 18px;
} }
.navItem { .navItem {
@@ -22,6 +19,7 @@ body {
padding: 8px; padding: 8px;
line-height: 21px; line-height: 21px;
display: inline-block; display: inline-block;
text-align: right;
} }
#top { #top {
@@ -34,7 +32,16 @@ body {
} }
#main { #main {
/*background: #1e2030;*/ margin: 0px 120px;
display: flex;
}
.canvas {
width: 780px;
height: 600px;
align-items: center;
justify-content: center;
display: flex;
} }
.cardStats { .cardStats {
@@ -94,36 +101,34 @@ a:hover, a:active {
a.button { a.button {
margin: 14px 10%; margin: 14px 10%;
padding: 4px 12px; padding: 4px 12px;
border: 1px outset #494d64; border: 1px outset #bcc0cc;
border-radius: 9px; border-radius: 9px;
color: #8aadf4; color: #1e66f5;
display: inline-block; display: inline-block;
background-color: #363a4f; background-color: #ccd0da;
text-decoration: none; text-decoration: none;
width: 80px; width: 80px;
text-align: center; text-align: center;
} }
@keyframes hover { @keyframes hover {
0% { box-shadow: 0 0 8px 4px #24273a; } 0% { box-shadow: 0 0 8px 4px #eff1f5; }
15% { box-shadow: 0 0 8px 4px #494d64; } 15% { box-shadow: 0 0 8px 4px #bcc0cc; }
50% { box-shadow: 0 0 8px 4px #b7bdf8; } 50% { box-shadow: 0 0 8px 4px #7287fd; }
85% { box-shadow: 0 0 8px 4px #494d64; } 85% { box-shadow: 0 0 8px 4px #bcc0cc; }
100% { box-shadow: 0 0 8px 4px #24273a; } 100% { box-shadow: 0 0 8px 4px #eff1f5; }
} }
@keyframes card { @keyframes card {
0% { box-shadow: 0 0 8px 4px #24273a; } 0% { box-shadow: 0 0 8px 4px #eff1f5; }
50% { box-shadow: 0 0 8px 4px #df8e1d; } 50% { box-shadow: 0 0 8px 4px #df8e1d; }
100% { box-shadow: 0 0 8px 4px #24273a; } 100% { box-shadow: 0 0 8px 4px #eff1f5; }
} }
.card { .card {
background: #363a4f; background: #ccd0da;
text-align: center; text-align: center;
border-radius: 6px; border-radius: 18px;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
animation: card 3s linear infinite; animation: card 3s linear infinite;
width: 800px; width: 800px;
height: 800px; height: 800px;
@@ -133,7 +138,7 @@ a.button {
} }
.cardTop { .cardTop {
background: #1e2030; background: #e6e9ef;
border-top-left-radius: 18px; border-top-left-radius: 18px;
border-top-right-radius: 18px; border-top-right-radius: 18px;
} }
index.html
+21 -11
View File
@@ -3,24 +3,26 @@
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<title>Trianta</title> <title>Trianta</title>
<link rel="stylesheet" href="public/home.css" /> <link rel="stylesheet" href="default.css" />
</head> </head>
<body> <body>
<div id="navigation"> <div id="navigation">
<p class="navItem" style="text-align: left; flex-grow: 1;">Trianta</p>
<a class="navItem" href="https://www.github.com/trimutex">GitHub</a> <a class="navItem" href="https://www.github.com/trimutex">GitHub</a>
<a class="navItem" href="https://lab.trianta.dev/Trianta">Projects</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>
<div id="main"> <div id="main">
<div class="card"> <div class="card">
<h2 class="cardTop">Pong</h2> <h2 class="cardTop">Pong</h2>
<canvas width="750" height="585" id="pong"></canvas> <div class="canvas">
<script src="public/pong.js"></script> <canvas width="750" height="585" id="pong"></canvas>
<div id="gameover" hidden="true"> <script src="public/pong.js"></script>
<h1>Game Over</h1> <div id="gameover" hidden="true">
</div> <h1>Game Over</h1>
<div id="restart" hidden="true"> </div>
<button class="button" type="button" onclick = "restartGame()">Restart Game</a> <div id="restart" hidden="true">
<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">Left Paddle Height: <span id="leftPaddle"></span></p>
<p class="cardStats">Right Paddle Height: <span id="rightPaddle"></span></p> <p class="cardStats">Right Paddle Height: <span id="rightPaddle"></span></p>
@@ -28,8 +30,16 @@
</div> </div>
<div class="card"> <div class="card">
<h2 class="cardTop">Snake</h2> <h2 class="cardTop">Snake</h2>
<canvas width="625" height="375" id="snake"></canvas> <div class="canvas">
<script src="public/snake.js"></script> <canvas width="625" height="375" id="snake"></canvas>
<script src="public/snake.js"></script>
</div>
<p class="cardStats">
Adjust game size -- Width:
<input class="cardStats" id="snakeWidth" type="number" min="2" max="31" value="25">
Height:
<input class="cardStats" id="snakeHeight" type="number" min="2" max="24" value="15">
</p>
<p class="cardStats">Snake Head Location: <span id="snakeHead"></span></p> <p class="cardStats">Snake Head Location: <span id="snakeHead"></span></p>
<p class="cardStats">Food Location: <span id="snakeFood"></span></p> <p class="cardStats">Food Location: <span id="snakeFood"></span></p>
<a class="navItem" href="https://lab.trianta.dev/Trianta/trianta.dev/src/branch/main/src/snake.ts">View Code</a> <a class="navItem" href="https://lab.trianta.dev/Trianta/trianta.dev/src/branch/main/src/snake.ts">View Code</a>
package-lock.json
Generated
+5 -5
View File
@@ -1,21 +1,21 @@
{ {
"name": "trianta.dev", "name": "trianta.dev",
"version": "0.1.0", "version": "0.2.2",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "trianta.dev", "name": "trianta.dev",
"version": "0.1.0", "version": "0.2.2",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"typescript": "^5.5.4" "typescript": "^5.5.4"
} }
}, },
"node_modules/typescript": { "node_modules/typescript": {
"version": "5.5.4", "version": "5.6.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
"integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==", "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
"license": "Apache-2.0", "license": "Apache-2.0",
"bin": { "bin": {
"tsc": "bin/tsc", "tsc": "bin/tsc",
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "trianta.dev", "name": "trianta.dev",
"version": "0.2.1", "version": "0.2.2",
"description": "My personal website", "description": "My personal website",
"main": "index.html", "main": "index.html",
"scripts": { "scripts": {
src/pong.css
-23
View File
@@ -1,23 +0,0 @@
html, body {
height: 100%;
margin: 0;
}
body {
background: black;
display: flex;
align-items: center;
justify-content: center;
}
.button {
background: blue;
color: white;
padding: 15px 20px;
font-size: 32px;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
cursor: pointer;
position: relative;
}
src/snake.ts
+16 -1
View File
@@ -169,6 +169,21 @@ class SnakeCore {
document.getElementById("snakeHead").innerHTML = "x: " + this.body[this.body.length - 1].x + " y: " + this.body[this.body.length - 1].y; document.getElementById("snakeHead").innerHTML = "x: " + this.body[this.body.length - 1].x + " y: " + this.body[this.body.length - 1].y;
document.getElementById("snakeFood").innerHTML = "x: " + this.food.x + " y: " + this.food.y ; document.getElementById("snakeFood").innerHTML = "x: " + this.food.x + " y: " + this.food.y ;
} }
// Update width and height from page to match game
getPageNumbers() {
let specifiedWidth = parseInt((document.getElementById("snakeWidth") as HTMLInputElement).value);
let specifiedHeight = parseInt((document.getElementById("snakeHeight") as HTMLInputElement).value);
if (this.width == specifiedWidth && this.height == specifiedHeight)
return false;
this.width = specifiedWidth;
this.height = specifiedHeight;
while (this.height > this.board.length)
this.board.push(new Array(this.width));
this.canvas.setAttribute("width", String(specifiedWidth * this.grid));
this.canvas.setAttribute("height", String(specifiedHeight * this.grid));
return true;
}
} }
class Bot { class Bot {
@@ -270,7 +285,7 @@ const g_snakebot: Bot = new Bot();
// game loop // game loop
function snakeloop() { function snakeloop() {
// Reset of needed // Reset of needed
if (g_snake.gameover) if (g_snake.gameover || g_snake.getPageNumbers())
g_snake.reset(); g_snake.reset();
// Simulate movement of snake // Simulate movement of snake