<template>
  <v-app>
    <v-content>
      <v-container>
        <div id="gamediv" style="width: 640px; height: 480px; display: block; position: relative">
          <div style="width: 640px; height: 480px; position: absolute; overflow: hidden;">
            <video loop autoplay muted :src="webmsource"></video>
          </div>
          <v-card
            width="640"
            height="480"
            style="position: absolute; top:0; left:0;z-index: 5"
            :img="slides[currentLevel].background"
          >
            <div
              style="position: absolute; top: 0; left: 0; z-index: 20; width: 640px; height: 480px; display: block;"
              :style="{ backgroundImage: 'url(' + overlayimg + ')', backgroundSize: 'cover' }"
              v-if="showoverlay"
            ></div>
            <template v-if="currentLevel==0">
              <v-card-title class="pa-6 font-weight-black levelscore">
                High Score: {{ highscore }} by {{ highscorer }}
                <br />
              </v-card-title>
            </template>
            <template v-else>
              <v-card-title class="pa-6 font-weight-black levelscore">
                {{ name }}
                <v-spacer></v-spacer>
                {{ score }}
              </v-card-title>
            </template>
            <v-card-text v-if="currentLevel>0" style="height: 400px;">
              <v-carousel
                :show-arrows="false"
                :hide-delimiters="true"
                height="100%"
                v-model="currenttask"
              >
                <v-carousel-item
                  v-for="(t,i) in slides[currentLevel].tasks"
                  :key="i"
                  @click="completetask(i)"
                >
                  <v-container
                    style="display: flex; justify-content: center"
                    class="task font-weight-black"
                  >
                    <v-row align="center" style="height: 300px;">
                      <v-col :class="{ completed: t.completed }">
                        {{ t.task }}
                        <br />
                        <v-icon v-if="t.completed">mdi-check</v-icon>
                        {{ t.points }} Points
                      </v-col>
                    </v-row>
                  </v-container>
                </v-carousel-item>
              </v-carousel>
            </v-card-text>
            <v-card-text v-else>
              <v-row>
                <v-col cols="12" class="task pa-6 font-weight-black">Type your name to start!</v-col>
              </v-row>
            </v-card-text>
          </v-card>
        </div>

        <v-card>
          <v-card-text>
            <v-row>
              <v-col cols="auto">
                <v-btn x-small dense @click="reset">Reset</v-btn>
              </v-col>
              <v-col cols="auto" v-if="currentLevel>0">
                <v-btn x-small @click="previouslevel">Previous Level</v-btn>
              </v-col>
              <v-col cols="auto">
                <v-btn x-small dense @click="previoustask">Previous Task</v-btn>
              </v-col>
              <v-col cols="auto">
                <v-btn x-small dense @click="scramble">Shuffle</v-btn>
              </v-col>
             <v-col cols="auto">
                <v-btn x-small dense @click="nexttask">Next Task</v-btn>
              </v-col>
              <v-col cols="auto" v-if="currentLevel<(slides.length -1)">
                <v-btn x-small @click="nextlevel">Next Level</v-btn>
              </v-col>
              <v-col cols="auto">
                <v-checkbox v-model="autonext" label="Next task after complete"></v-checkbox>
              </v-col>

            </v-row><v-row>
              <v-col cols="1">
                <v-text-field dense v-model="name" label="Player Name" placeholder="Player Name"></v-text-field>
              </v-col>
              <v-col cols="1">
                <v-text-field
                  style="text-shadow: 0"
                  dense
                  v-model="highscorer"
                  label="High Score name"
                  placeholder="High Score Name"
                ></v-text-field>
              </v-col>
              <v-col cols="1">
                <v-text-field dense v-model="highscore" label="High Score" placeholder="High Score"></v-text-field>
              </v-col>
              <v-col cols="1">
                <v-text-field
                  dense
                  v-model="bonuspoints"
                  label="Bonus Points"
                  placeholder="Bonus Points"
                ></v-text-field>
              </v-col>
              <v-col cols="1">
                <v-btn @click="givebonuspoints">Give bonus</v-btn>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="auto">
                <v-select
                  v-model="levelselect"
                  :items="slides"
                  item-text="title"
                  item-value="index"
                  label="Select level"
                ></v-select>
                <v-btn @click="leveljump">Jump To Level</v-btn>
              </v-col>
              <v-col cols="auto">
                <v-select
                  v-model="overlayselect"
                  :items="overlayimages"
                  item-text="name"
                  item-value="file"
                  label="Select cutscene"
                ></v-select>
                <v-btn @click="startoverlay">Start Cutscene</v-btn>
              </v-col>
            </v-row>
          </v-card-text>
        </v-card>
      </v-container>
    </v-content>
  </v-app>
