diff --git a/index.html b/index.html
index e69de29..473b572 100644
--- a/index.html
+++ b/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+ Tic tac toe
+
+
+
+
+
+
+
Player selection
+
+
+
+
+
+
+
+
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..f4edadc
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,28 @@
+{
+ "name": "tic-tac-toe-game",
+ "version": "1.0.0",
+ "lockfileVersion": 2,
+ "requires": true,
+ "packages": {
+ "": {
+ "name": "tic-tac-toe-game",
+ "version": "1.0.0",
+ "license": "ISC",
+ "dependencies": {
+ "emoji-picker-element": "^1.8.2"
+ }
+ },
+ "node_modules/emoji-picker-element": {
+ "version": "1.8.2",
+ "resolved": "https://registry.npmjs.org/emoji-picker-element/-/emoji-picker-element-1.8.2.tgz",
+ "integrity": "sha512-XNSuntOOz1+JBklOqj+tqJqbInp88i12JXv0ZyQNCaHlkAlUf7Ak9e857S/uVTFlVtA6pJ6qeXLxvMdrL0ngFQ=="
+ }
+ },
+ "dependencies": {
+ "emoji-picker-element": {
+ "version": "1.8.2",
+ "resolved": "https://registry.npmjs.org/emoji-picker-element/-/emoji-picker-element-1.8.2.tgz",
+ "integrity": "sha512-XNSuntOOz1+JBklOqj+tqJqbInp88i12JXv0ZyQNCaHlkAlUf7Ak9e857S/uVTFlVtA6pJ6qeXLxvMdrL0ngFQ=="
+ }
+ }
+}
diff --git a/package.json b/package.json
index c5098fe..2cb6e39 100644
--- a/package.json
+++ b/package.json
@@ -7,5 +7,8 @@
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Francisco Pessano",
- "license": "ISC"
+ "license": "ISC",
+ "dependencies": {
+ "emoji-picker-element": "^1.8.2"
+ }
}
diff --git a/script.js b/script/index.js
similarity index 100%
rename from script.js
rename to script/index.js
diff --git a/styles/styles.css b/styles/styles.css
index e69de29..683f234 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -0,0 +1,122 @@
+html, body {
+ height: 100%;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+ overflow-y: hidden;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+ background-color: #dd7979;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+button {
+ cursor: pointer;
+}
+
+.player-selection {
+ background-color: #fff;
+ height: 33vh;
+ width: 50vw;
+ border-radius: 6px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ box-shadow: 0px 3px 10px #000;
+}
+.player-selection h1 {
+ user-select: none;
+}
+.player-selection form {
+ display: flex;
+ width: 100%;
+}
+.player-selection form .player {
+ width: 40%;
+}
+.player-selection form .player input {
+ height: 5vh;
+ box-sizing: content-box;
+ outline: none;
+ font-size: 14pt;
+}
+.player-selection form .player .name-input {
+ width: 100%;
+}
+.player-selection form .player .symbol-input {
+ margin-top: 1vh;
+ width: 5vw;
+}
+.player-selection form .player .symbol-container {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ margin-top: 1vh;
+}
+.player-selection form .player button {
+ box-sizing: content-box;
+ height: 5vh;
+}
+.player-selection form .player.player-1 {
+ padding-left: 10%;
+ padding-right: 2.5%;
+}
+.player-selection form .player.player-1 .symbol-container {
+ width: 103%;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ margin-top: 1vh;
+}
+.player-selection form .player.player-1 .symbol-container .symbol-input {
+ margin-top: 0px;
+ margin-left: 1vw;
+}
+.player-selection form .player.player-2 {
+ padding-right: 10%;
+ padding-left: 2.5%;
+}
+.player-selection form .player.player-2 .symbol-container .symbol-input {
+ margin-top: 0px;
+ margin-right: 1vw;
+}
+.player-selection button#start {
+ width: 50%;
+ height: 6vh;
+ margin-top: 1vh;
+ background-color: #a6ff6a;
+ color: rgba(0, 0, 0, 0.72);
+ font-size: 14pt;
+ border: none;
+ box-shadow: 0px 3px #555555;
+ transition: 0.3s ease-in-out;
+}
+.player-selection button#start.pressed {
+ transition: 0.3s ease-in-out;
+ box-shadow: none;
+}
+
+.emoji-picker-container {
+ background-color: rgba(0, 0, 0, 0.404);
+ transition: 0.4s ease-in-out;
+ opacity: 100%;
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.emoji-picker-container.hidden {
+ opacity: 0%;
+ transform: translateY(100vh);
+ background-color: #dd7979;
+ transition: 0.4s ease-in-out;
+}
+
+/*# sourceMappingURL=styles.css.map */
diff --git a/styles/styles.css.map b/styles/styles.css.map
new file mode 100644
index 0000000..997c042
--- /dev/null
+++ b/styles/styles.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;EAEI;EAEA;EAEA;;;AAGJ;EAEI;EACA;EAEA;EAEA;EACA;EACA;;;AAGJ;EAEI;;;AAGJ;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EACA;EAEA;;AAEA;EAEG;;AAGH;EAEI;EAEA;;AAEA;EAKI;;AAEA;EAEI;EACA;EACA;EAEA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;AAGJ;EAEI;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI;EACA;;AAIR;EAEI;EACA;;AAEA;EAEI;EAEA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;;AAKZ;EAEI;EACA;;AAII;EAEI;EACA;;AAMhB;EAEI;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EAEA;;AAGJ;EAEI;EAEA;;;AAIR;EAEI;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;;AAGJ;EAEI;EACA;EAEA;EAEA","file":"styles.css"}
\ No newline at end of file
diff --git a/styles/styles.scss b/styles/styles.scss
index e69de29..3660828 100644
--- a/styles/styles.scss
+++ b/styles/styles.scss
@@ -0,0 +1,188 @@
+html, body {
+
+ height: 100%;
+
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+ overflow-y: hidden;
+}
+
+body {
+
+ margin: 0;
+ padding: 0;
+
+ background-color: rgb(221, 121, 121);
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+button {
+
+ cursor: pointer;
+}
+
+.player-selection {
+
+ background-color: #fff;
+
+ height: 33vh;
+ width: 50vw;
+
+ border-radius: 6px;
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ box-shadow: 0px 3px 10px #000;
+
+ h1 {
+
+ user-select: none;
+ }
+
+ form {
+
+ display: flex;
+ // justify-content: space-around;
+ width: 100%;
+
+ .player {
+
+ // display: flex;
+ // flex-direction: column;
+
+ width: 40%;
+
+ input {
+
+ height: 5vh;
+ box-sizing: content-box;
+ outline: none;
+
+ font-size: 14pt;
+ }
+
+ .name-input {
+
+ width: 100%;
+ }
+
+ .symbol-input{
+
+ margin-top: 1vh;
+ width: 5vw;
+ }
+
+ .symbol-container {
+
+ width: 100%;
+
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+
+ margin-top: 1vh;
+ }
+
+ button {
+
+ box-sizing: content-box;
+ height: 5vh;
+ }
+ }
+
+ .player.player-1 {
+
+ padding-left: 10%;
+ padding-right: 2.5%;
+
+ .symbol-container {
+
+ width: 103%;
+
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+
+ margin-top: 1vh;
+
+ .symbol-input {
+
+ margin-top: 0px;
+ margin-left: 1vw;
+ }
+ }
+ }
+
+ .player.player-2 {
+
+ padding-right: 10%;
+ padding-left: 2.5%;
+
+ .symbol-container {
+
+ .symbol-input {
+
+ margin-top: 0px;
+ margin-right: 1vw;
+ }
+ }
+ }
+ }
+
+ button#start {
+
+ width: 50%;
+ height: 6vh;
+
+ margin-top: 1vh;
+
+ background-color: rgb(166, 255, 106);
+ color: rgba(0, 0, 0, 0.72);
+ font-size: 14pt;
+
+ border: none;
+
+ box-shadow: 0px 3px rgb(85, 85, 85);
+
+ transition: 0.3s ease-in-out;
+ }
+
+ button#start.pressed {
+
+ transition: 0.3s ease-in-out;
+
+ box-shadow: none;
+ }
+}
+
+.emoji-picker-container {
+
+ background-color: rgba(0, 0, 0, 0.404);
+
+ transition: 0.4s ease-in-out;
+ opacity: 100%;
+
+ height: 100%;
+ width: 100%;
+
+ position: absolute;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.emoji-picker-container.hidden {
+
+ opacity: 0%;
+ transform: translateY(100vh);
+
+ background-color: rgb(221, 121, 121);
+
+ transition: 0.4s ease-in-out;
+}
\ No newline at end of file