Skip to content

Commit c3d6266

Browse files
skim0119skim0119
committed
Add initial VR client files: Create index.html for the VR interface and modes_registry.js for character mode definitions.
1 parent 0e62806 commit c3d6266

2 files changed

Lines changed: 128 additions & 0 deletions

File tree

‎VR/client/index.html‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<title>SPARC VR Client</title>
8+
<style>
9+
html,
10+
body,
11+
canvas {
12+
margin: 0;
13+
padding: 0;
14+
width: 100%;
15+
height: 100%;
16+
overflow: hidden;
17+
}
18+
19+
#status {
20+
position: fixed;
21+
top: 12px;
22+
left: 12px;
23+
padding: 8px 12px;
24+
color: #f9f9f9;
25+
background: rgba(0, 0, 0, 0.6);
26+
font-family: Menlo, monospace;
27+
z-index: 10;
28+
border-radius: 6px;
29+
}
30+
31+
#start-btn {
32+
position: fixed;
33+
top: 52px;
34+
left: 12px;
35+
z-index: 10;
36+
padding: 8px 12px;
37+
border: 0;
38+
border-radius: 6px;
39+
background: #1c7ed6;
40+
color: white;
41+
font-family: Menlo, monospace;
42+
cursor: pointer;
43+
}
44+
45+
#join-panel,
46+
#arm-camera-panel {
47+
position: fixed;
48+
right: 12px;
49+
z-index: 10;
50+
padding: 10px;
51+
border-radius: 8px;
52+
background: rgba(0, 0, 0, 0.68);
53+
color: #f9f9f9;
54+
font-family: Menlo, monospace;
55+
display: grid;
56+
gap: 6px;
57+
min-width: 190px;
58+
}
59+
60+
#join-panel {
61+
top: 12px;
62+
}
63+
64+
#arm-camera-panel {
65+
top: 188px;
66+
display: none;
67+
}
68+
69+
#join-panel select,
70+
#join-panel button,
71+
#arm-camera-panel select {
72+
font-family: Menlo, monospace;
73+
padding: 5px 6px;
74+
border-radius: 4px;
75+
border: none;
76+
}
77+
78+
#join-panel button {
79+
background: #2f9e44;
80+
color: white;
81+
cursor: pointer;
82+
}
83+
84+
#spectate-btn {
85+
background: #6c757d;
86+
}
87+
88+
#arm-camera-btn {
89+
background: #1971c2;
90+
}
91+
92+
.panel-caption {
93+
font-size: 12px;
94+
color: #ced4da;
95+
}
96+
</style>
97+
</head>
98+
99+
<body>
100+
<div id="status">disconnected</div>
101+
<div id="join-panel">
102+
<label for="character-mode">Character</label>
103+
<select id="character-mode"></select>
104+
<button id="join-btn">Join Field</button>
105+
</div>
106+
<button id="start-btn">Enter VR</button>
107+
<script type="importmap">
108+
{
109+
"imports": {
110+
"three": "https://unpkg.com/three@0.165.0/build/three.module.js",
111+
"three/addons/": "https://unpkg.com/three@0.165.0/examples/jsm/"
112+
}
113+
}
114+
</script>
115+
<script type="module" src="./app.js"></script>
116+
</body>
117+
118+
</html>

‎VR/client/modes/modes_registry.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/**
2+
* Ordered character modes shown in the join UI. Keep in sync with server
3+
* `SUPPORTED_CHARACTER_MODES` and `characterModes` in app.js.
4+
*/
5+
export const CHARACTER_MODES_REGISTRY = Object.freeze([
6+
{ id: "demo-spline", label: "Demo-spline" },
7+
{ id: "two-cr", label: "Two CR" },
8+
{ id: "two-gcr", label: "Two GCR" },
9+
{ id: "noel-c4", label: "Noel-C4" },
10+
]);

0 commit comments

Comments
 (0)