Style circles and initialize state

css/main.css

@@ -0,0 +1,24 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+section {
+  display: grid;
+  grid-template-columns: repeat(7, 10vmin);
+  grid-template-rows: repeat(6, 10vmin);
+  grid-gap: 1vmin;
+}
+
+section div {
+  border-radius: 50%;
+  border: 1px solid grey;
+}

js/main.js

@@ -1,8 +1,12 @@
 /*----- constants -----*/
-
+const COLORS = {
+  '0': 'white',
+  '1': 'purple',
+  '-1': 'lime'
+};
 
 /*----- app's state (variables) -----*/ 
-
+let board, turn, winner;
 
 /*----- cached element references -----*/
 
@@ -10,4 +14,18 @@
 /*----- event listeners -----*/ 
 
 
-/*----- functions -----*/
+/*----- functions -----*/
+
+function init() {
+  board = [
+    [0, 0, 0, 0, 0, 0],   // column 1 (index 0)
+    [0, 0, 0, 0, 0, 0],   // column 2 (index 1)
+    [0, 0, 0, 0, 0, 0],   // column 3 (index 2)
+    [0, 0, 0, 0, 0, 0],   // column 4 (index 3)
+    [0, 0, 0, 0, 0, 0],   // column 5 (index 4)
+    [0, 0, 0, 0, 0, 0],   // column 6 (index 5)
+    [0, 0, 0, 0, 0, 0],   // column 7 (index 6)
+  ];
+  turn = 1;
+  winner = null;  // 1, -1, null (no winner), 'T' (tie)
+}