@adcops/autocore-react 3.0.1 → 3.0.3

package/src/components/DPad.css

@@ -1,522 +0,0 @@
-/*
- * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
- * Created Date: 2024-01-16 13:17:33
- * -----
- * Last Modified: 2024-03-08 07:16:53
- * -----
- * 
- */
-
-
-.d-pad {
-    position: relative;
-    width: 200px;
-    height: 200px;
-    border-radius: 48%;
-    overflow: hidden;
-
-    &:before {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        border-radius: 5%;
-        transform: translate(-50%, -50%);
-        width: 66.6%;
-        height: 66.6%;
-        background: transparent;
-    }
-
-    &:after {
-        content: '';
-        position: absolute;
-        display: none;
-        z-index: 2;
-        width: 20%;
-        height: 20%;
-        top: 50%;
-        left: 50%;
-        background: var(--vc-dpad-fg);
-        border-radius: 50%;
-        transform: translate(-50%, -50%);
-        /* transition: all .25s; */
-    }
-
-    &:hover:after {
-        width: 30%;
-        height: 30%;
-    }
-
-    a {
-        cursor: var(--vc-btn-cursor);
-        display: block;
-        position: absolute;
-        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-        width: 33.3%;
-        height: 43%;
-        line-height: 40%;
-        color: #fff;
-        text-align: center;
-        background: var(--vc-btn-bgcolor);
-        box-shadow: 0 2px 4px black, inset 0 2px 4px rgba(255, 255, 255, 0.5);
-
-        &:hover {}
-
-        &:active {
-            background: linear-gradient(45deg, var(--vc-dpad-fg-hover) 15%, var(--vc-dpad-fg-hover) 100%);
-        }
-
-        &:before {
-            content: '';
-            position: absolute;
-            width: 0;
-            height: 0;
-            border-radius: 5px;
-            border-style: solid;
-            /* transition: all .25s; */
-        }
-
-        &:after {
-            content: '';
-            position: absolute;
-            width: 102%;
-            height: 78%;
-            background: var(--vc-dpad-bg);
-            border-radius: var(--vc-dpad-radius-in);
-        }
-    }
-
-    a.left,
-    a.right {
-        width: 43%;
-        height: 33%;
-
-        &:after {
-            width: 78%;
-            height: 102%;
-        }
-    }
-
-    a.up {
-        top: 0;
-        left: 50%;
-        transform: translate(-50%, 0);
-        border-radius: var(--vc-dpad-radius) var(--vc-dpad-radius) 50% 50%;
-
-        &:hover {}
-
-        &:active {
-            background: linear-gradient(45deg, var(--vc-dpad-fg-hover) 15%, var(--vc-dpad-fg-hover) 100%);
-        }
-
-        &:after {
-            left: 0;
-            top: 0;
-            transform: translate(-100%, 0);
-            border-top-left-radius: 50%;
-            pointer-events: none;
-        }
-
-        &:before {
-            top: 40%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            border-width: 0 var(--vc-tri-sml-a) var(--vc-tri-sml-b) var(--vc-tri-sml-a);
-            border-color: transparent transparent var(--vc-arrowcolor) transparent;
-        }
-
-        &:active:before {
-            border-bottom-color: #333;
-        }
-    }
-
-    a.up:hover:before {
-        top: var(--vc-dpad-arrow-move);
-        box-shadow: inset 0 0 10px rgba(255, 255, 255, .5), 0 0 10px rgba(255, 255, 255, .2);
-        outline-color: white;
-        outline-offset: 8px;
-        text-shadow: 1px 1px 2px var(--vc-color-black);
-
-        outline: 1px solid;
-        transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
-    }
-
-    a.down {
-        bottom: 0;
-        left: 50%;
-        transform: translate(-50%, 0);
-        border-radius: 50% 50% var(--vc-dpad-radius) var(--vc-dpad-radius);
-
-        &:hover {}
-
-        &:active {
-            background: linear-gradient(45deg, var(--vc-dpad-fg-hover) 15%, var(--vc-dpad-fg-hover) 100%);
-        }
-
-        &:after {
-            right: 0;
-            bottom: 0;
-            transform: translate(100%, 0);
-            border-bottom-right-radius: 50%;
-            pointer-events: none;
-        }
-
-        &:before {
-            bottom: 40%;
-            left: 50%;
-            transform: translate(-50%, 50%);
-            border-width: var(--vc-tri-sml-b) var(--vc-tri-sml-a) 0px var(--vc-tri-sml-a);
-            border-color: var(--vc-arrowcolor) transparent transparent transparent;
-        }
-
-        &:active:before {
-            border-top-color: #333;
-        }
-    }
-
-    a.down:hover:before {
-        bottom: var(--vc-dpad-arrow-move);
-        box-shadow: inset 0 0 10px rgba(255, 255, 255, .5), 0 0 10px rgba(255, 255, 255, .2);
-        outline-color: white;
-        outline-offset: 8px;
-        text-shadow: 1px 1px 2px var(--vc-color-black);
-
-        outline: 1px solid;
-        transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
-    }
-
-    a.left {
-        top: 50%;
-        left: 0;
-        transform: translate(0, -50%);
-        border-radius: var(--vc-dpad-radius) 50% 50% var(--vc-dpad-radius);
-
-        &:hover {}
-
-        &:active {
-            background: linear-gradient(45deg, var(--vc-dpad-fg-hover) 15%, var(--vc-dpad-fg-hover) 100%);
-        }
-
-        &:after {
-            left: 0;
-            bottom: 0;
-            transform: translate(0, 100%);
-            border-bottom-left-radius: 50%;
-            pointer-events: none;
-        }
-
-        &:before {
-            left: 40%;
-            top: 50%;
-            transform: translate(-50%, -50%);
-            border-width: var(--vc-tri-sml-a) var(--vc-tri-sml-b) var(--vc-tri-sml-a) 0;
-            border-color: transparent var(--vc-arrowcolor) transparent transparent;
-        }
-
-        &:active:before {
-            border-right-color: #333;
-        }
-    }
-
-    a.left:hover:before {
-        left: var(--vc-dpad-arrow-move);
-        box-shadow: inset 0 0 10px rgba(255, 255, 255, .5), 0 0 10px rgba(255, 255, 255, .2);
-        outline-color: white;
-        outline-offset: 8px;
-        text-shadow: 1px 1px 2px var(--vc-color-black);
-
-        outline: 1px solid;
-        transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
-    }
-
-    a.right {
-        top: 50%;
-        right: 0;
-        transform: translate(0, -50%);
-        border-radius: 50% var(--vc-dpad-radius) var(--vc-dpad-radius) 50%;
-
-        &:hover {}
-
-        &:active {
-            background: linear-gradient(45deg, var(--vc-dpad-fg-hover) 15%, var(--vc-dpad-fg-hover) 100%);
-        }
-
-        &:after {
-            right: 0;
-            top: 0;
-            transform: translate(0, -100%);
-            border-top-right-radius: 50%;
-            pointer-events: none;
-        }
-
-        &:before {
-            right: 40%;
-            top: 50%;
-            transform: translate(50%, -50%);
-            border-width: var(--vc-tri-sml-a) 0 var(--vc-tri-sml-a) var(--vc-tri-sml-b);
-            border-color: transparent transparent transparent var(--vc-arrowcolor);
-        }
-
-        &:active:before {
-            border-left-color: #333;
-        }
-    }
-
-    a.right:hover:before {
-        right: var(--vc-dpad-arrow-move);
-        box-shadow: inset 0 0 10px rgba(255, 255, 255, .5), 0 0 10px rgba(255, 255, 255, .2);
-        outline-color: white;
-        outline-offset: 8px;
-        text-shadow: 1px 1px 2px var(--vc-color-black);
-
-        outline: 1px solid;
-        transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
-    }
-}
-
-.d-pad.up a.up:before {
-    border-bottom-color: #333;
-}
-
-.d-pad.down a.down:before {
-    border-top-color: #333;
-}
-
-.d-pad.left a.left:before {
-    border-right-color: #333;
-}
-
-.d-pad.right a.right:before {
-    border-left-color: #333;
-}
-
-
-.o-pad {
-    position: relative;
-    background: var(--vc-dpad-fg);
-    width: 200px;
-    height: 200px;
-    border-radius: 50%;
-    overflow: hidden;
-
-
-    box-shadow: 2px 2px 4px black;
-
-    &:after {
-        content: '';
-        position: absolute;
-        z-index: 2;
-        width: 20%;
-        height: 20%;
-        top: 50%;
-        left: 50%;
-        background: #ddd;
-        border-radius: 50%;
-        transform: translate(-50%, -50%);
-        display: none;
-        /* transition: all .25s; */
-    }
-
-    &:hover:after {
-        width: 30%;
-        height: 30%;
-    }
-
-    a {
-        cursor: var(--vc-btn-cursor);
-        display: block;
-        position: absolute;
-        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-        width: 50%;
-        height: 50%;
-        text-align: center;
-        transform: rotate(45deg);
-        border: 1px solid rgba(0, 0, 0, .2);
-
-        &:before {
-            content: '';
-            position: absolute;
-            width: 60%;
-            height: 60%;
-            top: 50%;
-            left: 50%;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 50%;
-            transform: translate(-50%, -50%);
-            /* transition: all .25s; */
-            display: none;
-        }
-
-        &:after {
-            content: '';
-            position: absolute;
-            width: 0;
-            height: 0;
-            border-radius: 5px;
-            border-style: solid;
-            transform: translate(-50%, -50%) rotate(-45deg);
-            /* transition: all .25s; */
-        }
-    }
-
-    a.up {
-        bottom: 50%;
-        left: 50%;
-        transform: translate(-50%, -20%) rotate(45deg);
-        border-top-left-radius: 50%;
-        z-index: 1;
-
-        background: var(--vc-btn-bgcolor);
-        box-shadow: 0 1px 4px white, inset 0 -1px 4px black;
-
-        &:hover {}
-
-        &:active {
-            background: linear-gradient(45deg, var(--vc-dpad-fg-hover) 15%, var(--vc-dpad-fg-hover) 100%);
-        }
-
-        &:before {
-            left: 57%;
-            top: 57%;
-        }
-
-        &:after {
-            left: 53%;
-            top: 53%;
-            border-width: 0 var(--vc-tri-lrg-a) var(--vc-tri-lrg-b) var(--vc-tri-lrg-a);
-            border-color: transparent transparent var(--vc-arrowcolor) transparent;
-        }
-
-        &:active:after {
-            border-bottom-color: #333;
-        }
-    }
-
-
-    a.down {
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, 20%) rotate(45deg);
-        border-bottom-right-radius: 50%;
-        z-index: 1;
-
-        background: var(--vc-btn-bgcolor);
-        box-shadow: 0 2px 4px black, inset 0 2px 4px rgba(255, 255, 255, 0.5);
-
-        &:hover {}
-
-        &:active {
-            background: linear-gradient(45deg, var(--vc-dpad-fg-hover) 15%, var(--vc-dpad-fg-hover) 100%);
-        }
-
-        &:before {
-            left: 43%;
-            top: 43%;
-        }
-
-        &:after {
-            left: 47%;
-            top: 47%;
-            border-width: var(--vc-tri-lrg-b) var(--vc-tri-lrg-a) 0px var(--vc-tri-lrg-a);
-            border-color: var(--vc-arrowcolor) transparent transparent transparent;
-        }
-
-        &:active:after {
-            border-top-color: #333;
-        }
-    }
-
-    a.left {
-        top: 50%;
-        right: 50%;
-        transform: translate(-20%, -50%) rotate(45deg);
-        border-bottom-left-radius: 50%;
-        border: none;
-
-        background: var(--vc-btn-bgcolor);
-
-        &:hover {}
-
-        &:active {
-            background: linear-gradient(45deg, var(--vc-dpad-fg-hover) 15%, var(--vc-dpad-fg-hover) 100%);
-        }
-
-        &:before {
-            left: 57%;
-            top: 43%;
-        }
-
-        &:after {
-            left: 53%;
-            top: 47%;
-            border-width: var(--vc-tri-lrg-a) var(--vc-tri-lrg-b) var(--vc-tri-lrg-a) 0;
-            border-color: transparent var(--vc-arrowcolor) transparent transparent;
-        }
-
-        &:active:after {
-            border-right-color: #333;
-        }
-    }
-
-    a.right {
-        top: 50%;
-        left: 50%;
-        transform: translate(20%, -50%) rotate(45deg);
-        border-top-right-radius: 50%;
-        border: none;
-
-        background: var(--vc-btn-bgcolor);
-        box-shadow: 0 1px 4px white, inset 0 -1px 4px black;
-
-        &:hover {}
-
-        &:active {
-            background: linear-gradient(45deg, var(--vc-dpad-fg-hover) 15%, var(--vc-dpad-fg-hover) 100%);
-        }
-
-        &:before {
-            left: 43%;
-            top: 57%;
-        }
-
-        &:after {
-            left: 47%;
-            top: 53%;
-            border-width: var(--vc-tri-lrg-a) 0 var(--vc-tri-lrg-a) var(--vc-tri-lrg-b);
-            border-color: transparent transparent transparent var(--vc-arrowcolor);
-        }
-
-        &:active:after {
-            border-left-color: #333;
-        }
-    }
-
-    a:hover:after {
-        left: 50%;
-        top: 50%;
-        box-shadow: inset 0 0 10px rgba(255, 255, 255, .5), 0 0 10px rgba(255, 255, 255, .2);
-        outline-color: white;
-        outline-offset: 8px;
-        text-shadow: 1px 1px 2px var(--vc-color-black);
-
-        outline: 1px solid;
-        transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
-    }
-}
-
-
-.d-pad.up a.up:before {
-    border-bottom-color: #333;
-}
-
-.d-pad.down a.down:before {
-    border-top-color: #333;
-}
-
-.d-pad.left a.left:before {
-    border-right-color: #333;
-}
-
-.d-pad.right a.right:before {
-    border-left-color: #333;
-}

