pong: reset counter on idle and increase idle length

Reviewed-on: Trianta/trianta.dev#12

default.css

@@ -6,6 +6,7 @@
 
 body {
     font-family: Arial, sans-serif;
+    font-weight: 800;
     color: #06CDFF;
     background: #03001C;
     line-height: 1.5;
@@ -14,20 +15,46 @@ body {
 }
 
 .inside {
-    max-width: 80rem;
+    max-width: 60rem;
     margin: 0 auto;
     padding: 2rem 1.5rem;
 }
 
-#navigation {
+nav {
     padding: 1rem;
     text-align: center;
+    width: 6rem;
+}
+
+nav ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.gap {
+    width: 4rem;
+}
+
+.content {
+    width: 48rem;
+    text-align: left;
+}
+
+@media screen and (max-width: 600px) {
+    .column {
+        width: 100%;
+    }
+    .gap {
+        visibility: hidden;
+    }
 }
 
 .trianta {
-    font-size: 3.5rem !important;
-    color: #06CDFF !important;
     border: none !important;
+    color: #06CDFF !important;
+    font-size: 2.5rem !important;
+    min-width: 12rem;
     margin: -1rem;
 }
 

index.html

@@ -11,13 +11,19 @@
             <a href="/" class="trianta">TRIANTA</a>
             <p>Function over form by design</p>
         </div>
-        <div id="navigation">
+        <div style="display: flex;">
-            <a href="https://www.github.com/trimutex">GitHub</a>
+            <nav class="column">
-            <a href="https://lab.trianta.dev/Trianta">Projects</a>
+                <ul>
-            <a href="/completed">Completed</a>
+                    <li><a href="https://www.github.com/trimutex">GitHub</a></li>
-            <a href="/current">Current</a>
+                    <li><a href="https://lab.trianta.dev/Trianta">Projects</a></li>
-            <a href="/other">Other</a>
+                    <li><a href="/completed">Completed</a></li>
-            <a href="/contact">Contact</a>
+                    <li><a href="/current">Current</a></li>
+                    <li><a href="/other">Other</a></li>
+                    <li><a href="/contact">Contact</a></li>
+                </ul>
+            </nav>
+            <div class="column gap"></div>
+            <div class="column content"></div>
         </div>
     </div>
 </body>

pages/completed/index.html

@@ -11,50 +11,57 @@
             <a href="/" class="trianta">TRIANTA</a>
             <p>Function over form by design</p>
         </div>
-        <div id="navigation">
+        <div style="display: flex;">
-            <a href="https://www.github.com/trimutex">GitHub</a>
+            <nav class="column">
-            <a href="https://lab.trianta.dev/Trianta">Projects</a>
+                <ul>
-            <a href="/completed">Completed</a>
+                    <li><a href="https://www.github.com/trimutex">GitHub</a></li>
-            <a href="/current">Current</a>
+                    <li><a href="https://lab.trianta.dev/Trianta">Projects</a></li>
-            <a href="/other">Other</a>
+                    <li><a href="/completed">Completed</a></li>
-            <a href="/contact">Contact</a>
+                    <li><a href="/current">Current</a></li>
-        </div>
+                    <li><a href="/other">Other</a></li>
-        <h2>Completed Projects</h2>
+                    <li><a href="/contact">Contact</a></li>
-        <div class="card reserve">
+                </ul>
-            <div class="canvas">
+            </nav>
-                <canvas width="750" height="585" id="pong"></canvas>
+            <div class="column gap"></div>
-                <script src="/public/pong.js"></script>
+            <div class="column content">
-                <div id="gameover" hidden="true">
+                <h2>Completed Projects</h2>
-                    <h3>Game Over</h3>      
+                <div class="card reserve">
+                    <div class="canvas">
+                        <canvas width="750" height="585" id="pong"></canvas>
+                        <script src="/public/pong.js"></script>
+                        <div id="gameover" hidden="true">
+                            <h3>Game Over</h3>      
+                        </div>
+                        <div id="restart" hidden="true">
+                            <button class="button" type="button" onclick = "restartGame()">Restart Game</a>
+                        </div>
+                    </div>
+                    <div class="stats">
+                        <p style="font-size: 22px;">Pong</p>
+                        <p>Left Paddle Height: <span id="leftPaddle"></span></p>
+                        <p>Right Paddle Height: <span id="rightPaddle"></span></p>
+                        <a href="https://lab.trianta.dev/Trianta/trianta.dev/src/branch/main/src/pong.js">View Code</a>
+                    </div>
                 </div>
-                <div id="restart" hidden="true">
+                <div class="card reserve">
-                    <button class="button" type="button" onclick = "restartGame()">Restart Game</a>
+                    <div class="canvas">
+                        <canvas width="625" height="375" id="snake"></canvas>
+                        <script src="/public/snake.js"></script>
+                    </div>
+                    <div class="stats">
+                        <p style="font-size: 22px;">Snake</p>
+                        <p>
+                            Adjust game size -- Width: 
+                            <input id="snakeWidth" type="number" min="2" max="31" value="31">
+                            Height: 
+                            <input id="snakeHeight" type="number" min="2" max="24" value="24">
+                        </p>
+                        <p>Snake Head Location: <span id="snakeHead"></span></p>
+                        <p>Food Location: <span id="snakeFood"></span></p>
+                        <a href="https://lab.trianta.dev/Trianta/trianta.dev/src/branch/main/src/snake.ts">View Code</a>
+                    </div>
                 </div>
             </div>
-            <div class="stats">
-                <p style="font-size: 22px;">Pong</p>
-                <p>Left Paddle Height: <span id="leftPaddle"></span></p>
-                <p>Right Paddle Height: <span id="rightPaddle"></span></p>
-                <a href="https://lab.trianta.dev/Trianta/trianta.dev/src/branch/main/src/pong.js">View Code</a>
-            </div>
-        </div>
-        <div class="card reserve">
-            <div class="canvas">
-                <canvas width="625" height="375" id="snake"></canvas>
-                <script src="/public/snake.js"></script>
-            </div>
-            <div class="stats">
-                <p style="font-size: 22px;">Snake</p>
-                <p>
-                    Adjust game size -- Width: 
-                    <input id="snakeWidth" type="number" min="2" max="31" value="31">
-                    Height: 
-                    <input id="snakeHeight" type="number" min="2" max="24" value="24">
-                </p>
-                <p>Snake Head Location: <span id="snakeHead"></span></p>
-                <p>Food Location: <span id="snakeFood"></span></p>
-                <a href="https://lab.trianta.dev/Trianta/trianta.dev/src/branch/main/src/snake.ts">View Code</a>
-            </div>
         </div>
     </div>
 </body>

pages/contact/index.html

@@ -11,17 +11,24 @@
             <a href="/" class="trianta">TRIANTA</a>
             <p>Function over form by design</p>
         </div>
-        <div id="navigation">
+        <div style="display: flex;">
-            <a href="https://www.github.com/trimutex">GitHub</a>
+            <nav class="column">
-            <a href="https://lab.trianta.dev/Trianta">Projects</a>
+                <ul>
-            <a href="/completed">Completed</a>
+                    <li><a href="https://www.github.com/trimutex">GitHub</a></li>
-            <a href="/current">Current</a>
+                    <li><a href="https://lab.trianta.dev/Trianta">Projects</a></li>
-            <a href="/other">Other</a>
+                    <li><a href="/completed">Completed</a></li>
-            <a href="/contact">Contact</a>
+                    <li><a href="/current">Current</a></li>
+                    <li><a href="/other">Other</a></li>
+                    <li><a href="/contact">Contact</a></li>
+                </ul>
+            </nav>
+            <div class="column gap"></div>
+            <div class="column content">
+                <h2>Contact Methods</h2>
+                <p>E-mail: gregcraw2001@gmail.com</p>
+                <p>Discord: trianta</p>
+            </div>
         </div>
-        <h2>Contact Methods</h2>
-        <p>E-mail: gregcraw2001@gmail.com</p>
-        <p>Discord: trianta</p>
     </div>
 </body>
 </html>

pages/current/index.html

@@ -11,27 +11,34 @@
             <a href="/" class="trianta">TRIANTA</a>
             <p>Function over form by design</p>
         </div>
-        <div id="navigation">
+        <div style="display: flex;">
-            <a href="https://www.github.com/trimutex">GitHub</a>
+            <nav class="column">
-            <a href="https://lab.trianta.dev/Trianta">Projects</a>
+                <ul>
-            <a href="/completed">Completed</a>
+                    <li><a href="https://www.github.com/trimutex">GitHub</a></li>
-            <a href="/current">Current</a>
+                    <li><a href="https://lab.trianta.dev/Trianta">Projects</a></li>
-            <a href="/other">Other</a>
+                    <li><a href="/completed">Completed</a></li>
-            <a href="/contact">Contact</a>
+                    <li><a href="/current">Current</a></li>
-        </div>
+                    <li><a href="/other">Other</a></li>
-        <h2>Current Personal Projects</h2>
+                    <li><a href="/contact">Contact</a></li>
-        <div class="card">
+                </ul>
-            <h3>Wrench</h3>
+            </nav>
-            <p>Description: A simple application to handle all of your Linux configuration needs.</p>
+            <div class="column gap"></div>
-            <p>Language: C++26</p>
+            <div class="column content">
-            <p>Tools: CMake</p>
+                <h2>Current Personal Projects</h2>
-            <p>Frameworks: Qt6</p>
+                <div class="card">
-            <a href="https://github.com/Trimutex/wrench">View Repository</a>
+                    <h3>Wrench</h3>
-        </div>
+                    <p>Description: A simple application to handle all of your Linux configuration needs.</p>
-        <div class="card">
+                    <p>Language: C++26</p>
-            <h3>Synopsis</h3>
+                    <p>Tools: CMake</p>
-            <p>Description: A markdown repository containing details and changes of servers I maintain.</p>
+                    <p>Frameworks: Qt6</p>
-            <a href="https://github.com/Trimutex/synopsis">View Repository</a>
+                    <a href="https://github.com/Trimutex/wrench">View Repository</a>
+                </div>
+                <div class="card">
+                    <h3>Synopsis</h3>
+                    <p>Description: A markdown repository containing details and changes of servers I maintain.</p>
+                    <a href="https://github.com/Trimutex/synopsis">View Repository</a>
+                </div>
+            </div>
         </div>
     </div>
 </body>

pages/other/index.html

@@ -11,57 +11,64 @@
             <a href="/" class="trianta">TRIANTA</a>
             <p>Function over form by design</p>
         </div>
-        <div id="navigation">
+        <div style="display: flex;">
-            <a href="https://www.github.com/trimutex">GitHub</a>
+            <nav class="column">
-            <a href="https://lab.trianta.dev/Trianta">Projects</a>
+                <ul>
-            <a href="/completed">Completed</a>
+                    <li><a href="https://www.github.com/trimutex">GitHub</a></li>
-            <a href="/current">Current</a>
+                    <li><a href="https://lab.trianta.dev/Trianta">Projects</a></li>
-            <a href="/other">Other</a>
+                    <li><a href="/completed">Completed</a></li>
-            <a href="/contact">Contact</a>
+                    <li><a href="/current">Current</a></li>
-        </div>
+                    <li><a href="/other">Other</a></li>
-        <h2>Other Projects</h2>
+                    <li><a href="/contact">Contact</a></li>
-        <div class="card">
+                </ul>
-            <h3>Hyprland</h3>
+            </nav>
-            <p>Description: An independent, highly customizable, dynamic tiling Wayland compositor that doesn't sacrifice on its looks. </p>
+            <div class="column gap"></div>
-            <a href="https://github.com/hyprwm/Hyprland">View Repository</a>
+            <div class="column content">
-            <p>Language: C++26</p>
+                <h2>Other Projects</h2>
-            <p>Tools: CMake</p>
+                <div class="card">
-            <p>and various libraries.</p>
+                    <h3>Hyprland</h3>
-            <p>Contributions (newest first)</p>
+                    <p>Description: An independent, highly customizable, dynamic tiling Wayland compositor that doesn't sacrifice on its looks. </p>
-            <a href="https://github.com/hyprwm/Hyprland/pull/8323">hyprwm/Hyprland#8323</a>
+                    <a href="https://github.com/hyprwm/Hyprland">View Repository</a>
-            <a href="https://github.com/hyprwm/Hyprland/pull/8044">hyprwm/Hyprland#8044</a>
+                    <p>Language: C++26</p>
-            <a href="https://github.com/hyprwm/Hyprland/pull/7959">hyprwm/Hyprland#7959</a>
+                    <p>Tools: CMake</p>
-            <br>
+                    <p>and various libraries.</p>
-            <a href="https://github.com/hyprwm/Hyprland/pull/7755">hyprwm/Hyprland#7755</a>
+                    <p>Contributions (newest first)</p>
-            <a href="https://github.com/hyprwm/Hyprland/pull/7683">hyprwm/Hyprland#7683</a>
+                    <a href="https://github.com/hyprwm/Hyprland/pull/8323">hyprwm/Hyprland#8323</a>
-            <a href="https://github.com/hyprwm/Hyprland/pull/7633">hyprwm/Hyprland#7633</a>
+                    <a href="https://github.com/hyprwm/Hyprland/pull/8044">hyprwm/Hyprland#8044</a>
-            <br>
+                    <a href="https://github.com/hyprwm/Hyprland/pull/7959">hyprwm/Hyprland#7959</a>
-            <a href="https://github.com/hyprwm/Hyprland/pull/7575">hyprwm/Hyprland#7575</a>
+                    <br>
-            <a href="https://github.com/hyprwm/Hyprland/pull/7458">hyprwm/Hyprland#7458</a>
+                    <a href="https://github.com/hyprwm/Hyprland/pull/7755">hyprwm/Hyprland#7755</a>
-            <a href="https://github.com/hyprwm/Hyprland/pull/6652">hyprwm/Hyprland#6652</a>
+                    <a href="https://github.com/hyprwm/Hyprland/pull/7683">hyprwm/Hyprland#7683</a>
-        </div>
+                    <a href="https://github.com/hyprwm/Hyprland/pull/7633">hyprwm/Hyprland#7633</a>
-        <div class="card">
+                    <br>
-            <h3>Proxy</h3>
+                    <a href="https://github.com/hyprwm/Hyprland/pull/7575">hyprwm/Hyprland#7575</a>
-            <p>Description: A program written in C++ to act as a proxy for another server.</p>
+                    <a href="https://github.com/hyprwm/Hyprland/pull/7458">hyprwm/Hyprland#7458</a>
-            <a href="https://lab.trianta.dev/Trianta/proxy-network">View Repository</a>
+                    <a href="https://github.com/hyprwm/Hyprland/pull/6652">hyprwm/Hyprland#6652</a>
-            <p>Language: C++11</p>
+                </div>
-            <p>Tools: CMake</p>
+                <div class="card">
-            <p>Testing Frameworks: <a href="https://github.com/ThrowTheSwitch/Unity">Unity Test (ThrowTheSwitch)</a></p>
+                    <h3>Proxy</h3>
-        </div>
+                    <p>Description: A program written in C++ to act as a proxy for another server.</p>
-        <div class="card">
+                    <a href="https://lab.trianta.dev/Trianta/proxy-network">View Repository</a>
-            <h3>Cloudcare</h3>
+                    <p>Language: C++11</p>
-            <p>Description: A sample repository that uses downloaded .bed files to train a model on DNA using PyTorch.</p>
+                    <p>Tools: CMake</p>
-            <a href="https://github.com/Trimutex/cloudcare">View Repository</a>
+                    <p>Testing Frameworks: <a href="https://github.com/ThrowTheSwitch/Unity">Unity Test (ThrowTheSwitch)</a></p>
-            <p>Languages: Python, Bash</p>
+                </div>
-            <p>Libraries: PyTorch</p>
+                <div class="card">
-            <p>Tools: Conda</p>
+                    <h3>Cloudcare</h3>
-        </div>
+                    <p>Description: A sample repository that uses downloaded .bed files to train a model on DNA using PyTorch.</p>
-        <div class="card">
+                    <a href="https://github.com/Trimutex/cloudcare">View Repository</a>
-            <h3>N-Queens</h3>
+                    <p>Languages: Python, Bash</p>
-            <p>Description: The N-Queens problem recreated in C++ which gets solved using a Genetic Algorithm.</p>
+                    <p>Libraries: PyTorch</p>
-            <a href="https://lab.trianta.dev/Trianta/n-queens">View Repository</a>
+                    <p>Tools: Conda</p>
-            <p>Language: C++11</p>
+                </div>
-            <p>Tools: CMake</p>
+                <div class="card">
+                    <h3>N-Queens</h3>
+                    <p>Description: The N-Queens problem recreated in C++ which gets solved using a Genetic Algorithm.</p>
+                    <a href="https://lab.trianta.dev/Trianta/n-queens">View Repository</a>
+                    <p>Language: C++11</p>
+                    <p>Tools: CMake</p>
+                </div>
+            </div>
         </div>
     </div>
 </body>

src/pong.ts

@@ -19,6 +19,25 @@ class Box {
     }
 }
 
