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

working arrow tool

pull/1/head
Stephanie Gredell 7 months ago
parent
b8f48dc4a9
commit
9f348e4d82
1 changed files with 186 additions and 139 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 321
      game.html

321
game.html
Unescape View File

@ -64,9 +64,23 @@
height: 100vh; height: 100vh;
} }
#sidebar { /* === LAYOUT === */
#page-container {
display: flex;
flex-direction: column;
width: 100%;
}
#sd-header {
width: 100%; width: 100%;
background-color: #111; background: none;
padding: 12px 24px;
font-size: 24px;
font-weight: bold;
color: var(--color-text-accent);
border-bottom: 1px solid var(--color-text-dark);
}
#main-content { #main-content {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -75,14 +89,16 @@
radial-gradient(circle at 70% 80%, rgba(255, 107, 53, 0.1), transparent 50%); radial-gradient(circle at 70% 80%, rgba(255, 107, 53, 0.1), transparent 50%);
} }
/* === SIDEBAR === */
#sidebar {
width: 100%;
background-color: var(--color-bg-sidebar);
display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row;
gap: var(--component-gap);
} }
.component-icon, #arrow-tool {
padding: 10px 12px;
background-color: #1e1e1e;
border: 1px solid #444;
border-radius: 4px;
/* === COMPONENT ICONS === */ /* === COMPONENT ICONS === */
.component-icon, .component-icon,
#arrow-tool { #arrow-tool {
@ -205,11 +221,11 @@
top: 20px; top: 20px;
right: 20px; right: 20px;
width: 220px; width: 220px;
background-color: #111; background-color: var(--color-bg-sidebar);
border: 1px solid #444; border: 1px solid var(--color-border);
border-radius: 4px; border-radius: var(--radius-small);
padding: 12px; padding: 12px;
color: #eee; color: var(--color-text-white);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
display: none; display: none;
z-index: 10; z-index: 10;
@ -218,7 +234,7 @@
#node-props-panel h3 { #node-props-panel h3 {
margin-top: 0; margin-top: 0;
font-size: 15px; font-size: 15px;
color: #ccc; color: var(--color-text-primary);
} }
.prop-group { .prop-group {
@ -226,7 +242,8 @@
margin-bottom: 12px; margin-bottom: 12px;
} }
.prop-group label, .prop-group input { .prop-group label,
.prop-group input {
display: block; display: block;
width: 100%; width: 100%;
margin-top: 6px; margin-top: 6px;
@ -237,111 +254,32 @@
input[type="number"] { input[type="number"] {
padding: 6px; padding: 6px;
background-color: #222; background-color: #222;
border: 1px solid #555; border: 1px solid var(--color-border);
color: #eee; color: var(--color-text-white);
border-radius: 4px; border-radius: var(--radius-small);
font-family: 'Fira Code', monospace; font-family: var(--font-family-code);
} }
/* === BUTTONS === */
#run-button,
#node-props-panel button { #node-props-panel button {
padding: 8px; margin-top: auto;
background-color: #007acc; padding: 10px;
color: white; background-color: var(--color-button);
color: var(--color-text-white);
border: none; border: none;
border-radius: 4px; border-radius: var(--radius-small);
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
margin-top: 8px;
} }
#run-button:disabled,
#node-props-panel button:disabled { #node-props-panel button:disabled {
background-color: #555; background-color: var(--color-button-disabled);
cursor: not-allowed; cursor: not-allowed;
} }
#info-panel { /* === TABS === */
position: absolute;
top: 12px;
right: 12px;
background: #121212;
color: #ccc;
padding: 1rem;
border-radius: 8px;
font-family: monospace;
font-size: 14px;
min-width: 220px;
z-index: 10;
border: 1px solid #333;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
#constraints-panel,
#score-panel {
margin-bottom: 1rem;
}
.panel-title {
font-weight: bold;
color: #fff;
font-size: 15px;
margin-bottom: 0.5rem;
}
.panel-metric {
margin-bottom: 0.4rem;
}
.panel-metric .label {
display: inline-block;
width: 140px;
color: #888;
}
.component-icon {
position: relative;
padding: 8px;
background: #1e1e1e;
color: rgb(204, 204, 204);
border: 1px solid #444;
border-radius: 6px;
cursor: grab;
}
.component-icon .tooltip {
visibility: hidden;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
z-index: 10;
background: #333;
color: #fff;
padding: 6px 8px;
border-radius: 4px;
white-space: nowrap;
font-size: 12px;
line-height: 1.4;
margin-top: 4px;
transition: opacity 0.2s;
}
.component-icon:hover .tooltip {
visibility: visible;
opacity: 1;
z-index:1000;
}
.component-icon.dragging .tooltip {
display: none;
}
#challenge-container {
width: 15%;
box-sizing: border-box;
margin-left: 16px;
margin-top: 24px;
}
.tabs { .tabs {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -356,14 +294,14 @@
.tab-labels label { .tab-labels label {
padding: 10px 20px; padding: 10px 20px;
background: #161b22; background: var(--color-bg-body);
margin-right: 4px; margin-right: 4px;
margin-bottom: 20px; margin-bottom: 20px;
border-radius: 4px; border-radius: var(--radius-small);
} }
.tab-content { .tab-content {
border-top: 1px solid #30363d; border-top: 1px solid var(--color-border-panel);
padding: 20px 0 0; padding: 20px 0 0;
display: none; display: none;
height: 100%; height: 100%;
@ -376,9 +314,9 @@
#tab1:checked ~ .tabs .tab-labels label[for="tab1"], #tab1:checked ~ .tabs .tab-labels label[for="tab1"],
#tab2:checked ~ .tabs .tab-labels label[for="tab2"], #tab2:checked ~ .tabs .tab-labels label[for="tab2"],
#tab3:checked ~ .tabs .tab-labels label[for="tab3"] { #tab3:checked ~ .tabs .tab-labels label[for="tab3"] {
background: #1a3d2a; background: var(--color-bg-tab-active);
font-weight: bold; font-weight: bold;
color: #00ff88; color: var(--color-text-accent);
} }
#tab1:checked ~ .tabs #content1, #tab1:checked ~ .tabs #content1,
@ -389,34 +327,118 @@
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
#sd-header {
width: 100%; /* === CHALLENGE PANEL === */
background: none; #challenge-container {
padding: 12px 24px; width: 15%;
font-size: 24px; background: var(--color-bg-dark);
margin: 12px 12px;
border: 2px solid var(--color-border-panel);
border-radius: var(--radius-large);
padding: 0 12px;
}
.challenge-list {
list-style: none;
margin: 0;
padding: 0;
}
.challenge-name {
font-weight: 500;
margin-bottom: 5px;
}
.challenge-item {
padding: 10px;
margin: 5px 0;
background: #21262d;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
border-left: 3px solid transparent;
list-style: none;
}
.challenge-difficulty {
font-size: 0.8rem;
color: #0b949e;
}
.challenge-difficulty.easy {
color: #3fb950;
}
.challenge-difficulty.medium {
color: #d29922;
}
.challenge-difficulty.hard {
color: #f85149
}
.challenge-item:hover {
background: #30363d;
}
.challenge-item.active {
background: #1a3d2a;
border-left-color: #00ff88;
}
/* === PANEL METRICS === */
.panel-title {
font-weight: bold; font-weight: bold;
color: #00ff88; color: var(--color-text-white);
border-bottom: 1px solid #333; font-size: 15px;
margin-bottom: 0.5rem;
} }
#page-container { .panel-metric {
display: flex; margin-bottom: 0.4rem;
flex-direction: column;
width: 100%;
} }
#main-content {
display: flex; .panel-metric .label {
flex-direction: row; display: inline-block;
height: 100%; width: 140px;
background: radial-gradient(circle at 30% 50%, rgba(0, 255, 136, 0.1) 0%, transparent 50%), color: var(--color-text-muted);
radial-gradient(circle at 70% 80%, rgba(255, 107, 53, 0.1) 0%, transparent 50%)
} }
#challenge-container { .sidebar-title {
background: #121212; color: #8b949e;
margin: 12px 24px; font-size: 14px;
border: 2px solid #30363d; text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 15px;
padding-bottom: 8px;
padding-left: 8px;
border-bottom: 1px solid #303638;
}
.requirements-section {
background: #161b22;
border: 1px solid #30363d;
border-radius: 8px; border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
}
.requirements-list {
margin: 0;
padding: 0;
list-style: none;
}
.requirement-item {
position: relative;
padding: 8px 0 0 25px;
margin: 0;
border-bottom: 1px solid #30363d;;
}
.requirement-item:before {
content: "✓";
color: #00ff88;
position: absolute;
left: 0;
} }
</style> </style>
</head> </head>
@ -467,6 +489,7 @@
<li class="requirement-item">Something else</li> <li class="requirement-item">Something else</li>
</ul> </ul>
</div> </div>
</div>
<!-- Design--> <!-- Design-->
<div id="content2" class="tab-content"> <div id="content2" class="tab-content">
@ -561,7 +584,7 @@
<svg id="canvas"> <svg id="canvas">
<defs> <defs>
<marker id="arrowhead" markerwidth="10" markerheight="7" refx="10" refy="3.5" orient="auto"> <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" /> <polygon points="0 0, 10 3.5, 0 7" fill="#ccc" />
</marker> </marker>
</defs> </defs>
</svg> </svg>
@ -737,6 +760,30 @@
this.app.selectedNode = null; this.app.selectedNode = null;
} }
} }
getConnectionPointToward(otherNode) {
const bbox = this.group.getBBox();
const ctm = this.group.getCTM();
const centerX = ctm.e + bbox.x + bbox.width / 2;
const centerY = ctm.f + bbox.y + bbox.height / 2;
const otherCenter = otherNode.getCenter();
let edgeX = centerX;
let edgeY = centerY;
const dx = otherCenter.x - centerX;
const dy = otherCenter.y - centerY;
if (Math.abs(dx) > Math.abs(dy)) {
edgeX += dx > 0 ? bbox.width / 2 : -bbox.width / 2;
} else {
edgeY += dy > 0 ? bbox.height / 2 : -bbox.height / 2;
}
return { x: edgeX, y: edgeY };
}
} }
class Connection { class Connection {
@ -745,10 +792,10 @@
this.end = endNode; this.end = endNode;
this.app = app; this.app = app;
this.line = createSVGElement('line', { this.line = createSVGElement('line', {
stroke: '#333', 'stroke-width': 2, 'marker-end': 'url(#arrowhead)' stroke: '#ccc', 'stroke-width': 2, 'marker-end': 'url(#arrowhead)'
}); });
this.text = createSVGElement('text', { this.text = createSVGElement('text', {
'text-anchor': 'middle', 'font-size': 12, fill: '#333' 'text-anchor': 'middle', 'font-size': 12, fill: '#ccc'
}); });
this.text.textContent = label; this.text.textContent = label;
app.canvas.appendChild(this.line); app.canvas.appendChild(this.line);
@ -764,8 +811,8 @@
} }
updatePosition() { updatePosition() {
const s = this.start.getCenter(); const s = this.start.getConnectionPointToward(this.end);
const e = this.end.getCenter(); const e = this.end.getConnectionPointToward(this.start);
this.line.setAttribute('x1', s.x); this.line.setAttribute('x1', s.x);
this.line.setAttribute('y1', s.y); this.line.setAttribute('y1', s.y);
this.line.setAttribute('x2', e.x); this.line.setAttribute('x2', e.x);

Write Preview
Loading…
Cancel
Save