Skip to content

Commit 7d58437

Browse files
daftspanieldaftspaniel
committed
Improved control layout and mountain shape.
1 parent dd04a40 commit 7d58437

File tree

5 files changed

+112
-37
lines changed

5 files changed

+112
-37
lines changed

‎pubspec.yaml‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
name: 'forestfire'
22
version: 0.0.1
3-
description: An absolute bare-bones web app.
4-
#author: daftspaniel <email@example.com>
5-
#homepage: https://www.example.com
3+
description: Cellular automata
64

75
environment:
86
sdk: '>=1.0.0 <2.0.0'

‎web/index.html‎

Lines changed: 42 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -18,40 +18,61 @@
1818
</head>
1919

2020
<body>
21-
<div style="width: 500px; text-align: center">
21+
<div style="display: inline-flex">
22+
<div class="render">
23+
<canvas id="surface" width="540" height="540"></canvas>
24+
</div>
25+
<div class="control-panel">
26+
<div class="app-title"><b>Forest Fire</b></div>
27+
<div>Version 0.3. Written in <a href="http://www.dartlang.org">Dart</a>.</div>
28+
<div style="text-align: center">
29+
<br/>
30+
<br/>
31+
2232

23-
<p><b>Forest Fire</b> - <span id="Status"></span></p>
33+
<i> Fire Probability</i>
34+
<small>(LESS to MORE)</small>
35+
<br/>
36+
<input type="range" min="1" max="99" id="Fire" value="30"/>
2437

2538

26-
<canvas id="surface" width="360" height="360" style="border:2px solid darkolivegreen;border-radius:5px;"></canvas>
27-
<span>STATS</span>
2839

29-
<div>
40+
<br/>
3041

31-
<i> Fire Probability LESS</i> <input type="range" min="1" max="99" id="Fire" value="30"/> MORE
42+
<i> Tree Probability</i>
43+
<small>(LESS to MORE)</small>
3244

33-
<br/>
34-
<br/>
45+
<br/>
46+
<input type="range" min="1" max="99" id="Tree" value="43"/>
3547

36-
<i> Tree Probability LESS</i> <input type="range" min="1" max="99" id="Tree" value="43"/> MORE
3748

38-
<br/>
39-
<br/>
49+
<br/>
4050

41-
<i> Speed SLOWER</i> <input type="range" min="1" max="100" id="Speed" value="1"/> FASTER
51+
<i> Speed</i>
52+
<small>(SLOWER to FASTER)</small>
4253

43-
<br/>
44-
<br/>
54+
<br/>
55+
<input type="range" min="1" max="100" id="Speed" value="1"/>
4556

46-
<button id="Start">START</button>
47-
&nbsp;
48-
<button id="Stop">STOP</button>
49-
&nbsp;
50-
<button id="Reset">RESET</button>
51-
<button id="Mountains">Mountains</button>
52-
<button id="Lochs">Lochs</button>
57+
<br/>
58+
<br/>
5359

60+
<button id="Start">START</button>
61+
&nbsp;
62+
<button id="Stop">STOP</button>
63+
&nbsp;
64+
<button id="Reset">RESET</button>
65+
<br/>
66+
<br/>
67+
<button class="wide-button" id="Mountains">+ Mountains</button>
68+
<button class="wide-button" id="Lochs">+ Lochs</button>
69+
<br/>
70+
<br/>
71+
</div>
72+
<div id="Status" class="status-panel"></div>
5473
</div>
74+
5575
</div>
76+
5677
</body>
5778
</html>

‎web/lib/featurebuilder.dart‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,10 @@ class FeatureBuilder {
4848
if (Vary2()) drawPoint(x - 1, y, c);
4949
if (Vary2()) drawPoint(x, y, c);
5050
if (Vary2()) return;
51-
if (Vary2()) drawPoint(x + 1, y, c);
5251

53-
if (Vary2()) drawPoint(x + 1, y + 1, c);
52+
if (Vary4()) drawPoint(x + 1, y, c);
53+
if (Vary4()) drawPoint(x + 1, y + 1, c);
54+
5455
if (Vary2()) drawPoint(x, y + 1, c);
5556
if (Vary2()) drawPoint(x - 1, y + 1, c);
5657
}
@@ -59,8 +60,10 @@ class FeatureBuilder {
5960
bool Vary2() =>
6061
_rng.nextInt(7) == 1;
6162

62-
6363
bool Vary3() =>
6464
_rng.nextInt(19) != 1;
6565

66+
bool Vary4() =>
67+
_rng.nextInt(4) == 1;
68+
6669
}

