commit c74bc959eefcabcecea0acfc58746c628842a635 Author: kolarix999 <94450116+kolarix999@users.noreply.github.com> Date: Thu Mar 16 02:39:45 2023 +0100 initial project commit 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 + + + + + + + + + + +
+
+

Scord *

+

simple darts scoreboard

+
+
+ +
+
+
+
+
+ + +
+
    +
    +
    + + + + + + + + + + + + + + + + +
    +
    + + + + + \ 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(); + } + } + +}