taro/src/features/trackSomething/components/Discovery.tsx

import { View, Text, Image } from "@tarojs/components";
import { getBgRing, getCommon, getDot, getReal, getSchedule, getTarget } from "@/features/trackTimeDuration/hooks/RingData";
import { RealRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
import { ColorType } from "@/context/themes/color";
import { useSelector } from "react-redux";
import Rings from "@/features/trackTimeDuration/components/Rings";

export default function Discovery() {
    const user = useSelector((state: any) => state.user);
    function bigRing() {
        var common = getCommon(null, true)
        common.radius = 42;
        common.lineWidth = 9;
        var bgRing = getBgRing()
        const realRingBig: RealRing = {
            color: ColorType.day,
            startArc: 0,
            durationArc: 2
        }
        var sunRise = 24 * 60 + (user.test_user ? 7 * 60 : 6 * 60)
        var sunSet = user.test_user ? 19 * 60 : 18 * 60
        var duration = sunRise - sunSet
        realRingBig.startArc = (sunSet * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
        realRingBig.durationArc = (duration * 60) / (24 * 3600) * 2 * Math.PI;
        return <Rings common={common} bgRing={bgRing} realRing={realRingBig} canvasId={'me_big'} />
    }
    function smallRing() {
        var common = getCommon(null, false)
        common.radius = 28;
        common.lineWidth = 9;
        var bgRing = getBgRing()
        const realRingBig: RealRing = {
            color: ColorType.day,
            startArc: 0,
            durationArc: 2
        }
        var sunRise = 24 * 60 + (user.test_user ? 7 * 60 : 6 * 60)
        var sunSet = user.test_user ? 19 * 60 : 18 * 60
        var duration = sunRise - sunSet
        realRingBig.startArc = (sunSet * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
        realRingBig.durationArc = (duration * 60) / (24 * 3600) * 2 * Math.PI;
        return <Rings common={common} bgRing={bgRing} realRing={realRingBig} canvasId={'me_small'} />
    }
    function dayRing() {
        var common = getCommon(null, true)
        common.radius = 56;
        common.lineWidth = 9;
        var bgRing = getBgRing()

        const realRingBig: RealRing = {
            color: ColorType.day,
            startArc: 0,
            durationArc: 2
        }
        var sunRise = 24 * 60 + (user.test_user ? 7 * 60 : 6 * 60)
        var sunSet = user.test_user ? 19 * 60 : 18 * 60
        var duration = sunRise - sunSet
        realRingBig.startArc = (sunSet * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
        realRingBig.durationArc = (duration * 60) / (24 * 3600) * 2 * Math.PI;
        return <Rings common={common} bgRing={bgRing} realRing={realRingBig} canvasId={'me_day'} />
    }

    function rings() {
        return <View style={{ position: 'relative', zIndex: 1 }}>
            {
                bigRing()
            }
            {
                <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
                    {
                        smallRing()
                    }
                </View>
            }
            {
                <View style={{ display: 'flex', position: 'absolute', left: -14, top: -14, right: -14, bottom: -14 }}>
                    {
                        dayRing()
                    }
                </View>
            }

        </View>
    }
    return <View >
        <View style={{display:'flex',flexDirection:'row'}}>
        {
            rings()
        }
        </View>
        
    </View>
}