codegirl007
/
system-design-game
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

more styling of game

pull/1/head
Stephanie Gredell 7 months ago
parent
e45bc45ea5
commit
bbe6ac61a4
1 changed files with 149 additions and 112 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 261
      game.html

261
game.html
Unescape View File

@ -11,7 +11,6 @@ @@ -11,7 +11,6 @@
body {
margin: 0;
height: 100vh;
font-family: 'JetBrains Mono', monospace;
background-color: #161b22;
color: #ccc;
@ -80,7 +79,7 @@ @@ -80,7 +79,7 @@
}
#canvas {
width: 100%;
height: 100%;
height: 90%;
background: #121212;
border: 2px dashed #30363d;
border-radius: 8px;
@ -300,144 +299,182 @@ @@ -300,144 +299,182 @@
height: 100%;
overflow:hidden;
}
#sd-header {
width: 100%;
background: none;
padding: 12px 24px;
font-size: 24px;
font-weight: bold;
color: #00ff88;
border-bottom: 1px solid #333;
}
#page-container {
display: flex;
flex-direction: column;
width: 100%;
}
#main-content {
display: flex;
flex-direction: row;
height: 100%;
background: radial-gradient(circle at 30% 50%, rgba(0, 255, 136, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(255, 107, 53, 0.1) 0%, transparent 50%)
}
#challenge-container {
background: #121212;
margin: 12px 24px;
border: 2px solid #30363d;
border-radius: 8px;
}
</style>
</head>
<body>
<div id="challenge-container">
Challenges
</div>
<div id="canvas-wrapper">
<input type="radio" id="tab1" name="tab" checked>
<input type="radio" id="tab2" name="tab">
<input type="radio" id="tab3" name="tab">
<div class="tabs">
<div class="tab-labels">
<label for="tab1">Requirements</label>
<label for="tab2">Design</label>
<label for="tab3">Metrics</label>
</div>
<!-- Requirements -->
<div id="content1" class="tab-content">This is Tab 1 content.</div>
<!-- Design-->
<div id="content2" class="tab-content">
<div id="sidebar">
<div class="component-icon" draggable="true" data-type="client">
user
<span class="tooltip">simulates user traffic</span>
</div>
<div id="page-container">
<div id="sd-header">System Design Game</div>
<div id="main-content">
<div id="challenge-container">
Challenges
</div>
<div id="canvas-wrapper">
<input type="radio" id="tab1" name="tab" checked>
<input type="radio" id="tab2" name="tab">
<input type="radio" id="tab3" name="tab">
<div class="tabs">
<div class="tab-labels">
<label for="tab1">Requirements</label>
<label for="tab2">Design</label>
<label for="tab3">Metrics</label>
</div>
<div class="component-icon" draggable="true" data-type="loadbalancer">
load balancer
<span class="tooltip">cost: $5/mo<br>distributes traffic evenly<br>latency: 5 ms</span>
</div>
<!-- Requirements -->
<div id="content1" class="tab-content">This is Tab 1 content.</div>
<div class="component-icon" draggable="true" data-type="webserversmall">
web server (small)
<span class="tooltip">cost: $10/mo<br>capacity: 100 rps<br>base latency: 50 ms</span>
</div>
<div class="component-icon" draggable="true" data-type="webservermedium">
web server (medium)
<span class="tooltip">cost: $20/mo<br>capacity: 200 rps<br>base latency: 40 ms</span>
</div>
<!-- Design-->
<div id="content2" class="tab-content">
<div id="sidebar">
<div class="component-icon" draggable="true" data-type="user">
user
<span class="tooltip">simulates user traffic</span>
</div>
<div class="component-icon" draggable="true" data-type="database">
database
<span class="tooltip">cost: $20/mo<br>read capacity: 150 rps<br>base latency: 80 ms<br>supports replication</span>
</div>
<div class="component-icon" draggable="true" data-type="loadbalancer">
load balancer
<span class="tooltip">cost: $5/mo<br>distributes traffic evenly<br>latency: 5 ms</span>
</div>
<div class="component-icon" draggable="true" data-type="cachestandard">
cache (standard)
<span class="tooltip">cost: $10/mo<br>capacity: 100 rps<br>latency: 5 ms<br>80% hit rate with 1hr ttl</span>
</div>
<div class="component-icon" draggable="true" data-type="webserver (small)">
web server (small)
<span class="tooltip">cost: $10/mo<br>capacity: 100 rps<br>base latency: 50 ms</span>
</div>
<div class="component-icon" draggable="true" data-type="cachelarge">
cache (large)
<span class="tooltip">cost: $20/mo<br>capacity: 200 rps<br>latency: 5 ms<br>higher hit rate for large datasets</span>
</div>
<div class="component-icon" draggable="true" data-type="webserver (medium)">
web server (medium)
<span class="tooltip">cost: $20/mo<br>capacity: 200 rps<br>base latency: 40 ms</span>
</div>
<div class="component-icon" draggable="true" data-type="messagequeue">
message queue
<span class="tooltip">cost: $15/mo<br>decouples components<br>useful for batching writes</span>
</div>
<div class="component-icon" draggable="true" data-type="database">
database
<span class="tooltip">cost: $20/mo<br>read capacity: 150 rps<br>base latency: 80 ms<br>supports replication</span>
</div>
<div class="component-icon" draggable="true" data-type="cdn">
cdn/edge cache
<span class="tooltip">cost: $0.03/gb<br>improves global latency<br>caches static content</span>
</div>
<div class="component-icon" draggable="true" data-type="cachestandard">
cache (standard)
<span class="tooltip">cost: $10/mo<br>capacity: 100 rps<br>latency: 5 ms<br>80% hit rate with 1hr ttl</span>
</div>
<div class="component-icon" draggable="true" data-type="microservice">
microservice node
<span class="tooltip">cost: $10/mo<br>stateless container<br>use for modular logic</span>
</div>
<div class="component-icon" draggable="true" data-type="cachelarge">
cache (large)
<span class="tooltip">cost: $20/mo<br>capacity: 200 rps<br>latency: 5 ms<br>higher hit rate for large datasets</span>
</div>
<div class="component-icon" draggable="true" data-type="datapipeline">
data pipeline
<span class="tooltip">cost: $25/mo<br>stream or batch processing<br>used for analytics / etl</span>
</div>
<div class="component-icon" draggable="true" data-type="messagequeue">
message queue
<span class="tooltip">cost: $15/mo<br>decouples components<br>useful for batching writes</span>
</div>
<div class="component-icon" draggable="true" data-type="monitoring">
monitoring/alerting
<span class="tooltip">cost: $5/mo<br>health checks + logs<br>alerts on failures</span>
</div>
<div class="component-icon" draggable="true" data-type="cdn">
cdn/edge cache
<span class="tooltip">cost: $0.03/gb<br>improves global latency<br>caches static content</span>
</div>
<div class="component-icon" draggable="true" data-type="thirdparty">
third-party service
<span class="tooltip">external apis<br>latency + cost vary<br>examples: payment, email, search</span>
</div>
<div class="component-icon" draggable="true" data-type="microservice">
microservice node
<span class="tooltip">cost: $10/mo<br>stateless container<br>use for modular logic</span>
</div>
<div id="arrow-tool">arrow tool</div>
<button id="run-button" disabled>run simulation</button>
</div>
<div class="component-icon" draggable="true" data-type="datapipeline">
data pipeline
<span class="tooltip">cost: $25/mo<br>stream or batch processing<br>used for analytics / etl</span>
</div>
<div id="canvas-container">
<div id="info-panel">
<div id="constraints-panel">
<div class="panel-title">level constraints</div>
<div class="panel-metric"><span class="label">🎯 target rps:</span> <span id="constraint-rps">–</span></div>
<div class="panel-metric"><span class="label">⏱️ max p95 latency:</span> <span id="constraint-latency">–</span></div>
<div class="panel-metric"><span class="label">💸 max cost:</span> <span id="constraint-cost">–</span></div>
<div class="panel-metric"><span class="label">🔒 availability:</span> <span id="constraint-availability">–</span></div>
<div class="component-icon" draggable="true" data-type="monitoring">
monitoring/alerting
<span class="tooltip">cost: $5/mo<br>health checks + logs<br>alerts on failures</span>
</div>
<div id="score-panel">
<div class="panel-title">simulation results</div>
<div class="panel-metric"><span class="label">✅ cost:</span> <span id="score-cost">–</span></div>
<div class="panel-metric"><span class="label">⚡ p95 latency:</span> <span id="score-p95">–</span></div>
<div class="panel-metric"><span class="label">📈 achieved rps:</span> <span id="score-rps">–</span></div>
<div class="panel-metric"><span class="label">🛡️ availability:</span> <span id="score-availability">–</span></div>
<div class="component-icon" draggable="true" data-type="thirdparty">
third-party service
<span class="tooltip">external apis<br>latency + cost vary<br>examples: payment, email, search</span>
</div>
<div id="arrow-tool">arrow tool</div>
<button id="run-button" disabled>Test Design</button>
</div>
<svg id="canvas">
<defs>
<marker id="arrowhead" markerwidth="10" markerheight="7" refx="10" refy="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#333" />
</marker>
</defs>
</svg>
<div id="node-props-panel">
<h3>node properties</h3>
<div id="label-group">
<label>label:<input type="text" name="label" /></label>
<div id="canvas-container">
<div id="info-panel">
<div id="constraints-panel">
<div class="panel-title">level constraints</div>
<div class="panel-metric"><span class="label">🎯 target rps:</span> <span id="constraint-rps">–</span></div>
<div class="panel-metric"><span class="label">⏱️ max p95 latency:</span> <span id="constraint-latency">–</span></div>
<div class="panel-metric"><span class="label">💸 max cost:</span> <span id="constraint-cost">–</span></div>
<div class="panel-metric"><span class="label">🔒 availability:</span> <span id="constraint-availability">–</span></div>
</div>
<div id="score-panel">
<div class="panel-title">simulation results</div>
<div class="panel-metric"><span class="label">✅ cost:</span> <span id="score-cost">–</span></div>
<div class="panel-metric"><span class="label">⚡ p95 latency:</span> <span id="score-p95">–</span></div>
<div class="panel-metric"><span class="label">📈 achieved rps:</span> <span id="score-rps">–</span></div>
<div class="panel-metric"><span class="label">🛡️ availability:</span> <span id="score-availability">–</span></div>
</div>
</div>
<div id="db-group" class="prop-group">
<label>replication factor:<input type="number" name="replication" min="1" step="1" /></label>
<svg id="canvas">
<defs>
<marker id="arrowhead" markerwidth="10" markerheight="7" refx="10" refy="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#333" />
</marker>
</defs>
</svg>
<div id="node-props-panel">
<h3>node properties</h3>
<div id="label-group">
<label>label:<input type="text" name="label" /></label>
</div>
<div id="db-group" class="prop-group">
<label>replication factor:<input type="number" name="replication" min="1" step="1" /></label>
</div>
<div id="cache-group" class="prop-group">
<label>cache ttl (secs):<input type="number" name="cachettl" min="0" step="60" /></label>
</div>
<button id="node-props-save" disabled>save</button>
</div>
<div id="cache-group" class="prop-group">
<label>cache ttl (secs):<input type="number" name="cachettl" min="0" step="60" /></label>
<div id="bottom-panel">
Hi
</div>
<button id="node-props-save" disabled>save</button>
</div>
</div>
<!-- Metrics-->
<div id="content3" class="tab-content">This is Tab 3 content.</div>
</div>
</div>
<!-- Metrics-->
<div id="content3" class="tab-content">This is Tab 3 content.</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save