this repo has no description
example(view): made the example more feauture complete and user friendly
- Set up swapable Views for a Small and Large map.
- Created a "Controls" Window at the top of the TUI.
- Added better documentation for how Views work.
authored by
00JCIV00
and committed by
Tim Culverhouse
d2c9f633
a7fcbe2d
+118
-22
+118
-22
examples/view.zig
+118
-22
examples/view.zig
···
24
24
}
25
25
const alloc = gpa.allocator();
26
26
27
+
var world_map: []const u8 = lg_world_map;
28
+
var map_width = lg_map_width;
29
+
var map_height = lg_map_height;
30
+
var use_sm_map = false;
31
+
var use_mini_view = false;
32
+
27
33
var x: usize = 0;
28
34
var y: usize = 0;
29
35
var h: usize = 0;
30
36
var w: usize = 0;
31
37
defer log.info(
32
-
\\Map Size: {d}x{d}
33
-
\\Screen Size: {d}x{d}
34
-
\\Position: {d}, {d}
38
+
\\Results:
39
+
\\ - Map Size: {d}x{d}
40
+
\\ - Screen Size: {d}x{d}
41
+
\\ - Position: {d}, {d}
35
42
, .{
36
43
map_width, map_height,
37
44
w, h,
···
60
67
try vx.enterAltScreen(writer);
61
68
try buffered_writer.flush();
62
69
try vx.queryTerminal(tty.anyWriter(), 20 * std.time.ns_per_s);
63
-
// Initialize a View
64
-
var map_view = try View.init(alloc, &vx.unicode, .{ .max_width = map_width, .max_height = map_height });
65
-
defer map_view.deinit();
66
-
w = map_view.screen.width;
67
-
h = map_view.screen.height;
68
-
var map_buf: [map_width * map_height]u8 = undefined;
69
-
_ = mem.replace(u8, world_map, "\n", "", map_buf[0..]);
70
-
_ = try map_view.printSegment(.{ .text = map_buf[0..] }, .{ .wrap = .grapheme });
71
70
71
+
// Initialize Views
72
+
// - Large Map
73
+
var lg_map_view = try View.init(alloc, &vx.unicode, .{ .max_width = lg_map_width, .max_height = lg_map_height });
74
+
defer lg_map_view.deinit();
75
+
//w = lg_map_view.screen.width;
76
+
//h = lg_map_view.screen.height;
77
+
var lg_map_buf: [lg_map_width * lg_map_height]u8 = undefined;
78
+
_ = mem.replace(u8, lg_world_map, "\n", "", lg_map_buf[0..]);
79
+
_ = try lg_map_view.printSegment(.{ .text = lg_map_buf[0..] }, .{ .wrap = .grapheme });
80
+
// - Small Map
81
+
var sm_map_view = try View.init(alloc, &vx.unicode, .{ .max_width = sm_map_width, .max_height = sm_map_height });
82
+
defer sm_map_view.deinit();
83
+
w = sm_map_view.screen.width;
84
+
h = sm_map_view.screen.height;
85
+
var sm_map_buf: [sm_map_width * sm_map_height]u8 = undefined;
86
+
_ = mem.replace(u8, sm_world_map, "\n", "", sm_map_buf[0..]);
87
+
_ = try sm_map_view.printSegment(.{ .text = sm_map_buf[0..] }, .{ .wrap = .grapheme });
88
+
// - Active Map
89
+
var map_view = lg_map_view;
90
+
91
+
//
72
92
while (true) {
73
93
const event = loop.nextEvent();
74
94
switch (event) {
75
95
.key_press => |key| {
96
+
// Close Demo
76
97
if (key.matches('c', .{ .ctrl = true })) break;
98
+
// Scroll
77
99
if (key.matches(vaxis.Key.left, .{})) x -|= 1;
78
100
if (key.matches(vaxis.Key.right, .{})) x +|= 1;
79
101
if (key.matches(vaxis.Key.up, .{})) y -|= 1;
80
102
if (key.matches(vaxis.Key.down, .{})) y +|= 1;
103
+
// Quick Scroll
104
+
if (key.matches(vaxis.Key.left, .{ .ctrl = true })) x -|= 30;
105
+
if (key.matches(vaxis.Key.right, .{ .ctrl = true })) x +|= 30;
106
+
if (key.matches(vaxis.Key.up, .{ .ctrl = true })) y -|= 10;
107
+
if (key.matches(vaxis.Key.down, .{ .ctrl = true })) y +|= 10;
108
+
// Goto Side
109
+
if (key.matches(vaxis.Key.left, .{ .shift = true })) x -|= map_width;
110
+
if (key.matches(vaxis.Key.right, .{ .shift = true })) x +|= map_width;
111
+
if (key.matches(vaxis.Key.up, .{ .shift = true })) y -|= map_height;
112
+
if (key.matches(vaxis.Key.down, .{ .shift = true })) y +|= map_height;
113
+
// Change Zoom (Swap Map Views)
114
+
if (key.matches('z', .{})) {
115
+
if (use_sm_map) {
116
+
world_map = lg_world_map;
117
+
map_width = lg_map_width;
118
+
map_height = lg_map_height;
119
+
map_view = lg_map_view;
120
+
}
121
+
else {
122
+
world_map = sm_world_map;
123
+
map_width = sm_map_width;
124
+
map_height = sm_map_height;
125
+
map_view = sm_map_view;
126
+
}
127
+
use_sm_map = !use_sm_map;
128
+
x = 0;
129
+
y = 0;
130
+
w = map_width;
131
+
h = map_height;
132
+
}
133
+
// Mini View (Forced Width & Height Limits)
134
+
if (key.matches('m', .{})) use_mini_view = !use_mini_view;
81
135
},
82
136
.winsize => |ws| try vx.resize(alloc, tty.anyWriter(), ws),
83
137
}
138
+
// Bounds Check
84
139
x = @min(x, map_width -| 1);
85
140
y = @min(y, map_height -| 1);
86
141
87
142
const win = vx.window();
88
143
win.clear();
89
-
try map_view.toWin(
90
-
&win,
91
-
.{
144
+
145
+
const controls_win = win.child(.{
146
+
.height = .{ .limit = 1 },
147
+
});
148
+
_ = try controls_win.print(
149
+
if (win.width >= 112) &.{
150
+
.{ .text = "Controls:", .style = .{ .bold = true, .ul_style = .single } },
151
+
.{ .text = " Exit: ctrl + c | Scroll: dpad | Quick Scroll: ctrl + dpad | Goto Side: shift + dpad | Zoom: z | Mini: m" },
152
+
}
153
+
else if (win.width >= 25) &.{
154
+
.{ .text = "Controls:", .style = .{ .bold = true, .ul_style = .single } },
155
+
.{ .text = " Win too small!" },
156
+
}
157
+
else &.{
158
+
.{ .text = "" },
159
+
},
160
+
.{ .wrap = .none },
161
+
);
162
+
163
+
// Views require a Window to render to.
164
+
const map_win = win.child(.{
165
+
.y_off = controls_win.height,
166
+
.border = .{ .where = .top },
167
+
});
168
+
// The `View.toWin()` method takes:
169
+
// 1. A Window to render to.
170
+
// 2. A RenderConfig consisting of:
171
+
// a. An x/y (col, row) position within the View as the start point of the render.
172
+
// b. A Width and Height extending Right and Down from the start point that will represent the square being rendered.
173
+
x, y = try map_view.toWin(
174
+
&map_win,
175
+
if (!use_mini_view).{
92
176
.x = x,
93
177
.y = y,
94
-
//.width = .{ .max = 10 },
95
-
//.height = .{ .max = 10 },
178
+
}
179
+
else .{
180
+
.x = x,
181
+
.y = y,
182
+
.width = .{ .max = 45 },
183
+
.height = .{ .max = 15 },
96
184
}
97
185
);
98
186
···
102
190
}
103
191
}
104
192
105
-
const _world_map =
193
+
const sm_world_map =
106
194
\\ +NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN+
107
195
\\ W................................................................................................E
108
196
\\ W................................................................................................E
···
135
223
\\ +SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS+
136
224
\\
137
225
;
226
+
const sm_map_width = mapWidth: {
227
+
@setEvalBranchQuota(100_000);
228
+
break :mapWidth mem.indexOfScalar(u8, sm_world_map, '\n').?;
229
+
};
230
+
const sm_map_height = mapHeight: {
231
+
@setEvalBranchQuota(100_000);
232
+
break :mapHeight mem.count(u8, sm_world_map, "\n");
233
+
};
138
234
139
-
const world_map =
235
+
const lg_world_map =
140
236
\\ +NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN+
141
237
\\ W...........................................................................................................................................................................................................................................................................................................................................................................................................E
142
238
\\ W...........................................................................................................................................................................................................................................................................................................................................................................................................E
···
260
356
\\ +SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS+
261
357
\\
262
358
;
263
-
const map_width = mapWidth: {
359
+
const lg_map_width = mapWidth: {
264
360
@setEvalBranchQuota(100_000);
265
-
break :mapWidth mem.indexOfScalar(u8, world_map, '\n').?;
361
+
break :mapWidth mem.indexOfScalar(u8, lg_world_map, '\n').?;
266
362
};
267
-
const map_height = mapHeight: {
363
+
const lg_map_height = mapHeight: {
268
364
@setEvalBranchQuota(100_000);
269
-
break :mapHeight mem.count(u8, world_map, "\n");
365
+
break :mapHeight mem.count(u8, lg_world_map, "\n");
270
366
};