Skip to content

Commit

Permalink
[docs] better words
Browse files Browse the repository at this point in the history
  • Loading branch information
vrld committed Jun 21, 2018
1 parent 2f479ba commit 0a72377
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 25 deletions.
49 changes: 26 additions & 23 deletions docs/gettingstarted.rst
Expand Up @@ -5,7 +5,7 @@ Before actually getting started, it is important to understand the motivation
and mechanics behind SUIT:

- **Immediate mode is better than retained mode**
- **Layout does not care about widgets**
- **Layout should not care about content**
- **Less is more**

Immediate mode?
Expand Down Expand Up @@ -68,11 +68,11 @@ to design a user interface.
SUIT is not a complete GUI library: It does not take control of the runtime.
You have to do everything yourself [1]_.

**SUIT is not good at word processors!**
**SUIT is not good at processing words!**


Hello, World
------------
Hello, World!
-------------

SUITing up is is straightforward: Define your GUI in ``love.update()``, and
draw it in ``love.draw()``::
Expand All @@ -96,24 +96,28 @@ draw it in ``love.draw()``::
suit.draw()
end

This will produce this UI (after clicking the button):
This will produce this UI:

.. image:: _static/hello-world.gif

As written above, the two widgets are each created by a function call
The two widgets (the button and the label) are each created by a function call
(:func:`suit.Button <Button>` and :func:`suit.Label <Label>`). The first
argument to a widget function is always the "payload" of the widget, and the
last four arguments define the position and dimension of the widget. The
function returns a table that indicates the UI state of the widget.
argument to a widget function always defines the *payload* of the widget.
Different widgets expect different payloads.
Here, both :func:`suit.Button <Button>` and :func:`suit.Label <Label>` expect a
string.
The last four arguments of a widget function define the position and dimension
of the widget.
The function returns a table that indicates the UI state of the widget.
Here, the state ``hit`` is used to figure out if the mouse was clicked and
released on the button. See :doc:`Widgets <widgets>` for more info on widget
states.

Mutable state
-------------

Widgets that mutate some state - input boxes, checkboxes and sliders - receive
a table argument as payload, e.g.::
Widgets that mutate some state - input boxes, checkboxes and sliders - expect
a table as their payload, e.g.::

local slider = {value = 1, min = 0, max = 2}
function love.update(dt)
Expand All @@ -131,8 +135,7 @@ Options
-------

You can define optional, well, options after the payload. Most options affect
how the widget is drawn. For example, to align the label text to the left in
the above example, you would write::
how the widget is drawn. For example, to align the label text to the left::

local slider = {value = 1, max = 2}
function love.update(dt)
Expand All @@ -148,8 +151,8 @@ the theme. See :doc:`Widgets <widgets>` for more info on widget options.
Keyboard input
--------------

The :func:`input widget <Input>` requires that you forward the ``keypressed``
and ``textinput`` events to SUIT::
The :func:`Input` widget requires that you forward the ``keypressed`` and
``textinput`` events to SUIT::

local input = {text = ""}
function love.update(dt)
Expand All @@ -168,7 +171,7 @@ and ``textinput`` events to SUIT::

.. image:: _static/keyboard.gif

The slider widget can also react to keyboard input. The mouse state is
The :func:`Slider` widget can also react to keyboard input. The mouse state is
automatically updated, but you can provide your own version of reality if you
need to. See the :doc:`Core functions <core>` for more details.

Expand All @@ -185,7 +188,7 @@ you can directly pass as the final four arguments to the widget functions.
If you have ever dabbled with `Qt's <http://qt.io>`_ ``QBoxLayout``, you
already know 89% [2]_ of what you need to know.

The first example can be written as follows::
Hello, World! can be rewritten as follows::

suit = require 'suit'

Expand Down Expand Up @@ -234,10 +237,10 @@ Refer to the :doc:`Layout <layout>` documentation for more information.
Widget ids
----------

Each widget is identified by an ``id`` [4]_. Internally, this ``id`` is used t
Each widget is identified by an ``id`` [4]_. Internally, this ``id`` is used to
figure out which widget should handle user input like mouse clicks and keyboard
presses.
Unless specified otherwise, the ``id`` is the same as the first argument, i.e.,
Unless specified otherwise, the ``id`` is the same as the payload, i.e.,
the ``id`` of ``Button("Hello, World!", ...)`` will be the string
``"Hello, World!"``.
In almost all of the cases, this will work fine and you don't have to worry about
Expand Down Expand Up @@ -332,10 +335,10 @@ You can also do minimally invasive surgery::
GUI Instances
-------------

Sometimes you might feel the need to separate parts of the GUI. Maybe the
widgets should have a different theme, maybe certain should always be drawn
before or after other UI elements, or maybe you don't want the UI state to
"leak" (e.g., from a stacked pause gamestate to the main gamestate).
Sometimes you might feel the need to separate parts of the GUI. Maybe certain
should always be drawn before or after other UI elements, or maybe you don't
want the UI state to "leak" (e.g., from a stacked pause gamestate to the main
gamestate).

For this reason, SUIT allows you to create GUI instances::

Expand Down
25 changes: 23 additions & 2 deletions docs/index.rst
Expand Up @@ -12,14 +12,35 @@ You may also download the sourcecode as a `zip
<http://github.com/vrld/SUIT/zipball/master>`_ or `tar
<http://github.com/vrld/SUIT/tarball/master>`_ file.

Using `Git <http://git-scm.com>`_, you can clone the project by running::
Otherwise, use `Git <http://git-scm.com>`_::

git clone git://github.com/vrld/SUIT

Once done, you can check for updates by running::
Update::

git pull

Hello, Suit::

suit = require 'suit'

local show_message = false
function love.update(dt)
-- Put a button on the screen. If hit, show a message.
if suit.Button("Hello, World!", 100,100, 300,30).hit then
show_message = true
end

-- if the button was pressed at least one time, but a label below
if show_message then
suit.Label("How are you today?", 100,150, 300,30)
end
end

function love.draw()
suit.draw()
end


Read on
-------
Expand Down

0 comments on commit 0a72377

Please sign in to comment.