‎web/main.dart‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import 'dart:html';
77

88
import 'lib/forest.dart';
99

10-
const int drawPlotWidth = 2;
10+
const int drawPlotWidth = 3;
1111
const int minHertz = 1;
1212
const int maxHertz = 60;
1313
final CanvasElement ca = querySelector("#surface");
@@ -21,21 +21,25 @@ final ButtonElement stopButton = querySelector('#Stop');
2121
final ButtonElement resetButton = querySelector('#Reset');
2222
final ButtonElement mountainsButton = querySelector('#Mountains');
2323
final ButtonElement lochsButton = querySelector('#Lochs');
24-
final SpanElement statusDisplay = querySelector('#Status');
24+
final DivElement statusDisplay = querySelector('#Status');
2525

2626
final Forest trees = new Forest();
2727

2828
Timer timer;
2929

3030
void main() {
31-
statusDisplay.text = "Building world...";
31+
addStatus("Building world...");
3232
setupGuiEventHandlers();
3333

3434
timer = new Timer.periodic(new Duration(milliseconds: 1000), update);
3535
}
3636

37+
void addStatus(String status) {
38+
statusDisplay.text = status;
39+
}
40+
3741
void update(_) {
38-
statusDisplay.text = "Updating...";
42+
addStatus("Updating...");
3943
if (trees.active)
4044
trees.update();
4145

@@ -45,7 +49,7 @@ void update(_) {
4549
..fillStyle = trees.land.data[x][y].colour
4650
..fillRect(
4751
x * drawPlotWidth, y * drawPlotWidth, drawPlotWidth, drawPlotWidth);
48-
statusDisplay.text = "Updated.";
52+
addStatus("Updated.");
4953
}
5054

5155
void setupGuiEventHandlers() {
@@ -68,19 +72,29 @@ void setupGuiEventHandlers() {
6872

6973
startButton.onClick.listen((e) {
7074
trees.active = true;
75+
addStatus("Started.");
7176
});
77+
7278
stopButton.onClick.listen((e) {
7379
trees.active = false;
80+
addStatus("Stopped.");
7481
});
82+
7583
resetButton.onClick.listen((e) {
76-
statusDisplay.text = "Building world...";
84+
addStatus("Building world...");
7785
trees.reset();
78-
statusDisplay.text = "World built.";
86+
addStatus("World built.");
7987
});
88+
8089
mountainsButton.onClick.listen((e) {
90+
addStatus("Building mountains...");
8191
trees.addMountains();
92+
addStatus("Mountains built.");
8293
});
94+
8395
lochsButton.onClick.listen((e) {
96+
addStatus("Building lochs...");
8497
trees.addWater();
98+
addStatus("Lochs built.");
8599
});
86100
}

‎web/styles.css‎

Lines changed: 42 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,47 @@ html, body {
1010
}
1111

1212
button {
13-
width: 150px;
14-
height: 100px;
15-
border-radius: 142px;
13+
width: 60px;
14+
height: 60px;
15+
border-radius: 22px;
16+
border: 0px;
17+
}
18+
19+
.wide-button {
20+
width: 100px;
21+
height: 60px;
22+
border-radius: 22px;
1623
border: 0px;
24+
}
25+
26+
.status-panel {
27+
background-color: beige;
28+
height: 100px;
29+
overflow-y: scroll;
30+
margin-top: 5px;
31+
}
32+
33+
.slidelabel {
34+
text-align: center;
35+
width: 80px;
36+
display: inline-block;
37+
}
38+
39+
.control-panel {
40+
width: 100%;
41+
background-color: cornflowerblue;
42+
padding: 5px;
43+
border: groove 1px darkgray;
44+
}
45+
46+
.render {
47+
width: 540px;
48+
height: 540px;
49+
border: groove 1px darkgray;
50+
border-radius: 2px;
51+
}
52+
53+
.app-title {
54+
font-size: larger;
55+
text-align: center;
1756
}

0 commit comments

Comments
 (0)