From c3fca7fc67b3c9c74b85406160c70235fd63a3ca Mon Sep 17 00:00:00 2001 From: funix Date: Sun, 12 Dec 2021 00:35:16 +0100 Subject: [PATCH] first commit --- app.js | 85 ++++++++++++++++++++++++++++++++++++++++++++ index.html | 48 +++++++++++++++++++++++++ style.css | 101 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 234 insertions(+) create mode 100644 app.js create mode 100644 index.html create mode 100644 style.css diff --git a/app.js b/app.js new file mode 100644 index 0000000..7655075 --- /dev/null +++ b/app.js @@ -0,0 +1,85 @@ +var riddle = ["var(--yellow)", "var(--green)", "var(--green)", "var(--red)"] + +var n1 = 0 +var n2 = 0 +var n3 = 0 +var n0 = 0 + +var current = [] + +var colors = ["var(--red)", "var(--brown)", "var(--green)", "var(--blue)", "var(--yellow)", "var(--orange)", "var(--white)"] + + +document.getElementById("choiceEl1").addEventListener("click", function() { + this.style.background = colors[n0] + current[0] = colors[n0] + n0++ + if (n0 == 7) { + n0 = 0 + } +}) + +document.getElementById("choiceEl2").addEventListener("click", function() { + this.style.background = colors[n1] + current[1] = colors[n1] + n1++ + if (n1 == 7) { + n1 = 0 + } +}) + +document.getElementById("choiceEl3").addEventListener("click", function() { + this.style.background = colors[n2] + current[2] = colors[n2] + n2++ + if (n2 == 7) { + n2 = 0 + } +}) + +document.getElementById("choiceEl4").addEventListener("click", function() { + this.style.background = colors[n3] + current[3] = colors[n3] + n3++ + if (n3 == 7) { + n3 = 0 + } +}) + +function shuffle() { + let array = [0, 1, 2, 3] + let currentIndex = 3, + randomIndex; + + // While there remain elements to shuffle... + while (currentIndex != 0) { + + // Pick a remaining element... + randomIndex = Math.floor(Math.random() * currentIndex); + currentIndex--; + + // And swap it with the current element. + [array[currentIndex], array[randomIndex]] = [ + array[randomIndex], array[currentIndex] + ]; + } + + return array; +} + +var newShuffle = shuffle() + + + +function check() { + + for (let solve = 0; solve < 4; solve++) { + r = newShuffle[solve] + if (riddle[solve] == current[solve]) { + document.getElementsByClassName("result")[r].style.background = "var(--black)" + + } else if (riddle.includes(current[solve])) { + document.getElementsByClassName("result")[r].style.background = "var(--white)" + } + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..1dc53ce --- /dev/null +++ b/index.html @@ -0,0 +1,48 @@ + + + + + + + MASTERMIND + + + + + + + + + +
+
+ + + + +
+
+ + + + + +
+
+ +
+ +
+ + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..d6e13ce --- /dev/null +++ b/style.css @@ -0,0 +1,101 @@ +:root { + --red: #f00; + --green: rgb(39, 177, 39); + --blue: #00f; + --yellow: rgb(255, 238, 0); + --brown: rgb(66, 26, 20); + --orange: rgb(255, 102, 0); + --white: #fff; + --black: #000; +} + +body, +html { + margin: 0; + padding: 0; + width: 100%; + height: 100%; +} + +button { + width: 20px; + height: 20px; + border-radius: 40%; +} + +.row { + border: solid; + display: flex; + flex-direction: row; + height: 60px; + width: 90%; + justify-content: space-evenly; + margin-left: 5%; +} + +.choice { + /* border: solid; */ + display: flex; + flex-direction: row; + justify-content: space-evenly; + /* padding: 3px; */ + width: 60%; + margin: auto 20px; +} + +.results { + /* border: solid; */ + display: grid; + grid-template-columns: auto auto; + grid-gap: 10%; + margin: auto; +} + +.results button { + /* padding: 25%; */ +} + +.palette { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; +} + +.palette div { + width: 100%; + height: 20%; +} + +.red { + background-color: var(--red); +} + +.blue { + background-color: var(--blue); +} + +.yellow { + background-color: var(--yellow); +} + +.orange { + background-color: var(--orange); +} + +.green { + background-color: var(--green); +} + +.brown { + background-color: var(--brown); +} + +#check { + width: 96%; + height: 5%; + position: absolute; + bottom: 5px; + left: 2%; + border-radius: 30px; +} \ No newline at end of file