From f276aca352264228a2bbc862796d9ba583111274 Mon Sep 17 00:00:00 2001 From: Kingsten Banh Date: Mon, 22 Oct 2018 07:04:31 -0400 Subject: [PATCH] Replaced VueJs with vanila js for the simon game --- docs/css/style.css | 76 ++---------- docs/index.html | 80 +++++++------ docs/simon.js | 285 ++++++++++++++++++++++---------------------- docs/theme/theme.js | 3 +- 4 files changed, 197 insertions(+), 247 deletions(-) diff --git a/docs/css/style.css b/docs/css/style.css index c36f875..a243c99 100644 --- a/docs/css/style.css +++ b/docs/css/style.css @@ -5,7 +5,7 @@ --brand-yellow: #ffba08; --brand-red: #f35325; --brand-green: #81bc06; - --white: #ffffff; + --white: #fff; --off-white: #bbb; --dark-grey: #121212; /* typeface defaults */ @@ -218,18 +218,6 @@ h1 { } } -main p:nth-child(2) { - animation-delay: calc(var(--move-in-base-delay) * 6); -} - -main p:nth-child(3) { - animation-delay: calc(var(--move-in-base-delay) * 7); -} - -main p:nth-child(4) { - animation-delay: calc(var(--move-in-base-delay) * 8); -} - /* Logo */ .logo-link { @@ -239,12 +227,6 @@ main p:nth-child(4) { margin: var(--large-space) auto; } -.logo-image { - display: block; - width: 100%; - height: auto; -} - .logo { display: flex; flex-wrap: wrap; @@ -260,78 +242,44 @@ main p:nth-child(4) { margin: 2.5%; outline: 1px solid transparent; animation: var(--logo-tiles-in-animation); -} - -.winner { - display: block; - margin: auto; - text-align: center; -} - -.logo-tile--red { - background-color: var(--brand-red); transition: 150ms; } -.logo-tile--largered { - background-color: var(--brand-red); +.logo-tile.large { transform: scale(1.2) translateY(-3px); - transition: 150ms; } -.logo-tile--red:active { +.logo-tile:active { transform: scale(0.8); } -.logo-tile--green { - background-color: var(--brand-green); - animation-delay: var(--logo-tiles-in-delay); - transition: 150ms; +.logo-tile--red { + background-color: var(--brand-red); } -.logo-tile--largegreen { +.logo-tile--green { background-color: var(--brand-green); - transform: scale(1.2) translateY(-3px); animation-delay: var(--logo-tiles-in-delay); - transition: 150ms; -} - -.logo-tile--green:active { - transform: scale(0.8); } .logo-tile--blue { background-color: var(--brand-blue); animation-delay: calc(var(--logo-tiles-in-delay) * 2); - transition: 150ms; -} - -.logo-tile--largeblue { - background-color: var(--brand-blue); - transform: scale(1.2) translateY(-3px); - animation-delay: calc(var(--logo-tiles-in-delay) * 2); - transition: 150ms; -} - -.logo-tile--blue:active { - transform: scale(0.8); } .logo-tile--yellow { background-color: var(--brand-yellow); animation-delay: calc(var(--logo-tiles-in-delay) * 3); - transition: 150ms; } -.logo-tile--largeyellow { - background-color: var(--brand-yellow); - transform: scale(1.2) translateY(-3px); - animation-delay: calc(var(--logo-tiles-in-delay) * 3); - transition: 150ms; +.winner { + display: none; + margin: auto; + text-align: center; } -.logo-tile--yellow:active { - transform: scale(0.8); +.winner.show { + display: block; } /* Main */ diff --git a/docs/index.html b/docs/index.html index 77d4956..72b4744 100644 --- a/docs/index.html +++ b/docs/index.html @@ -24,32 +24,37 @@
- šŸŽŠ Simon says...A winner is you! šŸŽŠ + šŸŽŠ Simon says...A winner is you! šŸŽŠ

- Microsoft is looking for designers who code to help create the most compelling developer tools & services on + Microsoft is looking for designers who code to help create the most compelling developer + tools & services on the planet.

- We have open positions for technical product designers & design leaders in San Francisco, Seattle, and elsewhere. + We have open positions for technical product designers & design leaders in San Francisco, Seattle, and + elsewhere.

- We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build the future + We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and + build the future of software development.

