Final tweaks

apollo-frontend/src/app/card/card.component.html

@@ -1,7 +1,21 @@
 <div [class]="{ container: true, dialog: true, mini: mini }" #container>
     <div class="tags">
         <div class="contents" *ngFor="let type of card.types" >
-            <div [class]="[type, 'icon']" *ngIf="type !== 'normal'"></div>
+            <div [class]="[type, 'icon']" *ngIf="type === 'endangered'"></div>
+            <div [class]="[type, 'icon']" *ngIf="type === 'recycle'">
+                <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                    viewBox="0 0 380.477 380.477" xml:space="preserve">
+                    <g>
+                        <polygon points="327.713,145.251 266.734,178.233 313.709,265.247 282.199,264.756 283.13,237.175 218.117,295.995 
+                            278.434,361.755 279.577,332.674 324.343,332.674 368.884,259.75 380.477,240.048 	"/>
+                        <path d="M271.105,128.63l24.788-85.721l-25.432,14.151l-23.287-38.232l-106.014-0.107l-0.446,0.667
+                            c-0.037,0.054-3.702,5.542-8.239,13.285l-47.138,80.762l59.903,34.932l49.879-85.382l15.972,27.167l-24.04,13.551L271.105,128.63z"
+                            />
+                        <polygon points="83.151,242.314 106.861,256.434 86.7,171.113 0,192.224 24.922,207.254 3.328,246.467 45.729,320.675 
+                            56.94,339.097 165.875,339.847 166.401,270.505 67.521,269.679 	"/>
+                    </g>
+                </svg>
+            </div>
         </div>
     </div>
     <div class="main" *ngIf="!flipped">

apollo-frontend/src/app/card/card.component.scss

@@ -44,6 +44,25 @@
                 background-image: url('/assets/icons/risk-skull.svg');
                 background-color: red;
             }
