Fieberkurve auslagern
This commit is contained in:
parent
29bcb6b605
commit
30da2fb495
@ -1,11 +1,469 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
|
import { ref, watch, defineProps, defineEmits } from "vue"
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
showResetButton: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
showCategories: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
/*
|
||||||
|
const emit = defineEmits(['buttonClicked'])
|
||||||
|
|
||||||
|
const emitButtonClick = () => {
|
||||||
|
emit('buttonClicked', 1)
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
const schwierigkeit = ref(4)
|
||||||
|
const stimmung = ref(4)
|
||||||
|
const spannung = ref(4)
|
||||||
|
const gewalt = ref(4)
|
||||||
|
const erotik = ref(4)
|
||||||
|
|
||||||
|
const ColorRow1 = ref('#a8a6a6')
|
||||||
|
const ColorRow2 = ref('#a8a6a6')
|
||||||
|
const ColorRow3 = ref('#a8a6a6')
|
||||||
|
const ColorRow4 = ref('#a8a6a6')
|
||||||
|
const ColorRow5 = ref('#a8a6a6')
|
||||||
|
|
||||||
|
const isRow1Active = ref(false)
|
||||||
|
const isRow2Active = ref(false)
|
||||||
|
const isRow3Active = ref(false)
|
||||||
|
const isRow4Active = ref(false)
|
||||||
|
const isRow5Active = ref(false)
|
||||||
|
|
||||||
|
const isResetButtonPressed = ref(false)
|
||||||
|
const firstClick = ref(false)
|
||||||
|
|
||||||
|
function FevercurveIsClicked(RowValue) {
|
||||||
|
isResetButtonPressed.value = true
|
||||||
|
switch (RowValue) {
|
||||||
|
case "schwierigkeit":
|
||||||
|
console.log("Line: 1")
|
||||||
|
ColorRow1.value = '#cccccc'
|
||||||
|
isRow1Active.value = true
|
||||||
|
break
|
||||||
|
case "stimmung":
|
||||||
|
console.log("Line: 2")
|
||||||
|
ColorRow2.value = '#cccccc'
|
||||||
|
isRow2Active.value = true
|
||||||
|
break
|
||||||
|
case "spannung":
|
||||||
|
console.log("Line: 3")
|
||||||
|
ColorRow3.value = '#cccccc'
|
||||||
|
isRow3Active.value = true
|
||||||
|
break
|
||||||
|
case "gewalt":
|
||||||
|
console.log("Line: 4")
|
||||||
|
ColorRow4.value = '#cccccc'
|
||||||
|
isRow4Active.value = true
|
||||||
|
break
|
||||||
|
case "erotik":
|
||||||
|
console.log("Line: 5")
|
||||||
|
ColorRow5.value = '#cccccc'
|
||||||
|
isRow5Active.value = true
|
||||||
|
break
|
||||||
|
}
|
||||||
|
console.log("firstClick:", firstClick.value)
|
||||||
|
|
||||||
|
if (!firstClick.value) {
|
||||||
|
rowFevercurveConnectors()
|
||||||
|
}
|
||||||
|
firstClick.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function resetFevercurve() {
|
||||||
|
if (!isResetButtonPressed.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
console.log("reset Fevercurve")
|
||||||
|
|
||||||
|
isResetButtonPressed.value = false
|
||||||
|
firstClick.value = false
|
||||||
|
|
||||||
|
ColorRow1.value = '#a8a6a6'
|
||||||
|
ColorRow2.value = '#a8a6a6'
|
||||||
|
ColorRow3.value = '#a8a6a6'
|
||||||
|
ColorRow4.value = '#a8a6a6'
|
||||||
|
ColorRow5.value = '#a8a6a6'
|
||||||
|
|
||||||
|
isRow1Active.value = false
|
||||||
|
isRow2Active.value = false
|
||||||
|
isRow3Active.value = false
|
||||||
|
isRow4Active.value = false
|
||||||
|
isRow5Active.value = false
|
||||||
|
|
||||||
|
schwierigkeit.value = 4
|
||||||
|
stimmung.value = 4
|
||||||
|
spannung.value = 4
|
||||||
|
gewalt.value = 4
|
||||||
|
erotik.value = 4
|
||||||
|
|
||||||
|
clearFevercurveConnectors()
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearFevercurveConnectors() {
|
||||||
|
console.log("Striche werden gecleart")
|
||||||
|
|
||||||
|
let c = document.getElementById("myCanvas")
|
||||||
|
let ctx = c.getContext("2d")
|
||||||
|
ctx.clearRect(0, 0, c.width, c.height)
|
||||||
|
}
|
||||||
|
|
||||||
|
function rowFevercurveConnectors() {
|
||||||
|
console.log("Funktion wird aufgerufen")
|
||||||
|
|
||||||
|
let c = document.getElementById("myCanvas")
|
||||||
|
let ctx = c.getContext("2d")
|
||||||
|
|
||||||
|
//settings
|
||||||
|
// let gradient = ctx.createLinearGradient(182, 5, 41, 100)
|
||||||
|
// gradient.addColorStop("0", "#3f5efb")
|
||||||
|
// gradient.addColorStop("1.0", "#b60529")
|
||||||
|
// ctx.strokeStyle = gradient
|
||||||
|
ctx.strokeStyle = "red"
|
||||||
|
ctx.lineWidth = 4
|
||||||
|
|
||||||
|
// clear canvas
|
||||||
|
ctx.clearRect(0, 0, c.width, c.height)
|
||||||
|
ctx.beginPath()
|
||||||
|
|
||||||
|
let Breite = 240
|
||||||
|
let Hoehe = 130
|
||||||
|
let Kreis = 20
|
||||||
|
|
||||||
|
ctx.moveTo(((schwierigkeit.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((1 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
|
||||||
|
ctx.lineTo(((stimmung.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((2 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
|
||||||
|
ctx.lineTo(((spannung.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((3 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
|
||||||
|
ctx.lineTo(((gewalt.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((4 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
|
||||||
|
ctx.lineTo(((erotik.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((5 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
|
||||||
|
|
||||||
|
ctx.stroke()
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
watch([schwierigkeit, stimmung, spannung, gewalt, erotik], () => {
|
||||||
|
if (isResetButtonPressed.value){
|
||||||
|
rowFevercurveConnectors()
|
||||||
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
$END$
|
<div>
|
||||||
|
<div class="grid-container">
|
||||||
|
<div
|
||||||
|
v-if="props.showCategories"
|
||||||
|
class="item1"
|
||||||
|
>
|
||||||
|
anspruchsvoll <br>
|
||||||
|
lustig <br>
|
||||||
|
spannend <br>
|
||||||
|
brutal <br>
|
||||||
|
sittsam
|
||||||
|
</div>
|
||||||
|
<div class="item2">
|
||||||
|
<!-- Slider -->
|
||||||
|
<div style="position: relative; height: 120px">
|
||||||
|
<!-- Fieberkurve -->
|
||||||
|
<canvas
|
||||||
|
id="myCanvas"
|
||||||
|
width="240"
|
||||||
|
height="130"
|
||||||
|
>
|
||||||
|
Your browser does not support the HTML canvas tag.
|
||||||
|
</canvas>
|
||||||
|
|
||||||
|
<div class="FieberkurveGesamt">
|
||||||
|
<div
|
||||||
|
class="Fieberkurve"
|
||||||
|
@click="FevercurveIsClicked('schwierigkeit')"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
id="myRange"
|
||||||
|
v-model="schwierigkeit"
|
||||||
|
type="range"
|
||||||
|
min="1"
|
||||||
|
max="7"
|
||||||
|
class="slider"
|
||||||
|
:style="{ color: '#000000' }"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="slider-track"
|
||||||
|
:style="{ backgroundColor: ColorRow1 }"
|
||||||
|
/>
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
</div>
|
||||||
|
<!-- :style="{ backgroundColor: vuetifyTheme.current.value.colors.primary }" -->
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="Fieberkurve"
|
||||||
|
@click="FevercurveIsClicked('stimmung')"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
id="myRange"
|
||||||
|
v-model="stimmung"
|
||||||
|
type="range"
|
||||||
|
min="1"
|
||||||
|
max="7"
|
||||||
|
class="slider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="slider-track"
|
||||||
|
:style="{ backgroundColor: ColorRow2 }"
|
||||||
|
/>
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="Fieberkurve"
|
||||||
|
@click="FevercurveIsClicked('spannung')"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
id="myRange"
|
||||||
|
v-model="spannung"
|
||||||
|
type="range"
|
||||||
|
min="1"
|
||||||
|
max="7"
|
||||||
|
class="slider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="slider-track"
|
||||||
|
:style="{ backgroundColor: ColorRow3 }"
|
||||||
|
/>
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="Fieberkurve"
|
||||||
|
@click="FevercurveIsClicked('gewalt')"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
id="myRange"
|
||||||
|
v-model="gewalt"
|
||||||
|
type="range"
|
||||||
|
min="1"
|
||||||
|
max="7"
|
||||||
|
class="slider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="slider-track"
|
||||||
|
:style="{ backgroundColor: ColorRow4 }"
|
||||||
|
/>
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="Fieberkurve"
|
||||||
|
@click="FevercurveIsClicked('erotik')"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
id="myRange5"
|
||||||
|
v-model="erotik"
|
||||||
|
type="range"
|
||||||
|
min="1"
|
||||||
|
max="7"
|
||||||
|
class="slider"
|
||||||
|
:class="{ backgroundColor: '#e70707' }"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="slider-track"
|
||||||
|
:style="{ backgroundColor: ColorRow5 }"
|
||||||
|
/>
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
<div class="kreis" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="props.showCategories"
|
||||||
|
class="item3"
|
||||||
|
>
|
||||||
|
leseleicht<br>
|
||||||
|
traurig<br>
|
||||||
|
entspannend<br>
|
||||||
|
gewaltfrei<br>
|
||||||
|
erotisch
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- ENDE FIEBERKURVE -->
|
||||||
|
<!-- Button Fieberkurve zurücksetzen -->
|
||||||
|
<div
|
||||||
|
v-if="props.showResetButton"
|
||||||
|
style="
|
||||||
|
width: 100%;
|
||||||
|
margin: 5px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;"
|
||||||
|
>
|
||||||
|
<VBtn
|
||||||
|
size="small"
|
||||||
|
@click="resetFevercurve"
|
||||||
|
>
|
||||||
|
Fieberkurve zurücksetzen
|
||||||
|
</VBtn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
//Grid Layout
|
||||||
|
.item1 {
|
||||||
|
grid-area: txtLinks;
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item2 {
|
||||||
|
grid-area: Fieberkurve;
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item3 {
|
||||||
|
grid-area: txtRechts;
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-areas: 'txtLinks Fieberkurve txtRechts';
|
||||||
|
gap: 10px;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-container > div {
|
||||||
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
//Grid Layout END
|
||||||
|
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
z-index: 2;
|
||||||
|
//border:1px solid #000000;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.FieberkurveGesamt {
|
||||||
|
height: 130px;
|
||||||
|
width: 240px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-content: space-between;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.Fieberkurve {
|
||||||
|
position: relative;
|
||||||
|
width: 240px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
//background: #27c21f;
|
||||||
|
//padding: ;
|
||||||
|
border-radius: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kreis {
|
||||||
|
z-index: 1;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 100%;
|
||||||
|
background: #CECCCCDB;
|
||||||
|
box-shadow: 2px 12px 27px -13px rgba(0,0,0,0.48);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.slider {
|
||||||
|
z-index: 3;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
//top: 10px;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
|
||||||
|
//background: #c29c1f;
|
||||||
|
//height: 7.5px;
|
||||||
|
//margin-top: 3.5px;
|
||||||
|
|
||||||
|
//background: rgba(50, 150, 11, 0.81);
|
||||||
|
outline: none;
|
||||||
|
//border: 5px solid rgba(232, 64, 64, 0.83);
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-track {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 8px;
|
||||||
|
//background: #bb2626;
|
||||||
|
height: 10px;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Kreis */
|
||||||
|
/* for chrome/safari */
|
||||||
|
.slider::-webkit-slider-thumb {
|
||||||
|
//z-index: 4;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background: #F07D00;
|
||||||
|
cursor: pointer;
|
||||||
|
//border: 5px solid red;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* for firefox */
|
||||||
|
.slider::-moz-range-thumb {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background: #000;
|
||||||
|
cursor: pointer;
|
||||||
|
//border: 5px solid lawngreen;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -8,196 +8,14 @@
|
|||||||
title="Büchersuche"
|
title="Büchersuche"
|
||||||
subtitle="Vorbeischauen – Vergleichen – Verlieben"
|
subtitle="Vorbeischauen – Vergleichen – Verlieben"
|
||||||
>
|
>
|
||||||
<div class="grid-container">
|
<!-- ******* Fieberkurve ***** -->
|
||||||
<div class="item1">
|
<Fieberkurve :show-reset-button="true" :show-categories="true" />
|
||||||
anspruchsvoll <br>
|
|
||||||
lustig <br>
|
|
||||||
spannend <br>
|
|
||||||
brutal <br>
|
|
||||||
sittsam
|
|
||||||
</div>
|
|
||||||
<div class="item2">
|
|
||||||
<!-- Slider -->
|
|
||||||
<div style="position: relative; height: 120px">
|
|
||||||
<!-- Fieberkurve -->
|
|
||||||
<canvas
|
|
||||||
id="myCanvas"
|
|
||||||
width="240"
|
|
||||||
height="130"
|
|
||||||
>
|
|
||||||
Your browser does not support the HTML canvas tag.
|
|
||||||
</canvas>
|
|
||||||
|
|
||||||
<div class="FieberkurveGesamt">
|
<!-- <div style="position: absolute; top: 255px; left: 10px; color: rgba(185,17,17,0.85)">
|
||||||
<div
|
|
||||||
class="Fieberkurve"
|
|
||||||
@click="FevercurveIsClicked('schwierigkeit')"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
id="myRange"
|
|
||||||
v-model="schwierigkeit"
|
|
||||||
type="range"
|
|
||||||
min="1"
|
|
||||||
max="7"
|
|
||||||
class="slider"
|
|
||||||
:style="{ color: '#000000' }"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="slider-track"
|
|
||||||
:style="{ backgroundColor: ColorRow1 }"
|
|
||||||
/>
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
</div>
|
|
||||||
<!-- :style="{ backgroundColor: vuetifyTheme.current.value.colors.primary }" -->
|
|
||||||
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="Fieberkurve"
|
|
||||||
@click="FevercurveIsClicked('stimmung')"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
id="myRange"
|
|
||||||
v-model="stimmung"
|
|
||||||
type="range"
|
|
||||||
min="1"
|
|
||||||
max="7"
|
|
||||||
class="slider"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="slider-track"
|
|
||||||
:style="{ backgroundColor: ColorRow2 }"
|
|
||||||
/>
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="Fieberkurve"
|
|
||||||
@click="FevercurveIsClicked('spannung')"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
id="myRange"
|
|
||||||
v-model="spannung"
|
|
||||||
type="range"
|
|
||||||
min="1"
|
|
||||||
max="7"
|
|
||||||
class="slider"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="slider-track"
|
|
||||||
:style="{ backgroundColor: ColorRow3 }"
|
|
||||||
/>
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="Fieberkurve"
|
|
||||||
@click="FevercurveIsClicked('gewalt')"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
id="myRange"
|
|
||||||
v-model="gewalt"
|
|
||||||
type="range"
|
|
||||||
min="1"
|
|
||||||
max="7"
|
|
||||||
class="slider"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="slider-track"
|
|
||||||
:style="{ backgroundColor: ColorRow4 }"
|
|
||||||
/>
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="Fieberkurve"
|
|
||||||
@click="FevercurveIsClicked('erotik')"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
id="myRange5"
|
|
||||||
v-model="erotik"
|
|
||||||
type="range"
|
|
||||||
min="1"
|
|
||||||
max="7"
|
|
||||||
class="slider"
|
|
||||||
:class="{ backgroundColor: '#e70707' }"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="slider-track"
|
|
||||||
:style="{ backgroundColor: ColorRow5 }"
|
|
||||||
/>
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- ENDE FIEBERKURVE -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item3">
|
|
||||||
leseleicht<br>
|
|
||||||
traurig<br>
|
|
||||||
entspannend<br>
|
|
||||||
gewaltfrei<br>
|
|
||||||
erotisch
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
width: 100%;
|
|
||||||
margin: 5px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;"
|
|
||||||
>
|
|
||||||
<VBtn
|
|
||||||
size="small"
|
|
||||||
@click="resetFevercurve"
|
|
||||||
>
|
|
||||||
Fieberkurve zurücksetzen
|
|
||||||
</VBtn>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="position: absolute; top: 100px; left: 10px; color: rgba(185,17,17,0.85)">
|
|
||||||
R1: {{ schwierigkeit }}, {{ isRow1Active }} <br>
|
|
||||||
R2: {{ stimmung }}, {{ isRow2Active }} <br>
|
|
||||||
R3: {{ spannung }}, {{ isRow3Active }} <br>
|
|
||||||
R4: {{ gewalt }}, {{ isRow4Active }} <br>
|
|
||||||
R5: {{ erotik }}, {{ isRow5Active }} <br>
|
|
||||||
</div>
|
|
||||||
<div style="position: absolute; top: 255px; left: 10px; color: rgba(185,17,17,0.85)">
|
|
||||||
{{ selectedCheckbox }}
|
{{ selectedCheckbox }}
|
||||||
</div>
|
</div>-->
|
||||||
|
|
||||||
|
<!-- ******* Genre´s ***** -->
|
||||||
<div style="padding: 0 7rem;">
|
<div style="padding: 0 7rem;">
|
||||||
<VCol>
|
<VCol>
|
||||||
<CustomCheckboxesWithIcon
|
<CustomCheckboxesWithIcon
|
||||||
@ -207,7 +25,6 @@
|
|||||||
</VCol>
|
</VCol>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- ******* TEXT SUCHFELD!! ***** -->
|
<!-- ******* TEXT SUCHFELD!! ***** -->
|
||||||
|
|
||||||
<div style="padding: 0 5rem;">
|
<div style="padding: 0 5rem;">
|
||||||
@ -275,27 +92,28 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
<!-- <hr>-->
|
|
||||||
|
|
||||||
</VCard>
|
</VCard>
|
||||||
</VCol>
|
</VCol>
|
||||||
|
|
||||||
<VCol
|
|
||||||
cols="12"
|
|
||||||
md="12"
|
|
||||||
|
|
||||||
|
|
||||||
|
<VCol
|
||||||
|
cols="12"
|
||||||
|
md="12"
|
||||||
|
>
|
||||||
|
<!--
|
||||||
|
<VCard
|
||||||
|
title="Bücher eintragen"
|
||||||
|
subtitle="Dir fehlt ein Buch? Hier kannst du es eintragen!"
|
||||||
>
|
>
|
||||||
<!--
|
-->
|
||||||
<VCard
|
<VCard
|
||||||
title="Bücher eintragen"
|
class="mb-6"
|
||||||
subtitle="Dir fehlt ein Buch? Hier kannst du es eintragen!"
|
title="Gefundene Bücher:"
|
||||||
>
|
>
|
||||||
-->
|
|
||||||
<VCard
|
|
||||||
class="mb-6"
|
|
||||||
title="Gefundene Bücher:"
|
|
||||||
>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- 👉 Hier werden die Bücher aufgelistet. -->
|
<!-- 👉 Hier werden die Bücher aufgelistet. -->
|
||||||
|
|
||||||
<VCol
|
<VCol
|
||||||
@ -305,13 +123,11 @@
|
|||||||
<VCard>
|
<VCard>
|
||||||
<div class="d-flex justify-space-between flex-wrap flex-md-nowrap flex-column flex-md-row">
|
<div class="d-flex justify-space-between flex-wrap flex-md-nowrap flex-column flex-md-row">
|
||||||
<div class="ma-auto pa-5">
|
<div class="ma-auto pa-5">
|
||||||
<!--
|
<VImg
|
||||||
<VImg
|
width="200px"
|
||||||
width="150"
|
|
||||||
height="300px"
|
height="300px"
|
||||||
:src="harryPotter1"
|
:src="harry_potter"
|
||||||
/>
|
/>
|
||||||
-->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<VDivider :vertical="$vuetify.display.mdAndUp" />
|
<VDivider :vertical="$vuetify.display.mdAndUp" />
|
||||||
@ -319,149 +135,11 @@
|
|||||||
<div>
|
<div>
|
||||||
<VCardTitle>Harry Potter</VCardTitle>
|
<VCardTitle>Harry Potter</VCardTitle>
|
||||||
<VCardText>
|
<VCardText>
|
||||||
<div style="position: relative; height: 120px">
|
<!-- <div style="position: relative; height: 120px">-->
|
||||||
<!-- Fieberkurve -->
|
<!-- Fieberkurve -->
|
||||||
<canvas
|
|
||||||
id="myCanvas"
|
|
||||||
width="240"
|
|
||||||
height="130"
|
|
||||||
>
|
|
||||||
Your browser does not support the HTML canvas tag.
|
|
||||||
</canvas>
|
|
||||||
|
|
||||||
<div class="FieberkurveGesamt">
|
|
||||||
<div
|
|
||||||
class="Fieberkurve"
|
|
||||||
@click="FevercurveIsClicked('schwierigkeit')"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
id="myRange"
|
|
||||||
v-model="schwierigkeit"
|
|
||||||
type="range"
|
|
||||||
min="1"
|
|
||||||
max="7"
|
|
||||||
class="slider"
|
|
||||||
:style="{ color: '#000000' }"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="slider-track"
|
|
||||||
:style="{ backgroundColor: ColorRow1 }"
|
|
||||||
/>
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
</div>
|
|
||||||
<!-- :style="{ backgroundColor: vuetifyTheme.current.value.colors.primary }" -->
|
|
||||||
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="Fieberkurve"
|
|
||||||
@click="FevercurveIsClicked('stimmung')"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
id="myRange"
|
|
||||||
v-model="stimmung"
|
|
||||||
type="range"
|
|
||||||
min="1"
|
|
||||||
max="7"
|
|
||||||
class="slider"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="slider-track"
|
|
||||||
:style="{ backgroundColor: ColorRow2 }"
|
|
||||||
/>
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="Fieberkurve"
|
|
||||||
@click="FevercurveIsClicked('spannung')"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
id="myRange"
|
|
||||||
v-model="spannung"
|
|
||||||
type="range"
|
|
||||||
min="1"
|
|
||||||
max="7"
|
|
||||||
class="slider"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="slider-track"
|
|
||||||
:style="{ backgroundColor: ColorRow3 }"
|
|
||||||
/>
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="Fieberkurve"
|
|
||||||
@click="FevercurveIsClicked('gewalt')"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
id="myRange"
|
|
||||||
v-model="gewalt"
|
|
||||||
type="range"
|
|
||||||
min="1"
|
|
||||||
max="7"
|
|
||||||
class="slider"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="slider-track"
|
|
||||||
:style="{ backgroundColor: ColorRow4 }"
|
|
||||||
/>
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="Fieberkurve"
|
|
||||||
@click="FevercurveIsClicked('erotik')"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
id="myRange5"
|
|
||||||
v-model="erotik"
|
|
||||||
type="range"
|
|
||||||
min="1"
|
|
||||||
max="7"
|
|
||||||
class="slider"
|
|
||||||
:class="{ backgroundColor: '#e70707' }"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="slider-track"
|
|
||||||
:style="{ backgroundColor: ColorRow5 }"
|
|
||||||
/>
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
<div class="kreis" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</VCardText>
|
</VCardText>
|
||||||
|
|
||||||
|
|
||||||
<VCardText>
|
<VCardText>
|
||||||
Harry Potter ist eine Kinder- und Jugendromanreihe der englischen Schriftstellerin Joanne K. Rowling. ...
|
Harry Potter ist eine Kinder- und Jugendromanreihe der englischen Schriftstellerin Joanne K. Rowling. ...
|
||||||
</VCardText>
|
</VCardText>
|
||||||
@ -498,6 +176,8 @@
|
|||||||
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
||||||
import { themeConfig } from '@themeConfig'
|
import { themeConfig } from '@themeConfig'
|
||||||
import { ref, onMounted, watch } from 'vue'
|
import { ref, onMounted, watch } from 'vue'
|
||||||
|
import Fieberkurve from "@/components/Fieberkurve.vue"
|
||||||
|
import harry_potter from "@/assets/images/harry_potter_stein_weisen_rowling.jpg"
|
||||||
import { useTheme } from "vuetify"
|
import { useTheme } from "vuetify"
|
||||||
|
|
||||||
const message = ref('')
|
const message = ref('')
|
||||||
@ -596,40 +276,18 @@ const checkboxContent = [
|
|||||||
]
|
]
|
||||||
|
|
||||||
const selectedCheckbox = ref([])
|
const selectedCheckbox = ref([])
|
||||||
const toggleCheckboxOne = ref(true)
|
|
||||||
|
|
||||||
const schwierigkeit = ref(4)
|
// const toggleCheckboxOne = ref(true)
|
||||||
const stimmung = ref(4)
|
// const genreBool = ref(false)
|
||||||
const spannung = ref(4)
|
|
||||||
const gewalt = ref(4)
|
|
||||||
const erotik = ref(4)
|
|
||||||
|
|
||||||
const genreBool = ref(false)
|
|
||||||
|
|
||||||
const isResetButtonPressed = ref(false)
|
|
||||||
const firstClick = ref(false)
|
|
||||||
|
|
||||||
const ColorRow1 = ref('#a8a6a6')
|
|
||||||
const ColorRow2 = ref('#a8a6a6')
|
|
||||||
const ColorRow3 = ref('#a8a6a6')
|
|
||||||
const ColorRow4 = ref('#a8a6a6')
|
|
||||||
const ColorRow5 = ref('#a8a6a6')
|
|
||||||
|
|
||||||
const genre1Color = ref('#a8a6a6')
|
// const genre1Color = ref('#a8a6a6')
|
||||||
|
|
||||||
const isRow1Active = ref(false)
|
// let activeGenre = []
|
||||||
const isRow2Active = ref(false)
|
|
||||||
const isRow3Active = ref(false)
|
|
||||||
const isRow4Active = ref(false)
|
|
||||||
const isRow5Active = ref(false)
|
|
||||||
|
|
||||||
// const genre1 = ref(true)
|
/*let genres = [{
|
||||||
// const genre2 = ref(true)
|
|
||||||
// const genre3 = ref(true)
|
|
||||||
|
|
||||||
let activeGenre = []
|
|
||||||
|
|
||||||
let genres = [{
|
|
||||||
id: 1,
|
id: 1,
|
||||||
name: "Horror",
|
name: "Horror",
|
||||||
icon: "tabler-ghost-2",
|
icon: "tabler-ghost-2",
|
||||||
@ -657,27 +315,25 @@ let genres = [{
|
|||||||
color: "#9fa8da",
|
color: "#9fa8da",
|
||||||
icon: "tabler-ghost-2",
|
icon: "tabler-ghost-2",
|
||||||
bool: false,
|
bool: false,
|
||||||
}]
|
}]*/
|
||||||
|
|
||||||
const abenteuerBool = ref(false)
|
// const abenteuerBool = ref(false)
|
||||||
const people = ref(['Mike'])
|
// const people = ref(['Mike'])
|
||||||
|
|
||||||
function TestGenreActive(genre, bool){
|
/*function TestGenreActive(genre, bool){
|
||||||
console.log("Hey Genre:", genre, bool)
|
console.log("Hey Genre:", genre, bool)
|
||||||
bool = !bool
|
bool = !bool
|
||||||
console.log("Bye Genre:", genre, bool)
|
console.log("Bye Genre:", genre, bool)
|
||||||
|
|
||||||
return bool
|
return bool
|
||||||
|
|
||||||
}
|
}*/
|
||||||
|
|
||||||
|
/*function IsGenreActive(genre) {
|
||||||
|
|
||||||
function IsGenreActive(genre) {
|
|
||||||
return activeGenre.includes(genre)
|
return activeGenre.includes(genre)
|
||||||
}
|
}*/
|
||||||
|
|
||||||
function ToggleIsGenreSelected(genre) {
|
/*function ToggleIsGenreSelected(genre) {
|
||||||
console.log('IsGenreActive', IsGenreActive(genre))
|
console.log('IsGenreActive', IsGenreActive(genre))
|
||||||
console.log('ToggleIsGenreSelected genre', genre)
|
console.log('ToggleIsGenreSelected genre', genre)
|
||||||
if (IsGenreActive(genre)){
|
if (IsGenreActive(genre)){
|
||||||
@ -691,17 +347,15 @@ function ToggleIsGenreSelected(genre) {
|
|||||||
console.log(`else values: ${activeGenre}`)
|
console.log(`else values: ${activeGenre}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// this.genreBool = !this.genreBool
|
// this.genreBool = !this.genreBool
|
||||||
/*genre.bool = !genre.bool
|
/!*genre.bool = !genre.bool
|
||||||
genre = {
|
genre = {
|
||||||
id: genre.id,
|
id: genre.id,
|
||||||
name: genre.name,
|
name: genre.name,
|
||||||
color: genre.color,
|
color: genre.color,
|
||||||
icon: genre.icon,
|
icon: genre.icon,
|
||||||
bool: genre.bool
|
bool: genre.bool
|
||||||
}*/
|
}*!/
|
||||||
// console.log("genreBool", genreBool)
|
// console.log("genreBool", genreBool)
|
||||||
// console.log("genre", genre)
|
// console.log("genre", genre)
|
||||||
// console.log("genreselected", genre.selected)
|
// console.log("genreselected", genre.selected)
|
||||||
@ -709,7 +363,7 @@ function ToggleIsGenreSelected(genre) {
|
|||||||
// console.log("genres id", genre.id)
|
// console.log("genres id", genre.id)
|
||||||
// console.log("genres icon", genre.icon)
|
// console.log("genres icon", genre.icon)
|
||||||
// console.log("genres color", genre.color)
|
// console.log("genres color", genre.color)
|
||||||
/*genre.selected = !genre.selected
|
/!*genre.selected = !genre.selected
|
||||||
if (!genre.selected) {
|
if (!genre.selected) {
|
||||||
genre.color = "#cccccc" + "!important"
|
genre.color = "#cccccc" + "!important"
|
||||||
console.log("IF !genre.selected", genre.selected, genre.color)
|
console.log("IF !genre.selected", genre.selected, genre.color)
|
||||||
@ -719,87 +373,14 @@ function ToggleIsGenreSelected(genre) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// genre.color = "#cccccc" + "!important"
|
// genre.color = "#cccccc" + "!important"
|
||||||
console.log("genreNew", genre, genre.color)*/
|
console.log("genreNew", genre, genre.color)*!/
|
||||||
}
|
}*/
|
||||||
|
|
||||||
function FevercurveIsClicked(RowValue) {
|
|
||||||
isResetButtonPressed.value = true
|
|
||||||
switch (RowValue) {
|
|
||||||
case "schwierigkeit":
|
|
||||||
console.log("Line: 1")
|
|
||||||
ColorRow1.value = '#cccccc'
|
|
||||||
isRow1Active.value = true
|
|
||||||
break
|
|
||||||
case "stimmung":
|
|
||||||
console.log("Line: 2")
|
|
||||||
ColorRow2.value = '#cccccc'
|
|
||||||
isRow2Active.value = true
|
|
||||||
break
|
|
||||||
case "spannung":
|
|
||||||
console.log("Line: 3")
|
|
||||||
ColorRow3.value = '#cccccc'
|
|
||||||
isRow3Active.value = true
|
|
||||||
break
|
|
||||||
case "gewalt":
|
|
||||||
console.log("Line: 4")
|
|
||||||
ColorRow4.value = '#cccccc'
|
|
||||||
isRow4Active.value = true
|
|
||||||
break
|
|
||||||
case "erotik":
|
|
||||||
console.log("Line: 5")
|
|
||||||
ColorRow5.value = '#cccccc'
|
|
||||||
isRow5Active.value = true
|
|
||||||
break
|
|
||||||
}
|
|
||||||
console.log("firstClick:", firstClick.value)
|
|
||||||
|
|
||||||
if (!firstClick.value) {
|
|
||||||
rowFevercurveConnectors()
|
|
||||||
}
|
|
||||||
firstClick.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetFevercurve() {
|
|
||||||
if (!isResetButtonPressed.value) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
console.log("reset Fevercurve")
|
|
||||||
|
|
||||||
isResetButtonPressed.value = false
|
|
||||||
firstClick.value = false
|
|
||||||
|
|
||||||
ColorRow1.value = '#a8a6a6'
|
|
||||||
ColorRow2.value = '#a8a6a6'
|
|
||||||
ColorRow3.value = '#a8a6a6'
|
|
||||||
ColorRow4.value = '#a8a6a6'
|
|
||||||
ColorRow5.value = '#a8a6a6'
|
|
||||||
|
|
||||||
isRow1Active.value = false
|
|
||||||
isRow2Active.value = false
|
|
||||||
isRow3Active.value = false
|
|
||||||
isRow4Active.value = false
|
|
||||||
isRow5Active.value = false
|
|
||||||
|
|
||||||
schwierigkeit.value = 4
|
|
||||||
stimmung.value = 4
|
|
||||||
spannung.value = 4
|
|
||||||
gewalt.value = 4
|
|
||||||
erotik.value = 4
|
|
||||||
|
|
||||||
clearFevercurveConnectors()
|
|
||||||
}
|
|
||||||
|
|
||||||
// lifecycle hooks
|
// lifecycle hooks
|
||||||
/*onMounted(() => {
|
/*onMounted(() => {
|
||||||
// rowFevercurveConnectors()
|
// rowFevercurveConnectors()
|
||||||
})*/
|
})*/
|
||||||
|
|
||||||
watch([schwierigkeit, stimmung, spannung, gewalt, erotik], () => {
|
|
||||||
if (isResetButtonPressed.value){
|
|
||||||
rowFevercurveConnectors()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
/*computed() {
|
/*computed() {
|
||||||
genreBackgroundColor() {
|
genreBackgroundColor() {
|
||||||
return (genreId) => {
|
return (genreId) => {
|
||||||
@ -807,169 +388,9 @@ watch([schwierigkeit, stimmung, spannung, gewalt, erotik], () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}*/
|
}*/
|
||||||
|
|
||||||
function clearFevercurveConnectors() {
|
|
||||||
console.log("Striche werden gecleart")
|
|
||||||
|
|
||||||
let c = document.getElementById("myCanvas")
|
|
||||||
let ctx = c.getContext("2d")
|
|
||||||
ctx.clearRect(0, 0, c.width, c.height)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function rowFevercurveConnectors() {
|
|
||||||
console.log("Funktion wird aufgerufen")
|
|
||||||
|
|
||||||
let c = document.getElementById("myCanvas")
|
|
||||||
let ctx = c.getContext("2d")
|
|
||||||
|
|
||||||
//settings
|
|
||||||
// let gradient = ctx.createLinearGradient(182, 5, 41, 100)
|
|
||||||
// gradient.addColorStop("0", "#3f5efb")
|
|
||||||
// gradient.addColorStop("1.0", "#b60529")
|
|
||||||
// ctx.strokeStyle = gradient
|
|
||||||
ctx.strokeStyle = "red"
|
|
||||||
ctx.lineWidth = 4
|
|
||||||
|
|
||||||
// clear canvas
|
|
||||||
ctx.clearRect(0, 0, c.width, c.height)
|
|
||||||
ctx.beginPath()
|
|
||||||
|
|
||||||
let Breite = 240
|
|
||||||
let Hoehe = 130
|
|
||||||
let Kreis = 20
|
|
||||||
|
|
||||||
ctx.moveTo(((schwierigkeit.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((1 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
|
|
||||||
ctx.lineTo(((stimmung.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((2 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
|
|
||||||
ctx.lineTo(((spannung.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((3 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
|
|
||||||
ctx.lineTo(((gewalt.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((4 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
|
|
||||||
ctx.lineTo(((erotik.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((5 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
|
|
||||||
|
|
||||||
ctx.stroke()
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
//Grid Layout
|
|
||||||
.item1 {
|
|
||||||
grid-area: txtLinks;
|
|
||||||
background: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item2 {
|
|
||||||
grid-area: Fieberkurve;
|
|
||||||
background: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item3 {
|
|
||||||
grid-area: txtRechts;
|
|
||||||
background: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-container {
|
|
||||||
display: grid;
|
|
||||||
grid-template-areas: 'txtLinks Fieberkurve txtRechts';
|
|
||||||
gap: 10px;
|
|
||||||
justify-content: center;
|
|
||||||
line-height: 26px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-container > div {
|
|
||||||
background-color: rgba(255, 255, 255, 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
//Grid Layout END
|
|
||||||
|
|
||||||
|
|
||||||
canvas {
|
|
||||||
z-index: 2;
|
|
||||||
//border:1px solid #000000;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.FieberkurveGesamt {
|
|
||||||
height: 130px;
|
|
||||||
width: 240px;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-content: space-between;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.Fieberkurve {
|
|
||||||
position: relative;
|
|
||||||
width: 240px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
//background: #27c21f;
|
|
||||||
//padding: ;
|
|
||||||
border-radius: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.kreis {
|
|
||||||
z-index: 1;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 100%;
|
|
||||||
background: #CECCCCDB;
|
|
||||||
box-shadow: 2px 12px 27px -13px rgba(0,0,0,0.48);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.slider {
|
|
||||||
z-index: 3;
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
//top: 10px;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
|
|
||||||
//background: #c29c1f;
|
|
||||||
//height: 7.5px;
|
|
||||||
//margin-top: 3.5px;
|
|
||||||
|
|
||||||
//background: rgba(50, 150, 11, 0.81);
|
|
||||||
outline: none;
|
|
||||||
//border: 5px solid rgba(232, 64, 64, 0.83);
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-track {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
border-radius: 8px;
|
|
||||||
//background: #bb2626;
|
|
||||||
height: 10px;
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Kreis */
|
|
||||||
/* for chrome/safari */
|
|
||||||
.slider::-webkit-slider-thumb {
|
|
||||||
//z-index: 4;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
background: #F07D00;
|
|
||||||
cursor: pointer;
|
|
||||||
//border: 5px solid red;
|
|
||||||
border-radius: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* for firefox */
|
|
||||||
.slider::-moz-range-thumb {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
background: #000;
|
|
||||||
cursor: pointer;
|
|
||||||
//border: 5px solid lawngreen;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.genre-section-main {
|
.genre-section-main {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,9 +1,19 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
|
|
||||||
|
import Fieberkurve from "@/components/Fieberkurve.vue";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
$END$
|
<Fieberkurve :show-reset-button="true" :show-categories="true" />
|
||||||
|
<hr>
|
||||||
|
<br>
|
||||||
|
<Fieberkurve :show-reset-button="false" :show-categories="true" />
|
||||||
|
<br>
|
||||||
|
<hr>
|
||||||
|
<br>
|
||||||
|
<Fieberkurve :show-reset-button="false" :show-categories="false" />
|
||||||
|
<br>
|
||||||
|
<hr>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user