First real stable version

Author: Plopix

.env

@@ -19,15 +19,3 @@ APP_SECRET=f0e76683924b4f6c4ce6045019d3e1f6
 #TRUSTED_PROXIES=127.0.0.0/8,10.0.0.0/8,172.16.0.0/12,192.168.0.0/16
 #TRUSTED_HOSTS='^localhost|example\.com$'
 ###< symfony/framework-bundle ###
-
-###> symfony/mailer ###
-# MAILER_DSN=smtp://localhost
-###< symfony/mailer ###
-
-###> doctrine/doctrine-bundle ###
-# Format described at https://www.doctrine-project.org/projects/doctrine-dbal/en/latest/reference/configuration.html#connecting-using-a-url
-# For an SQLite database, use: "sqlite:///%kernel.project_dir%/var/data.db"
-# For a PostgreSQL database, use: "postgresql://db_user:[email protected]:5432/db_name?serverVersion=11&charset=utf8"
-# IMPORTANT: You MUST configure your server version, either here or in config/packages/doctrine.yaml
-DATABASE_URL=mysql://db_user:[email protected]:3306/db_name?serverVersion=5.7
-###< doctrine/doctrine-bundle ###

.env.test

@@ -1,4 +1,3 @@
-
 ###> symfony/framework-bundle ###
 /.env.local
 /.env.local.php
@@ -8,8 +7,9 @@
 /vendor/
 ###< symfony/framework-bundle ###
 
-###> symfony/phpunit-bridge ###
-.phpunit
-.phpunit.result.cache
-/phpunit.xml
-###< symfony/phpunit-bridge ###
+###> symfony/webpack-encore-bundle ###
+/node_modules/
+/public/build/
+npm-debug.log
+yarn-error.log
+###< symfony/webpack-encore-bundle ###

.gitignore

@@ -0,0 +1,260 @@
+$screen-maxwheel: 767px;
+$big-wheel: 680px;
+$small-wheel: 330px;
+
+body {
+    font-family: Tahoma, Verdana, Segoe, sans-serif;
+    background: #ddd;
+}
+
+.layer-container {
+    padding-top: 25px;
+
+    h1 {
+        text-align: center;
+        font-size: 1.5rem;
+    }
+
+    .inner {
+        position: relative;
+        width: $big-wheel;
+        height: $big-wheel;
+        margin: 0 auto;
+
+        @media (max-width: $screen-maxwheel) {
+            width: $small-wheel;
+            height: $small-wheel;
+        }
+
+        img {
+            width: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+            -webkit-transition: 1s ease-in-out;
+            -moz-transition: 1s ease-in-out;
+            -o-transition: 1s ease-in-out;
+            transition: 1s ease-in-out;
+        }
+    }
+
+    .buttons-group-options {
+        width: 300px !important;
+        padding-top: 8px;
+        margin: 0 auto;
+        display: block;
+    }
+}
+
+.ganzhiyear-container {
+    .center-number {
+        position: absolute;
+        font-weight: bold;
+        display: block;
+        width: 20px;
+        text-align: center;
+        margin: 0 auto;
+        font-size: 18px;
+
+        top: ($big-wheel/2)-12;
+        left: ($big-wheel/2)-11;
+
+        &.white {
+            color: #000;
+        }
+
+        &.black {
+            color: #fff;
+        }
+    }
+
+    @media (max-width: $screen-maxwheel) {
+        .center-number {
+            top: ($small-wheel/2)-6;
+            left: ($small-wheel/2)-9;
+            font-size: 9px
+        }
+    }
+
+}
+
+.ganzhi-container {
+    .inner {
+        .position {
+            position: absolute;
+            display: block;
+            width: 20px;
+            text-align: center;
+        }
+
+        .position-0 {
+            bottom: 5px;
+            left: ($big-wheel/2)-7;
+        }
+
+        .position-1 {
+            bottom: ($big-wheel/16)+6;
+            left: ($big-wheel/4)+2;
+        }
+
+        .position-2 {
+            bottom: ($big-wheel/4)-5;
+            left: ($big-wheel/12)-5;
+        }
+
+        .position-3 {
+            top: ($big-wheel/2)-11;
+            left: 6px;
+        }
+
+        .position-4 {
+            top: ($big-wheel/4)-2;
+            left: ($big-wheel/12)-6;
+        }
+
+        .position-5 {
+            top: ($big-wheel/16)+5;
+            left: ($big-wheel/4)-1;
+        }
+
+        .position-6 {
+            top: 5px;
+            left: ($big-wheel/2)-7;
+        }
+
+        .position-7 {
+            top: ($big-wheel/16)+5;
+            right: ($big-wheel/4)-3;
+        }
+
+        .position-8 {
+            top: ($big-wheel/4)-2;
+            right: ($big-wheel/12)-7;
+        }
+
+        .position-9 {
+            top: ($big-wheel/2)-12;
+            right: 8px;
+        }
+
+        .position-10 {
+            bottom: ($big-wheel/4)-4;
+            right: ($big-wheel/12)-7;
+        }
+
+        .position-11 {
+            bottom: ($big-wheel/16)+6;
+            right: ($big-wheel/4)-3;
+        }
+
+        @media (max-width: $screen-maxwheel) {
+            .position {
+                position: absolute;
+                display: block;
+                width: 10px;
+                text-align: center;
+                font-size: 9px;
+            }
+            .position-0 {
+                bottom: 2px;
+                left: ($small-wheel/2)-4;
+            }
+            .position-1 {
+                bottom: ($small-wheel/16)+2;
+                left: ($small-wheel/4);
+            }
+            .position-2 {
+                bottom: ($small-wheel/4)-2;
+                left: ($small-wheel/12)-3;
+            }
+            .position-3 {
+                top: ($small-wheel/2)-6;
+                left: 3px;
+            }
+            .position-4 {
+                top: ($small-wheel/4)-2;
+                left: ($small-wheel/12)-3;
+            }
+            .position-5 {
+                top: ($small-wheel/16)+2;
+                left: ($small-wheel/4)-1;
+            }
+            .position-6 {
+                top: 2px;
+                left: ($small-wheel/2)-4;
+            }
+            .position-7 {
+                top: ($small-wheel/16)+2;
+                right: ($small-wheel/4)-1;
+            }
+            .position-8 {
+                top: ($small-wheel/4)-3;
+                right: ($small-wheel/12)-4;
+            }
+            .position-9 {
+                top: ($small-wheel/2)-6;
+                right: 3px;
+            }
+            .position-10 {
+                bottom: ($small-wheel/4)-2;
+                right: ($small-wheel/12)-4;
+            }
+            .position-11 {
+                bottom: ($small-wheel/16)+2;
+                right: ($small-wheel/4)-1;
+            }
+        }
+
+
+    }
+}
+
+
+nav {
+    .year-change {
+        padding-left: 5px;
+    }
+
+    .current-header-date {
+        font-size: 10px;
+        color: #fff;
+        padding-top: 5px;
+    }
+
+    .form-inline input  {
+        width: 80px;
+        max-width: 80px;
+        text-align: center;
+    }
+}
+
+.row-year-change {
+    padding-top: 15px;
+
+    .input-group {
+        padding-bottom: 5px;
+    }
+    input  {
+        text-align: center;
+    }
+}
+
+.row-current-header-date {
+    text-align: center;
+    padding-top: 10px;
+    font-size: 10px;
+}
+
+
+footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+
+    p {
+        text-align: center;
+        margin: 0;
+        font-size: 10px;
+        color: #aaa;
+    }
+}

