Skip to content

Commit 0437e9c

Browse files
AxenoDevAxenoDev
authored
Merge pull request #59 from AxenoDev/copilot/docs
Ajout d'une docs
2 parents 19cc946 + ff707a2 commit 0437e9c

File tree

10 files changed

+1563
-152
lines changed

10 files changed

+1563
-152
lines changed

‎docs/.vitepress/config.mts‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { defineConfig } from 'vitepress'
33
// https://vitepress.dev/reference/site-config
44
export default defineConfig({
55
lang: "en-US",
6-
title: "NoctisUI - Libnaus",
7-
description: "NoctisUI is a Minecraft UI library",
6+
title: "NoctisUI",
7+
description: "A powerful UI library for Minecraft Fabric mods",
88
sitemap: {
99
hostname: 'https://noctisui.libnaus.fr',
1010
},
@@ -16,14 +16,35 @@ export default defineConfig({
1616
logo: '/logo.svg',
1717
nav: [
1818
{ text: 'Home', link: '/' },
19-
{ text: 'Examples', link: '/markdown-examples' }
19+
{ text: 'Getting Started', link: '/getting-started' },
20+
{ text: 'API Reference', link: '/api/components' },
21+
{ text: 'Examples', link: '/examples/basic-button' }
2022
],
2123
sidebar: [
24+
{
25+
text: 'Introduction',
26+
items: [
27+
{ text: 'Getting Started', link: '/getting-started' }
28+
]
29+
},
30+
{
31+
text: 'API Reference',
32+
items: [
33+
{ text: 'Components', link: '/api/components' }
34+
]
35+
},
2236
{
2337
text: 'Examples',
2438
items: [
25-
{ text: 'Markdown Examples', link: '/markdown-examples' },
26-
{ text: 'Runtime API Examples', link: '/api-examples' }
39+
{ text: 'Basic Button', link: '/examples/basic-button' },
40+
{ text: 'Container Layout', link: '/examples/container-layout' },
41+
{ text: 'Custom Screen', link: '/examples/custom-screen' }
42+
]
43+
},
44+
{
45+
text: 'Guides',
46+
items: [
47+
{ text: 'Styling Guide', link: '/guides/styling' }
2748
]
2849
}
2950
],
@@ -34,7 +55,8 @@ export default defineConfig({
3455
provider: 'local'
3556
},
3657
footer: {
37-
message: 'Copyright © 2024-2025 Libnaus',
58+
message: 'Released under the GPL-3.0 License',
59+
copyright: 'Copyright © 2024-2025 Libnaus'
3860
}
3961
}
4062
})

‎docs/api-examples.md‎

Lines changed: 0 additions & 49 deletions
This file was deleted.

‎docs/api/components.md‎

Lines changed: 255 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,255 @@
1+
# Components API
2+
3+
NoctisUI provides a set of UI components that you can use to build your interfaces. All components implement the `UIComponent` interface.
4+
5+
## Core Components
6+
7+
### Button
8+
9+
An interactive button component with hover effects, animations, and click handling.
10+
11+
**Constructor:**
12+
```java
13+
Button(float x, float y, float width, float height, String label, Color backgroundColor, Color labelColor)
14+
```
15+
16+
**Basic Example:**
17+
```java
18+
Button button = new Button(100, 50, 120, 30, "Click Me",
19+
new Color(0, 122, 204), Color.WHITE);
20+
button.setOnClick(b -> System.out.println("Clicked!"));
21+
```
22+
23+
**Customization Methods:**
24+
25+
| Method | Description |
26+
|--------|-------------|
27+
| `setOnClick(Consumer<Button>)` | Set the click handler |
28+
| `hover(long duration, Color bgColor, Color textColor)` | Enable hover animation |
29+
| `setOutline(Color color, float width)` | Add an outline border |
30+
| `setRadius(int radius)` | Set corner radius for rounded corners |
31+
| `setFont(FontAtlas font)` | Set custom font |
32+
| `setFontSize(int size)` | Set font size |
33+
| `setShadow(boolean shadow)` | Enable/disable text shadow |
34+
35+
**Advanced Example:**
36+
```java
37+
Button fancyButton = new Button(100, 100, 150, 40, "Fancy Button",
38+
new Color(41, 128, 185), Color.WHITE);
39+
40+
// Add hover effect with 200ms animation
41+
fancyButton.hover(200, new Color(52, 152, 219), new Color(236, 240, 241));
42+
43+
// Add outline
44+
fancyButton.setOutline(Color.BLACK, 2);
45+
46+
// Set rounded corners
47+
fancyButton.setRadius(8);
48+
49+
// Use custom font
50+
fancyButton.setFont(NoctisUIClient.getInstance().getFonts().getInterBold());
51+
fancyButton.setFontSize(14);
52+
53+
// Enable text shadow
54+
fancyButton.setShadow(true);
55+
56+
// Set click handler
57+
fancyButton.setOnClick(b -> {
58+
System.out.println("Fancy button clicked!");
59+
});
60+
```
61+
62+
### TextComponent
63+
64+
A component for rendering text with custom fonts, sizes, and colors.
65+
66+
**Constructors:**
67+
```java
68+
// With default font
69+
TextComponent(float x, float y, String text, float fontSize, Color color)
70+
71+
// With custom font
72+
TextComponent(float x, float y, String text, float fontSize, Color color, FontAtlas font)
73+
```
74+
75+
**Example:**
76+
```java
77+
// Simple text
78+
TextComponent text = new TextComponent(50, 50, "Hello, World!", 16, Color.WHITE);
79+
80+
// Custom font
81+
FontAtlas customFont = NoctisUIClient.getInstance().getFonts().getPoppins();
82+
TextComponent customText = new TextComponent(50, 100, "Custom Font", 18,
83+
new Color(255, 193, 7), customFont);
84+
```
85+
86+
**Methods:**
87+
88+
| Method | Description |
89+
|--------|-------------|
90+
| `setText(String text)` | Update the text content |
91+
| `setFontSize(float size)` | Change font size |
92+
| `setColor(Color color)` | Change text color |
93+
| `setFont(FontAtlas font)` | Change font |
94+
95+
### ImageComponent
96+
97+
Display images from resource locations in your UI.
98+
99+
**Constructor:**
100+
```java
101+
ImageComponent(float x, float y, float width, float height, Identifier texture)
102+
```
103+
104+
**Example:**
105+
```java
106+
Identifier logoTexture = new Identifier("mymod", "textures/ui/logo.png");
107+
ImageComponent logo = new ImageComponent(50, 50, 200, 100, logoTexture);
108+
```
109+
110+
### DivComponent
111+
112+
A versatile container component that can hold multiple child components. Acts as a layout container with its own background, outline, and click handling.
113+
114+
**Constructor:**
115+
```java
116+
DivComponent(float x, float y, float width, float height)
117+
```
118+
119+
**Basic Example:**
120+
```java
121+
DivComponent container = new DivComponent(10, 10, 300, 200);
122+
container.setBackgroundColor(new Color(0, 0, 0, 150)); // Semi-transparent black
123+
container.setCornerRadius(10);
124+
125+
// Add children
126+
container.addChild(new TextComponent(20, 20, "Title", 18, Color.WHITE));
127+
container.addChild(new Button(20, 60, 100, 30, "Action",
128+
new Color(52, 152, 219), Color.WHITE));
129+
```
130+
131+
**Methods:**
132+
133+
| Method | Description |
134+
|--------|-------------|
135+
| `addChild(UIBaseComponent child)` | Add a child component |
136+
| `removeChild(UIBaseComponent child)` | Remove a child component |
137+
| `removeIf(Predicate<UIBaseComponent>)` | Remove children matching condition |
138+
| `clearChildren()` | Remove all children |
139+
| `setBackgroundColor(Color color)` | Set background color |
140+
| `setCornerRadius(float radius)` | Set corner radius |
141+
| `setOutline(Color color, float width)` | Set outline |
142+
| `setOnClick(Consumer<DivComponent>)` | Set click handler |
143+
| `setCustomRenderer(Runnable renderer)` | Set custom render hook |
144+
145+
**Advanced Example:**
146+
```java
147+
DivComponent panel = new DivComponent(50, 50, 400, 300);
148+
panel.setBackgroundColor(new Color(44, 62, 80));
149+
panel.setCornerRadius(12);
150+
panel.setOutline(new Color(52, 73, 94), 2);
151+
152+
// Add header
153+
TextComponent header = new TextComponent(20, 15, "Settings Panel", 20, Color.WHITE);
154+
panel.addChild(header);
155+
156+
// Add buttons
157+
Button saveBtn = new Button(20, 250, 150, 35, "Save",
158+
new Color(46, 204, 113), Color.WHITE);
159+
Button cancelBtn = new Button(230, 250, 150, 35, "Cancel",
160+
new Color(231, 76, 60), Color.WHITE);
161+
162+
panel.addChild(saveBtn);
163+
panel.addChild(cancelBtn);
164+
165+
// Click handler for the panel itself
166+
panel.setOnClick(div -> System.out.println("Panel clicked"));
167+
```
168+
169+
### TextInput
170+
171+
A text input field component for user text entry.
172+
173+
**Constructor:**
174+
```java
175+
TextInput(float x, float y, float width, float height)
176+
```
177+
178+
**Example:**
179+
```java
180+
TextInput input = new TextInput(50, 50, 200, 30);
181+
input.setPlaceholder("Enter your name...");
182+
input.setMaxLength(50);
183+
184+
// Get the entered text
185+
String value = input.getValue();
186+
```
187+
188+
## Available Fonts
189+
190+
NoctisUI comes with several pre-loaded fonts accessible via:
191+
192+
```java
193+
Fonts fonts = NoctisUIClient.getInstance().getFonts();
194+
195+
// Available fonts:
196+
FontAtlas interMedium = fonts.getInterMedium();
197+
FontAtlas interBold = fonts.getInterBold();
198+
FontAtlas poppins = fonts.getPoppins();
199+
// ... and more
200+
```
201+
202+
## Color Utilities
203+
204+
The `Color` class provides several utilities:
205+
206+
```java
207+
// Create colors
208+
Color red = new Color(255, 0, 0); // RGB
209+
Color translucentBlue = new Color(0, 0, 255, 128); // RGBA
210+
Color white = Color.WHITE; // Predefined colors
211+
212+
// Color operations
213+
Color interpolated = Color.interpolateColor(color1, color2, 0.5f);
214+
int rgb = color.getRGB();
215+
int rgba = color.getRGBA();
216+
```
217+
218+
## Rendering
219+
220+
All components should be rendered in your screen's `render()` method:
221+
222+
```java
223+
@Override
224+
public void render(DrawContext context, int mouseX, int mouseY, float delta) {
225+
super.render(context, mouseX, mouseY, delta);
226+
227+
// Render your components
228+
myButton.render(context, mouseX, mouseY, delta);
229+
myDiv.render(context, mouseX, mouseY, delta);
230+
}
231+
```
232+
233+
## Event Handling
234+
235+
Handle mouse clicks in your screen's `mouseClicked()` method:
236+
237+
```java
238+
@Override
239+
public boolean mouseClicked(double mouseX, double mouseY, int button) {
240+
// Let components handle clicks
241+
if (myButton.mouseClicked(mouseX, mouseY, button)) {
242+
return true;
243+
}
244+
if (myDiv.mouseClicked(mouseX, mouseY, button)) {
245+
return true;
246+
}
247+
248+
return super.mouseClicked(mouseX, mouseY, button);
249+
}
250+
```
251+
252+
## Next Steps
253+
254+
- Check out [Examples](/examples/basic-button) for practical use cases
255+
- Learn about [Styling](/guides/styling) to customize your components

0 commit comments

Comments
 (0)