Skip to content

Commit

Permalink
Add easy, total and percent mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@Juliafk
Juliafk committed Jan 24, 2024
1 parent a1cef2d commit 5fdad29
Show file tree
Hide file tree
Showing 4 changed files with 145 additions and 41 deletions.
40 changes: 30 additions & 10 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
.button{
background-color: #17365c;
color:white;
}

.input{
background-color: #e7e7e7;
}
Expand Down Expand Up @@ -60,10 +55,6 @@
width: fit-content;
}

.header-container {
max-height: 10vh;
}


figure {
position: relative;
Expand Down Expand Up @@ -114,4 +105,33 @@ html,body, #__nuxt, #__layout{
display: flex;
flex-direction: column;
justify-content: space-around;
}
}

.button {
background-color: #17365c;
color: white;
}

.button-top {
background-color: #17365c;
color: white;
padding: 10px 15px;
margin: 4px 2px;
border: none;
cursor: pointer;
border-radius: 5px;
z-index: 10;
}

.button-top:hover {
background-color: #38495e;
}

.lable {
background-color: #17365c;
}

.header-container {
position: relative;
}

6 changes: 6 additions & 0 deletions assets/enum/mode.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export const Mode = Object.freeze({
EASY: "easy",
TOTAL: "total",
PERCENT: "percent",
NONE: "none"
});
116 changes: 89 additions & 27 deletions components/Dice.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
<div class="flex flex-col items-start">
<label for="num-rolls" class="text-lg font-medium">Anzahl Würfe:</label>
<input type="number" id="num-rolls" class="border-gray-300 border rounded-md px-3 py-2 w-full" min="1" max="1000000" v-bind:keyup=enforceMinMax() v-model="numberOfRolls">
<label v-if="warningRolls" class="text-red-700">Es Muss mindestens einen Wurf und maximal 1000000 Würfe geben.</label>
<label v-if="warningRollsLow" class="text-red-700">Du musst mindestens 1 eingeben.</label>
<label v-if="warningRollsHigh" class="text-red-700">Du darfst maximal 1.000.000 eingeben.</label>
</div>

<div class="flex flex-col space-y-8">
Expand All @@ -14,23 +15,33 @@
<div ref="container" class="space-y-2 lableContainer">
<label>Auf dem Würfel sind:</label>
<div>
<label class="text-lg font-medium redInput w-full block">{{ 7 }} Rote Seiten</label>
<label class="text-lg font-medium redInput w-full block">{{ 7 }} rote Seiten</label>
</div>
<div>
<label class="text-lg font-medium greenInput w-full block">{{ 5 }} Grüne Seiten</label>
<label class="text-lg font-medium greenInput w-full block">{{ 5 }} grüne Seiten</label>
</div>
<div>
<label class="text-lg font-medium yellowInput w-full block">{{ 5 }} Gelbe Seiten</label>
<label class="text-lg font-medium yellowInput w-full block">{{ 5 }} gelbe Seiten</label>
</div>
<div>
<label class="text-lg font-medium blueInput w-full block">{{ 3 }} Blaue Seiten</label>
<label class="text-lg font-medium blueInput w-full block">{{ 3 }} blaue Seiten</label>
</div>
</div>
<div class="table-container">
<div class="row-descriptions">
<div v-if="this.easy" class="row-descriptions">
<div>Tiere</div>
<div>Stand</div>
</div>
<div v-if="this.total" class="row-descriptions">
<div>Tiere</div>
<div>Stand</div>
<div>Absolut</div>
</div>
<div v-if="this.percent" class="row-descriptions">
<div>Tiere</div>
<div>Stand</div>
<div>Absolut</div>
<div>Prozent</div>
</div>
<table class="dice-table">
<thead>
Expand All @@ -57,33 +68,79 @@