+class Ball {
+    geometry: Box;
+    speed: number;
+    dx: number;
+    dy: number;
+    resetting: boolean;
+
+    constructor(_geometry: Box) {
+        // start in the middle of the game
+        this.geometry = _geometry;
+        this.speed = 5;
+        // ball velocity (start going to the top-right corner)
+        this.dx = this.speed;
+        this.dy = -this.speed;
+        // keep track of when need to reset the ball position
+        this.resetting = false;
+    }
+}
+
 class Paddle {
     geometry: Box;
     speed: number;
@@ -26,6 +45,7 @@ class Paddle {
     isLeft: boolean;
     score: number;
     dy: number;
+    idleCounter: number;
 
     constructor(_geometry: Box, _isLeft: boolean) {
         this.geometry = _geometry;
@@ -34,40 +54,12 @@ class Paddle {
         this.isBot = true;
         this.score = 0;
         this.dy = 0;
+        this.idleCounter = 0;
     }
 
     scored() {
         this.score++;
     }
-
-    input() {
-        if (!this.isBot)
-            return;
-        let ballRegion = Math.floor(g_pong.ball.geometry.y / 15);
-        let paddleRegion = Math.floor(this.geometry.y / 15);
-        if (ballRegion < paddleRegion) this.dy = -this.speed; 
-        if (ballRegion > paddleRegion) this.dy = this.speed; 
-        if (ballRegion === paddleRegion) this.dy = 0; 
-    }
-}
-
-class Ball {
-    geometry: Box;
-    speed: number;
-    dx: number;
-    dy: number;
-    resetting: boolean;
-
-    constructor() {
-        // start in the middle of the game
-        this.geometry = new Box(g_pong.width / 2, g_pong.height / 2, g_pong.grid, g_pong.grid);
-        this.speed = 5;
-        // ball velocity (start going to the top-right corner)
-        this.dx = this.speed;
-        this.dy = -this.speed;
-        // keep track of when need to reset the ball position
-        this.resetting = false;
-    }
 }
 
 class PongCore {
@@ -91,13 +83,13 @@ class PongCore {
         this.grid = 15; // size of grid squares
         this.paddleHeight = this.grid * 5;
         this.paddleHeightMax = this.canvas.height - this.grid - this.paddleHeight;
-        this.timeout = 32; // speed in ms
+        this.timeout = 4; // speed in ms
         this.width = this.canvas.width;
         this.height = this.canvas.height;
         this.gameover = false;
         this.paddleSpeed = 6;
-        this.ball = new Ball();
+        this.ball = new Ball(new Box(this.width / 2, this.height / 2, this.grid, this.grid));
-        this.left = new Paddle(new Box(this.width / 2, this.height / 2 - this.paddleHeight / 2, this.grid, this.paddleHeight), true);
+        this.left = new Paddle(new Box(this.grid * 2, this.height / 2 - this.paddleHeight / 2, this.grid, this.paddleHeight), true);
         this.right = new Paddle(new Box(this.width - this.grid * 3, this.height / 2 - this.paddleHeight / 2, this.grid, this.paddleHeight), false);
     }
 
@@ -121,19 +113,24 @@ class PongCore {
     // Game loop
     loop() {
         // Reset of needed
-        if (this.gameover)
+        if (g_pong.gameover)
-            this.reset();
+            g_pong.reset();
 
-        this.simulate();
+        g_pong.simulate();
 
-        this.draw();
+        g_pong.draw();
-        this.updatePageText();
+        g_pong.updatePageText();
     }
 
     // Simulate game logic
     simulate() {
-        this.left.input();
+        if (this.ball.dx < 0) {
-        this.right.input();
+            this.botInput(this.left);
+            this.botIdle(this.right);
+        } else {
+            this.botInput(this.right);
+            this.botIdle(this.left);
+        }
 
         // move paddles by their velocity
         this.left.geometry.y += this.left.dy;
@@ -245,6 +242,38 @@ class PongCore {
         document.getElementById("leftPaddle").innerHTML = this.left.geometry.y.toString();
         document.getElementById("rightPaddle").innerHTML = this.right.geometry.y.toString();
     }
+
+    // Function for bot to play as a paddle
+    botInput(player: Paddle) {
+        if (!player.isBot)
+            return;
+        let ballRegion = Math.floor(this.ball.geometry.y / 15);
+        let paddleRegion = Math.floor(player.geometry.y / 15);
+        if (ballRegion < paddleRegion) player.dy = -player.speed; 
+        if (ballRegion > paddleRegion) player.dy = player.speed; 
+        if (ballRegion === paddleRegion) player.dy = 0; 
+    }
+
+    // Randomly move the bot paddle when ball not towards it
+    botIdle(player: Paddle) {
+        player.idleCounter++;
+        if (player.idleCounter < 20)
+            return;
+        else
+            player.idleCounter = 0;
+        let direction: number = Math.floor(Math.random() * 3);
+        switch (direction) {
+            case 0:
+                player.dy = 0;
+                break;
+            case 1:
+                player.dy = -player.speed;
+                break;
+            case 2:
+                player.dy = player.speed;
+                break;
+        }
+    }
 }
 
 // listen to keyboard events to move the paddles