Merge pull request #134 from mind-ar/feat-canvas-size

tamaño automatico de canvas
uqbar-project · Mar 20, 2024 · cbdfda2 · cbdfda2
2 parents b067e56 + cc0f18d
commit cbdfda2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 11 deletions.
diff --git a/public/game/index.html b/public/game/index.html
@@ -11,6 +11,15 @@
       type="text/javascript"
       src="./sketch.js"
     ></script>
+    <style>
+        main {
+            display: flex;
+            height: calc(100vh - 20px);
+        }
+        .p5Canvas {
+            margin: auto;
+        }
+    </style>
   </head>
 
   <body>
@@ -20,7 +29,7 @@
     <script type="module">
       import { io } from "https://cdn.socket.io/4.4.1/socket.io.esm.min.js";
 
-      socket = io("http://localhost:3000");
+      socket = io();
       socket.on("connect", function () {
         console.log("conectado!");
       });

diff --git a/public/game/sketch.js b/public/game/sketch.js
@@ -1,7 +1,8 @@
 var wko
 var backgroundImage
 var messageError
-var widthGame = 0
+var gameWidth = 0
+var gameHeight = 0
 const sizeFactor = 50
 var cellPixelSize
 var images = new Array()
@@ -13,7 +14,9 @@ function preload() {
   wko = loadImage("./wko.png")
   defaultBackground = loadImage("./background.jpg")
   socket.on("sizeCanvasInic", (size) => {
-    widthGame = size[0]
+      gameWidth = size[0]
+      gameHeight = size[1]
+      resizeCanvas(gameWidth, gameHeight)
   })
   socket.on("cellPixelSize", (size) => {
     cellPixelSize = size
@@ -36,10 +39,6 @@ function draw() {
   checkError()
 }
 
-function windowResized() {
-  resizeCanvas(windowWidth - 20, windowHeight - 20)
-}
-
 function checkError() {
   socket.on("errorDetected", (errorM) => {
     messageError = errorM
@@ -84,9 +83,8 @@ function loadVisuals() {
 function drawVisuals() {
   if (visuals) {
     for (i = 0 ; i < visuals.length ; i++) {
-      var positionX =
-        visuals[i].position.x * cellPixelSize * (windowWidth / widthGame)
-      var y = windowHeight - 20 - visuals[i].position.y * cellPixelSize
+      var positionX = visuals[i].position.x * cellPixelSize
+      var y = gameHeight - visuals[i].position.y * cellPixelSize
       var img = images.find((img) => img.name == visuals[i].image)
       var positionY = img ? y - img.url.height : y - wko.height
       if (img) image(img.url, positionX, positionY)
@@ -170,7 +168,7 @@ function messageXPosition(message) {
 }
 
 function xPositionIsOutOfCanvas(xPosition, width) {
-  return xPosition + width > windowWidth
+  return xPosition + width > gameWidth
 }
 
 function yPositionIsOutOfCanvas(yPosition) {