From c74bc959eefcabcecea0acfc58746c628842a635 Mon Sep 17 00:00:00 2001
From: kolarix999 <94450116+kolarix999@users.noreply.github.com>
Date: Thu, 16 Mar 2023 02:39:45 +0100
Subject: [PATCH] initial project commit
---
css/main.scss | 2 +
css/scss/reset.scss | 41 +++++++
css/scss/style.scss | 0
css/styles.css | 281 ++++++++++++++++++++++++++++++++++++++++++++
index.html | 85 ++++++++++++++
js/scripts.js | 249 +++++++++++++++++++++++++++++++++++++++
6 files changed, 658 insertions(+)
create mode 100644 css/main.scss
create mode 100644 css/scss/reset.scss
create mode 100644 css/scss/style.scss
create mode 100644 css/styles.css
create mode 100644 index.html
create mode 100644 js/scripts.js
diff --git a/css/main.scss b/css/main.scss
new file mode 100644
index 0000000..95e7528
--- /dev/null
+++ b/css/main.scss
@@ -0,0 +1,2 @@
+@import "scss/reset.scss";
+@import "scss/style.scss";
\ No newline at end of file
diff --git a/css/scss/reset.scss b/css/scss/reset.scss
new file mode 100644
index 0000000..7a5e09d
--- /dev/null
+++ b/css/scss/reset.scss
@@ -0,0 +1,41 @@
+html, body, div, span,
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre,
+a, address, big, cite, code,
+em, img, small, strike, strong,
+b, u, i, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details,
+figure, figcaption, footer, header, hgroup,
+menu, nav, section {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
\ No newline at end of file
diff --git a/css/scss/style.scss b/css/scss/style.scss
new file mode 100644
index 0000000..e69de29
diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..88055af
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,281 @@
+/* Reset */
+* {
+ box-sizing: border-box;
+}
+html, h1, h2, h3, h4, h5, h6,
+p, a, em, img, strong,
+b, u, i, ol, ul, li,
+fieldset, form, label,
+article, aside, details,
+figure, figcaption, footer, header, hgroup,
+menu, nav, section {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ margin: 0;
+ padding: 0;
+ line-height: 1.4;
+ font-size: 16px;
+ color: #433c43;
+ min-height: 100vh;
+ font-family: 'Quicksand', sans-serif;
+}
+ol, ul {
+ list-style: none;
+}
+a, a:hover, a:visited {
+ text-decoration: none;
+}
+table {
+ width: 100%;
+ border-collapse: collapse;
+ border-spacing: 0;
+ border: 1px solid #433c43;
+ margin: 50px auto;
+}
+caption {
+ background: #433c43;
+ padding: 10px;
+ font-size: 22px;
+ color: #f3f3f3;
+ padding: 20px;
+ font-size: 28px;
+}
+tbody, tfoot, td {
+ border: 1px solid #433c43;
+ padding: 10px;
+}
+button {
+ border: none;
+ outline: none;
+ background-image: none;
+ background-color: #fff;
+ color: #433c43;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+}
+
+input {
+ border: 1px solid #433c43;
+ background-image:none;
+ background-color:transparent;
+ color: #433c43;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+}
+input::-webkit-input-placeholder,
+input::-moz-placeholder,
+input:-moz-placeholder,
+input:-ms-input-placeholder,
+input::placeholder {
+ color: #433c43;
+ opacity: 1;
+}
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+/* Global */
+.wrapper {
+ width: 100%;
+ max-width: 1240px;
+ padding: 0 20px;
+ margin: 0 auto;
+}
+
+/* Header */
+.header-wrapper {
+ padding: 20px;
+}
+.header-name {
+ font-size: 30px;
+ display: inline-block;
+}
+.header-sub {
+ display: inline-block;
+ font-size: 24px;
+ font-weight: 300;
+}
+
+/** Main **/
+#main-wrapper {
+ text-align: center;
+}
+/* New player */
+.new-player {
+ display: flex;
+ justify-content: center;
+ padding: 20px;
+}
+#add-player {
+ width: 100%;
+ max-width: 300px;
+ font-size: 18px;
+ padding: 20px 15px;
+ font-weight: 400;
+ height: 60px;
+}
+.btn#add {
+ font-size: 18px;
+ padding: 20px 15px;
+ height: 60px;
+ background: #433c43;
+ color: #f3f3f3;
+ cursor: pointer;
+ transition: all 0.4s ease;
+}
+
+.btn#add:hover {
+ background: #7d787d;
+ transition: all 0.4s ease;
+}
+
+/* Players list */
+#players-list {
+
+}
+
+.player {
+ padding: 10px;
+ font-size: 24px;
+ font-weight: 700;
+ font-style: italic;
+ text-transform: capitalize;
+}
+
+.player span {
+ font-weight: 300;
+ font-style: normal;
+}
+
+/* Modes */
+#modes {
+ margin: 20px 0;
+ font-weight: 700;
+}
+#select-mode {
+ position: relative;
+ display: inline-block;
+ width: 200px;
+ padding: 10px;
+ border: 1px solid #433c43;
+ cursor: pointer;
+ vertical-align: text-top;
+}
+#select-mode::after {
+ content: url('https://api.iconify.design/fa-caret-down.svg?color=%23433c43&height=14&inline=true');
+ position: absolute;
+ right: 20px;
+ top: 12px;
+
+}
+#modes-list {
+ border-left: 1px solid #433c43;
+ border-right: 1px solid #433c43;
+ width: 150px;
+ margin: 0 auto;
+}
+#modes-list li {
+ border-bottom: 1px solid #433c43;
+ padding: 10px;
+ cursor: pointer;
+}
+
+/* Start btn */
+.btn#start {
+ font-size: 22px;
+ padding: 20px 15px;
+ height: 80px;
+ width: 200px;
+ background: #433c43;
+ color: #f3f3f3;
+ cursor: pointer;
+ transition: all 0.4s ease;
+}
+
+.btn#start:hover {
+ background: #7d787d;
+ transition: all 0.4s ease;
+}
+
+/* Scores table */
+.player-score {
+ width: 80px;
+ padding: 5px;
+ border: none;
+ border-bottom: 1px solid #433c43;
+ font-size: 20px;
+ text-align: center;
+}
+input[disabled].player-score {
+ border: none;
+ color: #7d787d;
+}
+.next-round {
+ padding: 8px 15px;
+ background: #433c43;
+ color: #f3f3f3;
+ text-align: center;
+ font-size: 16px;
+ font-weight: 300;
+ cursor: pointer;
+ transition: all 0.4s ease;
+}
+
+.next-round:not(input[disabled]):hover {
+ background: #7d787d;
+ transition: all 0.4s ease;
+}
+button[disabled].next-round {
+ background: #7d787d;
+}
+
+.btn.new-game {
+ font-size: 22px;
+ padding: 15px;
+ height: 60px;
+ width: 250px;
+ background: #433c43;
+ color: #f3f3f3;
+ cursor: pointer;
+ transition: all 0.4s ease;
+}
+
+.btn.new-game:hover {
+ background: #7d787d;
+ transition: all 0.4s ease;
+}
+
+/* Additional table design */
+tbody tr {
+ height: 56px;
+}
+#active-players td:not(#round-number) {
+ font-size: 20px;
+ font-weight: 700;
+ text-transform: capitalize;
+}
+#active-players td:not(#round-number) span {
+ display: none;
+}
+tfoot {
+ font-weight: 700;
+ font-size: 25px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..e895d87
--- /dev/null
+++ b/index.html
@@ -0,0 +1,85 @@
+
+
+
+
+
+
+ Scord
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ SELECT MODE
+
+
+ - 201
+ - 301
+ - 501
+ - 701
+ - 1001
+
+
+
+
+
+ Game mode:
+
+
+ # |
+
+
+
+
+ = |
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/scripts.js b/js/scripts.js
new file mode 100644
index 0000000..16d83d7
--- /dev/null
+++ b/js/scripts.js
@@ -0,0 +1,249 @@
+var table = document.getElementById("game-table");
+var tableBody = table.getElementsByTagName('tbody')[0];
+var tableRow = table.getElementsByTagName('tr')[0];
+var tableFooter = table.getElementsByTagName('tfoot')[0];
+var footerRow = tableFooter.getElementsByTagName('tr')[0];
+//! todo , game mode validation before start
+var idCounter = 1;
+var name;
+var goal;
+var currentRoundScore = 0;
+var totalScore = 0;
+var leftToWin;
+
+var roundCounter = 1;
+var playerCounter = 1;
+
+
+// Add new player to list
+var playersList = document.getElementById("players-list");
+function addPlayer() {
+ var li = document.createElement("li");
+ li.setAttribute('class', 'player');
+ var playerValue = document.getElementById("add-player").value; //for reloaded or empty
+
+ var playerIncrement = playerCounter++;
+ var playerSpan = document.createElement("span");
+ //playerSpan.innerHTML = "Player " + playerIncrement + ": ";
+ var activePlayer = playerValue;
+
+ li.append(activePlayer);
+ if (playerValue === "") {
+ alert("No! Enter player name!");
+ } else {
+ playersList.appendChild(li);
+ }
+ document.getElementById("add-player").value = "";
+
+ // Show modes if at least 1 player entered
+ var modesWrapper = document.getElementById("modes");
+ var startBtn = document.getElementById("start");
+ var aP = document.querySelectorAll(".player").length;
+ console.log(playersList.length);
+ if (aP >= 1) {
+ modesWrapper.style.display = "block";
+ startBtn.style.display = "inline-block";
+ }
+}
+var input = document.getElementById("add-player");
+input.addEventListener("keyup", function() {
+ if (event.keyCode === 13) {
+ addPlayer();
+ }
+});
+
+// Modes list toggle
+var modes = document.getElementById("modes-list");
+
+function showModes() {
+ if (modes.style.display === "none") {
+ modes.style.display = "block";
+ } else {
+ modes.style.display = "none";
+ }
+}
+
+// Get mode, add li and replace value of select
+var activeMode = document.getElementById("active-mode");
+modes.addEventListener('click', function(ev) {
+ if (ev.target.tagName === 'LI') {
+ var selectedMode = ev.target.innerHTML;
+ var md = document.getElementById("select-mode");
+ md.innerHTML = selectedMode;
+ modes.style.display = "none";
+ activeMode.innerHTML = selectedMode;
+ }
+}, false);
+
+
+function startGame() {
+ var activePlayers = document.querySelectorAll(".player");
+ var playersArray = Array.prototype.slice.call(activePlayers);
+
+ var goalStr = activeMode.innerHTML;
+ goal = parseInt(goalStr);
+
+ // Creating input to use for each round
+ var roundInput = document.createElement("INPUT");
+ roundInput.setAttribute("type", "number");
+ roundInput.setAttribute("class", "player-score");
+
+ // Check for players and game mode
+ if (playersArray.length < 1) {
+ alert("No! Enter player name!");
+ }
+ // cannot get god damn isNaN to work, so its like this, via regex
+ if (!/^\d+(\.\d+)?/.exec(goal)) {
+ alert("No! Select game mode!");
+ } else {
+ table.style.display = "table";
+ var entry = document.getElementsByClassName("entry");
+ //var entryArr = Array.prototype.slice.call(entry);
+ for (var i = 0; i < entry.length; i++) {
+ entry[i].style.display = "none";
+ }
+
+ var playerScore;
+
+ // inserting player names in cells
+ var player = [];
+ var newCell;
+ for (var i = 0; i < playersArray.length; i++) {
+ player[i] = {
+ id: idCounter++,
+ name: name,
+ goal: goal,
+ currentRoundScore: currentRoundScore,
+ totalScore: totalScore,
+ leftToWin: leftToWin
+ };
+ var playerNames = playersArray[i].innerHTML;
+
+ player[i].name = playerNames;
+ console.log(playerNames);
+ player[i].leftToWin = player[i].goal;
+
+ var newCell = tableRow.insertCell(-1);
+ newCell.innerHTML = player[i].name;
+ var playerScore = goal;
+ var footerCell = footerRow.insertCell(-1);
+ footerCell.innerHTML = player[i].leftToWin;
+ }
+
+ var roundNext;
+
+ function addRow() {
+ var roundPlayers = playersArray.length;
+ var roundRow = tableBody.insertRow(-1);
+ var roundNumber = roundRow.insertCell(0);
+ var roundNumberIndex = roundCounter++;
+ roundNumber.innerHTML = roundNumberIndex;
+ var roundNext = roundRow.insertCell(-1);
+
+ // Next round
+ var roundNextBtn = document.createElement("BUTTON");
+ roundNextBtn.innerHTML = " + NEXT";
+ roundNextBtn.onclick = function() {
+ var thisRow = this.parentNode.parentNode;
+ var playersScoresList = thisRow.getElementsByClassName("player-score");
+ var playersScores = Array.prototype.slice.call(playersScoresList);
+
+ // First check if values are entered like numbers
+ for (var i = 0; i < playersScores.length; i++) {
+ var check = parseInt(playersScores[i].value, 10);
+ if (!/^\d+(\.\d+)?/.exec(check)) {
+ alert("No! Player is missing this round value! If you missed or went overboard, HA-HA! (write 0)");
+ return;
+ }
+ }
+
+
+ // Getting players round scores and calculating left to win
+ for (var i = 0; i < playersScores.length; i++) {
+ var score = parseInt(playersScores[i].value, 10);
+ player[i].currentRoundScore = score;
+ console.log(score);
+ player[i].totalScore += player[i].currentRoundScore;
+ player[i].leftToWin = goal - player[i].totalScore;
+ console.log(player[i].totalScore);
+
+ };
+
+ console.log(player);
+
+ // Remove existing row and create new with updated values
+ tableFooter.deleteRow(0);
+ var tableRowUpdated = tableFooter.insertRow(0);
+ var totalCell = tableRowUpdated.insertCell(0);
+ totalCell.innerHTML = "=";
+
+ // Getting players updated left to win and append in tfoot
+ for (var i = 0; i < playersArray.length; i++) {
+ var updatedLTW = player[i].leftToWin;
+ console.log("Player: " + player[i].name + " has " + updatedLTW + " to win");
+ var footerCellUpdated = tableRowUpdated.insertCell(-1);
+ footerCellUpdated.innerHTML = player[i].leftToWin;
+ }
+
+ //same as above
+ //for (key in player) {
+ // if (player.hasOwnProperty(key)) {
+ // console.log(player[key].leftToWin);
+ // var footerCellUpdated = tableRowUpdated.insertCell(-1);
+ // footerCellUpdated.innerHTML = player[key].leftToWin;
+ // }
+ //}
+
+ // Disable this rounds inputs
+ var inputs = thisRow.querySelectorAll("input");
+ var inputsArr = Array.prototype.slice.call(inputs);
+ console.log(inputsArr);
+ for (var i = 0; i < inputsArr.length; i++) {
+ inputsArr[i].setAttribute("disabled", "disabled")
+ }
+
+ // Are we done
+ for (var i = 0; i < playersArray.length; i++) {
+ if (player[i].leftToWin === 0) {
+ var winner = player[i].name;
+ var capitalWinner = winner.charAt(0).toUpperCase() + winner.substring(1);
+ alert("GG " + capitalWinner);
+ this.setAttribute("disabled", "disabled");
+ return;
+ }
+ }
+
+ addRow();
+
+ // Remove this Next button
+ roundNext.removeChild(roundNext.childNodes[0]);
+
+
+ };
+
+ // New round Next button
+ roundNextBtn.setAttribute("class", "next-round");
+ roundNext.appendChild(roundNextBtn);
+
+ // New round inputs
+ for (var i = 0; i < playersArray.length; i++) {
+ var newRoundCell = roundRow.insertCell(1);
+ newRoundCell.append(roundInput.cloneNode());
+ }
+ }
+
+ // Starting game, first round row
+ var firstRoundRow = addRow();
+
+ // New game button, page refresh at this point
+ var newGameBtn = document.createElement("BUTTON");
+ var mainWrapper = document.getElementById("main-wrapper");
+ mainWrapper.appendChild(newGameBtn);
+ newGameBtn.setAttribute("class", "new-game btn");
+ newGameBtn.innerHTML = "START NEW GAME";
+ newGameBtn.onclick = function() {
+ window.location.reload();
+ }
+ }
+
+}