mirror of
https://github.com/thegatesbrowser/thegates.git
synced 2025-08-24 11:17:26 -04:00
onboarding carousel working
This commit is contained in:
parent
97045e25de
commit
181c0a6645
7 changed files with 299 additions and 84 deletions
37
app/scripts/ui/onboarding/board.gd
Normal file
37
app/scripts/ui/onboarding/board.gd
Normal file
|
@ -0,0 +1,37 @@
|
|||
extends Control
|
||||
class_name OnboardingBoard
|
||||
|
||||
signal request_focus
|
||||
|
||||
@export var focus_button: TextureButton
|
||||
@export var unfocus_color: Color
|
||||
@export var unfocus_scale: Vector2
|
||||
|
||||
var tween: Tween
|
||||
|
||||
|
||||
func _ready() -> void:
|
||||
focus_button.pressed.connect(func(): request_focus.emit())
|
||||
focus_button.visible = false
|
||||
|
||||
|
||||
func focus(tween_duration: float) -> void:
|
||||
if is_instance_valid(tween): tween.stop()
|
||||
tween = create_tween()
|
||||
tween.set_parallel(true)
|
||||
|
||||
tween.tween_property(self, "scale", Vector2.ONE, tween_duration).set_trans(Tween.TRANS_SINE).set_ease(Tween.EASE_IN_OUT)
|
||||
tween.tween_property(self, "modulate", Color.WHITE, tween_duration).set_trans(Tween.TRANS_SINE).set_ease(Tween.EASE_IN_OUT)
|
||||
|
||||
focus_button.visible = false
|
||||
|
||||
|
||||
func unfocus(tween_duration: float) -> void:
|
||||
if is_instance_valid(tween): tween.stop()
|
||||
tween = create_tween()
|
||||
tween.set_parallel(true)
|
||||
|
||||
tween.tween_property(self, "scale", unfocus_scale, tween_duration).set_trans(Tween.TRANS_SINE).set_ease(Tween.EASE_IN_OUT)
|
||||
tween.tween_property(self, "modulate", unfocus_color, tween_duration).set_trans(Tween.TRANS_SINE).set_ease(Tween.EASE_IN_OUT)
|
||||
|
||||
focus_button.visible = true
|
42
app/scripts/ui/onboarding/carousel.gd
Normal file
42
app/scripts/ui/onboarding/carousel.gd
Normal file
|
@ -0,0 +1,42 @@
|
|||
extends Control
|
||||
|
||||
@export var ui_events: UiEvents
|
||||
@export var line: Control
|
||||
@export var tween_duration: float
|
||||
|
||||
var boards: Array[OnboardingBoard] = []
|
||||
var focused_page: int
|
||||
var tween: Tween
|
||||
|
||||
|
||||
func _ready() -> void:
|
||||
setup_boards()
|
||||
assert(boards.size() > 0, "Carousel must have at least one board")
|
||||
|
||||
move_line(0)
|
||||
|
||||
|
||||
func setup_boards() -> void:
|
||||
for child in line.get_children():
|
||||
boards.append(child as OnboardingBoard)
|
||||
|
||||
for i in range(boards.size()):
|
||||
boards[i].request_focus.connect(move_line.bind(i))
|
||||
|
||||
|
||||
func move_line(board_index: int) -> void:
|
||||
var board = boards[board_index]
|
||||
focused_page = board_index
|
||||
|
||||
var screen_center = ui_events.current_ui_size.x / 2
|
||||
var wanted_board_position = screen_center - board.size.x / 2
|
||||
var line_position = Vector2(wanted_board_position - board.position.x, line.position.y)
|
||||
|
||||
if is_instance_valid(tween): tween.stop()
|
||||
tween = create_tween()
|
||||
tween.tween_property(line, "position", line_position, tween_duration).set_trans(Tween.TRANS_SINE).set_ease(Tween.EASE_IN_OUT)
|
||||
|
||||
for i in range(boards.size()):
|
||||
if i == board_index:
|
||||
boards[i].focus(tween_duration)
|
||||
else: boards[i].unfocus(tween_duration)
|
|
@ -1,26 +1,27 @@
|
|||
extends Control
|
||||
|
||||
@export var root: Control
|
||||
@export var skip: Button
|
||||
@export var fade_in: float = 1.0
|
||||
@export var fade_out: float = 0.2
|
||||
|
||||
const INITIAL_DELAY = 1.0
|
||||
const SHOWN = Color(1, 1, 1, 1)
|
||||
const HIDDEN = Color(1, 1, 1, 0)
|
||||
|
||||
@export var root: Control
|
||||
# @export var skip: Button
|
||||
@export var fade_in: float = 0.2
|
||||
@export var fade_out: float = 0.2
|
||||
|
||||
var tween: Tween
|
||||
|
||||
|
||||
func _ready() -> void:
|
||||
skip.pressed.connect(hide_onboarding)
|
||||
# skip.pressed.connect(hide_onboarding)
|
||||
|
||||
visible = true
|
||||
root.hide()
|
||||
root.modulate = HIDDEN
|
||||
root.mouse_filter = Control.MOUSE_FILTER_PASS
|
||||
|
||||
await get_tree().create_timer(1.0).timeout
|
||||
#show_onboarding()
|
||||
await get_tree().create_timer(INITIAL_DELAY).timeout
|
||||
show_onboarding()
|
||||
|
||||
|
||||
func show_onboarding() -> void:
|
||||
|
@ -29,7 +30,7 @@ func show_onboarding() -> void:
|
|||
root.show()
|
||||
|
||||
if is_instance_valid(tween): tween.stop()
|
||||
tween = get_tree().create_tween()
|
||||
tween = create_tween()
|
||||
tween.tween_property(root, "modulate", SHOWN, fade_in)
|
||||
await tween.finished
|
||||
|
||||
|
@ -42,7 +43,7 @@ func hide_onboarding() -> void:
|
|||
root.mouse_filter = Control.MOUSE_FILTER_PASS
|
||||
|
||||
if is_instance_valid(tween): tween.stop()
|
||||
tween = get_tree().create_tween()
|
||||
tween = create_tween()
|
||||
tween.tween_property(root, "modulate", HIDDEN, fade_out)
|
||||
await tween.finished
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue