Skip to content

Instantly share code, notes, and snippets.

@rickdaalhuizen90

rickdaalhuizen90/index.html

Created May 9, 2019 07:35
Show Gist options
  • Save rickdaalhuizen90/8c064f80a8787ee69253cb11e8034e17 to your computer and use it in GitHub Desktop.
Save rickdaalhuizen90/8c064f80a8787ee69253cb11e8034e17 to your computer and use it in GitHub Desktop.
Download ZIP
Welcome to Vue // source https://jsbin.com/goweviy
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Vue</title>
<script src="https://unpkg.com/vue"></script>
<style id="jsbin-css">
.dashboard {
display: flex;
flex-direction: row;
width: 100%;
margin-bottom: 3em;
}
.dashboard h2 {
border: 2px solid;
padding: 2px;
width: 25%;
}
.board div {
display: inline-flex;
}
.board div span {
font-size: 1.2em;
padding: 5px 8px;
color: white;
}
button {
font-size: 16px;
padding: 5px 10px;
border: none;
color: white;
background: blue;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<div class="dashboard">
<h2>Bank: ${{bank}},-</h2>
<h2>Your bet: ${{bet}} on {{myBet}}</h2>
<h2>Result: {{betResult}}</h2>
</div>
<section class="board">
<div v-for="number in numbers">
<span v-if="isEven(number) && number != luckyNumber" style="background: red">{{number}}</span>
<span v-else-if="isOdd(number) && number != luckyNumber" style="background: black">{{number}}</span>
<span v-else-if="number == 0 && number != luckyNumber" style="background: green">{{number}}</span>
<span v-else-if="number == luckyNumber" style="background: yellow !important;">{{number}}</span>
</div>
</section>
<h1>Number: <small>{{luckyNumber}}</small></h1>
<button @click="randomNumber">play</button>
</div>
<script id="jsbin-javascript">
new Vue({
el: '#app',
data: {
bank: 2000,
numbers: [],
luckyNumber: null,
myBet: 'even',
bet: 1
},
created () {
this.createBoard(32)
.then(fulfilled => console.log(fulfilled))
.catch(err => console.error(err.message));
},
mounted () {
setInterval(this.randomNumber(), 1000);
},
methods: {
// Create the roulette table
createBoard: function (count) {
let errorMsg = new Error(`Failed to create game!`);
return new Promise((resolve, reject) => {
for (let i = 0; i <= count; i++) {
this.numbers.push(i);
}
if (this.numbers.length > 0) {
resolve(this.numbers);
} else {
reject(errorMsg);
}
});
},
isEven: function (n) {
if (n !== 0) {
return n % 2 === 0;
}
},
isOdd: function (n) {
if (n !== 0) {
return Math.abs(n % 2) == 1;
}
},
randomNumber: function () {
setInterval(() => {
let rand = this.numbers[Math.floor(Math.random() * this.numbers.length)];
this.luckyNumber = rand;
}, 300);
}
},
computed: {
betResult: function () {
let msg;
let last_result;
if (this.isEven(this.luckyNumber) && this.myBet === 'even') {
last_result = true;
msg = 'You win!';
} else {
last_result = false;
msg = 'You lose!';
}
if (last_result) {
this.bank = this.bank + this.bet;
this.bet = 1;
} else {
this.bank = this.bank - this.bet;
this.bet = this.bet * 2;
}
return msg;
}
}
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<title>Welcome to Vue</title>
<script src="https://unpkg.com/vue"><\/script>
</head>
<body>
<div id="app">
<div class="dashboard">
<h2>Bank: ${{bank}},-</h2>
<h2>Your bet: ${{bet}} on {{myBet}}</h2>
<h2>Result: {{betResult}}</h2>
</div>
<section class="board">
<div v-for="number in numbers">
<span v-if="isEven(number) && number != luckyNumber" style="background: red">{{number}}</span>
<span v-else-if="isOdd(number) && number != luckyNumber" style="background: black">{{number}}</span>
<span v-else-if="number == 0 && number != luckyNumber" style="background: green">{{number}}</span>
<span v-else-if="number == luckyNumber" style="background: yellow !important;">{{number}}</span>
</div>
</section>
<h1>Number: <small>{{luckyNumber}}</small></h1>
<button @click="randomNumber">play</button>
</div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"><\/script>
</script>
<script id="jsbin-source-css" type="text/css">.dashboard {
display: flex;
flex-direction: row;
width: 100%;
margin-bottom: 3em;
}
.dashboard h2 {
border: 2px solid;
padding: 2px;
width: 25%;
}
.board div {
display: inline-flex;
}
.board div span {
font-size: 1.2em;
padding: 5px 8px;
color: white;
}
button {
font-size: 16px;
padding: 5px 10px;
border: none;
color: white;
background: blue;
cursor: pointer;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">new Vue({
el: '#app',
data: {
bank: 2000,
numbers: [],
luckyNumber: null,
myBet: 'even',
bet: 1
},
created () {
this.createBoard(32)
.then(fulfilled => console.log(fulfilled))
.catch(err => console.error(err.message));
},
mounted () {
setInterval(this.randomNumber(), 1000);
},
methods: {
// Create the roulette table
createBoard: function (count) {
let errorMsg = new Error(`Failed to create game!`);
return new Promise((resolve, reject) => {
for (let i = 0; i <= count; i++) {
this.numbers.push(i);
}
if (this.numbers.length > 0) {
resolve(this.numbers);
} else {
reject(errorMsg);
}
});
},
isEven: function (n) {
if (n !== 0) {
return n % 2 === 0;
}
},
isOdd: function (n) {
if (n !== 0) {
return Math.abs(n % 2) == 1;
}
},
randomNumber: function () {
setInterval(() => {
let rand = this.numbers[Math.floor(Math.random() * this.numbers.length)];
this.luckyNumber = rand;
}, 300);
}
},
computed: {
betResult: function () {
let msg;
let last_result;
if (this.isEven(this.luckyNumber) && this.myBet === 'even') {
last_result = true;
msg = 'You win!';
} else {
last_result = false;
msg = 'You lose!';
}
if (last_result) {
this.bank = this.bank + this.bet;
this.bet = 1;
} else {
this.bank = this.bank - this.bet;
this.bet = this.bet * 2;
}
return msg;
}
}
});</script></body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
Raw
jsbin.goweviy.css
.dashboard {
display: flex;
flex-direction: row;
width: 100%;
margin-bottom: 3em;
}
.dashboard h2 {
border: 2px solid;
padding: 2px;
width: 25%;
}
.board div {
display: inline-flex;
}
.board div span {
font-size: 1.2em;
padding: 5px 8px;
color: white;
}
button {
font-size: 16px;
padding: 5px 10px;
border: none;
color: white;
background: blue;
cursor: pointer;
}
Raw
jsbin.goweviy.js
new Vue({
el: '#app',
data: {
bank: 2000,
numbers: [],
luckyNumber: null,
myBet: 'even',
bet: 1
},
created () {
this.createBoard(32)
.then(fulfilled => console.log(fulfilled))
.catch(err => console.error(err.message));
},
mounted () {
setInterval(this.randomNumber(), 1000);
},
methods: {
// Create the roulette table
createBoard: function (count) {
let errorMsg = new Error(`Failed to create game!`);
return new Promise((resolve, reject) => {
for (let i = 0; i <= count; i++) {
this.numbers.push(i);
}
if (this.numbers.length > 0) {
resolve(this.numbers);
} else {
reject(errorMsg);
}
});
},
isEven: function (n) {
if (n !== 0) {
return n % 2 === 0;
}
},
isOdd: function (n) {
if (n !== 0) {
return Math.abs(n % 2) == 1;
}
},
randomNumber: function () {
setInterval(() => {
let rand = this.numbers[Math.floor(Math.random() * this.numbers.length)];
this.luckyNumber = rand;
}, 300);
}
},
computed: {
betResult: function () {
let msg;
let last_result;
if (this.isEven(this.luckyNumber) && this.myBet === 'even') {
last_result = true;
msg = 'You win!';
} else {
last_result = false;
msg = 'You lose!';
}
if (last_result) {
this.bank = this.bank + this.bet;
this.bet = 1;
} else {
this.bank = this.bank - this.bet;
this.bet = this.bet * 2;
}
return msg;
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment