core: restyle catppuccin-macchiato to catppuccin-latte

core: remove background color on nav bar
core: make entire card same border radius
2024-11-25 15:43:19 -06:00 · 2024-11-25 15:37:20 -06:00 · 2024-11-25 15:34:53 -06:00 · 2024-11-25 15:20:56 -06:00 · 2024-11-25 14:37:17 -06:00 · 2024-11-16 19:12:30 -06:00
7 changed files with 86 additions and 75 deletions
@@ -1,6 +1,6 @@
 FROM nginx:latest

-RUN apt-get update && apt-get install -y nodejs npm
+RUN apt-get update && apt-get install -y nodejs npm netcat-openbsd

 WORKDIR /app

@@ -14,10 +14,12 @@ RUN npm run build

 WORKDIR /usr/share/nginx/html
 COPY index.html .
+COPY default.css .

 RUN mkdir -p /usr/share/nginx/html/public
-COPY src/*.css ./public

 RUN cp /app/build/* ./public

+HEALTHCHECK CMD nc -z 127.0.0.1 80
+
 EXPOSE 80
@@ -1,19 +1,16 @@
 body {
    font-family: Arial, sans-serif;
    font-size: 14px;
-    color: #cad3f5;
+    color: #4c4f69;
    line-height: 1.5;
    max-width: 1920px;
    margin-inline: auto;
-    background: #24273a;
+    background: #eff1f5;
    margin: 0px auto;
 }

 #navigation {
-    background: #181926;
    display: flex;
-    border-bottom-left-radius: 18px;
-    border-bottom-right-radius: 18px;
 }

 .navItem {
@@ -22,6 +19,7 @@ body {
    padding: 8px;
    line-height: 21px;
    display: inline-block;
+    text-align: right;
 }

 #top {
@@ -34,7 +32,16 @@ body {
 }

 #main {
-    /*background: #1e2030;*/
+    margin: 0px 120px;
+    display: flex;
+}
+
+.canvas {
+    width: 780px;
+    height: 600px;
+    align-items: center;
+    justify-content: center;
+    display: flex;
 }

 .cardStats {
@@ -94,36 +101,34 @@ a:hover, a:active {
 a.button {
    margin: 14px 10%;
    padding: 4px 12px;
-    border: 1px outset #494d64;
+    border: 1px outset #bcc0cc;
    border-radius: 9px;
-    color: #8aadf4;
+    color: #1e66f5;
    display: inline-block;
-    background-color: #363a4f;
+    background-color: #ccd0da;
    text-decoration: none;
    width: 80px;
    text-align: center;
 }

@keyframes hover {
-    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; }
+    0% { box-shadow: 0 0 8px 4px #eff1f5; }
+    15% { box-shadow: 0 0 8px 4px #bcc0cc; }
+    50% { box-shadow: 0 0 8px 4px #7287fd; }
+    85% { box-shadow: 0 0 8px 4px #bcc0cc; }
+    100% { box-shadow: 0 0 8px 4px #eff1f5; }
 }

@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; }
-    100% { box-shadow: 0 0 8px 4px #24273a; }
+    100% { box-shadow: 0 0 8px 4px #eff1f5; }
 }

 .card {
-    background: #363a4f;
+    background: #ccd0da;
    text-align: center;
-    border-radius: 6px;
-    border-top-left-radius: 18px;
-    border-top-right-radius: 18px;
+    border-radius: 18px;
    animation: card 3s linear infinite;
    width: 800px;
    height: 800px;
@@ -133,7 +138,7 @@ a.button {
 }

 .cardTop {
-    background: #1e2030;
+    background: #e6e9ef;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
 }
@@ -3,17 +3,18 @@
 <head>
  <meta charset="utf-8"/>
  <title>Trianta</title>
-  <link rel="stylesheet" href="public/home.css" />
+  <link rel="stylesheet" href="default.css" />
 </head>
 <body>
    <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://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="cardTop">Pong</h2>
+            <div class="canvas">
                <canvas width="750" height="585" id="pong"></canvas>
                <script src="public/pong.js"></script>
                <div id="gameover" hidden="true">
@@ -22,15 +23,25 @@
                <div id="restart" hidden="true">
                    <button class="button" type="button" onclick = "restartGame()">Restart Game</a>
                </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/src/pong.js">View Code</a>
        </div>
        <div class="card">
            <h2 class="cardTop">Snake</h2>
+            <div class="canvas">
                <canvas width="625" height="375" id="snake"></canvas>
                <script src="public/snake.js"></script>
-            <p class="cardStats">Bottom Text<span></span></p>
+            </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">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>
        </div>
    </div>
@@ -1,21 +1,21 @@
 {
  "name": "trianta.dev",
-  "version": "0.1.0",
+  "version": "0.2.2",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "trianta.dev",
-      "version": "0.1.0",
+      "version": "0.2.2",
      "license": "MIT",
      "dependencies": {
        "typescript": "^5.5.4"
      }
    },
    "node_modules/typescript": {
-      "version": "5.5.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
-      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
+      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
      "license": "Apache-2.0",
      "bin": {
        "tsc": "bin/tsc",
@@ -1,6 +1,6 @@
 {
  "name": "trianta.dev",
-  "version": "0.1.0",
+  "version": "0.2.2",
  "description": "My personal website",
  "main": "index.html",
  "scripts": {
@@ -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;
-}
-
@@ -55,21 +55,22 @@ class SnakeCore {
    height: number;
    board: number[][];
    body: Point[];
+    food: Point;
    gameover: boolean;
    foodAte: boolean;

    constructor() {
-        // TODO: Add CSS stuff for page
        this.canvas = document.getElementById('snake') as HTMLCanvasElement;
        this.context = this.canvas.getContext('2d') as CanvasRenderingContext2D;
        this.grid = 25; // size of grid squares
-        this.timeout = 100; // speed in ms
+        this.timeout = 32; // speed in ms
        this.width = 25;
        this.height = 15;
        this.board = [];
        for (let i = 0; i < this.height; i++)
            this.board.push(new Array(this.width));
        this.body = [];
+        this.food = new Point();
        this.gameover = false;
        this.foodAte = true;
        this.body.push(new Point(12, 8));
@@ -112,6 +113,7 @@ class SnakeCore {
            if (isBitSet(this.board[tmp.y][tmp.x], BoardState.SNAKE))
                continue;
            this.board[tmp.y][tmp.x] = bitSet(this.board[tmp.y][tmp.x], BoardState.FOOD);
+            this.food.copy(tmp);
            return;
        }
    }
@@ -161,6 +163,27 @@ class SnakeCore {
            }
        }
    }
+
+    // Update text on page to match game
+    updatePageText() {
+        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 ;
+    }
+
+    // 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 {
@@ -204,7 +227,6 @@ class Bot {
        }
    }
    
-    // TODO: Fix trim function
    trim() {
        let reachedSnake = false;
        this.path.push(this.pathUntrimmed.pop() as Point); // Push food location
@@ -231,13 +253,6 @@ class Bot {
        }
    }

-    /*
-        values:
-        0 = left
-        1 = up
-        2 = right
-        4 = down
-    */
    nextMove() {
        // Get new path to food
        if (this.path.length === 0)
@@ -270,7 +285,7 @@ const g_snakebot: Bot = new Bot();
 // game loop
 function snakeloop() {
    // Reset of needed
-    if (g_snake.gameover)
+    if (g_snake.gameover || g_snake.getPageNumbers())
        g_snake.reset();

    // Simulate movement of snake
@@ -280,6 +295,7 @@ function snakeloop() {
    g_snake.foodRegen();

    g_snake.draw();
+    g_snake.updatePageText();
 }

 // start the game
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
Trianta	90c868d9e9	docker: add healthcheck	2024-11-09 04:37:30 -06:00
Trianta	452c35c1b0	snake: slightly increase speed	2024-11-09 03:18:42 -06:00
Trianta	9dea6014fe	snake: remove dealt with comments	2024-11-09 02:57:12 -06:00
Trianta	e37d737d3a	snake: decrease speed again	2024-11-09 02:50:24 -06:00
Trianta	65c7b930e3	meta: update package.json	2024-11-09 02:38:08 -06:00
Trianta	082176d75e	snake: revert speed back	2024-11-09 02:32:14 -06:00
Trianta	18673c95c4	snake: decrease speed slightly more	2024-11-09 02:25:16 -06:00
Trianta	cb52bd1561	snake: slightly decrease game speed	2024-11-09 02:09:06 -06:00
trianta	0c196e690f	Merge pull request 'snake: add some misc tweaks to game and page' (#8 ) from snake into main Reviewed-on: Trianta/trianta.dev#8	2024-11-09 01:42:25 -06:00
Trianta	532d8a480c	snake: decrease timeout to make it faster	2024-11-09 01:39:46 -06:00
Trianta	92cfd954c1	snake: display information about game in stats	2024-11-09 01:39:16 -06:00