Skip to content

Commit 215f309

Browse files
CodedRedGITCodedRedGIT
committed
add console log to level editor
1 parent 913d157 commit 215f309

File tree

6 files changed

+160
-0
lines changed

6 files changed

+160
-0
lines changed

‎prep-log-viewer.sh

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
mkdir -p ./public/log-viewer
2+
# clear out anything already in there
3+
rm -rf ./public/log-viewer/assets
4+
rm -rf ./public/log-viewer/index.html
5+
6+
# build and copy in the log viewer
7+
cd ../dreamlab-game-log-viewer
8+
npm i && npm run build
9+
cp -r dist/assets ../dreamlab-game/public/log-viewer/assets
10+
cp dist/index.html ../dreamlab-game/public/log-viewer/index.html

‎public/log-viewer/assets/index-DoRuQnNa.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/log-viewer/assets/index-r7EtSQ0Z.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/log-viewer/index.html

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Log Viewer | Dreamlab</title>
7+
<script type="module" crossorigin src="./assets/index-r7EtSQ0Z.js"></script>
8+
<link rel="stylesheet" crossorigin href="./assets/index-DoRuQnNa.css">
9+
</head>
10+
11+
<body>
12+
<main>
13+
<section id="log-controls">
14+
<div style="float: right; color: var(--accent-primary-color)">
15+
Server logs
16+
</div>
17+
<div>
18+
<button id="toggle-grid-btn">
19+
<svg
20+
xmlns="http://www.w3.org/2000/svg"
21+
viewBox="0 0 512 512"
22+
id="grid-icon"
23+
>
24+
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
25+
<path
26+
fill="currentColor"
27+
d="M448 96V224H288V96H448zm0 192V416H288V288H448zM224 224H64V96H224V224zM64 288H224V416H64V288zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"
28+
/>
29+
</svg>
30+
</button>
31+
<button id="case-sensitive-btn">Aa</button>
32+
<input type="search" placeholder="Filter" />
33+
<button id="clear-logs-btn">
34+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
35+
<!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
36+
<path
37+
d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"
38+
/>
39+
</svg>
40+
</button>
41+
</div>
42+
<span id="status">Connecting...</span>
43+
</section>
44+
<section id="log-output"></section>
45+
</main>
46+
47+
</body>
48+
</html>

‎src/editor/components/console/console-log.tsx

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
/* eslint-disable react/iframe-missing-sandbox */
2+
import type { FC } from 'react'
3+
import { useState } from 'react'
4+
import type { EditDetails } from '../../editor'
5+
import { Card } from '../ui/card'
6+
7+
export const ConsoleLog: FC<{ readonly editDetails?: EditDetails }> = ({ editDetails }) => {
8+
const server = editDetails?.server
9+
const instance = editDetails?.instance
10+
const secret = editDetails?.secret
11+
const [isMinimized, setIsMinimized] = useState(true)
12+
13+
const iframeSrc =
14+
server && instance && secret
15+
? `/log-viewer/index.html?${new URLSearchParams({
16+
connect: `${server}api/v1/log-stream/${instance}`,
17+
secret,
18+
}).toString()}`
19+
: 'about:blank'
20+
21+
const toggleMinimize = () => {
22+
setIsMinimized(!isMinimized)
23+
}
24+
25+
return (
26+
<Card
27+
style={{
28+
display: 'flex',
29+
flexDirection: 'column',
30+
position: 'fixed',
31+
bottom: isMinimized ? '5px' : '24px',
32+
left: '50%',
33+
transform: 'translateX(-50%)',
34+
padding: '10px',
35+
backgroundColor: 'rgba(255, 255, 255, 0.9)',
36+
color: '#1a1a1a',
37+
fontSize: '14px',
38+
borderRadius: '8px',
39+
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
40+
maxWidth: isMinimized ? '150px' : '800px',
41+
maxHeight: '300px',
42+
width: '100%',
43+
overflow: 'hidden',
44+
transition: 'bottom 0.3s ease-in-out',
45+
}}
46+
>
47+
<div
48+
style={{
49+
display: 'flex',
50+
justifyContent: 'center',
51+
alignItems: 'center',
52+
width: '100%',
53+
}}
54+
>
55+
<button
56+
onClick={toggleMinimize}
57+
style={{
58+
background: 'none',
59+
border: 'none',
60+
cursor: 'pointer',
61+
fontSize: '20px',
62+
padding: '4px',
63+
}}
64+
type='button'
65+
>
66+
<span style={{ fontSize: '16px', fontWeight: '500' }}>Server Logs</span>
67+
{isMinimized ? (
68+
<svg
69+
height='20'
70+
style={{ marginLeft: '10px' }}
71+
viewBox='0 0 320 512'
72+
xmlns='http://www.w3.org/2000/svg'
73+
>
74+
<path d='M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z' />
75+
</svg>
76+
) : (
77+
<svg
78+
height='20'
79+
style={{ marginLeft: '10px' }}
80+
viewBox='0 0 320 512'
81+
xmlns='http://www.w3.org/2000/svg'
82+
>
83+
<path d='M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z' />
84+
</svg>
85+
)}
86+
</button>
87+
</div>
88+
{!isMinimized && (
89+
<iframe
90+
id='logs'
91+
src={iframeSrc}
92+
style={{ width: '100%', maxWidth: '800px', height: '260px', border: 'none' }}
93+
title='Console Logs'
94+
/>
95+
)}
96+
</Card>
97+
)
98+
}

‎src/editor/components/ui.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type { EditDetails } from '../editor'
55
import type { History } from '../entities/history'
66
import type { Navigator } from '../entities/navigator'
77
import type { Selector } from '../entities/select'
8+
import { ConsoleLog } from './console/console-log'
89
import { PaletteManager } from './palette/manager'
910
import { SceneList } from './scene/list'
1011
import { Card } from './ui/card'
@@ -30,6 +31,7 @@ export const renderUI = (
3031
selector={selector}
3132
/>
3233
<PaletteManager history={history} navigator={navigator} selector={selector} />
34+
<ConsoleLog editDetails={editDetails} />
3335
</StyleSheetManager>,
3436
)
3537

0 commit comments

Comments
 (0)