Skip to content
This repository was archived by the owner on Nov 16, 2023. It is now read-only.

Replaced Vue with vanilla js for the simon game #169

Open
kingstenbanh wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Replaced Vue with vanilla js for the simon game #169

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 12 additions & 64 deletions docs/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
Expand All @@ -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 */
Expand Down
80 changes: 41 additions & 39 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,32 +24,37 @@
<header>
<div class="logo-link" title="Microsoft Website">
<div class="logo" role="img" aria-label="Microsoft Logo">
<span @click="clickColor('red')" class="logo-tile" v-bind:class="logoTitleRed"></span>
<span @click="clickColor('green')" class="logo-tile" v-bind:class="logoTitleGreen"></span>
<span @click="clickColor('blue')" class="logo-tile" v-bind:class="logoTitleBlue"></span>
<span @click="clickColor('yellow')" class="logo-tile" v-bind:class="logoTitleYellow"></span>
<span class="logo-tile logo-tile--red" data-color="red"></span>
<span class="logo-tile logo-tile--green" data-color="green"></span>
<span class="logo-tile logo-tile--blue" data-color="blue"></span>
<span class="logo-tile logo-tile--yellow" data-color="yellow"></span>
</div>
</div>
<span v-if="winner" class="winner">🎊 Simon says...A winner is you! 🎊</span>
<span class="winner">🎊 Simon says...A winner is you! 🎊</span>
</header>
<main>
<h1>
Microsoft is looking for designers who code to help create the most compelling developer tools&nbsp;&amp;&nbsp;services on
Microsoft is looking for designers who code to help create the most compelling developer
tools&nbsp;&amp;&nbsp;services on
the planet.
</h1>
<p>
We have open positions for technical product designers &amp; design leaders in San Francisco, Seattle, and elsewhere.
We have open positions for technical product designers &amp; design leaders in San Francisco, Seattle, and
elsewhere.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a> or
<a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a>
or
<a href="mailto:mmuno@microsoft.com" title="Email address for mmuno@microsoft.com">email us</a>.
</p>
</main>
Expand Down Expand Up @@ -81,48 +86,45 @@ <h1>
</span>
<span class="footer-piece footer-piece--separate">
Created by
<a href="https://github.com/Microsoft/join-dev-design/graphs/contributors" id="contributors" title="Contributors to the GitHub repository join-dev-design by the Microsoft organization">10</a> contributors on
<a href="https://github.com/Microsoft/join-dev-design/graphs/contributors" id="contributors" title="Contributors to the GitHub repository join-dev-design by the Microsoft organization">10</a>
contributors on
<a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">GitHub</a>.
</span>
</p>
<script>
fetch('https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors')
</footer>
<script>
const getContributors = () => {
fetch("https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors")
.then(response => {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
return console.log(
"Looks like there was a problem. Status Code: " + response.status
);
}

return response.json();
})
.then(data => document.getElementById('contributors').innerText = data.length)
.catch(err => console.log('Fetch Error :-S', err));

</script>
</footer>
<script async src="scripts/ls.helper.js"></script>
<script async src="theme/theme.js"></script>
<script>
function logLogo(size) {
const style =
`font-family: Arial; font-size: ${size}px; line-height: 2em; color: #f33525; text-shadow: 0.5em 0 0 #81bc06, 0 0.5em 0 #05a6f0, 0.5em 0.5em 0 #ffba08;`;
console.log('%c■ ', style);
}
.then(data => (document.getElementById("contributors").innerText = data.length))
.catch(err => console.log("Fetch Error :-S", err));
};

logLogo(100);
const logLogo = size => {
const style = `font-family: Arial; font-size: ${size}px; line-height: 2em; color: #f33525; text-shadow: 0.5em 0 0 #81bc06, 0 0.5em 0 #05a6f0, 0.5em 0.5em 0 #ffba08;`;
console.log("%c■ ", style);
};

</script>
<script>
function markDocumentAsLoaded() {
setTimeout(function () {
document.documentElement.dataset.loaded = true
}, 1000)
}
document.addEventListener('DOMContentLoaded', () => {
document.documentElement.dataset.loaded = true;

addEventListener('load', markDocumentAsLoaded);
getContributors();
logLogo(100);
});

document.addEventListener('click', () => import('./simon.js'));
document.removeEventListener('click', null);
</script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js "></script>
<script src="simon.js "></script>
<script async src="scripts/ls.helper.js"></script>
<script async src="theme/theme.js"></script>
</body>

</html>
Loading