game-of-life-theme 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: a008b364820c3ec6f9c4966a53aea4fb0b9a5a8b
4
- data.tar.gz: 6979462faab61176702b3313cc186e9924c8de76
3
+ metadata.gz: 6c485423499a8d4afa52e0d8e76ad32792b34884
4
+ data.tar.gz: dc50d099af260195fd7d2b95fc077305306e60c5
5
5
  SHA512:
6
- metadata.gz: d586936652e6f99b838dab5ec9ae6c96e9aa5bc60ea6fddf26b27b0fd346da22066de3747ec1df6b87a978391ffac8e44ecd51ca63cccbf505aa8955ffab03aa
7
- data.tar.gz: ad31e26d34bad95400ee74d98b724dc3d2c56036561c79b2e63b2e3b532edfaa75dd4f97829a801ac830c7e8cce25f90162087a980ff77673650f633d78608fe
6
+ metadata.gz: 28e935137e49056806870cd1db6c95531e4a6ca8ac409387ce326079d92ff0fd36ab4f2214694de1bce070b8fe94578d14bb9842ada8ffc8db135c42b4a459b7
7
+ data.tar.gz: 8bba3fe00efd9f7b6eb38cd7c77d30beb61cd9afcb3a4afa16f7cdc4baf44eeed660edaef6ce43c1c24559f6273f4cb1a3435ca6fd1f0fd5f3676ff88de587c5
data/README.md CHANGED
@@ -60,3 +60,28 @@ License](https://opensource.org/licenses/MIT).
60
60
  - suppose that Ruby, Bundler and Jekyll are in place
61
61
  - `jekyll new-theme <theme-name>`
62
62
  - update `.gemspec` file
63
+
64
+ ## Theme
65
+
66
+ ### Usage
67
+
68
+ Lines similar to the following will plot a Game of life strip
69
+
70
+ ```js
71
+ board = new Board(columns, rows);
72
+ board.fill(starting_column, ending_column, starting_row, ending_row);
73
+ ```
74
+
75
+ ### Functionality
76
+
77
+ - if your eyes are a bit tired and you'd prefer to quietly read a page, type `q`
78
+ - type `i` to start the Insert Mode in order to create genarations
79
+ - with a click of a mouse new cells will be randomily created around
80
+ - if you are feeling happy, drag mouse to create more
81
+ - press `ESC` to end the Insert Mode
82
+ - press any key to change the color
83
+ - press `SHIFT` to restart Game of life
84
+
85
+ ToDo:
86
+
87
+ Show mode and commands in the UI
@@ -2,14 +2,11 @@
2
2
  <html lang="{{ page.lang | default: site.lang | default: "en" }}">
3
3
  {% include head.html %}
4
4
  <body>
5
- <div class="header flex">
6
- <div class="wrapper">
7
5
  <div class="content">
8
6
  {{ content }}
9
- </div>
10
- </div>
11
7
  </div>
12
8
  </body>
13
9
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
10
+ <script src="{{ site.baseurl }}/assets/board.js"></script>
14
11
  <script src="{{ site.baseurl }}/assets/game_of_life.js"></script>
15
12
  </html>
data/_layouts/home.html CHANGED
@@ -2,7 +2,7 @@
2
2
  layout: default
3
3
  ---
4
4
 
5
- <div class="card grey-background">
5
+ <div class="card yellow-background">
6
6
  {% if page.title %}
7
7
  <h1 class="page-heading">{{ page.title }}</h1>
8
8
  {% endif %}
data/_layouts/post.html CHANGED
@@ -2,7 +2,7 @@
2
2
  layout: default
3
3
  ---
4
4
 
5
- <div class="card grey-background">
5
+ <div class="card yellow-background">
6
6
  <div class="post-title {% if page.feature %} feature {% endif %}">
7
7
  <h1>{{ page.title }}</h1>
8
8
  <h4>{{ page.date | date_to_string }}</h4>
data/assets/board.js ADDED
@@ -0,0 +1,49 @@
1
+ class Board {
2
+ constructor(TempWidth, TempHeight){
3
+ this.rows = TempHeight;
4
+ this.columns = TempWidth;
5
+
6
+ this.empty();
7
+ }
8
+
9
+ empty() {
10
+ this.cells = new Array(this.columns);
11
+ for (var i = 0; i < this.columns; i++) {
12
+ this.cells[i] = new Array(this.rows);
13
+ };
14
+
15
+ this.cells = Array(this.columns).fill().map(
16
+ () => Array(this.rows).fill(0));
17
+ }
18
+
19
+ fill(columns_start, columns_end, rows_start, rows_end) {
20
+ for (var x = columns_start; x < columns_end; x++) {
21
+ for (var y = rows_start; y < rows_end; y++) {
22
+ this.cells[x][y] = floor(random(2));
23
+ }
24
+ }
25
+ }
26
+
27
+ static generate_next(board) {
28
+ var nextVar = new Board(board.columns, board.rows);
29
+
30
+ for (var x = 1; x < board.columns - 1; x++) {
31
+ for (var y = 1; y < board.rows - 1; y++) {
32
+ var neighbors = 0;
33
+
34
+ for (var i = -1; i <= 1; i++) {
35
+ for (var j = -1; j <= 1; j++) {
36
+ neighbors += board.cells[x+i][y+j];
37
+ }
38
+ }
39
+
40
+ neighbors -= board.cells[x][y];
41
+ if ((board.cells[x][y] == 1) && (neighbors < 2)) nextVar.cells[x][y] = 0; // Loneliness
42
+ else if ((board.cells[x][y] == 1) && (neighbors > 3)) nextVar.cells[x][y] = 0; // Overpopulation
43
+ else if ((board.cells[x][y] == 0) && (neighbors == 3)) nextVar.cells[x][y] = 1; // Reproduction
44
+ else nextVar.cells[x][y] = board.cells[x][y]; // Stasis
45
+ }
46
+ }
47
+ return(nextVar);
48
+ }
49
+ }
@@ -0,0 +1,38 @@
1
+ .yellow-background {
2
+ background-color: #fff5e6;
3
+ }
4
+
5
+ .card {
6
+ font-family: Lato, sans-serif;
7
+ font-size: 15px;
8
+ padding: 2em;
9
+ border-radius: 2px;
10
+ min-width: 600px;
11
+ }
12
+
13
+ .card:hover {
14
+ position: relative;
15
+ top: -5px;
16
+ left: -5px;
17
+ box-shadow: 5px 5px 5px #969696;
18
+ }
19
+
20
+ .content {
21
+ max-width: 750px;
22
+ margin: 0 auto;
23
+ position:relative;
24
+ padding: 100px 100px;
25
+ justify-content: center;
26
+ display: flex;
27
+ }
28
+
29
+ /**
30
+ * Figures
31
+ */
32
+ figure > img {
33
+ display: block;
34
+ }
35
+
36
+ figcaption {
37
+ font-size: $small-font-size;
38
+ }
@@ -0,0 +1,88 @@
1
+ .highlight {
2
+ background: #F8FAFC;
3
+ @extend %vertical-rhythm;
4
+
5
+ .c { color: #998; font-style: italic } // Comment
6
+ .err { color: #a61717; background-color: #e3d2d2 } // Error
7
+ .k { font-weight: bold } // Keyword
8
+ .o { font-weight: bold } // Operator
9
+ .cm { color: #998; font-style: italic } // Comment.Multiline
10
+ .cp { color: #999; font-weight: bold } // Comment.Preproc
11
+ .c1 { color: #998; font-style: italic } // Comment.Single
12
+ .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special
13
+ .gd { color: #000; background-color: #fdd } // Generic.Deleted
14
+ .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
15
+ .ge { font-style: italic } // Generic.Emph
16
+ .gr { color: #a00 } // Generic.Error
17
+ .gh { color: #999 } // Generic.Heading
18
+ .gi { color: #000; background-color: #dfd } // Generic.Inserted
19
+ .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
20
+ .go { color: #888 } // Generic.Output
21
+ .gp { color: #555 } // Generic.Prompt
22
+ .gs { font-weight: bold } // Generic.Strong
23
+ .gu { color: #aaa } // Generic.Subheading
24
+ .gt { color: #a00 } // Generic.Traceback
25
+ .kc { font-weight: bold } // Keyword.Constant
26
+ .kd { font-weight: bold } // Keyword.Declaration
27
+ .kp { font-weight: bold } // Keyword.Pseudo
28
+ .kr { font-weight: bold } // Keyword.Reserved
29
+ .kt { color: #458; font-weight: bold } // Keyword.Type
30
+ .m { color: #099 } // Literal.Number
31
+ .s { color: #d14 } // Literal.String
32
+ .na { color: #008080 } // Name.Attribute
33
+ .nb { color: #0086B3 } // Name.Builtin
34
+ .nc { color: #458; font-weight: bold } // Name.Class
35
+ .no { color: #008080 } // Name.Constant
36
+ .ni { color: #800080 } // Name.Entity
37
+ .ne { color: #900; font-weight: bold } // Name.Exception
38
+ .nf { color: #900; font-weight: bold } // Name.Function
39
+ .nn { color: #555 } // Name.Namespace
40
+ .nt { color: #000080 } // Name.Tag
41
+ .nv { color: #008080 } // Name.Variable
42
+ .ow { font-weight: bold } // Operator.Word
43
+ .w { color: #bbb } // Text.Whitespace
44
+ .mf { color: #099 } // Literal.Number.Float
45
+ .mh { color: #099 } // Literal.Number.Hex
46
+ .mi { color: #099 } // Literal.Number.Integer
47
+ .mo { color: #099 } // Literal.Number.Oct
48
+ .sb { color: #d14 } // Literal.String.Backtick
49
+ .sc { color: #d14 } // Literal.String.Char
50
+ .sd { color: #d14 } // Literal.String.Doc
51
+ .s2 { color: #d14 } // Literal.String.Double
52
+ .se { color: #d14 } // Literal.String.Escape
53
+ .sh { color: #d14 } // Literal.String.Heredoc
54
+ .si { color: #d14 } // Literal.String.Interpol
55
+ .sx { color: #d14 } // Literal.String.Other
56
+ .sr { color: #009926 } // Literal.String.Regex
57
+ .s1 { color: #d14 } // Literal.String.Single
58
+ .ss { color: #990073 } // Literal.String.Symbol
59
+ .bp { color: #999 } // Name.Builtin.Pseudo
60
+ .vc { color: #008080 } // Name.Variable.Class
61
+ .vg { color: #008080 } // Name.Variable.Global
62
+ .vi { color: #008080 } // Name.Variable.Instance
63
+ .il { color: #099 } // Literal.Number.Integer.Long
64
+ }
65
+
66
+ pre,
67
+ code {
68
+ @include relative-font-size(0.9375);
69
+ border: 1px solid $grey-color-light;
70
+ border-radius: 3px;
71
+ background-color: #F8FAFC;
72
+
73
+ }
74
+
75
+ code {
76
+ padding: 1px 5px;
77
+ }
78
+
79
+ pre {
80
+ padding: 8px 12px;
81
+ overflow-x: auto;
82
+
83
+ > code {
84
+ border: 0;
85
+ padding-right: 0;
86
+ padding-left: 0;
87
+ }
88
+ }
@@ -1,98 +1,93 @@
1
1
  var w;
2
2
  var columns;
3
3
  var rows;
4
- var board;
5
- var next;
4
+ var insert_mode;
5
+ let board, next;
6
6
 
7
7
  function setup() {
8
8
  createCanvas(windowWidth, windowHeight);
9
9
  w = 7;
10
+ insert_mode = 0;
10
11
  columns = floor(width/w);
11
12
  rows = floor(height/w);
12
13
 
13
- board = create_board();
14
- next = create_board();
15
- randomize_color();
16
- init();
17
- }
18
-
19
- function create_board(){
20
- var boardVar;
21
- boardVar = new Array(columns);
22
- for (var i = 0; i < columns; i++) {
23
- boardVar[i] = new Array(rows);
24
- }
25
- return(boardVar);
26
- }
27
-
28
- function randomize_color(){
29
- r = random(255);
30
- g = random(255);
31
- b = random(255);
14
+ randomize_colors();
15
+ board = new Board(columns, rows);
16
+ board.fill(0, columns, 0, 30);
17
+ next = new Board(columns, rows);
18
+ next.empty();
32
19
  }
33
20
 
34
21
  function draw() {
35
22
  background(253, 253, 253);
36
23
  generate();
24
+ draw_board();
25
+ }
26
+
27
+ function draw_board(){
37
28
  for ( var i = 0; i < columns;i++) {
38
29
  for ( var j = 0; j < rows;j++) {
39
- if ((board[i][j] == 1)) fill(r, g, b);
30
+ if ((board.cells[i][j] == 1)) fill(r, g, b);
40
31
  else fill(253, 253, 255);
41
32
  stroke(253, 253, 255);
42
33
  rect(i*w, j*w, w-1, w-1);
43
34
  }
44
35
  }
36
+ }
45
37
 
38
+ function generate(){
39
+ var temp = board;
40
+ board = Board.generate_next(board);
41
+ next = temp;
46
42
  }
47
43
 
48
44
  function windowResized() {
49
- resizeCanvas(windowWidth, windowHeight);
45
+ resizeCanvas(windowWidth, windowHeight);
46
+ }
47
+
48
+ function mouseDragged() {
49
+ if (insert_mode == 1) {
50
+ var tmpX = floor(mouseX/w);
51
+ var tmpY = floor( mouseY/w);
52
+
53
+ board.fill(tmpX - 1, tmpX + 1, tmpY - 1, tmpY + 1);
54
+ }
55
+ return false;
50
56
  }
51
57
 
52
58
  function mousePressed() {
53
- randomize_color();
59
+ if (insert_mode == 1) {
60
+ var tmpX = floor(mouseX/w);
61
+ var tmpY = floor( mouseY/w);
62
+
63
+ board.fill(tmpX - 3, tmpX + 3, tmpY - 3, tmpY + 3);
64
+ };
65
+
66
+ return false;
54
67
  }
55
68
 
56
69
  function keyPressed(){
57
- randomize_color();
58
- init();
70
+ if (keyCode === ESCAPE) insert_mode = 0;
71
+ else if (keyCode === SHIFT) {
72
+ randomize_colors();
73
+ board.empty()
74
+ board.fill(0, columns, 0, 30);
75
+ } else randomize_colors();
59
76
  }
60
77
 
61
- function mouseDragged(){
62
- i = floor(mouseX/w);
63
- j = floor(mouseY/w);
64
- next[i][j] = 1;
78
+ function keyTyped(){
79
+ if (key === 'i') insert_mode = 1;
80
+ else if (key === 'q') hide_game_of_life();
65
81
  }
66
82
 
67
- function init() {
68
- for (var i = 0; i < columns; i++) {
69
- for (var j = 0; j < rows; j++) {
70
- if (i == 0 || j == 0 || i == columns-1 || j == rows-1) board[i][j] = 0;
71
- else board[i][j] = floor(random(2));
72
- next[i][j] = 0;
73
- }
74
- }
83
+ function randomize_colors(){
84
+ r = random(255);
85
+ g = random(255);
86
+ b = random(255);
75
87
  }
76
88
 
77
- function generate() {
78
- for (var x = 1; x < columns - 1; x++) {
79
- for (var y = 1; y < rows - 1; y++) {
80
- var neighbors = 0;
81
- for (var i = -1; i <= 1; i++) {
82
- for (var j = -1; j <= 1; j++) {
83
- neighbors += board[x+i][y+j];
84
- }
85
- }
86
-
87
- neighbors -= board[x][y];
88
- if ((board[x][y] == 1) && (neighbors < 2)) next[x][y] = 0; // Loneliness
89
- else if ((board[x][y] == 1) && (neighbors > 3)) next[x][y] = 0; // Overpopulation
90
- else if ((board[x][y] == 0) && (neighbors == 3)) next[x][y] = 1; // Reproduction
91
- else next[x][y] = board[x][y]; // Stasis
92
- }
93
- }
94
-
95
- var temp = board;
96
- board = next;
97
- next = temp;
89
+ function hide_game_of_life(){
90
+ r = 253;
91
+ g = 253;
92
+ b = 255;
98
93
  }
Binary file
data/assets/main.css CHANGED
@@ -1,66 +1,26 @@
1
- %extend1 {
2
- margin: 0;
3
- padding: 0;
4
- width: 100%;
5
- height: 100%;
6
- font-size: 100%;
7
- }
1
+ @import url("css/code.css");
2
+ @import url("css/card.css");
8
3
 
9
- html {
10
- @extend %extend1;
4
+ html, body {
5
+ box-sizing: border-box;
11
6
  }
12
7
 
13
- body {
14
- background-position: center center;
15
- background-attachment: fixed;
16
- background-image: none !important;
17
- background: $white;
18
- }
19
-
20
- .grey-background {
21
- background-color: #fff5e6;
22
- }
23
-
24
- .card {
25
- font-family: Fira Sans,sans-serif;
26
- font-size: 15px;
27
- margin: 10px;
28
- padding: 2em;
29
- border-radius: 2px;
8
+ html {
9
+ width: 100%;
10
+ height: 100%;
11
+ font-size: 100%;
30
12
  }
31
13
 
32
- .card:hover {
33
- position: relative;
34
- top: -5px;
35
- left: -5px;
36
- box-shadow: 5px 5px 5px #969696;
14
+ h1, h4 {
15
+ text-align: center;
37
16
  }
38
17
 
39
- .content {
40
- -moz-osx-font-smoothing: grayscale;
41
- -webkit-font-smoothing: antialiased !important;
42
- -moz-font-smoothing: antialiased !important;
43
- text-rendering: optimizelegibility !important;
44
- text-align: justify;
45
- @media #{$small} {
46
- padding: 0 .5em;
47
- }
18
+ h1, h2, h4 {
19
+ padding: 20px;
48
20
  }
49
21
 
50
- .header {
51
- height: 100%;
52
- position: relative;
53
- margin: 200px 300px 100px 300px;
54
- min-height: 300px;
55
- min-width: 100px;
56
- text-align: left;
57
- color: $white;
58
- @media #{$small} {
59
- display: block !important;
60
- }
61
- @media only screen and (max-height: 500px) {
62
- display: block !important;
63
- }
22
+ body {
23
+ vertical-align: middle;
64
24
  }
65
25
 
66
26
  canvas {
@@ -72,109 +32,7 @@ canvas {
72
32
  margin-left: 0em;
73
33
  }
74
34
 
75
- .highlight {
76
- background: #F8FAFC;
77
- @extend %vertical-rhythm;
78
-
79
- .c { color: #998; font-style: italic } // Comment
80
- .err { color: #a61717; background-color: #e3d2d2 } // Error
81
- .k { font-weight: bold } // Keyword
82
- .o { font-weight: bold } // Operator
83
- .cm { color: #998; font-style: italic } // Comment.Multiline
84
- .cp { color: #999; font-weight: bold } // Comment.Preproc
85
- .c1 { color: #998; font-style: italic } // Comment.Single
86
- .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special
87
- .gd { color: #000; background-color: #fdd } // Generic.Deleted
88
- .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
89
- .ge { font-style: italic } // Generic.Emph
90
- .gr { color: #a00 } // Generic.Error
91
- .gh { color: #999 } // Generic.Heading
92
- .gi { color: #000; background-color: #dfd } // Generic.Inserted
93
- .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
94
- .go { color: #888 } // Generic.Output
95
- .gp { color: #555 } // Generic.Prompt
96
- .gs { font-weight: bold } // Generic.Strong
97
- .gu { color: #aaa } // Generic.Subheading
98
- .gt { color: #a00 } // Generic.Traceback
99
- .kc { font-weight: bold } // Keyword.Constant
100
- .kd { font-weight: bold } // Keyword.Declaration
101
- .kp { font-weight: bold } // Keyword.Pseudo
102
- .kr { font-weight: bold } // Keyword.Reserved
103
- .kt { color: #458; font-weight: bold } // Keyword.Type
104
- .m { color: #099 } // Literal.Number
105
- .s { color: #d14 } // Literal.String
106
- .na { color: #008080 } // Name.Attribute
107
- .nb { color: #0086B3 } // Name.Builtin
108
- .nc { color: #458; font-weight: bold } // Name.Class
109
- .no { color: #008080 } // Name.Constant
110
- .ni { color: #800080 } // Name.Entity
111
- .ne { color: #900; font-weight: bold } // Name.Exception
112
- .nf { color: #900; font-weight: bold } // Name.Function
113
- .nn { color: #555 } // Name.Namespace
114
- .nt { color: #000080 } // Name.Tag
115
- .nv { color: #008080 } // Name.Variable
116
- .ow { font-weight: bold } // Operator.Word
117
- .w { color: #bbb } // Text.Whitespace
118
- .mf { color: #099 } // Literal.Number.Float
119
- .mh { color: #099 } // Literal.Number.Hex
120
- .mi { color: #099 } // Literal.Number.Integer
121
- .mo { color: #099 } // Literal.Number.Oct
122
- .sb { color: #d14 } // Literal.String.Backtick
123
- .sc { color: #d14 } // Literal.String.Char
124
- .sd { color: #d14 } // Literal.String.Doc
125
- .s2 { color: #d14 } // Literal.String.Double
126
- .se { color: #d14 } // Literal.String.Escape
127
- .sh { color: #d14 } // Literal.String.Heredoc
128
- .si { color: #d14 } // Literal.String.Interpol
129
- .sx { color: #d14 } // Literal.String.Other
130
- .sr { color: #009926 } // Literal.String.Regex
131
- .s1 { color: #d14 } // Literal.String.Single
132
- .ss { color: #990073 } // Literal.String.Symbol
133
- .bp { color: #999 } // Name.Builtin.Pseudo
134
- .vc { color: #008080 } // Name.Variable.Class
135
- .vg { color: #008080 } // Name.Variable.Global
136
- .vi { color: #008080 } // Name.Variable.Instance
137
- .il { color: #099 } // Literal.Number.Integer.Long
138
- }
139
-
140
- pre,
141
- code {
142
- @include relative-font-size(0.9375);
143
- border: 1px solid $grey-color-light;
144
- border-radius: 3px;
145
- background-color: #F8FAFC;
146
-
147
- }
148
-
149
- code {
150
- padding: 1px 5px;
151
- }
152
-
153
- pre {
154
- padding: 8px 12px;
155
- overflow-x: auto;
156
-
157
- > code {
158
- border: 0;
159
- padding-right: 0;
160
- padding-left: 0;
161
- }
162
- }
163
-
164
35
  img {
165
36
  max-width: 100%;
166
37
  vertical-align: middle;
167
38
  }
168
-
169
-
170
-
171
- /**
172
- * Figures
173
- */
174
- figure > img {
175
- display: block;
176
- }
177
-
178
- figcaption {
179
- font-size: $small-font-size;
180
- }
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: game-of-life-theme
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.0
4
+ version: 0.4.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Milana
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2018-03-19 00:00:00.000000000 Z
11
+ date: 2018-03-26 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -66,8 +66,11 @@ files:
66
66
  - _layouts/home.html
67
67
  - _layouts/page.html
68
68
  - _layouts/post.html
69
+ - assets/board.js
70
+ - assets/css/card.css
71
+ - assets/css/code.css
69
72
  - assets/game_of_life.js
70
- - assets/img/2017-05-29-01-rg-bgd.jpg
73
+ - assets/img/2018-03-18-01-haskii.png
71
74
  - assets/main.css
72
75
  homepage: https://github.com/mimimalizam/game-of-life
73
76
  licenses:
Binary file