golemjager/thegame-2024
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Removed top margin

Browse Source 
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:
golemjager
2021-02-17 19:25:31 -07:00
parent 96e74eb163
commit 0fd7c1e752
1 changed files with 137 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
src/App.vue
View File

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