assets/css/app.scss

@@ -0,0 +1,30 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import '../css/app.scss';
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import MainContainer from "./components/MainContainer";
+
+const container = document.getElementById('ganzhi-app');
+
+declare global {
+    interface Number {
+        realModulo: (b: Number) => number;
+    }
+}
+
+Number.prototype.realModulo = function(b: number): number {
+    return ((this % b) + b) % b;
+};
+
+ReactDOM.render(<MainContainer/>, container);
+
+if ('serviceWorker' in navigator) {
+    window.addEventListener('load', function() {
+        navigator.serviceWorker.register('/sw.js').then(function(registration) {
+            console.log('ServiceWorker registration successful with scope: ', registration.scope);
+        }, function(err) {
+            console.log('ServiceWorker registration failed: ', err);
+        });
+    });
+}

assets/js/app.tsx

@@ -0,0 +1,65 @@
+import React, {useState} from 'react';
+import {GetRank} from '../functions';
+
+import {
+    ToggleButtonGroup,
+    ToggleButton
+} from 'react-bootstrap';
+
+export default function Ganzhi({year}) {
+    const [value, setValue] = useState([]);
+    const rank = GetRank(year);
+    const diff = year - 4;
+    const cycle = Math.floor(diff / 10).realModulo(6);
+    const countGanZangfu = 6;
+    const countYear = 12;
+    const firstEmpty = 12 - (2 * (1 + cycle));
+    const startNumberPosition = (firstEmpty + 2).realModulo(12);
+
+    const styles = {
+        gan: {
+            transform: "rotate(" + (cycle * -(360 / countGanZangfu)) + "deg)"
+        },
+        zangfu: {
+            transform: "rotate(" + (cycle * -(360 / countGanZangfu)) + "deg)"
+        },
+        arrow: {
+            transform: "rotate(" + ((diff % 12) * (360 / countYear)) + "deg)"
+        }
+    };
+
+    let bubles = [];
+    const startCount = (cycle * 10) + 1;
+    for (let i = 0; i < 12; i++) {
+        bubles.push(startCount + i);
+    }
+
+    const handleChange = val => setValue(val);
+
+    return <div className="ganzhi-container layer-container">
+        <h1>Gan and Zhi Cycle</h1>
+        <div className="inner">
+            <img src="/images/ganzhi/arrow.png" style={styles.arrow}/>
+            <img src="/images/ganzhi/background.png"/>
+            <img src="/images/ganzhi/gan.png" style={styles.gan}/>
+
+            {value.includes("servants") && <img src="/images/ganzhi/servants.png"/>}
+            {value.includes("hours") && <img src="/images/ganzhi/hours.png"/>}
+            {value.includes("zangfu") && <img src="/images/ganzhi/zangfu.png" style={styles.zangfu}/>}
+            <img src={"/images/zodiac/zodiac-" + rank + ".png"}/>
+            {bubles.map((value, index) => {
+                const indexPosition = (index + startNumberPosition).realModulo(12);
+                let computedValue = value;
+                if (indexPosition === firstEmpty || indexPosition === firstEmpty + 1) {
+                    computedValue = '';
+                }
+                return <span key={index} className={"position position-" + indexPosition}>{computedValue}</span>;
+            })}
+        </div>
+        <ToggleButtonGroup type="checkbox" value={value} onChange={handleChange} className="buttons-group-options">
+            <ToggleButton variant="outline-dark" value={"servants"}>Serviteurs</ToggleButton>
+            <ToggleButton variant="outline-dark" value={"hours"}>Méridiens</ToggleButton>
+            <ToggleButton variant="outline-dark" value={"zangfu"}>Zangfu</ToggleButton>
+        </ToggleButtonGroup>
+    </div>
+}