<script>
import {defineComponent, createApp} from 'vue'
import { Mode } from '../assets/enum/mode.js';
export default {
props: {
default: {
type: String,
default: Mode.NONE, // Standardwert setzen
validator: value => Object.values(Mode).includes(value)
}
},
watch: {
default(newVal, oldVal) {
console.log('Modus geändert von', oldVal, 'zu', newVal);
if(oldVal == newVal) return;
if(newVal == Mode.EASY) {
this.easy = true;
this.total = false;
this.percent = false;
this.diceResults = [{ ameise: 0, frosch: 0, schnecke: 0, igel: 0 }]
console.log("Easy");
}
if(newVal == Mode.TOTAL) {
this.total = true;
this.easy = false;
this.percent = false;
this.diceResults = [{ ameise: 0, frosch: 0, schnecke: 0, igel: 0 },
{ ameise: 0, frosch: 0, schnecke: 0, igel: 0 }]
console.log("Total");
}
if(newVal == Mode.PERCENT) {
this.percent = true;
this.easy = false;
this.total = false;
this.diceResults = [{ ameise: 0, frosch: 0, schnecke: 0, igel: 0 },
{ ameise: 0, frosch: 0, schnecke: 0, igel: 0 },
{ ameise: 0, frosch: 0, schnecke: 0, igel: 0 }]
console.log("Percent");
}
}
},
data() {
return {
numberOfRolls: 0,
easy: false,
total: false,
percent: false,
numberOfRolls: '',
totalSides: 20,
rolls: [],
warningRolls: false,
warningSites: false,
warningRollsHigh: false,
warningRollsLow: false,
diceSidesInfo: [
{rank: 0, color:'red', text: 'Rote Seiten: ', classColor: 'redInput' , sides: 7},
{rank: 1, color:'green', text: 'Grüne Seiten: ', classColor: 'greenInput' , sides: 5},
{rank: 2, color:'yellow', text: 'Gelbe Seiten: ', classColor: 'yellowInput' , sides: 5},
{rank: 3, color:'blue', text: 'Blaue Seiten: ', classColor: 'blueInput' , sides: 3},
],
diceResults: [
{ ameise: 0, frosch: 0, schnecke: 0, igel: 0 },
{ ameise: 0, frosch: 0, schnecke: 0, igel: 0 },
{ ameise: 0, frosch: 0, schnecke: 0, igel: 0 }
]
],
}
},
methods: {
diceRolled() {
const rolls = [];
if (this.warningRolls || this.warningSites) {
if (this.warningRollsLow || this.warningRollsHigh) {
this.rolls = rolls;
return;
}
Expand Down Expand Up @@ -113,31 +170,36 @@
this.diceResults[0].schnecke = (rolls.filter(roll => roll === 'yellow').length);
this.diceResults[0].igel = (rolls.filter(roll => roll === 'blue').length);
this.diceResults[1].ameise = this.diceResults[1].ameise + (rolls.filter(roll => roll === 'red').length);
this.diceResults[1].frosch = this.diceResults[1].frosch + (rolls.filter(roll => roll === 'green').length);
this.diceResults[1].schnecke = this.diceResults[1].schnecke + (rolls.filter(roll => roll === 'yellow').length);
this.diceResults[1].igel = this.diceResults[1].igel + (rolls.filter(roll => roll === 'blue').length);
if (this.total || this.percent) {
this.diceResults[1].ameise = this.diceResults[1].ameise + (rolls.filter(roll => roll === 'red').length);
this.diceResults[1].frosch = this.diceResults[1].frosch + (rolls.filter(roll => roll === 'green').length);
this.diceResults[1].schnecke = this.diceResults[1].schnecke + (rolls.filter(roll => roll === 'yellow').length);
this.diceResults[1].igel = this.diceResults[1].igel + (rolls.filter(roll => roll === 'blue').length);
}
if (this.percent) {
this.diceResults[2].ameise = (((rolls.filter(roll => roll === 'red').length) / this.numberOfRolls) * 100).toFixed() + "%";
this.diceResults[2].frosch = (((rolls.filter(roll => roll === 'green').length) / this.numberOfRolls) * 100).toFixed() + "%";
this.diceResults[2].schnecke = (((rolls.filter(roll => roll === 'yellow').length) / this.numberOfRolls) * 100).toFixed() + "%";
this.diceResults[2].igel = (((rolls.filter(roll => roll === 'blue').length) / this.numberOfRolls) * 100).toFixed() + "%";
}
this.$emit('rollDice');
},
enforceMinMax() {
if (this.numberOfRolls < 0 | this.numberOfRolls > 1000000 | !this.numberOfRolls & this.numberOfRolls != "0") {
this.warningRolls = true;
if (this.numberOfRolls > 1000000) {
this.warningRollsHigh = true;
}
else {
this.warningRolls = false;
}
},
warningSitesChange(sides) {
if(sides < 0 | sides > 1000 | !sides & sides != "0") {
this.warningSites = true;
else if ((this.numberOfRolls < 1) && (this.numberOfRolls != '')) {
this.warningRollsLow = true;
}
else {
this.warningSites = false;
this.warningRollsHigh = false;
this.warningRollsLow = false;
}
},
}
}
</script>
24 changes: 20 additions & 4 deletions pages/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
<template>
<div class="header-container flex w-full flex-wrap flex-row justify-between">
<label class="w-full button text-white rounded-md px-4 p-4 m-0 mt-2 ml-4 mr-4 text-center text-3xl">Wettlauf</label>
<div class="header-container flex w-full">
<div class="buttons-container flex flex-row rounded-md px-4 p-4 m-0 mt-2 ml-4 mr-2">
<button class="button-top" @click="easy">Einfach</button>
<button class="button-top" @click="total">Absolut</button>
<button class="button-top" @click="percent">Prozent</button>
</div>
<label class="lable w-full text-white rounded-md px-4 p-4 m-0 mt-2 ml-2 mr-4 text-center text-3xl">Wettlauf</label>
</div>

<div id="x-top-level-container" class="flex h-full w-full flex-wrap flex-row justify-between">
<div id="y-dice-control-container" class="flex flex-col grow w-full lg:w-1/5 xl:w-1/5 p-4">
<div id="x-dices-container" class="flex flex-row space-x-4 mt-1">
<div class="y-dice-container flex flex-col grow lg:w-1/2 xl:w-1/2">
<Dice ref="dice" @rollDice="rollDice"></Dice>
<Dice :default="modeData" ref="dice" @rollDice="rollDice"></Dice>
</div>
</div>
</div>
Expand All @@ -26,11 +32,13 @@
import { Chart } from 'chart.js/auto';
import { Bundle } from 'magic-string';
import lodash from "lodash";
import { Mode } from '../assets/enum/mode.js';
export default{
data() {
return {
modeData: Mode.NONE,
chartHorizontal: true,
chart: null,
chartData: {
Expand Down Expand Up @@ -75,7 +83,6 @@ export default{
},
title: {
display: true,
text: "Häufigkeitsverteilung",
color: "black",
font: {
family: "'Arial', 'Helvetica', 'sans-serif'",
Expand Down Expand Up @@ -106,6 +113,15 @@ export default{
}
},
methods: {
easy() {
this.modeData = Mode.EASY;
},
total() {
this.modeData = Mode.TOTAL;
},
percent() {
this.modeData = Mode.PERCENT;
},
updateChart() {
let dice = this.$refs.dice;
if (( dice.numberOfRolls == 1)) {
Expand Down

0 comments on commit 5fdad29

Please sign in to comment.