Skip to content

Commit 859982b

Browse files
authored
feat: implement engine and start drafting voxel-map editor (#18)
1 parent 66d9c70 commit 859982b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+5191
-751
lines changed

package-lock.json

Lines changed: 1722 additions & 749 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@
1414
"packages/project",
1515
"packages/server",
1616
"packages/client",
17-
"packages/fs-tree"
17+
"packages/fs-tree",
18+
"packages/editors/voxel-map",
19+
"packages/engine"
1820
],
1921
"repository": {
2022
"type": "git",
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<p align="center"><h1 align="center">
2+
Tree-View
3+
</h1>
4+
5+
<p align="center">
6+
A Three.js voxel editor
7+
</p>
8+
9+
## Getting Started
10+
11+
This package is available in the Node Package Repository and can be easily installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or [yarn](https://yarnpkg.com).
12+
13+
```bash
14+
$ npm i @jolly-pixel/editor.voxel-map
15+
# or
16+
$ yarn add @jolly-pixel/editor.voxel-map
17+
```
18+
19+
## Usage example
20+
TBC
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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.0">
7+
<title>Tree-View</title>
8+
<link rel="stylesheet" href="./public/main.css">
9+
</head>
10+
11+
<body>
12+
<canvas id="game" tabindex="-1"></canvas>
13+
<script type="module" src="./src/index.ts"></script>
14+
</body>
15+
16+
</html>
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "@jolly-pixel/editor.voxel-map",
3+
"version": "1.0.0",
4+
"type": "module",
5+
"scripts": {
6+
"prepublish": "rimraf ./dist && tsc -b",
7+
"test": "tsx --test test/**/*.test.ts",
8+
"dev": "vite",
9+
"build": "vite build",
10+
"preview": "vite preview"
11+
},
12+
"keywords": [],
13+
"files": [
14+
"dist"
15+
],
16+
"dependencies": {
17+
"@jolly-pixel/engine": "^1.0.0",
18+
"three": "^0.178.0"
19+
},
20+
"devDependencies": {
21+
"@types/three": "^0.178.0"
22+
}
23+
}
Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
html,
6+
body {
7+
height: 100%;
8+
margin: 0;
9+
overflow: hidden;
10+
}
11+
12+
body {
13+
font-family: sans-serif;
14+
font-size: 14px;
15+
display: flex;
16+
flex-flow: column;
17+
background-color: #eee;
18+
}
19+
20+
a {
21+
color: #00f;
22+
}
23+
24+
a:hover {
25+
text-decoration: none;
26+
}
27+
28+
main {
29+
position: relative;
30+
background-color: #fff;
31+
border: 1px solid #888;
32+
flex: 1;
33+
margin: 20px !important;
34+
overflow-y: auto;
35+
}
36+
37+
ol.tree {
38+
position: absolute;
39+
list-style: none;
40+
line-height: 1.5;
41+
margin: 0;
42+
padding: 0.25em 0.25em 2em 0.25em;
43+
width: 100%;
44+
min-height: 100%;
45+
}
46+
47+
ol.tree * {
48+
user-select: none;
49+
}
50+
51+
ol.tree.drop-inside:before {
52+
position: absolute;
53+
content: "";
54+
border-top: 1px solid #888;
55+
left: 0.25em;
56+
right: 0.25em;
57+
top: 0.25em;
58+
}
59+
60+
ol.tree ol {
61+
list-style: none;
62+
margin: 0;
63+
padding-left: 24px;
64+
}
65+
66+
ol.tree ol:last-of-type.drop-below {
67+
border-bottom: 1px solid #888;
68+
padding-bottom: 0;
69+
}
70+
71+
ol.tree li.item,
72+
ol.tree li.group {
73+
background-clip: border-box;
74+
height: 28px;
75+
display: flex;
76+
padding: 1px;
77+
cursor: default;
78+
display: flex;
79+
align-items: center;
80+
}
81+
82+
ol.tree li.item>.icon,
83+
ol.tree li.group>.icon,
84+
ol.tree li.item>.toggle,
85+
ol.tree li.group>.toggle {
86+
margin: -1px;
87+
width: 24px;
88+
height: 24px;
89+
}
90+
91+
ol.tree li.item span,
92+
ol.tree li.group span {
93+
align-self: center;
94+
padding: 0.25em;
95+
}
96+
97+
ol.tree li.item:hover,
98+
ol.tree li.group:hover {
99+
background-color: #eee;
100+
}
101+
102+
ol.tree li.item.drop-above,
103+
ol.tree li.group.drop-above {
104+
border-top: 1px solid #888;
105+
padding-top: 0;
106+
}
107+
108+
ol.tree li.item.drop-inside,
109+
ol.tree li.group.drop-inside {
110+
border: 1px solid #888;
111+
padding: 0;
112+
}
113+
114+
ol.tree li.item.selected,
115+
ol.tree li.group.selected {
116+
background: #beddf4;
117+
}
118+
119+
ol.tree li.item>.icon {
120+
background-image: url("./icons/item.svg");
121+
}
122+
123+
ol.tree li.item.drop-below {
124+
border-bottom: 1px solid #888;
125+
padding-bottom: 0;
126+
}
127+
128+
ol.tree li.group {
129+
color: #444;
130+
}
131+
132+
ol.tree li.group>.toggle {
133+
background-image: url("./icons/group-open.svg");
134+
cursor: pointer;
135+
}
136+
137+
ol.tree li.group.drop-below+ol {
138+
border-bottom: 1px solid #888;
139+
}
140+
141+
ol.tree li.group.drop-below+ol:empty {
142+
margin-top: -1px;
143+
pointer-events: none;
144+
}
145+
146+
ol.tree li.group.collapsed>.toggle {
147+
background-image: url("./icons/group-closed.svg");
148+
}
149+
150+
ol.tree li.group.collapsed+ol>ol,
151+
ol.tree li.group.collapsed+ol>li {
152+
display: none;
153+
}
154+
155+
canvas {
156+
flex: 1;
157+
outline: none;
158+
}
159+
160+
.stats {
161+
position: fixed;
162+
top: 0px;
163+
right: 0px;
164+
cursor: pointer;
165+
opacity: 0.9;
166+
z-index: 10000;
167+
}
182 Bytes
Loading
211 Bytes
Loading
210 Bytes
Loading
683 Bytes
Loading

0 commit comments

Comments
 (0)