@dotcraft/avatar 0.7.0 → 0.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (113) hide show
  1. package/README.md +18 -20
  2. package/dist/AnimatedDecoration.d.ts +2 -2
  3. package/dist/AnimatedDecoration.d.ts.map +1 -1
  4. package/dist/AnimatedDecoration.js +2 -2
  5. package/dist/AnimatedDecoration.js.map +1 -1
  6. package/dist/AppearanceRig.d.ts +7 -1
  7. package/dist/AppearanceRig.d.ts.map +1 -1
  8. package/dist/AppearanceRig.js +2 -2
  9. package/dist/AppearanceRig.js.map +1 -1
  10. package/dist/Avatar.d.ts +2 -0
  11. package/dist/Avatar.d.ts.map +1 -1
  12. package/dist/Avatar.js +19 -7
  13. package/dist/Avatar.js.map +1 -1
  14. package/dist/BackDecorations.d.ts +9 -0
  15. package/dist/BackDecorations.d.ts.map +1 -0
  16. package/dist/BackDecorations.js +73 -0
  17. package/dist/BackDecorations.js.map +1 -0
  18. package/dist/DecorationShapes.d.ts +9 -2
  19. package/dist/DecorationShapes.d.ts.map +1 -1
  20. package/dist/DecorationShapes.js +8 -2
  21. package/dist/DecorationShapes.js.map +1 -1
  22. package/dist/Decorations.d.ts +6 -9
  23. package/dist/Decorations.d.ts.map +1 -1
  24. package/dist/Decorations.js +33 -16
  25. package/dist/Decorations.js.map +1 -1
  26. package/dist/FaceDecorations.d.ts +14 -0
  27. package/dist/FaceDecorations.d.ts.map +1 -0
  28. package/dist/FaceDecorations.js +69 -0
  29. package/dist/FaceDecorations.js.map +1 -0
  30. package/dist/HandDecorations.d.ts +5 -0
  31. package/dist/HandDecorations.d.ts.map +1 -0
  32. package/dist/HandDecorations.js +8 -0
  33. package/dist/HandDecorations.js.map +1 -0
  34. package/dist/HatDecorations.d.ts +2 -2
  35. package/dist/HatDecorations.d.ts.map +1 -1
  36. package/dist/HatDecorations.js +4 -0
  37. package/dist/HatDecorations.js.map +1 -1
  38. package/dist/MascotRig.d.ts +13 -1
  39. package/dist/MascotRig.d.ts.map +1 -1
  40. package/dist/MascotRig.js +9 -6
  41. package/dist/MascotRig.js.map +1 -1
  42. package/dist/ObjectDecorations.d.ts +2 -2
  43. package/dist/ObjectDecorations.d.ts.map +1 -1
  44. package/dist/ObjectDecorations.js +18 -2
  45. package/dist/ObjectDecorations.js.map +1 -1
  46. package/dist/SkinDecorations.d.ts +10 -0
  47. package/dist/SkinDecorations.d.ts.map +1 -0
  48. package/dist/SkinDecorations.js +27 -0
  49. package/dist/SkinDecorations.js.map +1 -0
  50. package/dist/appearanceModel.d.ts +18 -14
  51. package/dist/appearanceModel.d.ts.map +1 -1
  52. package/dist/appearanceModel.js +62 -30
  53. package/dist/appearanceModel.js.map +1 -1
  54. package/dist/composer/styles/energy.css +34 -0
  55. package/dist/decorationCatalog.d.ts +17 -7
  56. package/dist/decorationCatalog.d.ts.map +1 -1
  57. package/dist/decorationCatalog.js +95 -36
  58. package/dist/decorationCatalog.js.map +1 -1
  59. package/dist/decorationMotion.d.ts +2 -2
  60. package/dist/decorationMotion.d.ts.map +1 -1
  61. package/dist/decorationMotion.js +4 -1
  62. package/dist/decorationMotion.js.map +1 -1
  63. package/dist/effects.css +86 -0
  64. package/dist/index.d.ts +2 -0
  65. package/dist/index.d.ts.map +1 -1
  66. package/dist/index.js +2 -0
  67. package/dist/index.js.map +1 -1
  68. package/dist/items.d.ts +460 -0
  69. package/dist/items.d.ts.map +1 -0
  70. package/dist/items.js +52 -0
  71. package/dist/items.js.map +1 -0
  72. package/dist/paintMaterials.d.ts +31 -0
  73. package/dist/paintMaterials.d.ts.map +1 -0
  74. package/dist/paintMaterials.js +10 -0
  75. package/dist/paintMaterials.js.map +1 -0
  76. package/dist/palette.d.ts +2 -0
  77. package/dist/palette.d.ts.map +1 -1
  78. package/dist/palette.js +4 -4
  79. package/dist/palette.js.map +1 -1
  80. package/dist/react.d.ts +2 -2
  81. package/dist/react.d.ts.map +1 -1
  82. package/dist/react.js +2 -2
  83. package/dist/react.js.map +1 -1
  84. package/dist/styles.css +1 -0
  85. package/package.json +1 -1
  86. package/src/AnimatedDecoration.tsx +4 -4
  87. package/src/AppearanceRig.tsx +5 -4
  88. package/src/Avatar.tsx +25 -11
  89. package/src/BackDecorations.tsx +134 -0
  90. package/src/DecorationShapes.tsx +11 -3
  91. package/src/Decorations.tsx +47 -22
  92. package/src/FaceDecorations.tsx +145 -0
  93. package/src/HandDecorations.tsx +113 -0
  94. package/src/HatDecorations.tsx +29 -2
  95. package/src/MascotRig.tsx +31 -9
  96. package/src/ObjectDecorations.tsx +69 -3
  97. package/src/SkinDecorations.tsx +55 -0
  98. package/src/appearanceModel.ts +57 -37
  99. package/src/composer/styles/energy.css +34 -0
  100. package/src/decorationCatalog.ts +103 -38
  101. package/src/decorationMotion.ts +6 -3
  102. package/src/effects.css +86 -0
  103. package/src/index.ts +2 -0
  104. package/src/items.ts +86 -0
  105. package/src/paintMaterials.ts +18 -0
  106. package/src/palette.ts +7 -3
  107. package/src/react.ts +2 -2
  108. package/src/styles.css +1 -0
  109. package/dist/HeldDecorations.d.ts +0 -5
  110. package/dist/HeldDecorations.d.ts.map +0 -1
  111. package/dist/HeldDecorations.js +0 -5
  112. package/dist/HeldDecorations.js.map +0 -1
  113. package/src/HeldDecorations.tsx +0 -48
