557 lines
16 KiB
Vue
557 lines
16 KiB
Vue
<template>
|
|
<v-app>
|
|
<v-content>
|
|
<v-container style="margin-left: 0px;" width="100%" >
|
|
<div id="gamediv" class="apply-font">
|
|
<div
|
|
style="width: 640px; height: 480px; position: absolute; overflow: hidden;">
|
|
<video v-if="games[currentgame].levels[currentLevel].background" loop autoplay muted :src="games[currentgame].levels[currentLevel].background"></video>
|
|
</div>
|
|
<v-card
|
|
width="640"
|
|
height="480"
|
|
style="position: absolute; border-radius: 0px; top:0; left:0; z-index: 5"
|
|
:img="games[currentgame].levels[currentLevel].foreground"
|
|
>
|
|
<div
|
|
style="position: absolute; border-radius: 0px; top: 0; left: 0; z-index: 20; width: 640px; height: 480px; display: block;"
|
|
:style="{
|
|
backgroundImage: 'url(' + overlayimg + ')',
|
|
backgroundSize: 'cover',
|
|
}"
|
|
v-if="showoverlay"
|
|
></div>
|
|
<div
|
|
v-if="showtimer"
|
|
style="position: absolute; top: 0; left: 0; z-index: 20; width: 640px; height: 480px; display: block;"
|
|
>
|
|
<base-timer
|
|
:timeLimit="timer"
|
|
:afterTimer="stoptimer"
|
|
></base-timer>
|
|
</div>
|
|
|
|
<template v-if="currentLevel == 0 && !hidehighscorecover">
|
|
<v-card-title
|
|
style="justify-content: center;"
|
|
class="levelscore pa-6 font-weight-black apply-font"
|
|
>
|
|
High Score: {{ highscore }} by {{ highscorer }}
|
|
<br />
|
|
</v-card-title>
|
|
</template>
|
|
<template v-if="currentLevel != 0">
|
|
<v-card-title
|
|
style="justify-content: center;"
|
|
class="levelscore pa-6 font-weight-black">
|
|
{{ name }}
|
|
<v-spacer></v-spacer>
|
|
{{ score }}
|
|
</v-card-title>
|
|
</template>
|
|
<v-card-text v-if="currentLevel > 0" style="height: 400px;">
|
|
<v-container
|
|
style="display: flex; justify-content: center"
|
|
class="task font-weight-black"
|
|
@click="completetask"
|
|
>
|
|
<v-row align="end" style="height: 300px;">
|
|
<v-col :class="{ completed: games[currentgame].levels[currentLevel].completed }">
|
|
{{ games[currentgame].levels[currentLevel].task }}
|
|
<br />
|
|
{{ games[currentgame].levels[currentLevel].points }} Points
|
|
<v-icon x-large color="royalblue" v-if="games[currentgame].levels[currentLevel].completed"
|
|
>mdi-check-circle-outline</v-icon
|
|
>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</v-card-text>
|
|
<v-card-text v-else> </v-card-text>
|
|
</v-card>
|
|
<!-- <div
|
|
v-if="currentLevel > 0 && !hidehighscore"
|
|
class="levelscore applyfont"
|
|
style="font-size: 18px; position: absolute; bottom: 8px; right: 0px; "
|
|
>
|
|
High Score: {{ highscore }} by {{ highscorer }}
|
|
</div>-->
|
|
</div>
|
|
<div id="levelselect">
|
|
<v-virtual-scroll height="480" width="350" item-height="32" :items="games[currentgame].levels">
|
|
<template v-slot:default="{ item }">
|
|
<v-list-item
|
|
:key="item.index"
|
|
@click="leveljump(item.index)"
|
|
one-line
|
|
dense
|
|
>
|
|
<v-list-item-action style="margin-right: 5px;">
|
|
<v-btn v-if="item.index == currentLevel"
|
|
x-small
|
|
depressed
|
|
color="error"
|
|
>
|
|
{{ item.index }}
|
|
</v-btn>
|
|
<v-btn v-else
|
|
x-small
|
|
depressed
|
|
color="teal"
|
|
>
|
|
{{ item.index }}
|
|
</v-btn>
|
|
</v-list-item-action>
|
|
<v-list-item-content>
|
|
<v-list-item-title v-if="item.index == currentLevel" >
|
|
<v-btn
|
|
x-small
|
|
depressed
|
|
color="error"
|
|
>
|
|
{{ item.title }}
|
|
</v-btn>
|
|
</v-list-item-title>
|
|
<v-list-item-title v-else
|
|
style="margin-left: 0px;"
|
|
>
|
|
{{ item.title }}
|
|
</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
<v-divider />
|
|
</template>
|
|
</v-virtual-scroll>
|
|
</div>
|
|
|
|
<v-row>
|
|
<v-col cols="7">
|
|
<v-btn medium dense color="error" @click="reset">Reset</v-btn>
|
|
<v-btn
|
|
style="margin-left: 50px;"
|
|
:disabled="currentLevel < 1"
|
|
medium
|
|
@click="previouslevel"
|
|
>Previous Level</v-btn
|
|
>
|
|
<v-btn
|
|
:disabled="currentLevel >= games[currentgame].levels.length - 1"
|
|
medium
|
|
@click="nextlevel"
|
|
>Next Level</v-btn
|
|
>
|
|
</v-col>
|
|
<v-col :cols="3">
|
|
<v-select
|
|
dense
|
|
:items="games"
|
|
v-model="game"
|
|
label="Game"
|
|
item-text="gamename"
|
|
item-value="index"
|
|
@input="gamejump"
|
|
>
|
|
</v-select>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row dense>
|
|
<v-col :cols="12">
|
|
<template v-for="(l,i) in games[currentgame].levels">
|
|
<v-btn :key="i" v-if="l.jumptask && l.jumptask.type=='normal'" @click="leveljump(l.index)" x-small rounded>{{ l.jumptask.name }}</v-btn>
|
|
</template>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
|
|
<v-row dense>
|
|
<v-col :cols="12">
|
|
<template v-for="(l,i) in games[currentgame].levels">
|
|
<v-btn :key="i" v-if="l.jumptask && l.jumptask.type=='kinky'" @click="leveljump(l.index)" x-small rounded color="primary">{{ l.jumptask.name }}</v-btn>
|
|
</template>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row dense>
|
|
<v-col :cols="6">
|
|
<v-text-field
|
|
dense
|
|
v-model="name"
|
|
label="Player Name"
|
|
placeholder="Player Name"
|
|
></v-text-field>
|
|
</v-col>
|
|
<v-col :cols="3">
|
|
<font-picker
|
|
v-if="true"
|
|
dense
|
|
:api-key="'AIzaSyCAW_4WvUsVuikytJw_yvJKxHKRHrCsBAs'"
|
|
:options="options"
|
|
:active-font="fontFamily"
|
|
@change="fontChanged"
|
|
></font-picker>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row dense>
|
|
<v-col :cols="3">
|
|
<v-text-field
|
|
dense
|
|
v-model="bonuspoints"
|
|
label="Bonus Points"
|
|
placeholder="Bonus Points"/>
|
|
</v-col>
|
|
<v-col :cols="3">
|
|
<v-select
|
|
dense
|
|
v-model="timer"
|
|
label="Countdown time"
|
|
:items="countdownitems">
|
|
</v-select>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row desnse>
|
|
<v-col :cols="4">
|
|
<v-btn
|
|
x-small
|
|
dense
|
|
@click="givebonuspoints">Give bonus
|
|
</v-btn>
|
|
</v-col>
|
|
<v-col :cols="1">
|
|
<v-btn v-if="!showtimer" x-small @click="starttimer">Start</v-btn>
|
|
<v-btn v-else x-small @click="stoptimer">Stop</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col :cols="6">
|
|
<div
|
|
outlined
|
|
class="levelcompliment font-weight-black">
|
|
{{games[currentgame].levels[currentLevel].compliment}}
|
|
</div>
|
|
</v-col>
|
|
<v-col :cols="2">
|
|
<v-btn
|
|
color="primary"
|
|
x-small
|
|
dense
|
|
@click="copycomp">Copy Compliment!
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
</v-container>
|
|
</v-content>
|
|
</v-app>
|
|
</template>
|
|
<script>
|
|
import Vuetify from "vuetify";
|
|
// api key AIzaSyCAW_4WvUsVuikytJw_yvJKxHKRHrCsBAs
|
|
import FontPicker from "font-picker-vue";
|
|
import BaseTimer from "./components/BaseTimer.vue";
|
|
|
|
export default {
|
|
vuetify: new Vuetify(),
|
|
components: {
|
|
FontPicker,
|
|
BaseTimer,
|
|
},
|
|
beforeMount: function() {},
|
|
mounted: function() {
|
|
this.reset();
|
|
this.resetgame();
|
|
},
|
|
methods: {
|
|
copycomp: function() {
|
|
navigator.clipboard.writeText(this.games[this.currentgame].levels[this.currentLevel].compliment)
|
|
},
|
|
resetgame: function() {
|
|
for (var x = 0; x < this.games.length; x++) {
|
|
this.games[x].index = x;
|
|
}
|
|
},
|
|
reset: function () {
|
|
this.currentLevel = 0;
|
|
this.score = 0;
|
|
this.currenttask = 0;
|
|
this.name = "";
|
|
for (var x = 0; x < this.games[this.currentgame].levels.length; x++) {
|
|
this.games[this.currentgame].levels[x].completed = false;
|
|
this.games[this.currentgame].levels[x].index = x;
|
|
}
|
|
},
|
|
/*scramble: function() {
|
|
var tmp = [];
|
|
for (
|
|
var x = this.currenttask + 1;
|
|
x < this.levels[this.currentLevel].tasks.length;
|
|
x++
|
|
) {
|
|
tmp.push(this.levels[this.currentLevel].tasks[x]);
|
|
}
|
|
tmp.sort(() => Math.random() - 0.5);
|
|
for (
|
|
x = this.currenttask + 1;
|
|
x < this.levels[this.currentLevel].tasks.length;
|
|
x++
|
|
) {
|
|
this.levels[this.currentLevel].tasks[x] = tmp.pop();
|
|
}
|
|
},*/
|
|
/*nexttask: function() {
|
|
if (this.currenttask < this.levels[this.currentLevel].tasks.length - 1)
|
|
this.currenttask++;
|
|
},
|
|
previoustask: function() {
|
|
if (this.currenttask > 0) this.currenttask--;
|
|
},*/
|
|
|
|
nextlevel: function () {
|
|
if (this.currentLevel < this.games[this.currentgame].levels.length) {
|
|
this.ready = false;
|
|
this.currenttask = 0;
|
|
this.currentLevel++;
|
|
this.ready = true;
|
|
}
|
|
},
|
|
previouslevel: function () {
|
|
if (this.currentLevel > 0) {
|
|
this.ready = false;
|
|
this.currentLevel--;
|
|
this.ready = true;
|
|
}
|
|
},
|
|
/*nextTask: function() {
|
|
this.currenttask++;
|
|
},*/
|
|
completetask: function () {
|
|
if (!this.games[this.currentgame].levels[this.currentLevel].completed) {
|
|
this.games[this.currentgame].levels[this.currentLevel].completed = true;
|
|
this.score += this.games[this.currentgame].levels[this.currentLevel].points;
|
|
if (this.autonext && this.games[this.currentgame].levels.length > this.currentLevel) {
|
|
setTimeout(this.nextlevel, 600);
|
|
}
|
|
}
|
|
console.log(this.currenttask);
|
|
},
|
|
givebonuspoints: function () {
|
|
this.score += parseInt(this.bonuspoints);
|
|
this.overlayimg = "assets/bonuspoints.png";
|
|
this.showoverlay = true;
|
|
setTimeout(this.stopoverlay, 2000);
|
|
},
|
|
gamejump: function () {
|
|
this.ready = false;
|
|
this.currentgame = this.game;
|
|
this.ready = true;
|
|
this.reset();
|
|
},
|
|
/*startoverlay: function() {
|
|
this.overlayimg = this.overlayselect;
|
|
this.showoverlay = true;
|
|
setTimeout(this.stopoverlay, 5000);
|
|
},*/
|
|
stopoverlay: function () {
|
|
this.showoverlay = false;
|
|
},
|
|
starttimer: function () {
|
|
this.showtimer = true;
|
|
},
|
|
stoptimer: function () {
|
|
this.showtimer = false;
|
|
},
|
|
fontChanged: function (e) {
|
|
console.log(e);
|
|
this.fontFamily = e.family;
|
|
},
|
|
},
|
|
/*computed: {
|
|
webmsource: function() {
|
|
return "assets/webm" + this.currentLevel + ".webm";
|
|
},
|
|
},*/
|
|
data: function() {
|
|
return {
|
|
options: {
|
|
sort: "alphabetical",
|
|
limit: 200,
|
|
},
|
|
/*hidehighscore: false,*/
|
|
hidehighscorecover: true,
|
|
fontFamily: "Acme",
|
|
games: [{
|
|
gamename: "Sexy Points Game",
|
|
levels: [{
|
|
title: "START - Cover",
|
|
foreground: "assets/cover1.png",
|
|
background: "assets/g1c.webm",
|
|
task: "",
|
|
points: 0,
|
|
}, {
|
|
title: "START - Peace Sign",
|
|
foreground: "assets/white.png-trans.png",
|
|
background: "assets/g1t1.webm",
|
|
task: "Show a Peace Sign",
|
|
points: 0,
|
|
jumptask: {
|
|
name: "Jump Test",
|
|
type: "normal",
|
|
}
|
|
}, {
|
|
title: "START - Thumbs Up",
|
|
foreground: "assets/white.png-trans.png",
|
|
background: "assets/g1t2.webm",
|
|
task: "Give a thumbs up",
|
|
points: 0,
|
|
jumptask: {
|
|
name: "Dirty Jump Task",
|
|
type: "kinky"
|
|
}
|
|
|
|
}]
|
|
}, {
|
|
gamename: "Sweet Girl Game",
|
|
levels: [{
|
|
title: "START - Cover",
|
|
foreground: "assets/cover2.png",
|
|
background: "assets/g2c.webm",
|
|
task: "",
|
|
points: 0,
|
|
}, {
|
|
title: "START - 3 Fingers",
|
|
foreground: "assets/white.png-trans.png",
|
|
background: "assets/g2t1.webm",
|
|
task: "Hold up 3 fingers",
|
|
points: 0,
|
|
}, {
|
|
title: "START - Rock On Sign",
|
|
foreground: "assets/white.png-trans.png",
|
|
background: "assets/g2t2.webm",
|
|
task: "Make a Rock On Sign",
|
|
points: 0,
|
|
}]
|
|
}, {
|
|
gamename: "Naughty Game",
|
|
levels: [{
|
|
title: "START - Cover",
|
|
foreground: "assets/cover3.png",
|
|
background: "assets/g3c.webm",
|
|
task: "",
|
|
points: 0,
|
|
}, {
|
|
title: "START - OK Sign",
|
|
foreground: "assets/white.png-trans.png",
|
|
background: "assets/g3t1.webm",
|
|
task: "Make an OK sign",
|
|
points: 0,
|
|
}, {
|
|
title: "START - Heart Sign",
|
|
foreground: "assets/white.png-trans.png",
|
|
background: "assets/g3t2.webm",
|
|
task: "Make a Heart sign",
|
|
points: 0,
|
|
}]
|
|
}],
|
|
overlayselect: "",
|
|
gameselect: "",
|
|
levelselect: "",
|
|
currentgame: 0,
|
|
currentLevel: 0,
|
|
score: 0,
|
|
currenttask: 0,
|
|
name: "",
|
|
autonext: false,
|
|
ready: false,
|
|
highscore: 7350,
|
|
highscorer: "Jenna",
|
|
showoverlay: false,
|
|
overlayimg: "",
|
|
bonuspoints: 100,
|
|
timer: {},
|
|
game: "",
|
|
countdownitems: [
|
|
{ text: "10", value: "10" },
|
|
{ text: "20", value: "20" },
|
|
{ text: "30", value: "30" },
|
|
{ text: "60", value: "60" },
|
|
{ text: "90", value: "90" },
|
|
{ text: "120", value: "120" },
|
|
{ text: "300", value: "300" },
|
|
],
|
|
showtimer: false,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
body {
|
|
font-size: 38px;
|
|
/* text-shadow: 2px 2px rgba(0, 0, 0, 1); */
|
|
}
|
|
#gamediv {
|
|
overflow-x: hidden;
|
|
text-align: center;
|
|
overflow-y: hidden;
|
|
width: 640px;
|
|
height: 480px;
|
|
display: inline-block;
|
|
position: relative;
|
|
/*margin-left: auto;*/
|
|
/*margin-right: auto;*/
|
|
/*cursor: none;*/
|
|
/*margin-top: 24px;*/
|
|
}
|
|
#gameselect {
|
|
display: inline-block;
|
|
position: absolute;
|
|
width: 300px;
|
|
height: 480px;
|
|
margin-left: 10px;
|
|
/*margin-top: 24px;*/
|
|
}
|
|
#levelselect {
|
|
display: inline-block;
|
|
position: absolute;
|
|
width: 300px;
|
|
height: 480px;
|
|
margin-left: 10px;
|
|
/*margin-top: 24px;*/
|
|
}
|
|
.task {
|
|
/*background-color: rgba(255,255,255,0.5); */
|
|
text-shadow: 2px 2px #000;
|
|
color: #fff;
|
|
font-size: 38px;
|
|
line-height: 40px;
|
|
}
|
|
.completed {
|
|
color: royalblue;
|
|
}
|
|
.levelscore {
|
|
font-size: 45px !important;
|
|
color: slategrey;
|
|
text-shadow: 4px 4px #000;
|
|
}
|
|
.levelcompliment {
|
|
font-size: 16px !important;
|
|
}
|
|
video {
|
|
left: 50%;
|
|
min-height: 100%;
|
|
min-width: 100%;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
/*.overlay {
|
|
width: 640px;
|
|
height: 480px;
|
|
}*/
|
|
|
|
.v-card__text,
|
|
.v-card__title {
|
|
word-break: normal; /* maybe !important */
|
|
}
|
|
</style>
|