ui example: menu bar, scrolling preset list, tabs

1 files changed, 80 insertions, 12 deletions

diff --git a/examples/ui.c b/examples/ui.c
index 4a26dd2..0ad931b 100644
--- a/examples/ui.c
+++ b/examples/ui.c
@@ -4,10 +4,12 @@
  * build:  ./build.sh -d -m ui,font obj/ui
  * run:    obj/ui
  *
- * type a name, set the stats, pick a mood and a color. drag the panel titles to move them, click one to collapse it
+ * type a name, set the stats, pick a mood and a color. drag the panel titles to move them, click one to collapse it.
+ * the menu bar has reset, a random color and quit, the list in the middle scrolls with the wheel and has tabs of preset colors
  */
 
 #include <stdio.h>
+#include <stdlib.h>
 #include <string.h>
 
 #include "konprogram.h"
@@ -37,6 +39,8 @@
 typedef struct state {
 	kon_ui_t *ui;
 	kon_uiPanel_t editor, picker;
+	kon_uiArea_t list;
+	int tab, treeOpen;
 	kon_font_t *big;
 
 	char name[20];
@@ -50,6 +54,24 @@ static const char *moodNames[MOODS] = { "calm", "shy", "cheerful", "sleepy", "st
 static const char *statNames[STATS] = { "courage", "charm", "focus" };
 static const uint32_t statColors[STATS] = { COL_PINK, COL_YELLOW, COL_MINT };
 
+typedef struct preset {
+	const char *name;
+	int red, green, blue;
+} preset_t;
+
+#define TABS 3
+#define PRESETS 8
+
+static const char *tabNames[TABS] = { "warm", "cool", "dusk" };
+static const preset_t presetList[TABS][PRESETS] = {
+	{ { "peach", 242, 190, 160 }, { "rose", 242, 167, 195 }, { "apricot", 245, 200, 140 }, { "butter", 243, 221, 160 },
+	  { "coral", 238, 150, 150 }, { "honey", 232, 190, 110 }, { "blush", 245, 205, 215 }, { "sand", 228, 210, 180 } },
+	{ { "mint", 143, 211, 200 }, { "sky", 160, 200, 235 }, { "ice", 190, 225, 240 }, { "sea", 120, 190, 200 },
+	  { "lagoon", 110, 180, 170 }, { "frost", 205, 230, 235 }, { "lilac", 190, 175, 230 }, { "periwinkle", 165, 170, 235 } },
+	{ { "plum", 170, 120, 170 }, { "mauve", 190, 150, 180 }, { "dusk", 150, 130, 190 }, { "orchid", 200, 140, 200 },
+	  { "heather", 175, 160, 200 }, { "twilight", 120, 110, 160 }, { "wine", 160, 100, 130 }, { "fog", 170, 165, 190 } }
+};
+
 /*** drawing ***/
 
 static uint32_t mix(uint32_t a, uint32_t b, int t, int max)
@@ -108,14 +130,65 @@ static void draw(kon_program_t *program, kon_framebuffer_t *game, void *user)
 	drawCard(user, game, program->font);
 }
 
+static void reset(state_t *state)
+{
+	snprintf(state->name, sizeof state->name, "Hanako");
+	state->stats[0] = 4;
+	state->stats[1] = 8;
+	state->stats[2] = 6;
+	state->mood = 0;
+	state->red = 214;
+	state->green = 170;
+	state->blue = 200;
+	state->shadow = 1;
+}
+
 static void drawScreen(kon_program_t *program, kon_framebuffer_t *screen, void *user)
 {
 	state_t *state = user;
 	int i;
 
-	(void)program;
 	kon_uiBegin(state->ui, screen);
 
+	if (kon_uiBeginMenuBar(state->ui)) {
+		if (kon_uiBeginMenu(state->ui, "Card")) {
+			if (kon_uiMenuItem(state->ui, "Reset", NULL)) reset(state);
+			if (kon_uiMenuItem(state->ui, "Random color", NULL)) {
+				state->red = 100 + rand() % 156;
+				state->green = 100 + rand() % 156;
+				state->blue = 100 + rand() % 156;
+			}
+			kon_uiMenuSeparator(state->ui);
+			if (kon_uiMenuItem(state->ui, "Quit", NULL)) kon_programQuit(program);
+		}
+		kon_uiEndMenu(state->ui);
+		if (kon_uiBeginMenu(state->ui, "View")) {
+			if (kon_uiMenuItem(state->ui, "Shadow on", NULL)) state->shadow = 1;
+			if (kon_uiMenuItem(state->ui, "Shadow off", NULL)) state->shadow = 0;
+		}
+		kon_uiEndMenu(state->ui);
+	}
+	kon_uiEndMenuBar(state->ui);
+
+	if (kon_uiBeginArea(state->ui, "Presets", &state->list)) {
+		kon_uiTabs(state->ui, tabNames, TABS, &state->tab);
+		kon_uiSeparator(state->ui);
+		if (kon_uiTreeNode(state->ui, "colors", &state->treeOpen)) {
+			kon_uiIndent(state->ui, 8);
+			for (i = 0; i < PRESETS; i++) {
+				const preset_t *p = &presetList[state->tab][i];
+
+				if (kon_uiSelectable(state->ui, p->name, p->red == state->red && p->green == state->green && p->blue == state->blue)) {
+					state->red = p->red;
+					state->green = p->green;
+					state->blue = p->blue;
+				}
+			}
+			kon_uiIndent(state->ui, -8);
+		}
+	}
+	kon_uiEndArea(state->ui);
+
 	if (kon_uiBeginPanel(state->ui, "Card", &state->editor)) {
 		kon_uiTextInput(state->ui, "name", state->name, sizeof state->name);
 		kon_uiSeparator(state->ui);
@@ -158,16 +231,11 @@ static int init(kon_program_t *program, void *user)
 	theme->accent = 0xFFA66A92u;
 	theme->border = COL_BORDER;
 
-	state->editor = (kon_uiPanel_t){ 20, 20, 230, 0, 0, 0 };
-	state->picker = (kon_uiPanel_t){ 20, 310, 230, 0, 0, 0 };
-	snprintf(state->name, sizeof state->name, "Hanako");
-	state->stats[0] = 4;
-	state->stats[1] = 8;
-	state->stats[2] = 6;
-	state->red = 214;
-	state->green = 170;
-	state->blue = 200;
-	state->shadow = 1;
+	state->editor = (kon_uiPanel_t){ 20, 40, 230, 0, 0, 0 };
+	state->picker = (kon_uiPanel_t){ 20, 330, 230, 0, 0, 0 };
+	state->list = (kon_uiArea_t){ 270, 40, 200, 180, 0, 0 };
+	state->treeOpen = 1;
+	reset(state);
 	return 1;
 }