Hello, I started learning roact and otter today (omg can it be confusing to understand for a noob like me) and I started to create a basic custom chat system. Here is what I have so far:
https://gyazo.com/e68275c5802305b6e48622d2e5ff8246
Being the complete noob I am, I have no idea if my implementation is actually any good. Any feedback is appreciated!
Here is the applicable code:
local roact -- NOTE: ROACT AND OTTER MODULES ARE LOADED BY THE INIT FUNCTION IN AREOGAMEFRAMEWORK
local otter
local function initComponent()
local chatComponent = roact.Component:extend("chat")
function chatComponent:init()
self:setState({
chatboxScale = 100
})
self.chatboxInteractionHoverMotor = otter.createSingleMotor(100)
end
function chatComponent:render()
return roact.createElement("Frame", {
Size = UDim2.new(0, 300, 0, 200)
}, {
roact.createElement("TextBox", {
Size = UDim2.new(0, 300, 0, 50),
AnchorPoint = Vector2.new(0, 1),
Position = UDim2.new(0, 0, 1, 0),
[roact.Event.FocusLost] = function(rbx, enterPressed)
if enterPressed then
rbx.Text = ""
end
self.chatboxInteractionHoverMotor:setGoal(otter.spring(100))
end,
[roact.Event.Focused] = function(_)
self.chatboxInteractionHoverMotor:setGoal(otter.spring(120))
end
}, {
roact.createElement("UIScale", {
Scale = self.state.chatboxScale / 100
})
}),
})
end
function chatComponent:didMount()
self.chatboxInteractionHoverMotor:onStep(function(size)
self:setState(function(_)
return {
chatboxScale = size
}
end)
end)
end
chat.component = chatComponent
end