simulation.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="assets/logo.png">
    <title data-i18n="title">Sandbox Simulation</title>

    <!-- <script src="libraries/p5.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/p5@1.11.8/lib/p5.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.3.js"
        integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/673bbe22a9.js" crossorigin="anonymous"></script>

    <script src="objects.js"></script>
    <script src="objectCreation.js"></script>
    <script src="simulation.js"></script>

    <script src="movement.js"></script>

    <link rel="stylesheet" href="simulationStylesheet.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>

    <script src="translations.js"></script>
    <script src="languageSwitcher.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Initialize localization
            const languageSelector = document.getElementById('language-selector');
            languageSelector.addEventListener('change', function () {
                i18next.changeLanguage(this.value);
            });

            // Set initial language
            const savedLanguage = localStorage.getItem('language') || 'en';
            languageSelector.value = savedLanguage;
            i18next.changeLanguage(savedLanguage);
        });
    </script>
</head>

<body onbeforeunload="return youSure()">
    <div id="paras"></div>
    <div id="container">
        <div onmouseover="disableSpawn()" onmouseout="enableSpawn()">
            <span onclick="toggleCreateObjectScreen()" class="fa-solid fa-xmark"></span>
            <h2 data-i18n="title">Създай Обект</h2>
            <h4 data-i18n="chooseObject">Избери Обект</h4>
            <label for="planet" data-i18n="planet">Планета </label><input type="radio" id="planet" name="choice"
                value="planet">

            <label for="star" data-i18n="star">Звезда </label><input type="radio" id="star" name="choice"
                value="star"><br>

            <h4 data-i18n="enterMass">Въведи Маса</h4>
            <input type="text" id="mass" data-i18n-placeholder="massPlaceholder" placeholder="Например: 300">
            <h4 data-i18n="enterRadius">Въведи Радиус</h4>
            <input type="text" id="radius" data-i18n-placeholder="radiusPlaceholder" placeholder="Например: 100">

            <h4 data-i18n="chooseColor">Избери цвят</h4>
            <select name="colors" id="colors">
                <option value="normal" data-i18n="defaultColor">По подразбиране (синьо/жълто)</option>
                <option value="aqua" data-i18n="aqua">Аква</option>
                <option value="black" data-i18n="black">Черно</option>
                <option value="blue" data-i18n="blue">Синьо</option>
                <option value="brown" data-i18n="brown">Кафяво</option>
                <option value="green" data-i18n="green">Зелено</option>
                <option value="grey" data-i18n="grey">Сиво</option>
                <option value="indigo" data-i18n="indigo">Индиго</option>
                <option value="magenta" data-i18n="magenta">Магента</option>
                <option value="orange" data-i18n="orange">Оранжево</option>
                <option value="pink" data-i18n="pink">Розово</option>
                <option value="purple" data-i18n="purple">Лилаво</option>
                <option value="red" data-i18n="red">Червено</option>
                <option value="violet" data-i18n="violet">Виолетово</option>
                <option value="white" data-i18n="white">Бяло</option>
                <option value="yellow" data-i18n="yellow">Жълто</option>
            </select>
            <button onclick="createObject()" data-i18n="create">Създай</button>
        </div>
    </div>


    <div class="btn" onmouseover="disableSpawn()" onmouseout="enableSpawn()"><span class="fas fa-bars"></span></div>

    <nav class="sidebar" onmouseover="disableSpawn()" onmouseout="enableSpawn()">
        <div class="text" data-i18n="title">Меню</div>

        <ul>
            <li>
                <a href="#" class="feat-btn" data-i18n="objects">Обекти</a><span class="fas fa-caret-down first"></span>

                <ul class="feat-show">
                    <li><button onclick="toggleCreateObjectScreen()" data-i18n="createObject">Създай Обект</button>
                    </li>
                    <li><button onclick="reset()" data-i18n="clearObjects">Изчисти Обектите От Екрана</button></li>

                    <li>
                        <a href="#" class="allobjs-btn">
                            <div class="text choice" data-i18n="allObjects">Всички Обекти</div>
                            <span class="fas fa-caret-down seventh"></span>
                        </a>

                        <ul id="allobjsul" class="allobjs-show">
                            <li>
                                <div id="radioObjects" class="allRads"></div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>

            <li>
                <a href="#" class="learn-btn" data-i18n="learn">Научи</a><span class="fas fa-caret-down fifth"></span>

                <ul class="learn-show">
                    <div class="text choice" data-i18n="gravity">Гравитация</div>

                    <li>
                        <a href="#" class="def-btn">
                            <div class="text choice" data-i18n="definition">Дефиниция</div>
                            <span class="fas fa-caret-down sixth"></span>
                        </a>
                    </li>

                    <ul class="def-show">
                        <li>
                            <div class="text smaller" data-i18n="gravityDefinition">Гравитацията е явление, което
                                кара всеки обект с маса или енергия
                                да се привлича с всеки друг обект във вселената.</div>
                        </li>
                    </ul>

                    <li>
                        <a href="#" class="formula-btn">
                            <div class="text choice" data-i18n="formula">Формула</div>
                            <span class="fas fa-caret-down eight"></span>
                        </a>
                    </li>

                    <ul class="formula-show">
                        <li>
                            <div class="text smaller" data-i18n="formulaDescription">Формулата, с която се
                                изчислява гравитационното притегляне е</div>
                            <img src="assets/gravitational formula(white).png" width="336" height="110"
                                alt="F = G*((M1*M2)/r*r)">
                            <div class="text smaller" data-i18n="formulaUnits">Това са всички мерни единици във
                                формулата и какво показват</div>
                            <img src="assets/meaning_behing_gravitational_formula.png" width="382" height="125"
                                alt="Physics Formulas">
                        </li>
                    </ul>
                </ul>
            </li>

            <li>
                <a href="#" class="opt-btn" data-i18n="settings">Настройки</a><span
                    class="fas fa-caret-down third"></span>

                <ul class="opt-show">
                    <li>
                        <div class="text" data-i18n="changeRules">Промени Правилата</div>
                    </li>

                    <!-- <li><button onclick="randomizingPosition()">Произволни Посоки</button></li>
						<li><button onclick="orbiting()">Орбитиране</button></li> -->

                    <li>
                        <div class="text choice">
                            <span data-i18n="destroyOnCollision">Унищожи При Допир</span>
                            <label class="switch">
                                <input onclick="destroyObject()" id="destroy" type="checkbox" checked>
                                <span class="slider"></span>
                            </label>
                        </div>
                    </li>

                    <li>
                        <div class="text choice">
                            <span data-i18n="startOrbit">Започни Орбитация</span>
                            <label class="switch">
                                <input onclick="orbiting()" id="destroy" type="checkbox">
                                <span class="slider"></span>
                            </label>
                        </div>
                    </li>
                    <li>
                        <div class="text choice">
                            <span data-i18n="enterEccentricity">Въведи Ексцентричност</span>
                            <input type="text" id="ecc" data-i18n-placeholder="eccentricityPlaceholder"
                                placeholder="от 0 до 1">
                        </div>
                    </li>

                    <li>
                        <div class="text choice">
                            <span data-i18n="showDirection">Показване На Посока</span>
                            <label class="switch">
                                <input onclick="arrowShow()" id="arrow" type="checkbox" checked>
                                <span class="slider"></span>
                            </label>
                        </div>
                    </li>

                    <li>
                        <div class="text choice">
                            <span data-i18n="stopAttraction">Спри Привличането</span>
                            <label class="switch">
                                <input onclick="attract()" id="attraction" type="checkbox">
                                <span class="slider"></span>
                            </label>
                        </div>
                    </li>

                    <li>
                        <div class="text choice">
                            <span data-i18n="traceMovement">Проследи Движението</span>
                            <label class="switch">
                                <input onclick="trace()" id="tracing" type="checkbox">
                                <span class="slider"></span>
                            </label>
                        </div>
                    </li>

                    <li>
                        <div class="text choice">
                            <span data-i18n="starToStar">Слънце към слънце</span>
                            <label class="switch">
                                <input onclick="s2sAttraction()" id="s2s" type="checkbox">
                                <span class="slider"></span>
                            </label>
                        </div>
                    </li>
                    <li>
                        <div class="text choice">
                            <span data-i18n="starToPlanet">Слънце към планета</span>
                            <label class="switch">
                                <input onclick="s2pAttraction()" id="s2p" type="checkbox" checked>
                                <span class="slider"></span>
                            </label>
                        </div>
                    </li>
                    <li>
                        <div class="text choice">
                            <span data-i18n="planetToPlanet">Планета към планета</span>
                            <label class="switch">
                                <input onclick="p2pAttraction()" id="p2p" type="checkbox">
                                <span class="slider"></span>
                            </label>
                        </div>
                    </li>

                    <div class="text" data-i18n="customizations">Персонализации</div>

                    <li>
                        <a href="#" class="bg-btn">
                            <div class="text choice" data-i18n="background">Фон</div>
                            <span class="fas fa-caret-down fourth"></span>
                        </a>
                    </li>

                    <ul class="bg-show">
                        <li>
                            <div class="allRads">
                                <input onclick="changeBackground()" type="radio" id="grayFont" name="fonts" value="gray"
                                    checked>
                                <label class="labelCustom" for="grayFont" style="background-color: gray;"></label>
                                <input onclick="changeBackground()" type="radio" id="aquaFont" name="fonts"
                                    value="aqua">
                                <label class="labelCustom" for="aquaFont" style="background-color: aqua;"></label>
                                <input onclick="changeBackground()" type="radio" id="yellowFont" name="fonts"
                                    value="yellow">
                                <label class="labelCustom" for="yellowFont" style="background-color: yellow;"></label>
                                <input onclick="changeBackground()" type="radio" id="orangeFont" name="fonts"
                                    value="orange">
                                <label class="labelCustom" for="orangeFont" style="background-color: orange;"></label>
                                <input onclick="changeBackground()" type="radio" id="blueFont" name="fonts"
                                    value="blue">
                                <label class="labelCustom" for="blueFont" style="background-color: blue;"></label>
                                <input onclick="changeBackground()" type="radio" id="blackFont" name="fonts"
                                    value="black">
                                <label class="labelCustom" for="blackFont" style="background-color: black;"></label>

                                <input onclick="changeBackground()" type="radio" id="spaceFont" name="fonts"
                                    value="space">
                                <label class="labelCustom" for="spaceFont"><img src="assets/space.jpg" alt=""></label>
                            </div>
                        </li>
                    </ul>
                </ul>
            </li>

            <li><a href="index.html" data-i18n="returnHome"><strong>Върни Се Към Начална Страница</strong></a></li>

            <li>
                <div class="text choice">
                    <span data-i18n="language">Език</span>
                    <select id="languageSelect" onchange="setLanguage(this.value)">
                        <option value="en" data-i18n="english">English</option>
                        <option value="bg" data-i18n="bulgarian">Bulgarian</option>
                    </select>
                </div>
            </li>
        </ul>
    </nav>

    <div id="popup1" class="overlay" onmouseover="disableSpawn()" onmouseout="enableSpawn()">
        <div class="popup">
            <h2 data-i18n="title">Въведи Всичко Нужно!</h2><br>
            <a class="close" href="#">&times;</a>
            <div class="content" data-i18n="message">
                Трябва да бъде избрана една от опциите и трябва да бъде въведено число по-голяма от 0 за маса!
            </div>
        </div>
    </div>

    <script>
        $('.btn').click(function () {
            $(this).toggleClass("click");
            $('.sidebar').toggleClass("show");
        });

        $('.feat-btn').click(function () {
            $('nav ul .feat-show').toggleClass("show");
            $('nav ul .first').toggleClass("rotate");
        });

        $('.serv-btn').click(function () {
            $('nav ul .serv-show').toggleClass("show1");
            $('nav ul .second').toggleClass("rotate");
        });

        $('.opt-btn').click(function () {
            $('nav ul .opt-show').toggleClass("show2");
            $('nav ul .third').toggleClass("rotate");
        });

        $('.bg-btn').click(function () {
            $('nav ul .bg-show').toggleClass("show3");
            $('nav ul .fourth').toggleClass("rotate");
        });

        $('.learn-btn').click(function () {
            $('nav ul .learn-show').toggleClass("show4");
            $('nav ul .fifth').toggleClass("rotate");
        });

        $('.def-btn').click(function () {
            $('nav ul .def-show').toggleClass("show5");
            $('nav ul .sixth').toggleClass("rotate");
        });

        $('.allobjs-btn').click(function () {
            $('nav ul .allobjs-show').toggleClass("show6");
            $('nav ul .seventh').toggleClass("rotate");
        });

        $('.formula-btn').click(function () {
            $('nav ul .formula-show').toggleClass("show7");
            $('nav ul .eight').toggleClass("rotate");
        });

        $('nav ul li').click(function () {
            $(this).addClass("active").siblings().removeClass("active");
        });
    </script>
</body>

</html>