diff --git a/dns/frontend/index.html b/dns/frontend/index.html new file mode 100644 index 0000000..812d7f8 --- /dev/null +++ b/dns/frontend/index.html @@ -0,0 +1,105 @@ + + Login + + + + + + + + + + + + +
+

Login

+
+ + + +
+

Don't have an account? Register here

+ +

+
+ \ No newline at end of file diff --git a/dns/frontend/style.css b/dns/frontend/style.css new file mode 100644 index 0000000..e69de29 diff --git a/flumi/Scripts/Constants.gd b/flumi/Scripts/Constants.gd index ed0709f..d7c4446 100644 --- a/flumi/Scripts/Constants.gd +++ b/flumi/Scripts/Constants.gd @@ -23,2879 +23,4 @@ pre { text-xl font-mono } button { text-[16px] bg-[#1b1b1b] rounded-md text-white hover:bg-[#2a2a2a] active:bg-[#101010] } button[disabled] { bg-[#666666] text-[#999999] cursor-not-allowed } -""" - -var HTML_CONTENT2 = """ - My Custom Dashboard - - - - - - - - - - -

๐Ÿ“Š My Dashboard

- - -
-
-

Users

-

1,240

-
-
-

Sales

-

$9,842

-
-
-

Visitors

-

3,590

-
-
- - - - -

๐Ÿ‘ค User Panel

-
-
-

Name: Jane Doe

-

Email: jane@example.com

-

Status: Active

-
-
-

Plan: Pro

-

Projects: 8

-

Tasks: 42

-
-
- - - - -

๐Ÿ“ Recent Activity

-
    -
  • โœ… Task "Update UI" marked as complete
    • -
  • ๐Ÿ”” New comment on "Bug Fix #224"
    • -
  • ๐Ÿ“ค Exported report "Q2 Metrics"
    • -
- - - - -

๐Ÿ”ง Actions

-
- - - -
- - -""".to_utf8_buffer() -var HTML_CONTENTvv = """ - My cool web - - - - - - - - - - - - -

CSS Selector Test Page

-

This paragraph should be red and bold (h1 + p)

-

This paragraph should be blue (h1 ~ p)

- -

Descendant vs Child Selectors

-
-

This paragraph should be purple and bold (div p and .outer-div > p)

-
-

This paragraph should be purple but not bold (div p only)

-
-
- -

Attribute Selectors

- - - - -
- HTTP Link (normal) -
- HTTPS Link (green and bold) - -
- - - -

Sibling Selectors

-
This div should have light green bg (h2 + div)
- This span should have light red bg (h3 ~ span) - This span should also have light red bg (h3 ~ span) - -
- This span should have yellow bg (.container span) -

Regular paragraph in container

-
- -
- -
- -
-
- -
This div should have yellow bg (class ends with 'special')
-
This div should be normal
- -""".to_utf8_buffer() - -var HTML_CONTENT3 = """ - Task Manager - - - - - - - - - - - -

Welcome to GURT Lua API Demo

- -
-

This page demonstrates the GURT Lua API in action.

-
Click me to see Lua in action!
-
- -

Click the button

- -

Move your mouse

- -

Move mouse over Button

- -

Type something

- -
-
Style Controls:
- - -
- - -""".to_utf8_buffer() - -var HTML_CONTENT_ADD_REMOVE = """ - Lua List Manipulation Demo - - - - - - - - - - -

List Manipulation with Lua

- -
-

Use the buttons below to add or remove items from the list:

- - -
- -
    - -
- -""".to_utf8_buffer() - -var HTML_CONTENT_TWEEN = """ - Tween Animation Demo - - - - - - - - - - -

๐ŸŽฌ Lua Tween Animation Demo

- -
-

Note: This demo showcases the Lua Tween API for smooth animations. Each box demonstrates different animation properties and easing functions.

-
- -

Fade Animation

-
-
Fade Me
-
- - - -
-
- -

Color Animation

-
-
Change Color
-
- - -
-
- -

Scale Animation

-
-
Scale Me
-
- - - -
-
- -

Rotation Animation

-
-
Spin Me
-
- - -
-
- -

Movement Animation

-
-
Move Me
-
- - -
-
- -

Complex Animations

-
-
Complex
-
- - -
-
- -
- -
- -
-

Available Tween Methods:

-
    -
  • element:createTween() - Create a new tween for the element
    • -
  • tween:to(property, target_value, duration, easing) - Animate to a target value
    • -
  • tween:from(property, start_value, duration, easing) - Animate from a start value
    • -
  • tween:parallel() - Set tween to run animations in parallel
    • -
  • tween:chain() - Set tween to run animations in sequence
    • -
  • tween:steps(count) - Set number of loops
    • -
  • tween:callback(function) - Execute function when tween completes
    • -
  • tween:play() - Start the tween animation
    • -
  • tween:stop() - Stop the tween animation
    • -
  • tween:pause() - Pause the tween animation
    • -
  • tween:resume() - Resume the tween animation
    • -
- -

Supported Properties:

-
    -
  • opacity - Element transparency (0-1)
    • -
  • backgroundColor - Background color (hex/color names)
    • -
  • color/textColor - Text color (hex/color names)
    • -
  • width/height - Element dimensions (pixels)
    • -
  • x/y - Position coordinates (pixels)
    • -
  • scale - Element scale factor
    • -
  • rotation - Rotation angle (degrees)
    • -
- -

Easing Functions:

-
    -
  • easeIn - Slow start, fast end
    • -
  • easeOut - Fast start, slow end
    • -
  • easeInOut - Slow start and end, fast middle
    • -
  • easeOutIn - Fast start and end, slow middle
    • -
-
- -""".to_utf8_buffer() - -var HTML_CONTENT_DOM_MANIPULATION = """ - - DOM Utilities Test - - - - -

DOM Utilities Demo

-
-
Non-interactible
-
Child 1
-
Child 2
-
Child 3
-
-
- - - - -
-

Test

- -""".to_utf8_buffer() - -var HTML_CONTENTc = """ - Input Events API Demo - - - - - - - - - - -

๐ŸŽ›๏ธ Input Events API Demo

- -
-
- -
-

Input Elements

- -
-
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- -

Checkbox Option

-
- -
- Option 1 - Option 2 - Option 3 -
- -
- - -
- -
- - -
- -
- - -
-
-
- - -
-

Event Log

-
- 
Waiting for events...
-
-
- -
-

Available Events:

-
    -
  • input: Fires as you type (real-time)
    • -
  • change: Fires when value changes and element loses focus
    • -
  • focusin: Fires when element gains focus
    • -
  • focusout: Fires when element loses focus
    • -
  • click: Fires when button is clicked
    • -
  • submit: Fires when form is submitted (includes form data)
    • -
-
-
-
-
- -""".to_utf8_buffer() - -var HTML_CONTENT_CLIPBOARD = """ - Network & Clipboard API Demo - - - - - - - - - - -

Clipboard API

- -
-

Clipboard Operations

-
- -
-
- -""".to_utf8_buffer() - -var HTML_CONTENTx = """ - Signal API Demo - - - - - - - - - - -

๐Ÿ”” Signal API Demo

- -
-
-

Signal API Usage Example:

-

local mySignal = Signal.new()

-

mySignal:connect(function(arg1, arg2) print("Event fired with: ", arg1, arg2) end)

-

mySignal:fire("Hello", 123)

-

connection:disconnect()

-
- -

Controls

-
- - - - - -
- -

Status

-
- 
Loading status...
-
- -

Event Log

-
- 
Initializing...
-
- -
-

Signal API Features:

-
    -
  • Signal.new(): Creates a new signal object
    • -
  • signal:connect(callback): Connects a callback function and returns a connection object
    • -
  • signal:fire(...): Fires the signal with optional arguments
    • -
  • connection:disconnect(): Disconnects a specific connection
    • -
  • signal:disconnect(): Disconnects all connections from the signal
    • -
  • Multiple Connections: One signal can have multiple connected callbacks
    • -
  • Argument Passing: Signals can pass multiple arguments to connected callbacks
    • -
-
- - -
- -""".to_utf8_buffer() - -var HTML_CONTENTa = """ - Button getAttribute/setAttribute Demo - - - - - - - - - - -

๐Ÿ”˜ Button getAttribute & setAttribute Demo

- -
-
-

โœ… Target button is currently ENABLED. Click it to see the counter increase!

-
- -

Target Button

-
- -

Button clicked 0 times!

-
- -

Control Buttons

-
- - - - -
- -

Current Attributes

-
- 
Loading status...
-
- -
-

How It Works:

-
    -
  • Enable: Uses setAttribute('disabled', '') to remove the disabled attribute
    • -
  • Disable: Uses setAttribute('disabled', 'true') to add the disabled attribute
    • -
  • Toggle: Uses getAttribute('disabled') to check current state, then toggles it
    • -
  • Status: Uses getAttribute() to read multiple attributes and displays them
    • -
  • Bonus: Also demonstrates setting custom data attributes and style changes
    • -
-
-
- -""".to_utf8_buffer() - -var HTML_CONTENTva = """ - WebSocket API Demo - - - - - - - - - - -

๐Ÿ”Œ WebSocket API Demo

- -
-
-

WebSocket API Usage:

-

local socket = WebSocket:new(url)

-

socket:on('open', function() ... end)

-

socket:on('message', function(event) print(event.data) end)

-

socket:send('Hello Server!')

-

socket:close()

-
- -

Connection

-
-
-
- - -
-
Status: Disconnected
-
- - -
-
-
- -

Send Messages

-
-
-
- - -
-
- - Or press Enter to send -
-
-
- -

Event Log

-
- -
-
- 
Initializing...
-
- -
-

WebSocket Events:

-
    -
  • open: Fired when connection is established
    • -
  • message: Fired when a message is received (event.data contains the message)
    • -
  • close: Fired when connection is closed
    • -
  • error: Fired when an error occurs (event.message contains error info)
    • -
-

WebSocket Methods:

-
    -
  • WebSocket:new(url): Creates and connects to WebSocket server
    • -
  • socket:send(message): Sends a text message to the server
    • -
  • socket:close(): Closes the connection
    • -
  • socket:on(event, callback): Registers event handlers
    • -
-
-
- -""".to_utf8_buffer() - -var HTML_CONTENTy = """ - Network & JSON API Demo - - - - - - - - - - -

๐ŸŒ Network & JSON API Demo

- -
-
-

API Examples:

-

Network: fetch(url, {method: "POST", headers: {...}, body: "..."})

-

JSON: JSON.stringify(data) and JSON.parse(jsonString)

-
- -

Input Controls

-
-
-
- - -
-
- - -
-
-
- -

Network Tests

-
- - -
- -

JSON Tests

-
- - -
- -
- -
- -

Response Log

-
- 
Initializing...
-
- -
-

Network API Features:

-
    -
  • fetch(url, options): Makes HTTP requests with support for all methods
    • -
  • Response methods: text(), json(), ok() for processing responses
    • -
  • Headers & Body: Full control over request headers and body content
    • -
  • Status & StatusText: Access to HTTP response status information
    • -
-

JSON API Features:

-
    -
  • JSON.stringify(): Alias for encode (browser compatibility)
    • -
  • JSON.parse(): Alias for decode (browser compatibility)
    • -
-
-
- -""".to_utf8_buffer() -var HTML_CONTENTyea = """ - setInterval & Network Image Demo - - - - - - - -

โฐ setInterval & ๐Ÿ–ผ๏ธ Network Image Demo

- -
-
-

Testing Features:

-

Intervals: gurt.setInterval(callback, delay) and gurt.clearInterval(id)

-

Network Images: fetch() with binary data and dynamic <img> creation

-
- -
0
- -

Interval Controls

-
- - -
- -

Network Image Test

-
- -
- -
-

Click "Load Random Image" to test binary data fetching

-
- -

Activity Log

-
- 
Initializing...
-
- -
-

Implementation Notes:

-
    -
  • setInterval: Creates repeating timers (one_shot = false)
    • -
  • clearInterval: Stops and cleans up interval timers
    • -
  • Binary Data: fetch() handles binary image data seamlessly
    • -
  • Dynamic DOM: Images created and appended programmatically
    • -
  • Random Images: Picsum service provides different images each time
    • -
-
-
- -""".to_utf8_buffer() - -var HTML_CONTENT = """ - Object-Fit CSS Demo - - - - - - - -

๐Ÿ–ผ๏ธ Object-Fit CSS Demonstration

- -
- -
-

object-none

-
Image keeps original size, may overflow container
-
- -
-
object-none
-
- - -
-

object-fill

-
Image fills container, may distort aspect ratio
-
- -
-
object-fill
-
- - -
-

object-contain

-
Image fits inside container while preserving aspect ratio
-
- -
-
object-contain
-
- - -
-

object-cover

-
Image covers entire container while preserving aspect ratio
-
- -
-
object-cover
-
-
- -
-

๐Ÿ“ Object-fit Property Mapping

-
-

object-none: Godot's STRETCH_KEEP - Image keeps original dimensions

-

object-fill: Godot's STRETCH_SCALE - Image stretches to fill container

-

object-contain: Godot's STRETCH_KEEP_ASPECT - Image fits inside with preserved aspect ratio

-

object-cover: Godot's STRETCH_KEEP_ASPECT_COVERED - Image covers container with preserved aspect ratio

-
-
- -""".to_utf8_buffer() - -var HTML_CONTENT_TRANSFORM_TEST = """ - Transform CSS Demo - Scale & Rotation - - - - - - - -

๐Ÿ”„ Scale & Rotation CSS Demonstration

- -
- -
-

Normal

-
No transform applied
-
Box
-
No transform
-
- - -
-

Scale 50%

-
Scaled to 50% size
-
Box
-
scale-50
-
- - -
-

Scale 150%

-
Scaled to 150% size
-
Box
-
scale-150
-
- - -
-

Scale X 75%

-
X-axis scaled to 75%
-
Box
-
scale-x-75
-
- - -
-

Scale Y 125%

-
Y-axis scaled to 125%
-
Box
-
scale-y-125
-
- - -
-

Custom Scale

-
Custom scale value 1.7
-
Box
-
scale-[170]
-
- - -
-

Rotate 45ยฐ

-
Rotated 45 degrees
-
Box
-
rotate-45
-
- - -
-

Rotate 90ยฐ

-
Rotated 90 degrees
-
Box
-
rotate-90
-
- - -
-

Custom Rotate

-
Custom rotation 30deg
-
Box
-
rotate-[30deg]
-
- - -
-

Scale + Rotate

-
Scale 125% and rotate 45ยฐ
-
Box
-
scale-125 rotate-45
-
- - -
-

Radians

-
Rotation using radians
-
Box
-
rotate-[1.57rad]
-
- - -
-

Hover Effect

-
Hover to see scale effect
-
Box
-
hover:scale-110
-
-
- - - -
-

๐Ÿ“ Transform Utility Reference

-
-

Scale utilities: scale-{value}, scale-x-{value}, scale-y-{value}

-

Named values: 0, 50, 75, 90, 95, 100, 105, 110, 125, 150, 200

-

Custom values: scale-[{number}] where number is percentage (100 = 1.0)

-

Rotation utilities: rotate-{degrees}, rotate-x-{degrees}, rotate-y-{degrees}

-

Named degrees: 0, 1, 2, 3, 6, 12, 45, 90, 180, 270

-

Custom rotations: rotate-[{value}deg], rotate-[{value}rad], rotate-[{value}turn]

-
-
- -""".to_utf8_buffer() - -var HTML_CONTENT_AUDIO_TEST = """ - Audio Tag Demo - HTML5 Audio Testing - - - - - - - - -

๐ŸŽต HTML5 Audio Tag Demo

- - -
-

๐Ÿ“€ Basic Audio Elements

- -
-

Audio with Controls

-
Standard audio element with visible controls
-
<audio src="http://commondatastorage.googleapis.com/codeskulptor-assets/Evillaugh.ogg" controls></audio>
- -
- -
-

Audio with Loop

-
Audio element that loops automatically
-
<audio src="http://commondatastorage.googleapis.com/codeskulptor-demos/DDR_assets/Kangaroo_MusiQue_-_The_Neverwritten_Role_Playing_Game.mp3" controls loop></audio>
- -
- -
-

Audio with Mute

-
Audio element that starts muted
-
<audio src="https://www.kozco.com/tech/LRMonoPhase4.wav" controls muted></audio>
- -
-
- - -
-

๐ŸŽฎ Lua Audio Control

- -
-

DOM Audio Control

-
Control audio elements via Lua scripting
- -
- - - - - -
-
-local audio = gurt.select("#controlled-audio") -audio.play() -audio.volume = 0.5 -audio.loop = true -
-
- -
-

Programmatic Audio

-
Create audio instances with Audio.new()
-
- - - -
-
-
-local audio = Audio.new("http://commondatastorage.googleapis.com/codeskulptor-assets/Evillaugh.ogg") -audio.volume = 0.3 -audio.play() -
-
-
- -""".to_utf8_buffer() - -# Set the active HTML content to use the audio demo -func _ready(): - HTML_CONTENT = """ - Login - - - - - - - - - - - - -
-

Login

-
- - - -
-

Don't have an account? Register here

- -

-
-""".to_utf8_buffer() +""" \ No newline at end of file diff --git a/tests/add-remove-child.html b/tests/add-remove-child.html new file mode 100644 index 0000000..0f340a8 --- /dev/null +++ b/tests/add-remove-child.html @@ -0,0 +1,55 @@ + + Lua List Manipulation Demo + + + + + + + + + + +

List Manipulation with Lua

+ +
+

Use the buttons below to add or remove items from the list:

+ + +
+ +
    + +
+ \ No newline at end of file diff --git a/tests/attribute.html b/tests/attribute.html new file mode 100644 index 0000000..5ef7792 --- /dev/null +++ b/tests/attribute.html @@ -0,0 +1,184 @@ + + Button getAttribute/setAttribute Demo + + + + + + + + + + +

๐Ÿ”˜ Button getAttribute & setAttribute Demo

+ +
+
+

โœ… Target button is currently ENABLED. Click it to see the counter increase!

+
+ +

Target Button

+
+ +

Button clicked 0 times!

+
+ +

Control Buttons

+
+ + + + +
+ +

Current Attributes

+
+ 
Loading status...
+
+ +
+

How It Works:

+
    +
  • Enable: Uses setAttribute('disabled', '') to remove the disabled attribute
    • +
  • Disable: Uses setAttribute('disabled', 'true') to add the disabled attribute
    • +
  • Toggle: Uses getAttribute('disabled') to check current state, then toggles it
    • +
  • Status: Uses getAttribute() to read multiple attributes and displays them
    • +
  • Bonus: Also demonstrates setting custom data attributes and style changes
    • +
+
+
+ \ No newline at end of file diff --git a/tests/audio.html b/tests/audio.html new file mode 100644 index 0000000..01d4f80 --- /dev/null +++ b/tests/audio.html @@ -0,0 +1,133 @@ + + Audio Tag Demo - HTML5 Audio Testing + + + + + + + + +

๐ŸŽต HTML5 Audio Tag Demo

+ + +
+

๐Ÿ“€ Basic Audio Elements

+ +
+

Audio with Controls

+
Standard audio element with visible controls
+
<audio src="http://commondatastorage.googleapis.com/codeskulptor-assets/Evillaugh.ogg" controls></audio>
+ +
+ +
+

Audio with Loop

+
Audio element that loops automatically
+
<audio src="http://commondatastorage.googleapis.com/codeskulptor-demos/DDR_assets/Kangaroo_MusiQue_-_The_Neverwritten_Role_Playing_Game.mp3" controls loop></audio>
+ +
+ +
+

Audio with Mute

+
Audio element that starts muted
+
<audio src="https://www.kozco.com/tech/LRMonoPhase4.wav" controls muted></audio>
+ +
+
+ + +
+

๐ŸŽฎ Lua Audio Control

+ +
+

DOM Audio Control

+
Control audio elements via Lua scripting
+ +
+ + + + + +
+
+local audio = gurt.select("#controlled-audio") +audio.play() +audio.volume = 0.5 +audio.loop = true +
+
+ +
+

Programmatic Audio

+
Create audio instances with Audio.new()
+
+ + + +
+
+
+local audio = Audio.new("http://commondatastorage.googleapis.com/codeskulptor-assets/Evillaugh.ogg") +audio.volume = 0.3 +audio.play() +
+
+
+ \ No newline at end of file diff --git a/tests/center-and-button.html b/tests/center-and-button.html new file mode 100644 index 0000000..f3caf0e --- /dev/null +++ b/tests/center-and-button.html @@ -0,0 +1,120 @@ + + Task Manager + + + + + + + + + + + +

Clipboard API

+ +
+

Clipboard Operations

+
+ +
+
+ \ No newline at end of file diff --git a/tests/css-selector.html b/tests/css-selector.html new file mode 100644 index 0000000..d4c7ac3 --- /dev/null +++ b/tests/css-selector.html @@ -0,0 +1,76 @@ + + CSS Selector Tests + + + + +

CSS Selector Test Page

+

This paragraph should be red and bold (h1 + p)

+

This paragraph should be blue (h1 ~ p)

+ +

Descendant vs Child Selectors

+
+

This paragraph should be purple and bold (div p and .outer-div > p)

+
+

This paragraph should be purple but not bold (div p only)

+
+
+ +

Attribute Selectors

+ + + + +
+ HTTP Link (normal) +
+ HTTPS Link (green and bold) + +
+ + + +

Sibling Selectors

+
This div should have light green bg (h2 + div)
+ This span should have light red bg (h3 ~ span) + This span should also have light red bg (h3 ~ span) + +
+ This span should have yellow bg (.container span) +

Regular paragraph in container

+
+ +
+ +
+ +
+
+ +
This div should have yellow bg (class ends with 'special')
+
This div should be normal
+ \ No newline at end of file diff --git a/tests/dashboard.html b/tests/dashboard.html new file mode 100644 index 0000000..5b20462 --- /dev/null +++ b/tests/dashboard.html @@ -0,0 +1,74 @@ + + My Custom Dashboard + + + + + + + + + + +

๐Ÿ“Š My Dashboard

+ + +
+
+

Users

+

1,240

+
+
+

Sales

+

$9,842

+
+
+

Visitors

+

3,590

+
+
+ + + + +

๐Ÿ‘ค User Panel

+
+
+

Name: Jane Doe

+

Email: jane@example.com

+

Status: Active

+
+
+

Plan: Pro

+

Projects: 8

+

Tasks: 42

+
+
+ + + + +

๐Ÿ“ Recent Activity

+
    +
  • โœ… Task "Update UI" marked as complete
    • +
  • ๐Ÿ”” New comment on "Bug Fix #224"
    • +
  • ๐Ÿ“ค Exported report "Q2 Metrics"
    • +
+ + + + +

๐Ÿ”ง Actions

+
+ + + +
+ + \ No newline at end of file diff --git a/tests/dom-utils.html b/tests/dom-utils.html new file mode 100644 index 0000000..27d1740 --- /dev/null +++ b/tests/dom-utils.html @@ -0,0 +1,70 @@ + + DOM Utilities Test + + + + +

DOM Utilities Demo

+
+
Non-interactible
+
Child 1
+
Child 2
+
Child 3
+
+
+ + + + +
+

Test

+ \ No newline at end of file diff --git a/tests/index.html b/tests/index.html new file mode 100644 index 0000000..305ab3a --- /dev/null +++ b/tests/index.html @@ -0,0 +1,289 @@ + + My cool web + + + + + + + + + + + + + + +

๐ŸŽ›๏ธ Input Events API Demo

+ +
+
+ +
+

Input Elements

+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +

Checkbox Option

+
+ +
+ Option 1 + Option 2 + Option 3 +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ + +
+

Event Log

+
+ 
Waiting for events...
+
+
+ +
+

Available Events:

+
    +
  • input: Fires as you type (real-time)
    • +
  • change: Fires when value changes and element loses focus
    • +
  • focusin: Fires when element gains focus
    • +
  • focusout: Fires when element loses focus
    • +
  • click: Fires when button is clicked
    • +
  • submit: Fires when form is submitted (includes form data)
    • +
+
+
+
+
+ \ No newline at end of file diff --git a/tests/interval-and-network.html b/tests/interval-and-network.html new file mode 100644 index 0000000..ea7d2a1 --- /dev/null +++ b/tests/interval-and-network.html @@ -0,0 +1,167 @@ + + setInterval & Network Image Demo + + + + + + + +

โฐ setInterval & ๐Ÿ–ผ๏ธ Network Image Demo

+ +
+
+

Testing Features:

+

Intervals: gurt.setInterval(callback, delay) and gurt.clearInterval(id)

+

Network Images: fetch() with binary data and dynamic <img> creation

+
+ +
0
+ +

Interval Controls

+
+ + +
+ +

Network Image Test

+
+ +
+ +
+

Click "Load Random Image" to test binary data fetching

+
+ +

Activity Log

+
+ 
Initializing...
+
+ +
+

Implementation Notes:

+
    +
  • setInterval: Creates repeating timers (one_shot = false)
    • +
  • clearInterval: Stops and cleans up interval timers
    • +
  • Binary Data: fetch() handles binary image data seamlessly
    • +
  • Dynamic DOM: Images created and appended programmatically
    • +
  • Random Images: Picsum service provides different images each time
    • +
+
+
+ \ No newline at end of file diff --git a/tests/lua-api.html b/tests/lua-api.html new file mode 100644 index 0000000..d629f12 --- /dev/null +++ b/tests/lua-api.html @@ -0,0 +1,148 @@ + + Lua API Demo + + + + + + + + + + +

Welcome to GURT Lua API Demo

+ +
+

This page demonstrates the GURT Lua API in action.

+
Click me to see Lua in action!
+
+ +

Click the button

+ +

Move your mouse

+ +

Move mouse over Button

+ +

Type something

+ +
+
Style Controls:
+ + +
+ + + \ No newline at end of file diff --git a/tests/network-and-json.html b/tests/network-and-json.html new file mode 100644 index 0000000..2abc129 --- /dev/null +++ b/tests/network-and-json.html @@ -0,0 +1,231 @@ + Network & JSON API Demo + + + + + + + + + + +

๐ŸŒ Network & JSON API Demo

+ +
+
+

API Examples:

+

Network: fetch(url, {method: "POST", headers: {...}, body: "..."})

+

JSON: JSON.stringify(data) and JSON.parse(jsonString)

+
+ +

Input Controls

+
+
+
+ + +
+
+ + +
+
+
+ +

Network Tests

+
+ + +
+ +

JSON Tests

+
+ + +
+ +
+ +
+ +

Response Log

+
+ 
Initializing...
+
+ +
+

Network API Features:

+
    +
  • fetch(url, options): Makes HTTP requests with support for all methods
    • +
  • Response methods: text(), json(), ok() for processing responses
    • +
  • Headers & Body: Full control over request headers and body content
    • +
  • Status & StatusText: Access to HTTP response status information
    • +
+

JSON API Features:

+
    +
  • JSON.stringify(): Alias for encode (browser compatibility)
    • +
  • JSON.parse(): Alias for decode (browser compatibility)
    • +
+
+
+ \ No newline at end of file diff --git a/tests/object-fit.html b/tests/object-fit.html new file mode 100644 index 0000000..af8e78c --- /dev/null +++ b/tests/object-fit.html @@ -0,0 +1,72 @@ + + Object-Fit CSS Demo + + + + + + + +

๐Ÿ–ผ๏ธ Object-Fit CSS Demonstration

+ +
+ +
+

object-none

+
Image keeps original size, may overflow container
+
+ +
+
object-none
+
+ + +
+

object-fill

+
Image fills container, may distort aspect ratio
+
+ +
+
object-fill
+
+ + +
+

object-contain

+
Image fits inside container while preserving aspect ratio
+
+ +
+
object-contain
+
+ + +
+

object-cover

+
Image covers entire container while preserving aspect ratio
+
+ +
+
object-cover
+
+
+ +
+

๐Ÿ“ Object-fit Property Mapping

+
+

object-none: Godot's STRETCH_KEEP - Image keeps original dimensions

+

object-fill: Godot's STRETCH_SCALE - Image stretches to fill container

+

object-contain: Godot's STRETCH_KEEP_ASPECT - Image fits inside with preserved aspect ratio

+

object-cover: Godot's STRETCH_KEEP_ASPECT_COVERED - Image covers container with preserved aspect ratio

+
+
+ \ No newline at end of file diff --git a/tests/signal.html b/tests/signal.html new file mode 100644 index 0000000..ea71c2d --- /dev/null +++ b/tests/signal.html @@ -0,0 +1,195 @@ + + Signal API Demo + + + + + + + + + + +

๐Ÿ”” Signal API Demo

+ +
+
+

Signal API Usage Example:

+

local mySignal = Signal.new()

+

mySignal:connect(function(arg1, arg2) print("Event fired with: ", arg1, arg2) end)

+

mySignal:fire("Hello", 123)

+

connection:disconnect()

+
+ +

Controls

+
+ + + + + +
+ +

Status

+
+ 
Loading status...
+
+ +

Event Log

+
+ 
Initializing...
+
+ +
+

Signal API Features:

+
    +
  • Signal.new(): Creates a new signal object
    • +
  • signal:connect(callback): Connects a callback function and returns a connection object
    • +
  • signal:fire(...): Fires the signal with optional arguments
    • +
  • connection:disconnect(): Disconnects a specific connection
    • +
  • signal:disconnect(): Disconnects all connections from the signal
    • +
  • Multiple Connections: One signal can have multiple connected callbacks
    • +
  • Argument Passing: Signals can pass multiple arguments to connected callbacks
    • +
+
+ + +
+ \ No newline at end of file diff --git a/tests/transform.html b/tests/transform.html new file mode 100644 index 0000000..005aaee --- /dev/null +++ b/tests/transform.html @@ -0,0 +1,132 @@ + + Transform CSS Demo - Scale & Rotation + + + + + + + +

๐Ÿ”„ Scale & Rotation CSS Demonstration

+ +
+ +
+

Normal

+
No transform applied
+
Box
+
No transform
+
+ + +
+

Scale 50%

+
Scaled to 50% size
+
Box
+
scale-50
+
+ + +
+

Scale 150%

+
Scaled to 150% size
+
Box
+
scale-150
+
+ + +
+

Scale X 75%

+
X-axis scaled to 75%
+
Box
+
scale-x-75
+
+ + +
+

Scale Y 125%

+
Y-axis scaled to 125%
+
Box
+
scale-y-125
+
+ + +
+

Custom Scale

+
Custom scale value 1.7
+
Box
+
scale-[170]
+
+ + +
+

Rotate 45ยฐ

+
Rotated 45 degrees
+
Box
+
rotate-45
+
+ + +
+

Rotate 90ยฐ

+
Rotated 90 degrees
+
Box
+
rotate-90
+
+ + +
+

Custom Rotate

+
Custom rotation 30deg
+
Box
+
rotate-[30deg]
+
+ + +
+

Scale + Rotate

+
Scale 125% and rotate 45ยฐ
+
Box
+
scale-125 rotate-45
+
+ + +
+

Radians

+
Rotation using radians
+
Box
+
rotate-[1.57rad]
+
+ + +
+

Hover Effect

+
Hover to see scale effect
+
Box
+
hover:scale-110
+
+
+ + + +
+

๐Ÿ“ Transform Utility Reference

+
+

Scale utilities: scale-{value}, scale-x-{value}, scale-y-{value}

+

Named values: 0, 50, 75, 90, 95, 100, 105, 110, 125, 150, 200

+

Custom values: scale-[{number}] where number is percentage (100 = 1.0)

+

Rotation utilities: rotate-{degrees}, rotate-x-{degrees}, rotate-y-{degrees}

+

Named degrees: 0, 1, 2, 3, 6, 12, 45, 90, 180, 270

+

Custom rotations: rotate-[{value}deg], rotate-[{value}rad], rotate-[{value}turn]

+
+
+ \ No newline at end of file diff --git a/tests/tween.html b/tests/tween.html new file mode 100644 index 0000000..bfe9ccf --- /dev/null +++ b/tests/tween.html @@ -0,0 +1,264 @@ + + Tween Animation Demo + + + + + + + + + + +

๐ŸŽฌ Lua Tween Animation Demo

+ +
+

Note: This demo showcases the Lua Tween API for smooth animations. Each box demonstrates different animation properties and easing functions.

+
+ +

Fade Animation

+
+
Fade Me
+
+ + + +
+
+ +

Color Animation

+
+
Change Color
+
+ + +
+
+ +

Scale Animation

+
+
Scale Me
+
+ + + +
+
+ +

Rotation Animation

+
+
Spin Me
+
+ + +
+
+ +

Movement Animation

+
+
Move Me
+
+ + +
+
+ +

Complex Animations

+
+
Complex
+
+ + +
+
+ +
+ +
+ +
+

Available Tween Methods:

+
    +
  • element:createTween() - Create a new tween for the element
    • +
  • tween:to(property, target_value, duration, easing) - Animate to a target value
    • +
  • tween:from(property, start_value, duration, easing) - Animate from a start value
    • +
  • tween:parallel() - Set tween to run animations in parallel
    • +
  • tween:chain() - Set tween to run animations in sequence
    • +
  • tween:steps(count) - Set number of loops
    • +
  • tween:callback(function) - Execute function when tween completes
    • +
  • tween:play() - Start the tween animation
    • +
  • tween:stop() - Stop the tween animation
    • +
  • tween:pause() - Pause the tween animation
    • +
  • tween:resume() - Resume the tween animation
    • +
+ +

Supported Properties:

+
    +
  • opacity - Element transparency (0-1)
    • +
  • backgroundColor - Background color (hex/color names)
    • +
  • color/textColor - Text color (hex/color names)
    • +
  • width/height - Element dimensions (pixels)
    • +
  • x/y - Position coordinates (pixels)
    • +
  • scale - Element scale factor
    • +
  • rotation - Rotation angle (degrees)
    • +
+ +

Easing Functions:

+
    +
  • easeIn - Slow start, fast end
    • +
  • easeOut - Fast start, slow end
    • +
  • easeInOut - Slow start and end, fast middle
    • +
  • easeOutIn - Fast start and end, slow middle
    • +
+
+ \ No newline at end of file diff --git a/tests/websocket.html b/tests/websocket.html new file mode 100644 index 0000000..0244340 --- /dev/null +++ b/tests/websocket.html @@ -0,0 +1,211 @@ + + WebSocket API Demo + + + + + + + + + + +

๐Ÿ”Œ WebSocket API Demo

+ +
+
+

WebSocket API Usage:

+

local socket = WebSocket:new(url)

+

socket:on('open', function() ... end)

+

socket:on('message', function(event) print(event.data) end)

+

socket:send('Hello Server!')

+

socket:close()

+
+ +

Connection

+
+
+
+ + +
+
Status: Disconnected
+
+ + +
+
+
+ +

Send Messages

+
+
+
+ + +
+
+ + Or press Enter to send +
+
+
+ +

Event Log

+
+ +
+
+ 
Initializing...
+
+ +
+

WebSocket Events:

+
    +
  • open: Fired when connection is established
    • +
  • message: Fired when a message is received (event.data contains the message)
    • +
  • close: Fired when connection is closed
    • +
  • error: Fired when an error occurs (event.message contains error info)
    • +
+

WebSocket Methods:

+
    +
  • WebSocket:new(url): Creates and connects to WebSocket server
    • +
  • socket:send(message): Sends a text message to the server
    • +
  • socket:close(): Closes the connection
    • +
  • socket:on(event, callback): Registers event handlers
    • +
+
+
+ \ No newline at end of file