Hi.
I need to create huge grid (minesweeper field).
The maximum clickable items 500 x 50 = 25000 
Can I handle that with haxeui-openfl and what is the best way to achieve it?
I mean what containers and components to try?
Thanks!
Thats alot of components, yeah, would be interesting to see what does happen, im not sure openfl would be happy with that number of sprites, with or without haxeui, but worth a try to see what happens!
I, personally, would go with something along the lines of this (keep in mind its just a very basic play around):
<vbox width="100%" height="100%" style="padding: 5px;">
<style>
#sweeperContainer .scrollview-contents {
padding: none;
}
#sweeper {
background-color: white;
}
</style>
<hbox width="100%">
<button text="Some Button" />
<button text="Some Button" width="100%" />
<button text="Some Button" />
</hbox>
<scrollview id="sweeperContainer" width="100%" height="100%">
<absolute width="24000" height="2400" id="sweeper">
</absolute>
</scrollview>
</vbox>
And the code (again, very basic):
class Main {
private static inline var CELL_SIZE:Int = 48;
public static function main() {
var app = new HaxeUIApp();
app.ready(function() {
var main:Component = ComponentMacros.buildComponent("assets/main.xml");
app.addComponent(main);
var sweeper = main.findComponent("sweeper", Absolute);
drawGrid(sweeper);
sweeper.onClick = function(e) {
var gridX = Std.int(e.localX / CELL_SIZE);
var gridY = Std.int(e.localY / CELL_SIZE);
trace("Clicked: " + gridX + ", " + gridY);
var image = new Image();
image.resource = "haxeui-core/styles/default/haxeui_small.png";
image.left = gridX * CELL_SIZE;
image.top = gridY * CELL_SIZE;
sweeper.addComponent(image);
}
app.start();
});
}
private static function drawGrid(container:Absolute) {
// this seems like a hugely wasteful way to draw the cells... 100s of 1px components :(
// seems to work though, although, since you are using openfl, you could probably just directly
// draw to the component (its an openfl sprite in haxeui-openfl)
for (i in 0...Std.int(container.width / CELL_SIZE)) {
var line = new Component();
line.left = i * CELL_SIZE;
line.width = 1;
line.height = container.height;
line.backgroundColor = 0xCCCCCC;
container.addComponent(line);
}
for (i in 0...Std.int(container.height / CELL_SIZE)) {
var line = new Component();
line.top = i * CELL_SIZE;
line.width = container.width;
line.height = 1;
line.backgroundColor = 0xCCCCCC;
container.addComponent(line);
}
}
}
2 Likes