Revize 977060b9

Revert "Issue @7957 #4h"

This reverts commit 31d7501407215a8231bb8604220a81dd33979ff8.

resources/views/categories/index.blade.php

@@ -1 @@
-@extends('layouts.app')
+@extends('layouts.art')
 
 @section('title', 'Categories')
 
 @section('content')
     @if(isset($user))
         {{--<p><?php dd($categories); ?></p>--}}
-        <div class="cat-main-div" onclick="resetEnter()">
-            <div class="head-title text-center">
-                <h1>choose a few topics</h1>
-            </div>
-            <div class="row">
-                {{--@for($k = 1; $k <= count($categories);$k++)--}}
-                @for($k = 0; $k < $count;$k++)
-                    <div class="col-md-2">
-                        <button class="btn btn-dark cat-tile" onclick="showEnterButton({{$categoryNames[$k]->id}})">
-                            {{$categoryNames[$k]->nameCZ}}
-                        </button>
-                    </div>
-                @endfor
-            </div>
-            <div class="carousel-button">
-                <a class="btn button-square cat-enter-butt" role="button">enter</a>
-            </div>
+        <div>
+            <button type="button" class="btn btn-primary button-image monButton"></button>
+        </div>
+        <div class="head-title text-center">
+            <h1>choose a few topics</h1>
+        </div>
+        <div class="content" id="canvas">
+            {{--@for($k = 1; $k <= count($categories);$k++)--}}
+            @for($k = 1; $k <= 10;$k++)
+                @if($categorySizes[$k-1] == 1)
+                        <button type="button" class="btn btn-circle rounded-circle btn-categories btn-sm" id="cat-{{$k}}">{{$categoryNames[$k-1]->nameEN}}</button>
+                @elseif($categorySizes[$k-1] == 2)
+                        <button type="button" class="btn btn-circle rounded-circle btn-categories btn-dm" id="cat-{{$k}}">{{$categoryNames[$k-1]->nameEN}}</button>
+                @else
+                        <button type="button" class="btn btn-circle rounded-circle btn-categories btn-xl" id="cat-{{$k}}">{{$categoryNames[$k-1]->nameEN}}</button>
+                @endif
+            @endfor
         </div>
         <script>
-            var catId = -1;
-            var show = 0;
-
-            function showEnterButton(id)
+            function randomCategoryPos(name, countButtons)
             {
-                catId = id;
-                show = 1;
-                $(".cat-enter-butt").css('display', "inline");
-            }
+                var DISTANCE = 360;
+                var MAX_DISTANCE = 3.5 * DISTANCE;
+                var sWidth = screen.width;
+                var positionsX = [];
+                var positionsY = [];
+                var types = [];
+                var offset = 50;
 
-            function resetEnter()
-            {
-                if(show == 0)
+                if(sWidth <= 540)
                 {
-                    catId = -1;
-                    $(".cat-enter-butt").css('display', "none");
+                    sWidth -= 100;
+                    DISTANCE = 190;
+                    MAX_DISTANCE = 3.5 * DISTANCE;
+                    offset = 25;
+                }
+                else
+                {
+                    if(sWidth > 720)
+                    {
+                        sWidth = 720;
+                    }
+                }
+                console.log(DISTANCE+ "dis\n");
+                console.log(MAX_DISTANCE+ "max_dis\n");
+                for(var i = 0; i < countButtons; i++)
+                {
+                    var size = document.getElementById(name + (i+1)).className;
+                    var type;
+                    if(size.includes("btn-sm"))
+                    {
+                        if(sWidth <= 540)
+                        {
+                            type = 45;
+                        }
+                        else
+                        {
+                            type = 60;
+                        }
+                    }
+                    else if(size.includes("btn-dm"))
+                    {
+                        if(sWidth <= 540)
+                        {
+                            type = 65;
+                        }
+                        else
+                        {
+                            type = 120;
+                        }
+                    }
+                    else
+                    {
+                        if(sWidth <= 540)
+                        {
+                            type = 90;
+                        }
+                        else
+                        {
+                            type = 180;
+                        }
+                    }
+                    console.log(type + "<br>");
+                    //document.write(type + "<br>");
+
+                    var done = true;
+                    var topS;
+                    var rightS;
+                    while(done)
+                    {
+                        if(i == 0)
+                        {
+                            topS = offset + type;
+                        }
+                        else
+                        {
+                            topS = (Math.floor(Math.random() * 2048) + offset) + type;
+                        }
+                        rightS = (Math.floor(Math.random() * sWidth) + 1) + type;
+                        console.log(topS + " " + rightS + "nn<br>");
+
+                        //Check distancing from other circles
+                        var okay = true;
+                        for(var k = 0; k < positionsX.length; k++)
+                        {
+                            var powX = Math.abs(positionsX[k] - topS);
+                            var powY = Math.abs(positionsY[k] - rightS);
+                            var tmp = Math.sqrt((powX*powX) + (powY*powY));
+                            console.log(tmp+ "tmp<br>");
+                            if(tmp < DISTANCE)
+                            {
+                                okay = false;
+                                break;
+                            }
+                        }
+
+                        if(okay)
+                        {
+                            done = false;
+                        }
+                    }
+
+                    //document.write("<br>");
+                    positionsX.push(topS);
+                    positionsY.push(rightS);
+                    types.push(type);
+                }
+
+                for(var i = 1; i <= countButtons; i++)
+                {
+                    document.getElementById(name + i).style.top = (positionsX[i-1] - types[i-1]) + "px";
+                    document.getElementById(name + i).style.right = (positionsY[i-1] - types[i-1]) + "px";
                 }
-                show = 0;
             }
+
+            var countButtons = document.getElementById("canvas").getElementsByTagName('button').length;
+            randomCategoryPos("cat-", countButtons);
         </script>
     @else
         <ul class="list-group">