package/src/components/DPad.tsx

@@ -1,94 +0,0 @@
-/*
- * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
- * Created Date: 2024-01-16 13:17:23
-  * -----
- * Last Modified: 2024-03-08 07:16:59
- * -----
- * 
- */
-
-import React from 'react';
-import './VcDPad.css'; // Assuming you have extracted CSS into this file
-
-
-/**
- * Enumerates the source button or action when an event occurs.
- */
-export enum VcJoyPadAction {
-    /** Invalid - Ignore this button */
-    Invalid = 0x00,
-    Up = 0x01,
-    Right = 0x02,
-    Down = 0x03,
-    Left = 0x04,
-    /** Stop, clear or reset */
-    Stop = 0x10
-}
-
-/**
- * Enumerates the id's of buttons used in the joypad for standardization.
- */
-export enum VcJoyPadButtonId {
-    Stop = 'stop',
-    Up = 'up',
-    Right = 'right',
-    Down = 'down',
-    Left = 'left'
-}
-
-
-interface VcDPadProps {
-    onAction?: (action: VcJoyPadAction) => void;
-    onUp?: () => void;
-    onDown?: () => void;
-    onRight?: () => void;
-    onLeft?: () => void;
-}
-
-export const VcDPad: React.FC<VcDPadProps> = ({
-    onAction,
-    onUp,
-    onDown,
-    onRight,
-    onLeft
-}) => {
-
-    const handleAction = (action: VcJoyPadAction) => {
-        if (onAction) {
-            onAction(action);
-        }
-
-        if (action === VcJoyPadAction.Up) {
-            if (onUp !== undefined && onUp !== null)
-                onUp();
-        }
-        else if (action === VcJoyPadAction.Down) {
-            if (onDown !== undefined && onDown !== null)
-                onDown();
-        }
-        else if (action === VcJoyPadAction.Right) {
-            if (onRight !== undefined && onRight !== null)
-                onRight();
-        }
-        else if (action === VcJoyPadAction.Left) {
-            if (onLeft !== undefined && onLeft !== null)
-                onLeft();
-        }
-
-    };
-
-    return (
-        <div className="set">
-            <nav className="d-pad">
-                <a className="up" onClick={() => handleAction(VcJoyPadAction.Up)}></a>
-                <a className="right" onClick={() => handleAction(VcJoyPadAction.Right)}></a>
-                <a className="down" onClick={() => handleAction(VcJoyPadAction.Down)}></a>
-                <a className="left" onClick={() => handleAction(VcJoyPadAction.Left)}></a>
-            </nav>
-        </div>
-    );
-};
-
-export default VcDPad;
-
-