kaplay-ui 0.20.1 β 0.20.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -205
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,245 +1,79 @@
|
|
|
1
|
-
|
|
2
|
-
<br>_π§ This package is a work in progress! π§_
|
|
3
|
-
_Expect breaking changes and incomplete features._
|
|
1
|
+
# KAPLAY UI
|
|
4
2
|
|
|
5
|
-
|
|
3
|
+
_A simple and customizable UI plugin library for building interfaces in https://kaplayjs.com/._
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
Kaplay UI provides a gameβoriented **UI plugin** designed specifically for KAPLAY.
|
|
8
6
|
|
|
9
|
-
|
|
7
|
+
It helps you build buttons, menus, controls, HUD elements, input fields, and moreβwithout reinventing the wheel.
|
|
10
8
|
|
|
11
|
-
|
|
9
|
+
> β οΈ **Note**
|
|
10
|
+
> The currently published stable version (`0.20.1`) is being replaced by a complete redesign.
|
|
11
|
+
> A new **v1** version is under active development and can be installed in prerelease form (see below).
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
- [Usage](#usage)
|
|
15
|
-
- [License](#license)
|
|
13
|
+
---
|
|
16
14
|
|
|
17
|
-
## Installation
|
|
15
|
+
## π¦ Installation
|
|
18
16
|
|
|
19
|
-
|
|
17
|
+
### Stable release
|
|
20
18
|
|
|
21
19
|
```bash
|
|
22
20
|
npm install kaplay-ui
|
|
23
21
|
```
|
|
24
22
|
|
|
25
|
-
|
|
23
|
+
### Prerelease (new v1 work)
|
|
26
24
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
All inputs are imported from the <code>/inputs</code> folder.
|
|
30
|
-
|
|
31
|
-
```javascript
|
|
32
|
-
import {} from "kaplay-ui/inputs";
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
#### Checkbox
|
|
36
|
-
|
|
37
|
-
To make a checkbox, one must use the exported <code>makeCheckbox()</code> function.
|
|
38
|
-
|
|
39
|
-
##### Example
|
|
40
|
-
|
|
41
|
-
An example usage of a checkbox.
|
|
42
|
-
|
|
43
|
-
```javascript
|
|
44
|
-
import kaplay from "kaplay";
|
|
45
|
-
import "kaplay/global";
|
|
46
|
-
|
|
47
|
-
import { makeCheckbox } from "kaplay-ui/inputs";
|
|
48
|
-
|
|
49
|
-
kaplay();
|
|
50
|
-
|
|
51
|
-
const checkBox = makeCheckbox();
|
|
52
|
-
|
|
53
|
-
add(checkBox);
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
##### State
|
|
57
|
-
|
|
58
|
-
A cehckbox has the following state:
|
|
59
|
-
|
|
60
|
-
| state | Type | Default | State change by |
|
|
61
|
-
| --------- | --------- | ------- | ----------------- |
|
|
62
|
-
| `checked` | `boolean` | false | Click on checkbox |
|
|
63
|
-
|
|
64
|
-
##### Parameters
|
|
65
|
-
|
|
66
|
-
A checkbox can take the following parameters:
|
|
67
|
-
|
|
68
|
-
| Parameter | Type | Default | Required | Description |
|
|
69
|
-
| --------- | -------- | ------- | -------- | ------------------- |
|
|
70
|
-
| `x` | `number` | 0 | β No | Checkbox x position |
|
|
71
|
-
| `y` | `number` | 0 | β No | Checkbox x position |
|
|
72
|
-
| `width` | `number` | 25 | β No | Checkbox width |
|
|
73
|
-
| `height` | `number` | 25 | β No | Checkbox height |
|
|
74
|
-
|
|
75
|
-
<br>
|
|
76
|
-
|
|
77
|
-
#### Switch
|
|
78
|
-
|
|
79
|
-
To make a text button, one must use the exported <code>makeSwitch()</code> function.
|
|
80
|
-
|
|
81
|
-
##### Example
|
|
82
|
-
|
|
83
|
-
An example usage of a text button.
|
|
84
|
-
|
|
85
|
-
```javascript
|
|
86
|
-
import kaplay from "kaplay";
|
|
87
|
-
import "kaplay/global";
|
|
88
|
-
|
|
89
|
-
import { makeSwitch } from "kaplay-ui/inputs";
|
|
90
|
-
|
|
91
|
-
kaplay();
|
|
92
|
-
|
|
93
|
-
const switchBtn = makeSwitch();
|
|
94
|
-
|
|
95
|
-
add(switchBtn);
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
##### State
|
|
99
|
-
|
|
100
|
-
A cehckbox has the following state:
|
|
101
|
-
|
|
102
|
-
| state | Type | Default | State change by |
|
|
103
|
-
| ---------- | --------- | ------- | --------------- |
|
|
104
|
-
| `switched` | `boolean` | false | Click on switch |
|
|
105
|
-
|
|
106
|
-
##### Parameters
|
|
107
|
-
|
|
108
|
-
A switch can take the following parameters:
|
|
109
|
-
|
|
110
|
-
| Parameter | Type | Default | Required | Description |
|
|
111
|
-
| --------- | -------- | ------- | -------- | ----------------- |
|
|
112
|
-
| `x` | `number` | 0 | β No | Switch x position |
|
|
113
|
-
| `y` | `number` | 0 | β No | Switch x position |
|
|
114
|
-
| `width` | `number` | 50 | β No | Switch width |
|
|
115
|
-
| `height` | `number` | 25 | β No | Switch height |
|
|
116
|
-
|
|
117
|
-
<br>
|
|
118
|
-
|
|
119
|
-
#### Text Button
|
|
120
|
-
|
|
121
|
-
To make a text button, one must use the exported <code>makeTextButton()</code> function.
|
|
122
|
-
|
|
123
|
-
##### Example
|
|
124
|
-
|
|
125
|
-
An example usage of a text button.
|
|
126
|
-
|
|
127
|
-
```javascript
|
|
128
|
-
import kaplay from "kaplay";
|
|
129
|
-
import "kaplay/global";
|
|
130
|
-
|
|
131
|
-
import { makeTextButton } from "kaplay-ui/inputs";
|
|
132
|
-
|
|
133
|
-
kaplay();
|
|
134
|
-
|
|
135
|
-
const txtBtn = makeTextButton("Start");
|
|
136
|
-
|
|
137
|
-
add(txtBtn);
|
|
25
|
+
```bash
|
|
26
|
+
npm install kaplay-ui@next
|
|
138
27
|
```
|
|
139
28
|
|
|
140
|
-
|
|
29
|
+
This gives you the latest `1.0.0βalpha.*` builds.
|
|
141
30
|
|
|
142
|
-
|
|
31
|
+
---
|
|
143
32
|
|
|
144
|
-
|
|
145
|
-
| ------------ | -------- | ------- | -------- | ---------------------------------- |
|
|
146
|
-
| `text` | `string` | N/A | β
Yes | The text to display on the button. |
|
|
147
|
-
| `x` | `number` | 0 | β No | Button x position |
|
|
148
|
-
| `y` | `number` | 0 | β No | Button y position |
|
|
149
|
-
| `width` | `number` | 100 | β No | Button width |
|
|
150
|
-
| `height` | `number` | 50 | β No | Button height |
|
|
151
|
-
| `btnRadius` | `number` | 8 | β No | Button radius |
|
|
152
|
-
| `btnOutline` | `number` | 1 | β No | Button outline |
|
|
153
|
-
| `txtSize` | `number` | 15 | β No | Text size |
|
|
33
|
+
## π Usage
|
|
154
34
|
|
|
155
|
-
|
|
35
|
+
Kaplay UI exports a plugin for adding UI elements.
|
|
156
36
|
|
|
157
|
-
|
|
37
|
+
The plugin is exported from the package root:
|
|
158
38
|
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
##### Example
|
|
162
|
-
|
|
163
|
-
An example usage of a toggle.
|
|
164
|
-
|
|
165
|
-
```javascript
|
|
166
|
-
import kaplay from "kaplay";
|
|
167
|
-
import "kaplay/global";
|
|
168
|
-
|
|
169
|
-
import { makeTextInput } from "kaplay-ui/inputs";
|
|
170
|
-
|
|
171
|
-
kaplay();
|
|
172
|
-
|
|
173
|
-
const txtInput = makeTextInput();
|
|
174
|
-
|
|
175
|
-
add(txtInput);
|
|
39
|
+
```ts
|
|
40
|
+
import kaplayUI from "kaplay-ui";
|
|
176
41
|
```
|
|
177
42
|
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
A text input can take the following parameters:
|
|
43
|
+
---
|
|
181
44
|
|
|
182
|
-
|
|
183
|
-
| ---------- | --------- | ------- | -------- | ------------------------------ |
|
|
184
|
-
| `x` | `number` | 0 | β No | x position |
|
|
185
|
-
| `y` | `number` | 0 | β No | y position |
|
|
186
|
-
| `width` | `number` | 400 | β No | width |
|
|
187
|
-
| `txtSize` | `number` | 15 | β No | Input text size |
|
|
188
|
-
| `pad` | `number` | 10 | β No | Padding |
|
|
189
|
-
| `hasFocus` | `boolean` | true | β No | If text input has focus or not |
|
|
45
|
+
## 𧩠Game Object (_**will evolve over time**_)
|
|
190
46
|
|
|
191
|
-
|
|
47
|
+
### **Switch**
|
|
192
48
|
|
|
193
|
-
|
|
49
|
+
### **Text Button**
|
|
194
50
|
|
|
195
|
-
|
|
51
|
+
Clickable text-based button:
|
|
196
52
|
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
An example usage of a toggle.
|
|
200
|
-
|
|
201
|
-
```javascript
|
|
202
|
-
import kaplay from "kaplay";
|
|
203
|
-
import "kaplay/global";
|
|
204
|
-
|
|
205
|
-
import { makeToggle } from "kaplay-ui/inputs";
|
|
206
|
-
|
|
207
|
-
kaplay();
|
|
208
|
-
|
|
209
|
-
const toggle = makeToggle();
|
|
210
|
-
|
|
211
|
-
add(toggle);
|
|
53
|
+
```ts
|
|
54
|
+
const txtBtn = addTextButton("Play!", 200, 100);
|
|
212
55
|
```
|
|
213
56
|
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
A cehckbox has the following state:
|
|
57
|
+
---
|
|
217
58
|
|
|
218
|
-
|
|
219
|
-
| --------- | --------- | ------- | --------------- |
|
|
220
|
-
| `toggled` | `boolean` | false | Click on toggle |
|
|
59
|
+
## π£οΈ Roadmap
|
|
221
60
|
|
|
222
|
-
|
|
61
|
+
_to be added shortly .._
|
|
223
62
|
|
|
224
|
-
|
|
63
|
+
---
|
|
225
64
|
|
|
226
|
-
|
|
227
|
-
| --------- | -------- | ------- | -------- | ----------------- |
|
|
228
|
-
| `x` | `number` | 0 | β No | Toggle x position |
|
|
229
|
-
| `y` | `number` | 0 | β No | Toggle y position |
|
|
230
|
-
| `width` | `number` | 50 | β No | Toggle width |
|
|
231
|
-
| `height` | `number` | 25 | β No | Toggle height |
|
|
65
|
+
## π License
|
|
232
66
|
|
|
233
|
-
|
|
67
|
+
This project is licensed under the **MIT License**.
|
|
68
|
+
See the `LICENSE` file for details.
|
|
234
69
|
|
|
235
|
-
|
|
70
|
+
---
|
|
236
71
|
|
|
237
|
-
|
|
72
|
+
## π¬ Contact
|
|
238
73
|
|
|
239
|
-
|
|
74
|
+
Have questions or suggestions?
|
|
75
|
+
Open an issue on GitHub:
|
|
240
76
|
|
|
241
|
-
|
|
77
|
+
π <https://github.com/jbakchr/kaplay-ui>
|
|
242
78
|
|
|
243
|
-
Have questions or suggestions? Reach out via:
|
|
244
79
|
|
|
245
|
-
- GitHub Issues
|