Skip to content

Commit 6039351

Browse files
klieretklieret
committed
Enh(viewer): Use a json viewer to view metadata.json
1 parent 72a95f7 commit 6039351

2 files changed

Lines changed: 110 additions & 2 deletions

File tree

‎codeclash/viewer/static/css/style.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -583,3 +583,85 @@ summary:focus {
583583
::-webkit-scrollbar-thumb:hover {
584584
background: var(--accent-color);
585585
}
586+
587+
/* JSON Viewer Integration */
588+
.json-viewer {
589+
min-height: 200px;
590+
border-radius: 0.375rem;
591+
overflow: hidden;
592+
}
593+
594+
/* Override JSONEditor default styles to match our theme */
595+
.jsoneditor {
596+
border: none !important;
597+
border-radius: 0.375rem !important;
598+
}
599+
600+
.jsoneditor-outer {
601+
background-color: var(--bg-primary) !important;
602+
border: none !important;
603+
}
604+
605+
.jsoneditor-menu {
606+
background-color: var(--bg-tertiary) !important;
607+
border-bottom: 1px solid var(--border-color) !important;
608+
}
609+
610+
.jsoneditor-menu > button {
611+
background-color: transparent !important;
612+
color: var(--text-primary) !important;
613+
border: 1px solid var(--border-color) !important;
614+
border-radius: 0.25rem !important;
615+
margin: 0.25rem !important;
616+
}
617+
618+
.jsoneditor-menu > button:hover {
619+
background-color: var(--accent-color) !important;
620+
color: white !important;
621+
border-color: var(--accent-color) !important;
622+
}
623+
624+
.jsoneditor-tree {
625+
background-color: var(--bg-primary) !important;
626+
color: var(--text-primary) !important;
627+
}
628+
629+
/* JSON content styling */
630+
.jsoneditor-tree .jsoneditor-field,
631+
.jsoneditor-tree .jsoneditor-value {
632+
color: var(--text-primary) !important;
633+
}
634+
635+
.jsoneditor-tree .jsoneditor-string {
636+
color: var(--success-color) !important;
637+
}
638+
639+
.jsoneditor-tree .jsoneditor-number {
640+
color: var(--accent-color) !important;
641+
}
642+
643+
.jsoneditor-tree .jsoneditor-boolean {
644+
color: var(--warning-color) !important;
645+
}
646+
647+
.jsoneditor-tree .jsoneditor-null {
648+
color: var(--text-muted) !important;
649+
}
650+
651+
.jsoneditor-tree .jsoneditor-key {
652+
color: var(--text-primary) !important;
653+
font-weight: 500 !important;
654+
}
655+
656+
/* Dark mode adjustments for JSON viewer */
657+
[data-theme="dark"] .jsoneditor-tree {
658+
background-color: var(--bg-primary) !important;
659+
}
660+
661+
[data-theme="dark"] .jsoneditor-outer {
662+
background-color: var(--bg-primary) !important;
663+
}
664+
665+
[data-theme="dark"] .jsoneditor-menu {
666+
background-color: var(--bg-tertiary) !important;
667+
}

‎codeclash/viewer/templates/index.html‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>CodeClash Trajectory Viewer</title>
77
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
8+
<link href="https://unpkg.com/jsoneditor@latest/dist/jsoneditor.min.css" rel="stylesheet">
89
</head>
910
<body>
1011
<header class="header">
@@ -41,7 +42,7 @@ <h1>🎮 CodeClash Trajectory Viewer</h1>
4142
<h2>📊 Game Results</h2>
4243

4344
<div class="metadata-display">
44-
<pre><code>{{ metadata.results | tojson(indent=2) }}</code></pre>
45+
<div id="metadata-jsoneditor" class="json-viewer"></div>
4546
</div>
4647

4748
<!-- Main Log Foldout -->
@@ -65,7 +66,7 @@ <h2>🎯 Game Rounds</h2>
6566
<details class="foldout round-foldout">
6667
<summary>🏆 Round {{ round_num }} Results</summary>
6768
<div class="log-content">
68-
<pre><code>{{ round_data.results | tojson(indent=2) }}</code></pre>
69+
<div id="round-{{ round_num }}-results-jsoneditor" class="json-viewer"></div>
6970
</div>
7071
</details>
7172
{% endif %}
@@ -269,6 +270,31 @@ <h3>🤖 Player {{ trajectory.player_id }} Round {{ round_num }}</h3>
269270
</section>
270271
</main>
271272

273+
<script src="https://unpkg.com/jsoneditor@latest/dist/jsoneditor.min.js"></script>
272274
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
275+
<script>
276+
// Initialize JSON editors when page loads
277+
document.addEventListener('DOMContentLoaded', function() {
278+
// Initialize metadata JSON editor
279+
const metadataEditor = new JSONEditor(document.getElementById('metadata-jsoneditor'), {
280+
mode: 'view',
281+
modes: ['view', 'tree'],
282+
name: 'metadata'
283+
});
284+
metadataEditor.set({{ metadata.results | tojson }});
285+
286+
// Initialize round results JSON editors
287+
{% for round_data in metadata.rounds %}
288+
{% if round_data.results %}
289+
const round{{ round_data.round_num }}Editor = new JSONEditor(document.getElementById('round-{{ round_data.round_num }}-results-jsoneditor'), {
290+
mode: 'view',
291+
modes: ['view', 'tree'],
292+
name: 'round_{{ round_data.round_num }}_results'
293+
});
294+
round{{ round_data.round_num }}Editor.set({{ round_data.results | tojson }});
295+
{% endif %}
296+
{% endfor %}
297+
});
298+
</script>
273299
</body>
274300
</html>

0 commit comments

Comments
 (0)