diff --git a/game.html b/game.html deleted file mode 100644 index 22d00f2..0000000 --- a/game.html +++ /dev/null @@ -1,1136 +0,0 @@ - - - - - - System Design Game - - - -
-
System Design Game
-
-
-

Challenges

- -
    -
  • -
    Url Shortener
    -
    Easy
    -
    • -
  • -
    Url Shortener
    -
    Easy
    -
    • -
  • -
    Url Shortener
    -
    Medium
    -
    • -
  • -
    Something hard
    -
    Hard
    -
    • -
-
-
- - - - -
-
- - - -
- - -
-
-

Functional Requirements

-
    -
  • Something
    • -
  • Something else
    • -
-
- -
-

Non-Functional Requirements

-
    -
  • Something
    • -
  • Something else
    • -
-
- -
- - -
- - -
-
- -
-
-
-
level constraints
-
🎯 target rps: –
-
⏱️ max p95 latency: –
-
💸 max cost: –
-
🔒 availability: –
-
- -
-
simulation results
-
✅ cost: –
-
⚡ p95 latency: –
-
📈 achieved rps: –
-
🛡️ availability: –
-
-
- - - - - - - - -
-

node properties

-
- -
-
- -
-
- -
- -
-
- - -
- -
- -
- - -
This is Tab 3 content.
-
-
-
-
- - - - - diff --git a/static/app.js b/static/app.js index 3c92e43..0fef3fd 100644 --- a/static/app.js +++ b/static/app.js @@ -78,7 +78,6 @@ export class CanvasApp { const node = new ComponentNode(type, x, y, this); node.x = x; node.y = y; - this.placedComponents.push(node) if (this.placeholderText) { this.placeholderText.remove(); this.placeholderText = null; @@ -87,7 +86,7 @@ export class CanvasApp { this.runButton.addEventListener('click', () => { const designData = this.exportDesign(); - alert(JSON.stringify(designData)); + console.log(JSON.stringify(designData)); }); this.canvas.addEventListener('click', () => { @@ -218,7 +217,8 @@ export class CanvasApp { label: c.label || '', direction: c.direction, protocol: c.protocol || '', - tls: !!c.tls + tls: !!c.tls, + capacity: c.capacity || 1000 })); return { nodes, connections }; diff --git a/static/connection.js b/static/connection.js index 43f4d33..7e41fa2 100644 --- a/static/connection.js +++ b/static/connection.js @@ -4,7 +4,7 @@ export class Connection { static _activeConnection = null; static modalSetupDone = false; - constructor(startNode, endNode, label, protocol, app, tls) { + constructor(startNode, endNode, label, protocol, app, tls, capacity = 1000) { this.start = startNode; this.end = endNode; this.app = app; @@ -12,6 +12,7 @@ export class Connection { this.protocol = protocol; this.direction = "forward"; this.tls = tls; + this.capacity = capacity; this.line = createSVGElement('line', { stroke: '#ccc', 'stroke-width': 2, 'marker-end': 'url(#arrowhead-end)' }); @@ -137,6 +138,7 @@ export class Connection { Connection.labelInput = document.getElementById('connection-label'); Connection.tlsCheckbox = document.getElementById('connection-tls'); Connection.protocolInput = document.getElementById('connection-protocol'); + Connection.capacityInput = document.getElementById('connection-capacity'); Connection.saveBtn = document.getElementById('connection-save'); Connection.cancelBtn = document.getElementById('connection-cancel'); @@ -144,6 +146,7 @@ export class Connection { const label = Connection.labelInput.value.trim(); const protocol = Connection.protocolInput.value.trim(); const tls = Connection.tlsCheckbox.checked; + const capacity = parseInt(Connection.capacityInput.value.trim(), 10) || 1000; if (!label || !protocol) return; if (Connection._activeConnection) { @@ -153,12 +156,13 @@ export class Connection { conn.protocol = protocol; conn.text.textContent = label; conn.tls = tls; + conn.capacity = capacity; conn.protocolText.textContent = protocol; conn.updatePosition(); } else if (app.pendingConnection) { // Creating a new connection const { start, end } = app.pendingConnection; - const conn = new Connection(start, end, label, protocol, app, tls); + const conn = new Connection(start, end, label, protocol, app, tls, capacity); app.connections.push(conn); } @@ -197,6 +201,7 @@ export class Connection { Connection.labelInput.value = 'Read traffic'; Connection.protocolInput.value = 'HTTP'; Connection.tlsCheckbox.checked = false; + Connection.capacityInput.value = '1000'; Connection.modal.style.display = 'block'; } } @@ -208,6 +213,7 @@ export class Connection { Connection.labelInput.value = this.label; Connection.protocolInput.value = this.protocol; Connection.tlsCheckbox.checked = this.tls; + Connection.capacityInput.value = this.capacity || 1000; Connection.modal.style.display = 'block'; } diff --git a/static/game.html b/static/game.html index 7bd82b4..e4af213 100644 --- a/static/game.html +++ b/static/game.html @@ -681,6 +681,8 @@ Enable TLS (encryption) + +
diff --git a/static/node.js b/static/node.js index 9ec188d..58a22cb 100644 --- a/static/node.js +++ b/static/node.js @@ -61,7 +61,6 @@ export class ComponentNode { } initDrag() { - this.id = generateNodeId(); let offsetX, offsetY; const onMouseMove = (e) => { diff --git a/static/utils.js b/static/utils.js index 4c74f08..5a76b65 100644 --- a/static/utils.js +++ b/static/utils.js @@ -4,8 +4,9 @@ let nodeIdCounter = 1; * Generates a unique node ID like "node-1", "node-2", etc. * @returns {string} */ +let idCounter = 0; export function generateNodeId() { - return `node-${nodeIdCounter++}`; + return `node-${idCounter++}`; } /**