+            position: relative;
+            &.endangered:hover {
+                &::after {
+                    position: absolute;
+                    opacity: 0.99999;
+                    bottom: 0;
+                    content: 'Череп на червен фон означава, че следната карта е на застрашен вид';
+                    background-color: white;
+                    max-width: 100px;
+                    z-index: 9999999;
+                    }
+            }
+            &.recycle {
+                background-color: green;
+                fill: white;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
         }
     }
     .info {

apollo-frontend/src/app/dashboard-cards/dashboard-cards.component.ts

@@ -11,6 +11,7 @@ export class DashboardCardsComponent implements OnInit {
 
   constructor(
     private userdata: UserdataService,
+    private db: DbService,
   ) { }
 
   ngOnInit(): void {

apollo-frontend/src/app/db.service.ts

@@ -17,7 +17,7 @@ export interface Card {
     info: CardParagraph[];
     imageUrl: string;
     name: string;
-    types: Array<"endangered" | "normal">;
+    types: Array<"endangered" | "normal" | "recycle">;
 }
 export interface Answer {
     choises: string[];

apollo-frontend/src/app/minigame-biotrivia/minigame-biotrivia.component.html

@@ -15,9 +15,8 @@
         <igx-linear-bar [max]="questions.length" [value]="currQuestionN - 1" class="progress"></igx-linear-bar>
         <div class="container2" *ngIf="currQuestion.photoUrlsAbove.length > 0">
             <div class="photos">
-                <div *ngFor="let photo of currQuestion.photoUrlsAbove"
+                <img *ngFor="let photo of currQuestion.photoUrlsAbove"
-                    class="photo" [style.background-image]="'url(\'' + photo + '\')'">
+                    class="photo" [src]="photo">
-                </div>
             </div>
 
             <h6>{{currQuestion.question}}</h6>

apollo-frontend/src/app/minigame-biotrivia/minigame-biotrivia.component.scss

@@ -70,7 +70,6 @@
         gap: .5em;
         margin: 1em 0;
         .photo {
-            flex: 0 0 150px;
             height: 150px;
             background-size: cover;
             background-position: center;

apollo-frontend/src/app/minigame-conveyor-recycling/minigame-conveyor-recycling.component.ts

@@ -140,7 +140,8 @@ export class MinigameConveyorRecyclingComponent implements AfterViewInit, OnInit
     throwOutSounds: HTMLAudioElement[] = [];
     backgroundMusic: HTMLAudioElement;
 
-    trashSpeed = 1000;
+    trashSpeed = 200;
+    nextTrasgSpeedDecrease = 55;
     simulationSpeed = 10;
     friction = 5;
     gravitation = 9;
@@ -156,13 +157,7 @@ export class MinigameConveyorRecyclingComponent implements AfterViewInit, OnInit
     milliseconds = 0;
 
     won = false;
-    wonCard: Card = {
+    wonCard: Card = null;
-        imageUrl: '',
-        info: [],
-        name: 'test',
-        types: ['endangered'],
-    };
-
     timeMax = 1;
     time = 0;
 
@@ -295,6 +290,10 @@ export class MinigameConveyorRecyclingComponent implements AfterViewInit, OnInit
             const pointX = (trash.el.rect.left + trash.el.rect.right) / 2;
             const pointY = trash.el.rect.bottom;
 
+            this.trashSpeed -= this.nextTrasgSpeedDecrease;
+            this.milliseconds = 0;
+            this.nextTrasgSpeedDecrease = Math.round(this.nextTrasgSpeedDecrease / 2);
+
             if (newPos.bin.acceptedTypes.includes(trash.el.type)) {
                 this.points++;
                 this.showPoint(1, pointX, pointY);
@@ -354,7 +353,7 @@ export class MinigameConveyorRecyclingComponent implements AfterViewInit, OnInit
         this.conveyor.speed = 2;
         this.mainLoopID = setInterval(() => {
             if (!this.suspended) {
-                if (this.milliseconds % (this.simulationSpeed * 100) === 0) {
+                if (this.milliseconds % (this.simulationSpeed * this.trashSpeed) === 0) {
                     this.spawnTrash();
                 }
 
@@ -431,8 +430,11 @@ export class MinigameConveyorRecyclingComponent implements AfterViewInit, OnInit
 
     restart(): void {
         this.points = 0;
+        this.mistakes = 0;
         this.ended = false;
         this.backgroundMusic.currentTime = 0;
+        this.trashSpeed = 200;
+        this.nextTrasgSpeedDecrease = 50;
         this.time = 0;
         this.trashes.forEach(v => v.el.element.remove());
         this.trashes = [];

apollo-frontend/src/app/mock.card_types.ts

@@ -553,4 +553,88 @@ export const mock_card_types: Saved<Card>[] = [
             ],
         },
     },
+    {
+        id: "34",
+        el: {
+            name: "Кенчета",
+            types: ['recycle'],
+            imageUrl: "/assets/images/cards/tincan.png",
+            info: [
+                {
+                    heading: "До луната и обратно... 20 пъти",
+                    content: "Американците изхвърлят всяка година кутиики от сода или бутилки, които са достатъчни да стигнат до Луната и да се върнат около 20 пъти.",
+                },
+            ],
+        },
+    },
+    {
+        id: "35",
+        el: {
+            name: "Тоалетна хартия",
+            types: ['recycle'],
+            imageUrl: "/assets/images/cards/toilet-paper.jpg",
+            info: [
+                {
+                    heading: "Тоалетна-o-ception",
+                    content: "27,000 дървета се отсичат всеки ден за направата на тоалетна хартия.",
+                },
+            ],
+        },
+    },
+    {
+        id: "36",
+        el: {
+            name: "Хартия",
+            types: ['recycle'],
+            imageUrl: "/assets/images/cards/image_19.jpg",
+            info: [
+                {
+                    heading: "Интересно",
+                    content: "1 тон рециклирана хартия спасява около 13 дървета и 32 000 литра вода.",
+                },
+            ],
+        },
+    },
+    {
+        id: "37",
+        el: {
+            name: "Пластмаса",
+            types: ['recycle'],
+            imageUrl: "/assets/images/cards/image_20.jpg",
+            info: [
+                {
+                    heading: "Интересно",
+                    content: "На сметището пластмасата се разпада 400 години.",
+                },
+            ],
+        },
+    },
+    {
+        id: "38",
+        el: {
+            name: "Пластмаса",
+            types: ['recycle'],
+            imageUrl: "/assets/images/cards/image_21.jpg",
+            info: [
+                {
+                    heading: "Интересно",
+                    content: "Спестената енергия от рециклирането на 1 пластмасова бутилка ще захрани компютър за 25 минути.",
+                },
+            ],
+        },
+    },
+    {
+        id: "39",
+        el: {
+            name: "Стъкло",
+            types: ['recycle'],
+            imageUrl: "/assets/images/cards/image_22.jpg",
+            info: [
+                {
+                    heading: "Интересно",
+                    content: "1 рециклирана стъклена бутилка спестява електричеството, нужно на телевизора ви да работи 1.5 часа.",
+                },
+            ],
+        },
+    },
 ];

apollo-frontend/src/app/mock.questions.ts

@@ -253,4 +253,62 @@ export const mock_questions: Saved<Question>[] = [
             }
         }
     },
+    {
+        id: '16',
+        el: {
+            category: 'plants',
+            photoUrlsAbove: [
+                '/assets/images/questions/izcheznali-1.png',
+                '/assets/images/questions/izcheznali-2.png',
+                '/assets/images/questions/izcheznali-3.png',
+            ],
+            question: 'Кое от тези растения е изчезнало в България?',
+            answer: {
+                choises: [
+                    'Еделвайс',
+                    'Източна тинтява',
+                    'Бардуче',
+                ],
+                correctChoise: 'Източна тинтява',
+            }
+        }
+    },
+    {
+        id: '17',
+        el: {
+            category: 'plants',
+            photoUrlsAbove: [
+                '/assets/images/questions/nartsisova-susunka.png',
+                '/assets/images/questions/damsko-surce.png',
+            ],
+            question: 'Кое от тези растения е защитено?',
+            answer: {
+                choises: [
+                    'Нарцисоцветна съсънка',
+                    'Дамско сърце',
+                ],
+                correctChoise: 'Нарцисоцветна съсънка',
+            }
+        }
+    },
+    {
+        id: '18',
+        el: {
+            category: 'plants',
+            photoUrlsAbove: [
+                '/assets/images/questions/grebenat-na-petela.png',
+                '/assets/images/questions/cveteto-prilep.png',
+                '/assets/images/questions/liliq-kobra.png',
+            ],
+            question: 'Кое от тези растения се среща в България?',
+            answer: {
+                choises: [
+                    'Гребенът на петела',
+                    'Цветето лилия',
+                    'Лилия кобра',
+                ],
+                correctChoise: 'Гребенът на петела',
+            }
+        }
+    },
 ];

apollo-frontend/src/assets/icons/recycling.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 380.477 380.477" xml:space="preserve">
+<g>
+	<polygon points="327.713,145.251 266.734,178.233 313.709,265.247 282.199,264.756 283.13,237.175 218.117,295.995 
+		278.434,361.755 279.577,332.674 324.343,332.674 368.884,259.75 380.477,240.048 	"/>
+	<path d="M271.105,128.63l24.788-85.721l-25.432,14.151l-23.287-38.232l-106.014-0.107l-0.446,0.667
+		c-0.037,0.054-3.702,5.542-8.239,13.285l-47.138,80.762l59.903,34.932l49.879-85.382l15.972,27.167l-24.04,13.551L271.105,128.63z"
+		/>
+	<polygon points="83.151,242.314 106.861,256.434 86.7,171.113 0,192.224 24.922,207.254 3.328,246.467 45.729,320.675 
+		56.94,339.097 165.875,339.847 166.401,270.505 67.521,269.679 	"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

apollo-frontend/src/styles.scss

@@ -41,4 +41,5 @@ $my-color-palette: igx-palette($primary: $company-color,
     background-color: #f8f8f855;
     backdrop-filter: blur(10px);
     box-shadow: #0004 3px 3px 5px;
+    z-index: -1 ;
 }