js: set fps to 30 and use a circle for the avatar

1 files changed, 7 insertions, 3 deletions

diff --git a/site/main.mjs b/site/main.mjs
index b1a98ac..6bd2093 100644
--- a/site/main.mjs
+++ b/site/main.mjs
@@ -75,14 +75,18 @@ function renderVars(vm) {
 
 function renderRobo(ctx, x, y) {
     ctx.fillStyle = 'rgb(200 0 0)';
-    ctx.fillRect(x, y, 50, 50);
+    ctx.beginPath();
+    ctx.arc(x, y, 25, 0, 2 * Math.PI);
+    ctx.fill();
 }
 
 function renderArena(robos) {
     const canvas = document.querySelector('#arena');
     const ctx = canvas.getContext('2d');
 
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    //ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = 'rgb(200 200 200 / 5%)';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
 
     robos.forEach(robo => {
         let heading = robo.vm.heading();
@@ -218,7 +222,7 @@ async function loaded() {
         } else {
             e.target.textContent = 'blinken';
         }
-        const frameRate = 6;
+        const frameRate = 30;
         const onTimeout = _ => {
             if (blinkenRun) {
                 tick(robo);