</template>
    <script>
import Vuetify from "vuetify";
export default {
  vuetify: new Vuetify(),
  beforeMount: function() {
    for (var x = 0; x < this.slides.length; x++) {
      this.slides[x].index = x;
    }
  },
  mounted: function() {
    this.reset();
  },
  methods: {
    reset: function() {
      this.currentLevel = 0;
      this.score = 0;
      this.currenttask = 0;
      this.name = "";
      for (var x = 0; x < this.slides.length; x++) {
        for (var y = 0; y < this.slides[x].tasks.length; y++) {
          this.slides[x].tasks[y].completed = false;
          this.slides[x].index = x;
        }
      }
    },
    scramble: function() {
      var tmp=[];
      for (var x=this.currenttask+1;x<this.slides[this.currentLevel].tasks.length; x++) {
        tmp.push(this.slides[this.currentLevel].tasks[x]);
      }
      tmp.sort(() => Math.random() - 0.5);
      for (x=this.currenttask+1;x<this.slides[this.currentLevel].tasks.length; x++) {
        this.slides[this.currentLevel].tasks[x]=tmp.pop();
      }
    },
    nexttask: function() {
      if (this.currenttask < this.slides[this.currentLevel].tasks.length - 1)
        this.currenttask++;
    },
    previoustask: function() {
      if (this.currenttask > 0) this.currenttask--;
    },

    nextlevel: function() {
      if (this.currentLevel < +this.slides.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(num) {
      if (this.slides[this.currentLevel].tasks[num].completed == false) {
        this.slides[this.currentLevel].tasks[num].completed = true;
        this.score += this.slides[this.currentLevel].tasks[num].points;
        if (
          this.autonext &&
          this.slides[this.currentLevel].tasks.length > this.currenttask + 1
        ) {
          setTimeout(this.nextTask, 600);
        }
      }
      console.log(this.currenttask);
    },
    givebonuspoints: function() {
      this.score += parseInt(this.bonuspoints);
      this.overlayimg = "assets/bonuspoints.png";
      this.showoverlay = true;
      setTimeout(this.stopoverlay, 2000);
    },
    leveljump: function() {
      this.ready = false;
      this.currentLevel = this.levelselect;
      this.currenttask = 0;
      this.ready = true;
    },
    startoverlay: function() {
      this.overlayimg = this.overlayselect;
      this.showoverlay = true;
      setTimeout(this.stopoverlay, 5000);
    },
    stopoverlay: function() {
      this.showoverlay = false;
    }
  },
  computed: {
    webmsource: function() {
      return "assets/webm" + this.currentLevel + ".webm";
    }
  },
  data: function() {
    return {
      overlayimages: [
        { name: "Mask Heart", file: "assets/maskheart.gif" },
        { name: "Fry Dancing", file: "assets/frydancing.gif" },
        { name: "Cat Please", file: "assets/catplease.gif" },
        { name: "Pikachu - Wanna play?", file: "assets/pikechuwannaplay.gif" },
        { name: "Stitch crying", file: "assets/stitchcrying.gif" },
        { name: "Hey Girl", file: "assets/heygirl.gif" },
        { name: "Ted Humping", file: "assets/tedhump.gif" },
        { name: "Aooooga", file: "assets/aoooga.gif" },
        { name: "Stitch Smashing", file: "assets/stitchsmashing.gif" },
        { name: "Girls Only", file: "assets/girlsonly.gif" },
        { name: "Dat Ass", file: "assets/bambi-datass.gif" },
        { name: "Cat - Big Eyes", file: "assets/cat-bigeyes.gif" },
        { name: "Salute Jerking", file: "assets/salutejerk.gif" },
        { name: "Level Up - Fireworks", file: "assets/levelupfireworks.gif" },
        { name: "Applause", file: "assets/applause.gif" },
        { name: "Woody Smile", file: "assets/woodysmile.gif" },
        { name: "Giggity", file: "assets/giggity.gif" },
        { name: "Homer Skipping", file: "assets/homerdance.gif" },
        { name: "Girl Spreading", file: "assets/girlspreading.gif" },
        { name: "Bouncing Jello", file: "assets/bouncingjello.gif" },
        { name: "Girl With Dildo", file: "assets/dildogirl.gif" },
        { name: "Baby Licking Window", file: "assets/babylickingwindow.gif" },
        { name: "Sparkling Lips", file: "assets/sparklelips.gif" }
      ],
      slides: [
        {
          title: "Start",
          background: "assets/background0.png",
          tasks: []
        },
        {
          title: "Wave Age Location",
          background: "assets/white.png-trans.png",
          tasks: [
            { task: "Wave!", points: 5 },
            { task: "Type your age", points: 5 },
            { task: "Type your location", points: 5 }
          ]
        },
        {
          title: "Show Fingers",
          background: "assets/white.png-trans.png",
          tasks: [
            { task: "Show 1 finger", points: 10 },
            { task: "Show 2 fingers", points: 10 },
            { task: "Show 3 fingers", points: 10 },
            { task: "Show 4 fingers", points: 10 },
            { task: "Show 5 fingers", points: 10 },
            { task: "Show 6 fingers", points: 10 },
            { task: "Show 7 fingers", points: 10 },
            { task: "Show 8 fingers", points: 10 },
            { task: "Show 9 fingers", points: 10 },
            { task: "Show 10 fingers", points: 10 }
          ]
        },
        {
          title: "Goofy Fake Checks",
          background: "assets/white.png-trans.png",
          tasks: [
            { task: "Touch your nose", points: 15 },
            { task: "Stick out tongue", points: 15 },
            { task: "Make a peace sign", points: 15 },
            { task: "Make a heart", points: 15 },
            { task: "Touch your elbow", points: 15 },
            { task: "Make peace signs with both hands", points: 15 },
            { task: "Wave both hands", points: 15 },
            { task: "Brush your hair", points: 15 }
          ]
        },
        {
          title: "No nudity yet",
          background: "assets/white.png-trans.png",
          tasks: [
            { task: "Stand and spin", points: 20 },
            { task: "Show belly button", points: 30 },
            { task: "Show bra strap", points: 40 },
            { task: "Smack that ass", points: 40 },
            { task: "Show cleavage", points: 50 },
            { task: "Flash your panties", points: 60 },
            { task: "Show your bra", points: 60 }
          ]
        },
        {
          title: "Flashes",
          background: "assets/white.png-trans.png",
          tasks: [
            { task: "Flash your ass", points: 60 },
            { task: "Flash your boobs", points: 100 },
            { task: "Topless (bra on)", points: 100 },
            { task: "Do a hand bra", points: 100 },
            { task: "Flash your pussy", points: 150 },
            { task: "Bottomless (panties on)", points: 150 }
          ]
        },
        {
          title: "Undressed",
          background: "assets/white.png-trans.png",
          tasks: [
            { task: "Squeeze your boobs", points: 150 },
            { task: "Fully nude", points: 200 },
            { task: "Lick a nipple", points: 200 },
            { task: "Play with bare boobs", points: 200 },
            { task: "Show your pussy", points: 250 }
          ]
        },
        {
          title: "Pussy play",
          background: "assets/white.png-trans.png",
          tasks: [
            { task: "Put one finger inside", points: 250 },
            { task: "Put two fingers inside", points: 250 },
            { task: "Spread your pussy", points: 250 },
            { task: "Rub your pussy", points: 250 },
            { task: "Finger yourself", points: 250 },
            { task: "Finger doggy style", points: 350 },
            { task: "Lick your finger", points: 350 },
            {
              task: "Squeeze hairbrush between boobs",
              points: 350,
              completed: false
            }
          ]
        },
        {
          title: "Hairbrush",
          background: "assets/white.png-trans.png",
          tasks: [
            {
              task: "Rub pussy with brush",
              points: 400,
              completed: false
            },
            { task: "Fuck yourself with brush", points: 400 },
            {
              task: "Use brush and hands to orgasm",
              points: 500,
              completed: false
            },
            { task: "Suck your brush", points: 600 }
          ]
        },
        {
          title: "Extra Pussy Stuff",
          background: "assets/white.png-trans.png",
          tasks: [
            { task: "Push panties into pussy", points: 700 },
            { task: "Put panties in mouth", points: 700 },
            { task: "Masturbate with something else", points: 700 },

            {
              task: "Squeeze boobs with mouth open",
              points: 1000,
              completed: false
            }
          ]
        }
      ],
      overlayselect: "",
      levelselect: "",
      currentLevel: 0,
      score: 0,
      currenttask: 0,
      name: "",
      autonext: true,
      ready: false,
      highscore: 5250,
      highscorer: "Ashley",
      showoverlay: false,
      overlayimg: "",
      bonuspoints: 100
    };
  }
};
</script>
    <style>
body {
  font-size: 38px;
  text-align: center;
  /*  text-shadow: 2px 2px rgba(0, 0, 0, 1); */
}
#gamediv {
  overflow-x: hidden;
  overflow-y: hidden;
}
.task {
  /*            background-color: rgba(255,255,255,0.5); */
  text-shadow: 2px 2px rgba(255, 255, 255, 1);
  color: black;
  font-size: 38px;
  line-height: 40px;
}
.completed {
  color: lightgrey;
}
.levelscore {
  font-size: 44px;
  color: white;
  text-shadow: 2px 2px black;
}
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>
