mirror of
https://github.com/derron1/mpsfun.git
synced 2026-01-11 18:04:34 +00:00
Front page update
This commit is contained in:
Derron carr
@@ -13,8 +13,12 @@
|
|||||||
<div class="slogan"><p class="text-center">Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p></div>
|
<div class="slogan"><p class="text-center">Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p></div>
|
||||||
<br>
|
<br>
|
||||||
<div class="row column text-center">
|
<div class="row column text-center">
|
||||||
|
<<<<<<< HEAD
|
||||||
<button class="hollow button">PLAY NOW</button>
|
<button class="hollow button">PLAY NOW</button>
|
||||||
<p>Skip game, Maybe next time</p>
|
<p>Skip game, Maybe next time</p>
|
||||||
|
=======
|
||||||
|
<button class="hollow button" @click="play">PLAY NOW</button>
|
||||||
|
>>>>>>> 9900326fe2ab7bef4076d5909998bc66fffabbae
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@@ -112,6 +116,7 @@
|
|||||||
<p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
|
<p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<<<<<<< HEAD
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -144,6 +149,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
-->
|
-->
|
||||||
|
=======
|
||||||
|
<mps-game v-if="playing"></mps-game>
|
||||||
|
>>>>>>> 9900326fe2ab7bef4076d5909998bc66fffabbae
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -281,12 +289,14 @@
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import MpsGame from './MpsGame';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'hello',
|
name: 'hello',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
msg: 'Vue + Foundation',
|
msg: 'Vue + Foundation',
|
||||||
|
playing: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@@ -294,6 +304,14 @@ export default {
|
|||||||
// document.getElementById('first_window').style.height = height;
|
// document.getElementById('first_window').style.height = height;
|
||||||
// console.log(height);
|
// console.log(height);
|
||||||
},
|
},
|
||||||
|
methods: {
|
||||||
|
play() {
|
||||||
|
this.playing = true;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
MpsGame,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,84 +1,154 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="game">
|
<div id="game">
|
||||||
<div class="modal-overlay">
|
<div class="" style="height: 500px;">
|
||||||
<div class="modal">
|
<div class="modal">
|
||||||
<h2 class="winner">Well Done!</h2>
|
<h2 class="winner">Well Done!</h2>
|
||||||
<button @click="restart" class="restart">Play Again?</button>
|
<button @click="restart" class="restart">Play Again?</button>
|
||||||
<p class="share-text">Share it?</p>
|
<p class="share-text">Share it?</p>
|
||||||
<ul class="social">
|
<ul class="social">
|
||||||
<li></li>
|
<li></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div v-for="(card, index) in shuffledCards" :id="index" class="card" :data-id="card.id" @click="flip(index)">
|
||||||
</div>
|
<div class="inside">
|
||||||
|
<div class="front">
|
||||||
|
<img :src="card.img" :alt="card.name" />
|
||||||
|
</div>
|
||||||
|
<div class="back">
|
||||||
|
<img src="http://i.imgur.com/diex0Zl.png" alt="Codepen" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'game',
|
/* eslint-disable */
|
||||||
mounted() {
|
name: 'game',
|
||||||
|
mounted() {
|
||||||
},
|
this.shuffleCards();
|
||||||
created() {
|
},
|
||||||
|
created() {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
msg: 'Game',
|
msg: 'Game',
|
||||||
game: '',
|
game: '',
|
||||||
modal: '',
|
modal: '',
|
||||||
overlay: '',
|
overlay: '',
|
||||||
// restartButton:'',
|
// restartButton:'',
|
||||||
cardsArray: '',
|
cardsArray: '',
|
||||||
shuffleCards: '',
|
shuffledCards: [],
|
||||||
card: [
|
paused: false,
|
||||||
{
|
guess: null,
|
||||||
name: 'mpsOne' ,
|
cards: [
|
||||||
img: 'https://cdn.dribbble.com/users/139604/screenshots/3505913/a-behind-the-scenes-project-walkthrough_1x.jpg',
|
{
|
||||||
id: 1,
|
name: 'mpsOne',
|
||||||
},
|
img: 'http://lorempixel.com/400/200/sports',
|
||||||
{
|
id: 1,
|
||||||
name: 'mpsTwo' ,
|
},
|
||||||
img: 'https://cdn.dribbble.com/users/139604/screenshots/3505913/a-behind-the-scenes-project-walkthrough_1x.jpg',
|
{
|
||||||
id: 2,
|
name: 'mpsTwo',
|
||||||
},
|
img: 'http://lorempixel.com/400/200/city',
|
||||||
{
|
id: 2,
|
||||||
name: 'mpsThree',
|
},
|
||||||
img: 'https://cdn.dribbble.com/users/139604/screenshots/3505913/a-behind-the-scenes-project-walkthrough_1x.jpg',
|
{
|
||||||
id: 3,
|
name: 'mpsThree',
|
||||||
},
|
img: 'http://lorempixel.com/400/200/people',
|
||||||
{
|
id: 3,
|
||||||
name: 'mpsFour',
|
},
|
||||||
img: 'https://cdn.dribbble.com/users/139604/screenshots/3505913/a-behind-the-scenes-project-walkthrough_1x.jpg',
|
{
|
||||||
id: 4,
|
name: 'mpsFour',
|
||||||
},
|
img: 'http://lorempixel.com/400/200/transport',
|
||||||
],
|
id: 4,
|
||||||
};
|
},
|
||||||
},
|
],
|
||||||
destroyed() {
|
};
|
||||||
this.accordion.destroy();
|
},
|
||||||
},
|
methods: {
|
||||||
};
|
restart() {
|
||||||
|
this.shuffleCards();
|
||||||
|
},
|
||||||
|
shuffleCards() {
|
||||||
|
this.shuffledCards = this.shuffle(this.cards.concat(this.cards));
|
||||||
|
},
|
||||||
|
shuffle(array) {
|
||||||
|
let counter = array.length;
|
||||||
|
let temp;
|
||||||
|
let index;
|
||||||
|
const localArray = array;
|
||||||
|
// While there are elements in the array
|
||||||
|
while (counter > 0) {
|
||||||
|
// Pick a random index
|
||||||
|
index = Math.floor(Math.random() * counter);
|
||||||
|
// Decrease counter by 1
|
||||||
|
counter -= 1;
|
||||||
|
// And swap the last element with it
|
||||||
|
temp = localArray[counter];
|
||||||
|
localArray[counter] = array[index];
|
||||||
|
localArray[index] = temp;
|
||||||
|
}
|
||||||
|
return localArray;
|
||||||
|
},
|
||||||
|
flip(cardId) {
|
||||||
|
const $card = $('#'+ cardId); // eslint-disable-line
|
||||||
|
if (!this.paused && !$card.find('.inside').hasClass('matched') && !$card.find('.inside').hasClass('picked')) {
|
||||||
|
$card.find('.inside').addClass('picked');
|
||||||
|
if (!this.guess) {
|
||||||
|
this.guess = $($card).attr('data-id');
|
||||||
|
} else if (this.guess === $($card).attr('data-id') && !$($card).hasClass('picked')) {
|
||||||
|
$('.picked').addClass('matched');
|
||||||
|
this.guess = null;
|
||||||
|
} else {
|
||||||
|
this.guess = null;
|
||||||
|
this.paused = true;
|
||||||
|
setTimeout(() => {
|
||||||
|
$('.picked').removeClass('picked');
|
||||||
|
this.paused = false;
|
||||||
|
}, 600);
|
||||||
|
}
|
||||||
|
if ($('.matched').length === $('.card').length) {
|
||||||
|
this.win();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
win() {
|
||||||
|
this.paused = true;
|
||||||
|
setTimeout(function(){
|
||||||
|
alert('SSSSSS');
|
||||||
|
}, 1000);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
// this.accordion.destroy();
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang='scss' scoped>
|
<style lang='scss' scoped>
|
||||||
@import url(http://weloveiconfonts.com/api/?family=brandico);
|
@import url(http://weloveiconfonts.com/api/?family=brandico);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* brandico */
|
/* brandico */
|
||||||
|
|
||||||
[class*="brandico-"]:before {
|
[class*="brandico-"]:before {
|
||||||
font-family: 'brandico', sans-serif;
|
font-family: 'brandico', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body {
|
html,
|
||||||
height: 100%;
|
body {
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: black;
|
background: black;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
font-family: "Arial", sans-serif;
|
font-family: "Arial", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
@@ -89,214 +159,216 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.game {
|
.game {
|
||||||
transform-style: preserve-3d;
|
transform-style: preserve-3d;
|
||||||
perspective: 500px;
|
perspective: 500px;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin width($max){
|
@mixin width($max) {
|
||||||
@media (max-width: $max){
|
@media (max-width: $max) {
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes matchAnim {
|
@keyframes matchAnim {
|
||||||
0% {
|
0% {
|
||||||
background: #bcffcc;
|
background: #bcffcc;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
background: white;
|
background: white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
float: left;
|
float: left;
|
||||||
width: 16.66666%;
|
width: 25%;
|
||||||
height: 25%;
|
height: 25%;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: block;
|
display: block;
|
||||||
perspective: 500px;
|
perspective: 500px;
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
z-index: 50;
|
z-index: 50;
|
||||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
@include width(800px){
|
@include width(800px) {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
height: 16.666%;
|
height: 16.666%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inside {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: block;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
transition: .4s ease-in-out;
|
|
||||||
background: white;
|
|
||||||
|
|
||||||
&.picked, &.matched {
|
.inside {
|
||||||
transform: rotateY(180deg);
|
width: 100%;
|
||||||
}
|
height: 100%;
|
||||||
&.matched {
|
display: block;
|
||||||
animation: 1s matchAnim ease-in-out;
|
transform-style: preserve-3d;
|
||||||
animation-delay: .4s;
|
transition: .4s ease-in-out;
|
||||||
}
|
background: white;
|
||||||
}
|
|
||||||
|
|
||||||
.front, .back {
|
|
||||||
border: 1px solid black;
|
|
||||||
backface-visibility: hidden;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
img {
|
&.picked,
|
||||||
max-width: 100%;
|
&.matched {
|
||||||
display: block;
|
transform: rotateY(180deg);
|
||||||
margin: 0 auto;
|
}
|
||||||
max-height: 100%;
|
&.matched {
|
||||||
}
|
animation: 1s matchAnim ease-in-out;
|
||||||
|
animation-delay: .4s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.front,
|
||||||
|
.back {
|
||||||
|
border: 1px solid black;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.front {
|
.front {
|
||||||
transform: rotateY(-180deg);
|
transform: rotateY(-180deg);
|
||||||
@include width(800px){
|
@include width(800px) {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.back{
|
.back {
|
||||||
@include width(800px){
|
@include width(800px) {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-overlay {
|
.modal-overlay {
|
||||||
display: none;
|
display: none;
|
||||||
background: rgba(0,0,0,.8);
|
background: rgba(0, 0, 0, .8);
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal {
|
.modal {
|
||||||
display: none;
|
display: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 500px;
|
width: 500px;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
max-height: 90%;
|
max-height: 90%;
|
||||||
max-width: 90%;
|
max-width: 90%;
|
||||||
min-height: 380px;
|
min-height: 380px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
background: white;
|
background: white;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
padding: 30px 10px;
|
padding: 30px 10px;
|
||||||
.winner {
|
.winner {
|
||||||
font-size: 80px;
|
font-size: 80px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-family: "Anton", sans-serif;
|
font-family: "Anton", sans-serif;
|
||||||
color: #4d4d4d;
|
color: #4d4d4d;
|
||||||
text-shadow: 0px 3px 0 black;
|
text-shadow: 0px 3px 0 black;
|
||||||
@include width(480px){
|
@include width(480px) {
|
||||||
font-size: 60px;
|
font-size: 60px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.restart {
|
.restart {
|
||||||
font-family: "Anton", sans-serif;
|
font-family: "Anton", sans-serif;
|
||||||
margin: 30px auto;
|
margin: 30px auto;
|
||||||
padding: 20px 30px;
|
padding: 20px 30px;
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
border: none;
|
border: none;
|
||||||
background: #4d4d4d;
|
background: #4d4d4d;
|
||||||
background: linear-gradient(#4d4d4d, #222);
|
background: linear-gradient(#4d4d4d, #222);
|
||||||
border: 1px solid #222;
|
border: 1px solid #222;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
color: white;
|
color: white;
|
||||||
text-shadow: 0px 1px 0 black;
|
text-shadow: 0px 1px 0 black;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
&:hover {
|
&:hover {
|
||||||
background: linear-gradient(#222, black);
|
background: linear-gradient(#222, black);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.message {
|
.message {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #28afe6;
|
color: #28afe6;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
&:hover {
|
&:hover {
|
||||||
$c: lighten(#28afe6, 10%);
|
$c: lighten(#28afe6, 10%);
|
||||||
color: $c;
|
color: $c;
|
||||||
border-bottom: 1px dotted $c;
|
border-bottom: 1px dotted $c;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.share-text {
|
.share-text {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 10px auto;
|
margin: 10px auto;
|
||||||
}
|
}
|
||||||
.social {
|
.social {
|
||||||
margin: 20px auto;
|
margin: 20px auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
li {
|
li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
color: white;
|
color: white;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
&.facebook {
|
&.facebook {
|
||||||
background: #3b5998;
|
background: #3b5998;
|
||||||
&:hover {
|
&:hover {
|
||||||
background: lighten(#3b5998, 10%);
|
background: lighten(#3b5998, 10%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.google {
|
&.google {
|
||||||
background: #D34836;
|
background: #D34836;
|
||||||
&:hover {
|
&:hover {
|
||||||
background: lighten(#D34836, 10%);
|
background: lighten(#D34836, 10%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.twitter {
|
&.twitter {
|
||||||
background: #4099FF;
|
background: #4099FF;
|
||||||
&:hover {
|
&:hover {
|
||||||
background: lighten(#4099FF, 10%);
|
background: lighten(#4099FF, 10%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
height: 20px;
|
height: 20px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
.disclaimer {
|
.disclaimer {
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #727272;
|
color: #727272;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@include width(767px){
|
@include width(767px) {
|
||||||
font-size: 8px;
|
font-size: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user