PONG with SVG.js

Space Planner

by patelsan

HTML

<div id="pong"></div>

JavaScript

const getSizeByRatio = (area, ratioX, ratioY)=> {
    const width = Math.sqrt(area * ratioX / ratioY);
    const length = area/ width;

    return { width, length };
}

const getSizeByScale = (size, scale)=> {
	return { width: size.width * scale, length: size.length * scale  };
}

// ToDo: calculate dynamically
const maxPaperWidth = 900;
const maxPaperLength = 580;

// FLOOR
const floorSize = getSizeByRatio(15540, 4, 1);
const scale = Math.min(maxPaperWidth/floorSize.width, maxPaperLength/floorSize.length);
const scalledFloorSize = getSizeByScale(floorSize, scale);

console.log("Scale: ", scale);
console.log("Floor: ", floorSize);
console.log("Scalled Floor: ", scalledFloorSize);

// DOCKING/ STAGING
const dockingSize = getSizeByRatio(4300, 18, 1.5);
const scalledDockingSize = getSizeByScale(dockingSize, scale);

console.log("Docking: ", dockingSize);
console.log("Scalled Docking: ", scalledDockingSize);

// STORAGE
const storageSize = getSizeByRatio(6646, 11, 4);
const scalledStorageSize = getSizeByScale(storageSize, scale);

console.log("Storage: ", storageSize);
console.log("Scalled Storage: ", scalledStorageSize);


// define document width and height
var width = scalledFloorSize.width, height = scalledFloorSize.length

// create SVG document and set its size
var draw = SVG('pong').size(width, height)
draw.viewbox(0,0,scalledFloorSize.width,scalledFloorSize.length)

// draw background
var background = draw.rect(width, height).fill('#dde3e1')



//newWidth = actualWidth*scale, newHeight = actualHeight*scale

// -----------------------