- We believe in diversity, openness, and building delightful tools that empower every person and organization to achieve more. + We believe in diversity, openness, and building delightful tools that empower every person and organization to + achieve more.

Interested? Send a PR with any improvement to - microsoft/join-dev-design or + microsoft/join-dev-design + or email us.

@@ -81,48 +86,45 @@

Created by - 10 contributors on + 10 + contributors on GitHub.

- - - - - - - - + + \ No newline at end of file diff --git a/docs/simon.js b/docs/simon.js index dd38e82..3534984 100644 --- a/docs/simon.js +++ b/docs/simon.js @@ -1,147 +1,146 @@ -new Vue({ - el: "#app", - data: { - colors: ["red", "green", "yellow", "blue"], - currentSequence: [], - colorStatus: { - red: false, - green: false, - yellow: false, - blue: false - }, - colorSymbols: { - red: "ā¤ļø", - green: "šŸ’š", - yellow: "šŸ’›", - blue: "šŸ’™" - }, - userClicks: [], - currentScore: 0, - difficulty: 1000 - }, - created() { - this.generateSequence(); - }, - watch: { - winner: function(isWinner) { - if (isWinner) { - this.changeTheme(); - } +/* Logo related elements */ +const winner = document.querySelector(".winner"); + +/* Constants */ +const COLORS = ["red", "green", "blue", "yellow"]; +const COLOR_SYMBOLS = { + red: "ā¤ļø", + green: "šŸ’š", + yellow: "šŸ’›", + blue: "šŸ’™" +}; +const MAX_SCORE = 10; +let isFirstTime = true; + +/* Game states */ +let currentSequence = []; +let userClicks = []; +let currentScore = 0; +let difficulty = 1000; +const logoTiles = {}; + +const getRandomInt = max => Math.floor(Math.random() * Math.floor(max)); + +const timer = ms => new Promise(res => setTimeout(res, ms)); + +const changeTheme = () => { + if (theme && theme.changeTo) { + theme.changeTo("msdos"); + } +}; + +const generateSequence = () => { + currentSequence.push(COLORS[getRandomInt(COLORS.length)]); + + if (currentScore > 0) { + play(); + } else { + console.log( + `šŸ•µļøā€ā™‚ļøšŸ•µļøā€ā™€ļø PSSST! There is a game inside this webpage...\nClick the ${ + COLOR_SYMBOLS[currentSequence[0]] + } tile on the Microsoft logo to play!` + ); + } +}; + +const clickColor = color => { + userClicks.push(color); + + if (checkCorrect()) { + userClicks = []; + + if (difficulty > 100) { + difficulty -= 100; } - }, - computed: { - logoTitleRed: function() { - return this.colorStatus.red ? "logo-tile--largered" : "logo-tile--red"; - }, - logoTitleGreen: function() { - return this.colorStatus.green - ? "logo-tile--largegreen" - : "logo-tile--green"; - }, - logoTitleYellow: function() { - return this.colorStatus.yellow - ? "logo-tile--largeyellow" - : "logo-tile--yellow"; - }, - logoTitleBlue: function() { - return this.colorStatus.blue ? "logo-tile--largeblue" : "logo-tile--blue"; - }, - winner: function() { - return this.currentScore >= 10 ? true : false; + + currentScore++; + + console.log(`Simon says..."correct!" šŸŽ‰ Your score is`, currentScore); + + if (currentScore >= MAX_SCORE) { + winner.classList.add("show"); + changeTheme(); + return; } - }, - methods: { - generateSequence: function() { - this.currentSequence.push( - this.colors[this.getRandomInt(this.colors.length)] - ); - if (this.currentScore > 0) { - this.play(); - } else { - console.log( - `šŸ•µļøā€ā™‚ļøšŸ•µļøā€ā™€ļø PSSST! There is a game inside this webpage...\nClick the ${ - this.colorSymbols[this.currentSequence[0]] - } tile on the Microsoft logo to play!` - ); - } - }, - clickColor: function(color) { - this.userClicks.push(color); - if (this.checkCorrect()) { - this.userClicks = []; - if (this.difficulty > 100) { - this.difficulty -= 100; - } - this.currentScore++; - console.log( - `Simon says..."correct!" šŸŽ‰ Your score is`, - this.currentScore - ); - this.lightUp(); - this.generateSequence(); - } - }, - getRandomInt: function(max) { - return Math.floor(Math.random() * Math.floor(max)); - }, - timer: function(ms) { - return new Promise(res => setTimeout(res, ms)); - }, - checkCorrect: function() { - let matching = true; - let sequence = - this.userClicks[this.userClicks.length - 1] === - this.currentSequence[this.userClicks.length - 1]; - if (!sequence) { - this.reset(); - } - for (let i = 0; i < this.currentSequence.length; i++) { - if (this.userClicks[i] !== this.currentSequence[i]) { - matching = false; - break; - } - } - return matching; - }, - reset: function() { - console.log(`šŸ˜¢ Game Over! Refresh to play again.`); - this.currentSequence = []; - this.userClicks = []; - this.currentScore = 0; - this.difficulty = 1000; - this.generateSequence(); - }, - play: async function() { - await this.timer(2000); - for (var i = 0; i < this.currentSequence.length; i++) { - this.colorStatus[this.currentSequence[i]] = true; - await this.timer(this.difficulty); - this.colorStatus[this.currentSequence[i]] = false; - await this.timer(this.difficulty / 2); - } - }, - lightUp: async function() { - let t = 150; - this.colorStatus.red = true; - await this.timer(t); - this.colorStatus.red = false; - this.colorStatus.green = true; - await this.timer(t); - this.colorStatus.green = false; - this.colorStatus.yellow = true; - await this.timer(t); - this.colorStatus.yellow = false; - this.colorStatus.blue = true; - await this.timer(t); - this.colorStatus.blue = false; - this.colorStatus.red = true; - await this.timer(t); - this.colorStatus.red = false; - }, - changeTheme: function() { - if (theme && theme.changeTo) { - theme.changeTo("msdos"); - } + + lightUp(); + generateSequence(); + } +}; + +function reset() { + console.log(`šŸ˜¢ Game Over! Refresh to play again.`); + currentSequence = []; + userClicks = []; + currentScore = 0; + difficulty = 1000; + generateSequence(); + winner.classList.remove("show"); +} + +function checkCorrect() { + let matching = true; + const lastClick = userClicks.length - 1; + let sequence = userClicks[lastClick] === currentSequence[lastClick]; + + if (!sequence) { + reset(); + } + + for (let i = 0; i < currentSequence.length; i++) { + if (userClicks[i] !== currentSequence[i]) { + matching = false; + break; } } -}); + + return matching; +} + +async function play() { + await timer(2000); + + for (let i = 0; i < currentSequence.length; i++) { + const sequence = currentSequence[i]; + + logoTiles[sequence].classList.add("large"); + await timer(difficulty); + logoTiles[sequence].classList.remove("large"); + await timer(difficulty / 2); + } +} + +async function lightUp() { + const t = 150; + + logoTiles.red.classList.add("large"); + await timer(t); + logoTiles.red.classList.remove("large"); + logoTiles.green.classList.add("large"); + await timer(t); + logoTiles.green.classList.remove("large"); + logoTiles.yellow.classList.add("large"); + await timer(t); + logoTiles.yellow.classList.remove("large"); + logoTiles.blue.classList.add("large"); + await timer(t); + logoTiles.blue.classList.remove("large"); + logoTiles.red.classList.add("large"); + await timer(t); + logoTiles.red.classList.remove("large"); +} + +if (isFirstTime) { + generateSequence(); + + const $logoTiles = document.querySelectorAll(".logo-tile"); + + $logoTiles.forEach(tile => { + const { color } = tile.dataset; + logoTiles[color] = tile; + + tile.addEventListener("click", () => clickColor(color)); + }); +} + +isFirstTime = false; diff --git a/docs/theme/theme.js b/docs/theme/theme.js index 14fcba8..e1b481b 100644 --- a/docs/theme/theme.js +++ b/docs/theme/theme.js @@ -24,6 +24,7 @@ var theme = { }, changeTo: function(theme) { if (["light", "dark"].indexOf(theme) === -1) { + console.log("this runs"); this.load(theme); } else { window.ls.setItem(USER_THEME, theme); @@ -39,6 +40,6 @@ document.querySelector(".theme").onclick = function(e) { theme.changeTo(nextTheme); }; -if (storedTheme) { +if (storedTheme && storedTheme !== "dark") { theme.changeTo(storedTheme); }