package/src/styles.css CHANGED
@@ -1,6 +1,7 @@
1
1
  @import './rig.css';
2
2
  @import './avatar.css';
3
3
  @import './accessories.css';
4
+ @import './effects.css';
4
5
 
5
6
  @import "./composer/styles/foundation.css";
6
7
  @import "./composer/styles/overdrive.css";
package/dist/HeldDecorations.d.ts DELETED
@@ -1,5 +0,0 @@
1
- import type { HeldId } from './appearanceModel.js';
2
- export declare function HeldDecoration({ id }: {
3
- id: HeldId;
4
- }): import("react").JSX.Element;
5
- //# sourceMappingURL=HeldDecorations.d.ts.map
package/dist/HeldDecorations.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"HeldDecorations.d.ts","sourceRoot":"","sources":["../src/HeldDecorations.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAElD,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,+BA6CpD"}
package/dist/HeldDecorations.js DELETED
@@ -1,5 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- export function HeldDecoration({ id }) {
3
- return _jsxs("g", { "data-held-decoration": id, strokeLinecap: "round", strokeLinejoin: "round", children: [id === 'task-board' && _jsx("g", { transform: "translate(233 640) scale(.8) translate(-840 -665)", children: _jsxs("g", { children: [_jsx("rect", { x: "718", y: "562", width: "244", height: "194", rx: "36", fill: "#fff", stroke: "#fff", strokeWidth: "30" }), _jsx("rect", { x: "718", y: "562", width: "244", height: "194", rx: "36", fill: "#fff", stroke: "var(--dca-held-mark, #3161f7)", strokeWidth: "11" }), _jsx("path", { d: "M760 620h114", stroke: "var(--dca-held-mark, #3161f7)", strokeWidth: "18", strokeLinecap: "round" }), _jsx("circle", { cx: "775", cy: "689", r: "14", fill: "var(--dca-held-mark, #3161f7)" }), _jsx("circle", { cx: "842", cy: "661", r: "14", fill: "var(--dca-held-accent, #f6b500)" }), _jsx("circle", { cx: "907", cy: "708", r: "14", fill: "var(--dca-held-mark, #3161f7)" }), _jsx("path", { d: "M789 683 828 667 893 699", stroke: "#202124", strokeWidth: "13", strokeLinecap: "round", strokeLinejoin: "round", opacity: ".72" })] }) }), id === 'wrench' && _jsx("g", { transform: "translate(233 670) rotate(-60) scale(.65) translate(-642 -817)", children: _jsxs("g", { children: [_jsx("path", { d: "M756 595c30-30 74-39 113-23l-56 56 46 46 56-56c16 39 7 83-23 113-32 32-80 39-119 20L674 850c-18 18-47 18-65 0s-18-47 0-65l99-99c-19-39-12-87 20-119Z", fill: "#fff", stroke: "#fff", strokeWidth: "34", strokeLinejoin: "round" }), _jsx("path", { d: "M756 595c30-30 74-39 113-23l-56 56 46 46 56-56c16 39 7 83-23 113-32 32-80 39-119 20L674 850c-18 18-47 18-65 0s-18-47 0-65l99-99c-19-39-12-87 20-119Z", fill: "#fff", stroke: "var(--dca-held-mark, #3161f7)", strokeWidth: "13", strokeLinejoin: "round" }), _jsx("circle", { cx: "642", cy: "817", r: "17", fill: "var(--dca-held-accent, #f6b500)" }), _jsx("path", { d: "M706 752 774 684", stroke: "var(--dca-held-mark, #3161f7)", strokeWidth: "20", strokeLinecap: "round", opacity: ".78" })] }) }), id === 'shield' && _jsx("g", { transform: "translate(233 635) scale(.8) translate(-817 -690)", children: _jsxs("g", { children: [_jsx("path", { d: "M817 553 929 594v76c0 80-46 134-112 162-66-28-112-82-112-162v-76Z", fill: "#fff", stroke: "#fff", strokeWidth: "30", strokeLinejoin: "round" }), _jsx("path", { d: "M817 553 929 594v76c0 80-46 134-112 162-66-28-112-82-112-162v-76Z", fill: "#fff", stroke: "var(--dca-held-mark, #3161f7)", strokeWidth: "11", strokeLinejoin: "round" }), _jsx("path", { d: "M761 683 802 722 881 632", stroke: "var(--dca-held-mark, #3161f7)", strokeWidth: "28", strokeLinecap: "round", strokeLinejoin: "round" })] }) }), id === 'magnifier' && _jsx("g", { transform: "translate(233 670) rotate(-18) scale(.85) translate(-862 -735)", children: _jsx("g", { children: _jsxs("g", { children: [_jsx("path", { d: "M862 646v112", stroke: "#fff", strokeWidth: "48", strokeLinecap: "round" }), _jsx("path", { d: "M862 646v112", stroke: "var(--dca-held-mark, #3161f7)", strokeWidth: "28", strokeLinecap: "round" }), _jsx("circle", { cx: "862", cy: "562", r: "82", fill: "#fff", stroke: "#fff", strokeWidth: "30" }), _jsx("circle", { cx: "862", cy: "562", r: "82", fill: "#fff", fillOpacity: ".72", stroke: "var(--dca-held-mark, #3161f7)", strokeWidth: "18" }), _jsx("path", { d: "M828 534c21-22 54-30 82-19", stroke: "#fff", strokeWidth: "12", strokeLinecap: "round", opacity: ".9" })] }) }) }), id === 'control-panel' && _jsx("g", { transform: "translate(233 640) scale(.8) translate(-839 -686)", children: _jsxs("g", { children: [_jsx("rect", { x: "714", y: "592", width: "250", height: "190", rx: "38", fill: "#fff", stroke: "#fff", strokeWidth: "30" }), _jsx("rect", { x: "714", y: "592", width: "250", height: "190", rx: "38", fill: "#fff", stroke: "var(--dca-held-mark, #3161f7)", strokeWidth: "11" }), _jsx("path", { d: "M765 650h148", stroke: "#202124", strokeWidth: "14", strokeLinecap: "round", opacity: ".62" }), _jsx("path", { d: "M765 718h148", stroke: "#202124", strokeWidth: "14", strokeLinecap: "round", opacity: ".62" }), _jsx("circle", { cx: "818", cy: "650", r: "23", fill: "var(--dca-held-mark, #3161f7)", stroke: "#fff", strokeWidth: "8" }), _jsx("circle", { cx: "872", cy: "718", r: "23", fill: "var(--dca-held-accent, #f6b500)", stroke: "#fff", strokeWidth: "8" })] }) })] });
4
- }
5
- //# sourceMappingURL=HeldDecorations.js.map
package/dist/HeldDecorations.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"HeldDecorations.js","sourceRoot":"","sources":["../src/HeldDecorations.tsx"],"names":[],"mappings":"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"}
package/src/HeldDecorations.tsx DELETED
@@ -1,48 +0,0 @@
1
- import type { HeldId } from './appearanceModel.js'
2
-
3
- export function HeldDecoration({ id }: { id: HeldId }) {
4
- return <g data-held-decoration={id} strokeLinecap="round" strokeLinejoin="round">
5
- {id === 'task-board' && <g transform="translate(233 640) scale(.8) translate(-840 -665)"><g>
6
- <rect x="718" y="562" width="244" height="194" rx="36" fill="#fff" stroke="#fff" strokeWidth="30" />
7
- <rect x="718" y="562" width="244" height="194" rx="36" fill="#fff" stroke="var(--dca-held-mark, #3161f7)" strokeWidth="11" />
8
- <path d="M760 620h114" stroke="var(--dca-held-mark, #3161f7)" strokeWidth="18" strokeLinecap="round" />
9
- <circle cx="775" cy="689" r="14" fill="var(--dca-held-mark, #3161f7)" />
10
- <circle cx="842" cy="661" r="14" fill="var(--dca-held-accent, #f6b500)" />
11
- <circle cx="907" cy="708" r="14" fill="var(--dca-held-mark, #3161f7)" />
12
- <path d="M789 683 828 667 893 699" stroke="#202124" strokeWidth="13" strokeLinecap="round" strokeLinejoin="round" opacity=".72" />
13
- </g>
14
- </g>}
15
- {id === 'wrench' && <g transform="translate(233 670) rotate(-60) scale(.65) translate(-642 -817)"><g>
16
- <path d="M756 595c30-30 74-39 113-23l-56 56 46 46 56-56c16 39 7 83-23 113-32 32-80 39-119 20L674 850c-18 18-47 18-65 0s-18-47 0-65l99-99c-19-39-12-87 20-119Z" fill="#fff" stroke="#fff" strokeWidth="34" strokeLinejoin="round" />
17
- <path d="M756 595c30-30 74-39 113-23l-56 56 46 46 56-56c16 39 7 83-23 113-32 32-80 39-119 20L674 850c-18 18-47 18-65 0s-18-47 0-65l99-99c-19-39-12-87 20-119Z" fill="#fff" stroke="var(--dca-held-mark, #3161f7)" strokeWidth="13" strokeLinejoin="round" />
18
- <circle cx="642" cy="817" r="17" fill="var(--dca-held-accent, #f6b500)" />
19
- <path d="M706 752 774 684" stroke="var(--dca-held-mark, #3161f7)" strokeWidth="20" strokeLinecap="round" opacity=".78" />
20
- </g>
21
- </g>}
22
- {id === 'shield' && <g transform="translate(233 635) scale(.8) translate(-817 -690)"><g>
23
- <path d="M817 553 929 594v76c0 80-46 134-112 162-66-28-112-82-112-162v-76Z" fill="#fff" stroke="#fff" strokeWidth="30" strokeLinejoin="round" />
24
- <path d="M817 553 929 594v76c0 80-46 134-112 162-66-28-112-82-112-162v-76Z" fill="#fff" stroke="var(--dca-held-mark, #3161f7)" strokeWidth="11" strokeLinejoin="round" />
25
- <path d="M761 683 802 722 881 632" stroke="var(--dca-held-mark, #3161f7)" strokeWidth="28" strokeLinecap="round" strokeLinejoin="round" />
26
- </g>
27
- </g>}
28
- {id === 'magnifier' && <g transform="translate(233 670) rotate(-18) scale(.85) translate(-862 -735)"><g>
29
- <g>
30
- <path d="M862 646v112" stroke="#fff" strokeWidth="48" strokeLinecap="round" />
31
- <path d="M862 646v112" stroke="var(--dca-held-mark, #3161f7)" strokeWidth="28" strokeLinecap="round" />
32
- <circle cx="862" cy="562" r="82" fill="#fff" stroke="#fff" strokeWidth="30" />
33
- <circle cx="862" cy="562" r="82" fill="#fff" fillOpacity=".72" stroke="var(--dca-held-mark, #3161f7)" strokeWidth="18" />
34
- <path d="M828 534c21-22 54-30 82-19" stroke="#fff" strokeWidth="12" strokeLinecap="round" opacity=".9" />
35
- </g>
36
- </g>
37
- </g>}
38
- {id === 'control-panel' && <g transform="translate(233 640) scale(.8) translate(-839 -686)"><g>
39
- <rect x="714" y="592" width="250" height="190" rx="38" fill="#fff" stroke="#fff" strokeWidth="30" />
40
- <rect x="714" y="592" width="250" height="190" rx="38" fill="#fff" stroke="var(--dca-held-mark, #3161f7)" strokeWidth="11" />
41
- <path d="M765 650h148" stroke="#202124" strokeWidth="14" strokeLinecap="round" opacity=".62" />
42
- <path d="M765 718h148" stroke="#202124" strokeWidth="14" strokeLinecap="round" opacity=".62" />
43
- <circle cx="818" cy="650" r="23" fill="var(--dca-held-mark, #3161f7)" stroke="#fff" strokeWidth="8" />
44
- <circle cx="872" cy="718" r="23" fill="var(--dca-held-accent, #f6b500)" stroke="#fff" strokeWidth="8" />
45
- </g>
46
- </g>}
47
- </g>
48
- }