@adcops/autocore-react 3.0.0

package/src/components/DPad.css

@@ -0,0 +1,522 @@
+/*
+ * 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

@@ -0,0 +1,94 @@
+/*
+ * 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;
+
+