Removed top margin

Added level number to level lelector
Changed completed level to green
Increased size of completed checkmark
Changed checkmark color to green
Increased size of reset, previous/next level buttons
Added quick jump buttons
Other layout changes
Block commented some unused code
This commit is contained in:
2021-02-17 19:25:31 -07:00
parent 96e74eb163
commit 0fd7c1e752

View File

@@ -4,18 +4,17 @@
<v-container width="100%" >
<div id="gamediv" class="apply-font">
<div
style="width: 640px; height: 480px; position: absolute; overflow: hidden;"
>
style="width: 640px; height: 480px; position: absolute; overflow: hidden;">
<video v-if="levels[currentLevel].background" loop autoplay muted :src="levels[currentLevel].background"></video>
</div>
<v-card
width="640"
height="480"
style="position: absolute; top:0; left:0;z-index: 5"
style="position: absolute; border-radius: 0px; top:0; left:0; z-index: 5"
:img="levels[currentLevel].foreground"
>
<div
style="position: absolute; top: 0; left: 0; z-index: 20; width: 640px; height: 480px; display: block;"
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',
@@ -34,14 +33,14 @@
<template v-if="currentLevel == 0">
<v-card-title
class="pa-6 font-weight-black levelscore apply-font"
class="levelscore pa-6 font-weight-black apply-font"
>
High Score: {{ highscore }} by {{ highscorer }}
<br />
</v-card-title>
</template>
<template v-else>
<v-card-title class="pa-6 font-weight-black levelscore">
<v-card-title class="levelscore pa-6 font-weight-black">
{{ name }}
<v-spacer></v-spacer>
{{ score }}
@@ -57,7 +56,7 @@
<v-col :class="{ completed: levels[currentLevel].completed }">
{{ levels[currentLevel].task }}
<br />
<v-icon v-if="levels[currentLevel].completed"
<v-icon x-large color="green" v-if="levels[currentLevel].completed"
>mdi-check</v-icon
>
{{ levels[currentLevel].points }} Points
@@ -67,16 +66,16 @@
</v-card-text>
<v-card-text v-else> </v-card-text>
</v-card>
<div
<!-- <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>
<div id="levelselect">
<v-virtual-scroll height="480" width="250" item-height="32" :items="levels">
<v-virtual-scroll height="480" width="350" item-height="32" :items="levels">
<template v-slot:default="{ item }">
<v-list-item
:key="item.index"
@@ -85,32 +84,48 @@
dense
>
<v-list-item-content>
<v-list-item-title>{{ item.title }} </v-list-item-title>
<v-list-item-title>{{ item.index }} {{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider />
</template>
</v-virtual-scroll>
</div>
<v-row dense>
<v-col :cols="10">
<v-btn x-small dense @click="reset">Reset</v-btn>
<v-row>
<v-col cols="6" align="center">
<v-btn medium dense @click="reset">Reset</v-btn>
<v-btn
v-if="currentLevel < levels.length - 1"
x-small
:disabled="currentLevel < 1"
medium
@click="previouslevel"
>Previous Level</v-btn
>
<v-btn
v-if="currentLevel < levels.length - 1"
x-small
:disabled="currentLevel >= levels.length - 1"
medium
@click="nextlevel"
>Next Level</v-btn
>
</v-col>
</v-row>
<v-row dense>
<v-col :cols="2">
<v-col :cols="5">
<v-btn x-small @click="jumptotits">Tits</v-btn>
<v-btn x-small @click="jumptopanties">Panties</v-btn>
<v-btn x-small @click="jumptopussy">Pussy</v-btn>
<v-btn x-small @click="jumptorubpussy">Rub Pussy</v-btn>
<v-btn x-small @click="jumptosextoy">Sex Toy</v-btn>
<v-btn x-small @click="jumptoclamps">Nipple Clamps</v-btn>
<v-btn x-small @click="jumptocandle">Candle</v-btn>
<v-btn x-small @click="jumptoassplay">Ass Play</v-btn>
<v-btn x-small @click="jumptoasstoy">Ass Toy</v-btn>
</v-col>
</v-row>
<v-row dense>
<v-col :cols="6">
<v-text-field
dense
v-model="name"
@@ -118,29 +133,40 @@
placeholder="Player Name"
></v-text-field>
</v-col>
<v-col :cols="2">
</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="2">
<v-btn x-small @click="givebonuspoints">Give bonus</v-btn>
placeholder="Bonus Points"/>
</v-col>
</v-row>
<v-row dense>
<v-col :cols="1">
<v-col :cols="3">
<v-select
dense
v-model="timer"
label="Countdown time"
:items="countdownitems"
></v-select> </v-col
><v-col :cols="1">
: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-col :cols="2">
<v-btn v-else x-small @click="stoptimer">Stop</v-btn>
</v-col>
</v-row>
<!-- <v-row dense>
<v-col :cols="2">
<font-picker
v-if="false"
dense
@@ -150,7 +176,7 @@
@change="fontChanged"
></font-picker>
</v-col>
</v-row>
</v-row>-->
</v-container>
</v-content>
</v-app>
@@ -158,13 +184,13 @@
<script>
import Vuetify from "vuetify";
// api key AIzaSyCAW_4WvUsVuikytJw_yvJKxHKRHrCsBAs
import FontPicker from "font-picker-vue";
// import FontPicker from "font-picker-vue";
import BaseTimer from "./components/BaseTimer.vue";
export default {
vuetify: new Vuetify(),
components: {
FontPicker,
// FontPicker,
BaseTimer,
},
beforeMount: function() {},
@@ -182,7 +208,7 @@ export default {
this.levels[x].index = x;
}
},
scramble: function() {
/*scramble: function() {
var tmp = [];
for (
var x = this.currenttask + 1;
@@ -199,14 +225,14 @@ export default {
) {
this.levels[this.currentLevel].tasks[x] = tmp.pop();
}
},
nexttask: function() {
},*/
/*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.levels.length) {
@@ -223,9 +249,9 @@ export default {
this.ready = true;
}
},
nextTask: function() {
/*nextTask: function() {
this.currenttask++;
},
},*/
completetask: function() {
if (!this.levels[this.currentLevel].completed) {
this.levels[this.currentLevel].completed = true;
@@ -247,6 +273,51 @@ export default {
this.currentLevel = i;
this.ready = true;
},
jumptotits: function() {
this.ready = false;
this.currentLevel = 13;
this.ready = true;
},
jumptopanties: function() {
this.ready = false;
this.currentLevel = 30;
this.ready = true;
},
jumptopussy: function() {
this.ready = false;
this.currentLevel = 39;
this.ready = true;
},
jumptorubpussy: function() {
this.ready = false;
this.currentLevel = 49;
this.ready = true;
},
jumptosextoy: function() {
this.ready = false;
this.currentLevel = 74;
this.ready = true;
},
jumptoclamps: function() {
this.ready = false;
this.currentLevel = 84;
this.ready = true;
},
jumptocandle: function() {
this.ready = false;
this.currentLevel = 89;
this.ready = true;
},
jumptoassplay: function() {
this.ready = false;
this.currentLevel = 98;
this.ready = true;
},
jumptoasstoy: function() {
this.ready = false;
this.currentLevel = 105;
this.ready = true;
},
startoverlay: function() {
this.overlayimg = this.overlayselect;
this.showoverlay = true;
@@ -262,10 +333,10 @@ export default {
this.showtimer = false;
},
fontChanged: function(e) {
/*fontChanged: function(e) {
console.log(e);
this.fontFamily = e.family;
},
},*/
},
computed: {
webmsource: function() {
@@ -279,7 +350,7 @@ export default {
limit: 200,
},
hidehighscore: false,
fontFamily: "Acme",
/*fontFamily: "Acme",*/
levels: [
{
title: "Start - Cover",
@@ -361,6 +432,7 @@ export default {
points: 30,
},
{
stage: "TITS",
title: "TITS - Boob drop",
foreground: "assets/bg/boobdrop.webp",
task:
@@ -987,17 +1059,18 @@ body {
height: 480px;
display: inline-block;
position: relative;
margin-left: auto;
margin-right: auto;
cursor: none;
margin-top: 24px;
/*margin-left: auto;*/
/*margin-right: auto;*/
/*cursor: none;*/
/*margin-top: 24px;*/
}
#levelselect {
display: inline-block;
position: absolute;
margin-top: 24px;
width: 300px;
height: 480px;
margin-left: 10px;
/*margin-top: 24px;*/
}
.task {
/*background-color: rgba(255,255,255,0.5); */
@@ -1007,10 +1080,10 @@ body {
line-height: 40px;
}
.completed {
color: #000;
color: green;
}
.levelscore {
font-size: 44px;
font-size: 344px;
color: #fff;
text-shadow: 2px 2px #000;
}
@@ -1022,10 +1095,10 @@ video {
top: 50%;
transform: translate(-50%, -50%);
}
.overlay {
/*.overlay {
width: 640px;
height: 480px;
}
}*/
.v-card__text,
.v-card__title {