From b33a02152a4d0fe6ff1f501bd5ddb66c0b0defec Mon Sep 17 00:00:00 2001 From: NeeEoo Date: Tue, 16 Apr 2024 04:54:27 +0200 Subject: [PATCH] Added simplistic notifications --- source/funkin/editors/import.hx | 1 + source/funkin/editors/stage/StageEditor.hx | 10 +- .../stage/elements/StageCharacterButton.hx | 6 + source/funkin/editors/ui/UIState.hx | 20 +++ .../ui/notifications/UIBaseNotification.hx | 166 ++++++++++++++++++ 5 files changed, 199 insertions(+), 4 deletions(-) create mode 100644 source/funkin/editors/ui/notifications/UIBaseNotification.hx diff --git a/source/funkin/editors/import.hx b/source/funkin/editors/import.hx index 3d64ccc2..de888fa0 100644 --- a/source/funkin/editors/import.hx +++ b/source/funkin/editors/import.hx @@ -3,6 +3,7 @@ package funkin.editors; import flixel.math.FlxPoint; import funkin.editors.ui.*; +import funkin.editors.ui.notifications.*; using funkin.editors.ui.UIUtil; #end \ No newline at end of file diff --git a/source/funkin/editors/stage/StageEditor.hx b/source/funkin/editors/stage/StageEditor.hx index 5a46371f..463accdb 100644 --- a/source/funkin/editors/stage/StageEditor.hx +++ b/source/funkin/editors/stage/StageEditor.hx @@ -41,7 +41,7 @@ class StageEditor extends UIState { public var charMap:Map = []; public var stageCamera:FlxCamera; - public var guideCamera:FlxCamera; + //public var guideCamera:FlxCamera; public var uiCamera:FlxCamera; public var selection:Selection = new Selection(); @@ -152,13 +152,15 @@ class StageEditor extends UIState { stageCamera = FlxG.camera; - guideCamera = new FlxCamera(); - guideCamera.bgColor = 0; + //guideCamera = new FlxCamera(); + //guideCamera.bgColor = 0; uiCamera = new FlxCamera(); uiCamera.bgColor = 0; - FlxG.cameras.add(guideCamera, false); + uiCameras = [uiCamera]; + + //FlxG.cameras.add(guideCamera, false); FlxG.cameras.add(uiCamera, false); // Load from xml diff --git a/source/funkin/editors/stage/elements/StageCharacterButton.hx b/source/funkin/editors/stage/elements/StageCharacterButton.hx index cf984d76..905cdc99 100644 --- a/source/funkin/editors/stage/elements/StageCharacterButton.hx +++ b/source/funkin/editors/stage/elements/StageCharacterButton.hx @@ -41,7 +41,13 @@ class StageCharacterButton extends StageElementButton { } public override function onSelect() { + UIState.state.displayNotification(new UIBaseNotification("Selecting a character isnt implemented yet!", 2, BOTTOM_LEFT)); + CoolUtil.playMenuSFX(WARNING, 0.45); + } + public override function onEdit() { + UIState.state.displayNotification(new UIBaseNotification("Editing a character isnt implemented yet!", 2, BOTTOM_LEFT)); + CoolUtil.playMenuSFX(WARNING, 0.45); } public override function onGhostClick() { diff --git a/source/funkin/editors/ui/UIState.hx b/source/funkin/editors/ui/UIState.hx index 953a4f07..c1716104 100644 --- a/source/funkin/editors/ui/UIState.hx +++ b/source/funkin/editors/ui/UIState.hx @@ -1,5 +1,6 @@ package funkin.editors.ui; +import funkin.editors.ui.notifications.UIBaseNotification; import flixel.math.FlxPoint; import flixel.math.FlxRect; import funkin.backend.system.framerate.Framerate; @@ -22,6 +23,8 @@ class UIState extends MusicBeatState { public var currentCursor:CodeCursor = ARROW; + public var uiCameras:Array = []; + private var __rect:FlxRect; private var __mousePos:FlxPoint; @@ -144,4 +147,21 @@ class UIState extends MusicBeatState { state.openSubState(curContextMenu = new UIContextMenu(options, callback, x.getDefault(__mousePos.x), y.getDefault(__mousePos.y))); return curContextMenu; } + + public function displayNotification(notification:UIBaseNotification) { + notification.cameras = uiCameras; + notification.onRemove = (notif) -> { + notification.onRemove = null; + remove(notif, true); + }; + add(notification); + notification.update(0); + notification.appearAnimation(); + // TODO: future tooltips + //notification.x = __mousePos.x; + //notification.y = __mousePos.y; + //notification.alpha = 0; + //notification.appearAnimation(); + //FlxTween.tween(notification, {x: __mousePos.x, y: __mousePos.y, alpha: 1}, .3, {ease: FlxEase.circInOut}); + } } \ No newline at end of file diff --git a/source/funkin/editors/ui/notifications/UIBaseNotification.hx b/source/funkin/editors/ui/notifications/UIBaseNotification.hx new file mode 100644 index 00000000..b86ba3c7 --- /dev/null +++ b/source/funkin/editors/ui/notifications/UIBaseNotification.hx @@ -0,0 +1,166 @@ +package funkin.editors.ui.notifications; + +import flixel.group.FlxGroup; +import flixel.math.FlxRect; +import flixel.tweens.FlxTween; +import flixel.util.FlxTimer; + +using flixel.util.FlxSpriteUtil; + +class UIBaseNotification extends UISliceSprite { + public var textField:UIText; + public var closeButton:UIButton; + + public var onRemove:(notif:UIBaseNotification)->Void = null; + + public var showedAnimation:Bool = false; + public var closed:Bool = false; + + public function new(text:String, showTimer:Float = 5, corner:Corner = BOTTOM_LEFT) { + super(x, y, 340, 46, "editors/ui/inputbox"); + + closeButton = new UIButton(0, 0, "X", () -> { + if (closed) return; + closed = true; + + (new FlxTimer()).start(0.2, (_) -> {disappearAnimation();}); + }, 32, 32); + closeButton.hoverCallback = () -> { + closeButton.color = 0xFFAC3D3D; + closeButton.field.color = 0xFFffffff; + //closeButton.field.color = closeButton.hovered ? 0xFFffffff : 0xFF7f7f7f; + } + closeButton.autoAlpha = false; + closeButton.alpha = 0.0; + + textField = new UIText(0, 0, 0, text, 14); + textField.alignment = LEFT; + textField.fieldWidth = bWidth - 32 - 8; + members.push(textField); + + if(textField.height > bHeight) + bHeight = Std.int(textField.height); + + alpha = 0; + textField.alpha = 0; + + showingTimer = showTimer; + + members.push(closeButton); + + var margin = 20; + + switch(corner) { + case TOP_LEFT: + x = margin; + y = margin; + case TOP_RIGHT: + x = FlxG.width - bWidth - margin; + y = margin; + case BOTTOM_LEFT: + x = margin; + y = FlxG.height - bHeight - margin; + case BOTTOM_RIGHT: + x = FlxG.width - bWidth - margin; + y = FlxG.height - bHeight - margin; + } + + defaultX = x; + defaultY = y; + + switch(corner) { + case TOP_LEFT | BOTTOM_LEFT: + x -= bWidth - margin - 20; + case TOP_RIGHT | BOTTOM_RIGHT: + x += bWidth - margin - 20; + } + + closingX = x; + closingY = y; + + alpha = 0; + } + + public var defaultX:Float = 0; + public var defaultY:Float = 0; + + public var closingX:Float = 0; + public var closingY:Float = 0; + + public var showingTimer:Float = 5; + public var timerActive:Bool = false; + + public var progress:Float = 0; + public override function update(elapsed:Float) { + closeButton.color = 0xFFFFFFFF; + closeButton.field.color = 0xFF7f7f7f; + super.update(elapsed); + + if(timerActive) { + showingTimer -= elapsed; + if(showingTimer <= 0) { + timerActive = false; + idleDisappearAnimation(); + } + } + + textField.follow(this, 5, bHeight / 2 - textField.height / 2); + closeButton.follow(this, bWidth-closeButton.bWidth - 7, bHeight / 2 - closeButton.bHeight / 2); + closeButton.field.alpha = alpha * .7; + //closeButton.alpha = alpha; + textField.alpha = alpha; + } + + public function appearAnimation() { + x = closingX; alpha=0; FlxTween.cancelTweensOf(this, ["x", "alpha"]); + FlxTween.tween(this, {x: defaultX}, .4, {ease: FlxEase.circInOut}); + FlxTween.tween(this, {alpha: 1}, .3, {ease: FlxEase.sineOut, startDelay: .1, onComplete: (_) -> { + if(showingTimer > 0) timerActive = true; + }}); + + showedAnimation = true; + } + + public var isClosing:Bool = false; + + public function disappearAnimation() { + if (isClosing) return; + isClosing = true; + + // TODO: make it so you can click through the notification + closeButton.active = false; + closeButton.selectable = false; + closeButton.canBeHovered = false; + selectable = false; + canBeHovered = false; + + x = defaultX; alpha = 1; FlxTween.cancelTweensOf(this, ["x", "alpha"]); + FlxTween.tween(this, {alpha: 0}, .3, {ease: FlxEase.sineOut, onComplete: (_) -> { + if(onRemove != null) onRemove(this); + destroy(); + }}); + + showedAnimation = false; + } + + public function idleDisappearAnimation() { + if (isClosing) return; + isClosing = true; + + x = defaultX; alpha = 1; FlxTween.cancelTweensOf(this, ["x", "alpha"]); + FlxTween.tween(this, {alpha: 0}, .3, {ease: FlxEase.sineOut}); + FlxTween.tween(this, {x: closingX}, .4, {ease: FlxEase.circInOut, onComplete: (_) -> { + if(onRemove != null) onRemove(this); + destroy(); + }}); + + showedAnimation = false; + } +} + +enum abstract Corner(Int) { + var TOP_LEFT = 0; + var TOP_RIGHT = 1; + var BOTTOM_LEFT = 2; + var BOTTOM_RIGHT = 3; +} \ No newline at end of file