mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 15:06:20 +00:00
Merge remote-tracking branch 'duckie/main' into merge-duckie-main-2026-05-06
# Conflicts: # index.html # public/UITexts.example # public/renderer-config.example # src/App.tsx # src/components/login/LoginView.tsx # src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx # src/components/toolbar/ToolbarView.tsx # src/components/user-profile/UserContainerView.tsx
This commit is contained in:
Lorenzune
+22
-25
@@ -11,43 +11,40 @@
|
||||
"eslint": "eslint ./src"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.26.9",
|
||||
"@babel/runtime": "^7.29.2",
|
||||
"@emoji-mart/data": "^1.2.1",
|
||||
"@emoji-mart/react": "^1.1.1",
|
||||
"@tanstack/react-virtual": "3.2.0",
|
||||
"@types/react-transition-group": "^4.4.10",
|
||||
"dompurify": "^3.1.5",
|
||||
"@radix-ui/react-popover": "^1.1.6",
|
||||
"@radix-ui/react-slider": "^1.2.4",
|
||||
"@tanstack/react-virtual": "3.13.24",
|
||||
"dompurify": "^3.4.1",
|
||||
"emoji-mart": "^5.6.0",
|
||||
"emoji-toolkit": "10.0.0",
|
||||
"framer-motion": "^11.2.12",
|
||||
"react": "^19.2.4",
|
||||
"react-bootstrap": "^2.10.10",
|
||||
"react-dom": "^19.2.4",
|
||||
"framer-motion": "^12.38.0",
|
||||
"react": "^19.2.5",
|
||||
"react-dom": "^19.2.5",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-slider": "^2.0.6",
|
||||
"react-tiny-popover": "^8.1.6",
|
||||
"react-youtube": "^10.1.0",
|
||||
"react-player": "^2.16.0",
|
||||
"use-between": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/forms": "^0.5.11",
|
||||
"@tailwindcss/postcss": "^4.2.0",
|
||||
"@types/node": "^25.3.0",
|
||||
"@tailwindcss/postcss": "^4.2.4",
|
||||
"@types/node": "^25.6.0",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@types/react-slider": "^1.3.6",
|
||||
"@typescript-eslint/eslint-plugin": "^8.56.0",
|
||||
"@typescript-eslint/parser": "^8.56.0",
|
||||
"@vitejs/plugin-react": "^5.1.4",
|
||||
"eslint": "^10.0.0",
|
||||
"@typescript-eslint/eslint-plugin": "^8.59.1",
|
||||
"@typescript-eslint/parser": "^8.59.1",
|
||||
"@vitejs/plugin-react": "^6.0.1",
|
||||
"eslint": "^10.2.1",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"postcss": "^8.5.6",
|
||||
"eslint-plugin-react-hooks": "^7.1.1",
|
||||
"postcss": "^8.5.12",
|
||||
"postcss-nested": "^7.0.2",
|
||||
"sass": "^1.97.3",
|
||||
"tailwindcss": "^4.2.0",
|
||||
"typescript": "^5.9.3",
|
||||
"typescript-eslint": "^8.56.0",
|
||||
"vite": "^8.0.8"
|
||||
"sass": "^1.99.0",
|
||||
"tailwindcss": "^4.2.4",
|
||||
"typescript": "^6.0.3",
|
||||
"typescript-eslint": "^8.59.1",
|
||||
"vite": "^8.0.10"
|
||||
}
|
||||
}
|
||||
|
||||
+132
-1581
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,712 @@
|
||||
{
|
||||
"backgrounds.data": [
|
||||
{
|
||||
"backgroundId": 0
|
||||
},
|
||||
{
|
||||
"backgroundId": 1
|
||||
},
|
||||
{
|
||||
"backgroundId": 2
|
||||
},
|
||||
{
|
||||
"backgroundId": 3
|
||||
},
|
||||
{
|
||||
"backgroundId": 4
|
||||
},
|
||||
{
|
||||
"backgroundId": 5
|
||||
},
|
||||
{
|
||||
"backgroundId": 6
|
||||
},
|
||||
{
|
||||
"backgroundId": 7
|
||||
},
|
||||
{
|
||||
"backgroundId": 8
|
||||
},
|
||||
{
|
||||
"backgroundId": 9
|
||||
},
|
||||
{
|
||||
"backgroundId": 10
|
||||
},
|
||||
{
|
||||
"backgroundId": 11
|
||||
},
|
||||
{
|
||||
"backgroundId": 12
|
||||
},
|
||||
{
|
||||
"backgroundId": 13
|
||||
},
|
||||
{
|
||||
"backgroundId": 14
|
||||
},
|
||||
{
|
||||
"backgroundId": 15
|
||||
},
|
||||
{
|
||||
"backgroundId": 16
|
||||
},
|
||||
{
|
||||
"backgroundId": 17
|
||||
},
|
||||
{
|
||||
"backgroundId": 18
|
||||
},
|
||||
{
|
||||
"backgroundId": 19
|
||||
},
|
||||
{
|
||||
"backgroundId": 20
|
||||
},
|
||||
{
|
||||
"backgroundId": 21
|
||||
},
|
||||
{
|
||||
"backgroundId": 22
|
||||
},
|
||||
{
|
||||
"backgroundId": 23
|
||||
},
|
||||
{
|
||||
"backgroundId": 24
|
||||
},
|
||||
{
|
||||
"backgroundId": 25
|
||||
},
|
||||
{
|
||||
"backgroundId": 26
|
||||
},
|
||||
{
|
||||
"backgroundId": 27
|
||||
},
|
||||
{
|
||||
"backgroundId": 28
|
||||
},
|
||||
{
|
||||
"backgroundId": 29
|
||||
},
|
||||
{
|
||||
"backgroundId": 30
|
||||
},
|
||||
{
|
||||
"backgroundId": 31
|
||||
},
|
||||
{
|
||||
"backgroundId": 32
|
||||
},
|
||||
{
|
||||
"backgroundId": 33
|
||||
},
|
||||
{
|
||||
"backgroundId": 34
|
||||
},
|
||||
{
|
||||
"backgroundId": 35
|
||||
},
|
||||
{
|
||||
"backgroundId": 36
|
||||
},
|
||||
{
|
||||
"backgroundId": 37
|
||||
},
|
||||
{
|
||||
"backgroundId": 38
|
||||
},
|
||||
{
|
||||
"backgroundId": 39
|
||||
},
|
||||
{
|
||||
"backgroundId": 40
|
||||
},
|
||||
{
|
||||
"backgroundId": 41
|
||||
},
|
||||
{
|
||||
"backgroundId": 42
|
||||
},
|
||||
{
|
||||
"backgroundId": 43
|
||||
},
|
||||
{
|
||||
"backgroundId": 44
|
||||
},
|
||||
{
|
||||
"backgroundId": 45
|
||||
},
|
||||
{
|
||||
"backgroundId": 46
|
||||
},
|
||||
{
|
||||
"backgroundId": 47
|
||||
},
|
||||
{
|
||||
"backgroundId": 48
|
||||
},
|
||||
{
|
||||
"backgroundId": 49
|
||||
},
|
||||
{
|
||||
"backgroundId": 50
|
||||
},
|
||||
{
|
||||
"backgroundId": 51
|
||||
},
|
||||
{
|
||||
"backgroundId": 52
|
||||
},
|
||||
{
|
||||
"backgroundId": 53
|
||||
},
|
||||
{
|
||||
"backgroundId": 54
|
||||
},
|
||||
{
|
||||
"backgroundId": 55
|
||||
},
|
||||
{
|
||||
"backgroundId": 56
|
||||
},
|
||||
{
|
||||
"backgroundId": 57
|
||||
},
|
||||
{
|
||||
"backgroundId": 58
|
||||
},
|
||||
{
|
||||
"backgroundId": 59
|
||||
},
|
||||
{
|
||||
"backgroundId": 60
|
||||
},
|
||||
{
|
||||
"backgroundId": 61
|
||||
},
|
||||
{
|
||||
"backgroundId": 62
|
||||
},
|
||||
{
|
||||
"backgroundId": 63
|
||||
},
|
||||
{
|
||||
"backgroundId": 64
|
||||
},
|
||||
{
|
||||
"backgroundId": 65
|
||||
},
|
||||
{
|
||||
"backgroundId": 66
|
||||
},
|
||||
{
|
||||
"backgroundId": 67
|
||||
},
|
||||
{
|
||||
"backgroundId": 68
|
||||
},
|
||||
{
|
||||
"backgroundId": 69
|
||||
},
|
||||
{
|
||||
"backgroundId": 70
|
||||
},
|
||||
{
|
||||
"backgroundId": 71
|
||||
},
|
||||
{
|
||||
"backgroundId": 72
|
||||
},
|
||||
{
|
||||
"backgroundId": 73
|
||||
},
|
||||
{
|
||||
"backgroundId": 74
|
||||
},
|
||||
{
|
||||
"backgroundId": 75
|
||||
},
|
||||
{
|
||||
"backgroundId": 76
|
||||
},
|
||||
{
|
||||
"backgroundId": 77
|
||||
},
|
||||
{
|
||||
"backgroundId": 78
|
||||
},
|
||||
{
|
||||
"backgroundId": 79
|
||||
},
|
||||
{
|
||||
"backgroundId": 80
|
||||
},
|
||||
{
|
||||
"backgroundId": 81
|
||||
},
|
||||
{
|
||||
"backgroundId": 82
|
||||
},
|
||||
{
|
||||
"backgroundId": 83
|
||||
},
|
||||
{
|
||||
"backgroundId": 84
|
||||
},
|
||||
{
|
||||
"backgroundId": 85
|
||||
},
|
||||
{
|
||||
"backgroundId": 86
|
||||
},
|
||||
{
|
||||
"backgroundId": 87
|
||||
},
|
||||
{
|
||||
"backgroundId": 88
|
||||
},
|
||||
{
|
||||
"backgroundId": 89
|
||||
},
|
||||
{
|
||||
"backgroundId": 90
|
||||
},
|
||||
{
|
||||
"backgroundId": 91
|
||||
},
|
||||
{
|
||||
"backgroundId": 92
|
||||
},
|
||||
{
|
||||
"backgroundId": 93
|
||||
},
|
||||
{
|
||||
"backgroundId": 94
|
||||
},
|
||||
{
|
||||
"backgroundId": 95
|
||||
},
|
||||
{
|
||||
"backgroundId": 96
|
||||
},
|
||||
{
|
||||
"backgroundId": 97
|
||||
},
|
||||
{
|
||||
"backgroundId": 98
|
||||
},
|
||||
{
|
||||
"backgroundId": 99
|
||||
},
|
||||
{
|
||||
"backgroundId": 100
|
||||
},
|
||||
{
|
||||
"backgroundId": 101
|
||||
},
|
||||
{
|
||||
"backgroundId": 102
|
||||
},
|
||||
{
|
||||
"backgroundId": 103
|
||||
},
|
||||
{
|
||||
"backgroundId": 104
|
||||
},
|
||||
{
|
||||
"backgroundId": 105
|
||||
},
|
||||
{
|
||||
"backgroundId": 106
|
||||
},
|
||||
{
|
||||
"backgroundId": 107
|
||||
},
|
||||
{
|
||||
"backgroundId": 108
|
||||
},
|
||||
{
|
||||
"backgroundId": 109
|
||||
},
|
||||
{
|
||||
"backgroundId": 110
|
||||
},
|
||||
{
|
||||
"backgroundId": 111
|
||||
},
|
||||
{
|
||||
"backgroundId": 112
|
||||
},
|
||||
{
|
||||
"backgroundId": 113
|
||||
},
|
||||
{
|
||||
"backgroundId": 114
|
||||
},
|
||||
{
|
||||
"backgroundId": 115
|
||||
},
|
||||
{
|
||||
"backgroundId": 116
|
||||
},
|
||||
{
|
||||
"backgroundId": 117
|
||||
},
|
||||
{
|
||||
"backgroundId": 118
|
||||
},
|
||||
{
|
||||
"backgroundId": 119
|
||||
},
|
||||
{
|
||||
"backgroundId": 120
|
||||
},
|
||||
{
|
||||
"backgroundId": 121
|
||||
},
|
||||
{
|
||||
"backgroundId": 122
|
||||
},
|
||||
{
|
||||
"backgroundId": 123
|
||||
},
|
||||
{
|
||||
"backgroundId": 124
|
||||
},
|
||||
{
|
||||
"backgroundId": 125
|
||||
},
|
||||
{
|
||||
"backgroundId": 126
|
||||
},
|
||||
{
|
||||
"backgroundId": 127
|
||||
},
|
||||
{
|
||||
"backgroundId": 128
|
||||
},
|
||||
{
|
||||
"backgroundId": 129
|
||||
},
|
||||
{
|
||||
"backgroundId": 130
|
||||
},
|
||||
{
|
||||
"backgroundId": 131
|
||||
},
|
||||
{
|
||||
"backgroundId": 132
|
||||
},
|
||||
{
|
||||
"backgroundId": 133
|
||||
},
|
||||
{
|
||||
"backgroundId": 134
|
||||
},
|
||||
{
|
||||
"backgroundId": 135
|
||||
},
|
||||
{
|
||||
"backgroundId": 136
|
||||
},
|
||||
{
|
||||
"backgroundId": 137
|
||||
},
|
||||
{
|
||||
"backgroundId": 138
|
||||
},
|
||||
{
|
||||
"backgroundId": 139
|
||||
},
|
||||
{
|
||||
"backgroundId": 140
|
||||
},
|
||||
{
|
||||
"backgroundId": 141
|
||||
},
|
||||
{
|
||||
"backgroundId": 142
|
||||
},
|
||||
{
|
||||
"backgroundId": 143
|
||||
},
|
||||
{
|
||||
"backgroundId": 144
|
||||
},
|
||||
{
|
||||
"backgroundId": 145
|
||||
},
|
||||
{
|
||||
"backgroundId": 146
|
||||
},
|
||||
{
|
||||
"backgroundId": 147
|
||||
},
|
||||
{
|
||||
"backgroundId": 148
|
||||
},
|
||||
{
|
||||
"backgroundId": 149
|
||||
},
|
||||
{
|
||||
"backgroundId": 150
|
||||
},
|
||||
{
|
||||
"backgroundId": 151
|
||||
},
|
||||
{
|
||||
"backgroundId": 152
|
||||
},
|
||||
{
|
||||
"backgroundId": 153
|
||||
},
|
||||
{
|
||||
"backgroundId": 154
|
||||
},
|
||||
{
|
||||
"backgroundId": 155
|
||||
},
|
||||
{
|
||||
"backgroundId": 156
|
||||
},
|
||||
{
|
||||
"backgroundId": 157
|
||||
},
|
||||
{
|
||||
"backgroundId": 158
|
||||
},
|
||||
{
|
||||
"backgroundId": 159
|
||||
},
|
||||
{
|
||||
"backgroundId": 160
|
||||
},
|
||||
{
|
||||
"backgroundId": 161
|
||||
},
|
||||
{
|
||||
"backgroundId": 162
|
||||
},
|
||||
{
|
||||
"backgroundId": 163
|
||||
},
|
||||
{
|
||||
"backgroundId": 164
|
||||
},
|
||||
{
|
||||
"backgroundId": 165
|
||||
},
|
||||
{
|
||||
"backgroundId": 166
|
||||
},
|
||||
{
|
||||
"backgroundId": 167
|
||||
},
|
||||
{
|
||||
"backgroundId": 168
|
||||
},
|
||||
{
|
||||
"backgroundId": 169
|
||||
},
|
||||
{
|
||||
"backgroundId": 170
|
||||
},
|
||||
{
|
||||
"backgroundId": 171
|
||||
},
|
||||
{
|
||||
"backgroundId": 172
|
||||
},
|
||||
{
|
||||
"backgroundId": 173
|
||||
},
|
||||
{
|
||||
"backgroundId": 174
|
||||
},
|
||||
{
|
||||
"backgroundId": 175
|
||||
},
|
||||
{
|
||||
"backgroundId": 176
|
||||
},
|
||||
{
|
||||
"backgroundId": 177
|
||||
},
|
||||
{
|
||||
"backgroundId": 178
|
||||
},
|
||||
{
|
||||
"backgroundId": 179
|
||||
},
|
||||
{
|
||||
"backgroundId": 180
|
||||
},
|
||||
{
|
||||
"backgroundId": 181
|
||||
},
|
||||
{
|
||||
"backgroundId": 182
|
||||
},
|
||||
{
|
||||
"backgroundId": 183
|
||||
},
|
||||
{
|
||||
"backgroundId": 184
|
||||
},
|
||||
{
|
||||
"backgroundId": 185
|
||||
},
|
||||
{
|
||||
"backgroundId": 186
|
||||
},
|
||||
{
|
||||
"backgroundId": 187
|
||||
}
|
||||
],
|
||||
"stands.data": [
|
||||
{
|
||||
"standId": 0
|
||||
},
|
||||
{
|
||||
"standId": 1
|
||||
},
|
||||
{
|
||||
"standId": 2
|
||||
},
|
||||
{
|
||||
"standId": 3
|
||||
},
|
||||
{
|
||||
"standId": 4
|
||||
},
|
||||
{
|
||||
"standId": 5
|
||||
},
|
||||
{
|
||||
"standId": 6
|
||||
},
|
||||
{
|
||||
"standId": 7
|
||||
},
|
||||
{
|
||||
"standId": 8
|
||||
},
|
||||
{
|
||||
"standId": 9
|
||||
},
|
||||
{
|
||||
"standId": 10
|
||||
},
|
||||
{
|
||||
"standId": 11
|
||||
},
|
||||
{
|
||||
"standId": 12
|
||||
},
|
||||
{
|
||||
"standId": 13
|
||||
},
|
||||
{
|
||||
"standId": 14
|
||||
},
|
||||
{
|
||||
"standId": 15
|
||||
},
|
||||
{
|
||||
"standId": 16
|
||||
},
|
||||
{
|
||||
"standId": 17
|
||||
},
|
||||
{
|
||||
"standId": 18
|
||||
},
|
||||
{
|
||||
"standId": 19
|
||||
},
|
||||
{
|
||||
"standId": 20
|
||||
},
|
||||
{
|
||||
"standId": 21
|
||||
}
|
||||
],
|
||||
"overlays.data": [
|
||||
{
|
||||
"overlayId": 0
|
||||
},
|
||||
{
|
||||
"overlayId": 1
|
||||
},
|
||||
{
|
||||
"overlayId": 2
|
||||
},
|
||||
{
|
||||
"overlayId": 3
|
||||
},
|
||||
{
|
||||
"overlayId": 4
|
||||
},
|
||||
{
|
||||
"overlayId": 5
|
||||
},
|
||||
{
|
||||
"overlayId": 6
|
||||
},
|
||||
{
|
||||
"overlayId": 7
|
||||
},
|
||||
{
|
||||
"overlayId": 8
|
||||
}
|
||||
],
|
||||
"cards.data": [
|
||||
{
|
||||
"backgroundId": 1
|
||||
},
|
||||
{
|
||||
"backgroundId": 2
|
||||
},
|
||||
{
|
||||
"backgroundId": 3
|
||||
},
|
||||
{
|
||||
"backgroundId": 4
|
||||
},
|
||||
{
|
||||
"backgroundId": 5
|
||||
},
|
||||
{
|
||||
"backgroundId": 6
|
||||
},
|
||||
{
|
||||
"backgroundId": 7
|
||||
},
|
||||
{
|
||||
"backgroundId": 8
|
||||
},
|
||||
{
|
||||
"backgroundId": 9
|
||||
},
|
||||
{
|
||||
"backgroundId": 10
|
||||
},
|
||||
{
|
||||
"backgroundId": 11
|
||||
},
|
||||
{
|
||||
"backgroundId": 12
|
||||
},
|
||||
{
|
||||
"backgroundId": 13
|
||||
},
|
||||
{
|
||||
"backgroundId": 14
|
||||
},
|
||||
{
|
||||
"backgroundId": 15
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
const STORAGE_KEY = 'nitro.access.token';
|
||||
const EXPIRES_KEY = 'nitro.access.token.exp';
|
||||
|
||||
export const setAccessToken = (token: string | null | undefined, expiresAt?: number | null): void =>
|
||||
{
|
||||
try
|
||||
{
|
||||
if(token && typeof token === 'string')
|
||||
{
|
||||
window.localStorage.setItem(STORAGE_KEY, token);
|
||||
if(typeof expiresAt === 'number' && expiresAt > 0) window.localStorage.setItem(EXPIRES_KEY, String(expiresAt));
|
||||
else window.localStorage.removeItem(EXPIRES_KEY);
|
||||
}
|
||||
else
|
||||
{
|
||||
window.localStorage.removeItem(STORAGE_KEY);
|
||||
window.localStorage.removeItem(EXPIRES_KEY);
|
||||
}
|
||||
}
|
||||
catch {}
|
||||
};
|
||||
|
||||
export const getAccessToken = (): string =>
|
||||
{
|
||||
try { return window.localStorage.getItem(STORAGE_KEY) ?? ''; }
|
||||
catch { return ''; }
|
||||
};
|
||||
|
||||
export const getAccessTokenExpiresAt = (): number =>
|
||||
{
|
||||
try
|
||||
{
|
||||
const raw = window.localStorage.getItem(EXPIRES_KEY);
|
||||
if(!raw) return 0;
|
||||
const value = parseInt(raw, 10);
|
||||
return Number.isFinite(value) ? value : 0;
|
||||
}
|
||||
catch { return 0; }
|
||||
};
|
||||
|
||||
export const clearAccessToken = (): void =>
|
||||
{
|
||||
setAccessToken(null);
|
||||
};
|
||||
|
||||
export const persistAccessTokenFromPayload = (payload: Record<string, unknown> | null | undefined): void =>
|
||||
{
|
||||
if(!payload) return;
|
||||
const token = typeof payload.accessToken === 'string' ? payload.accessToken : '';
|
||||
const expiresAt = typeof payload.accessTokenExpiresAt === 'number' ? payload.accessTokenExpiresAt : null;
|
||||
if(token) setAccessToken(token, expiresAt);
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export * from './accessToken';
|
||||
@@ -224,12 +224,11 @@ export class AvatarEditorThumbnailsHelper
|
||||
|
||||
const texture = avatarImage.processAsTexture(AvatarSetType.HEAD, false);
|
||||
const sprite = new NitroSprite(texture);
|
||||
|
||||
if(isDisabled) sprite.filters = [ AvatarEditorThumbnailsHelper.ALPHA_FILTER ];
|
||||
|
||||
const frame = AvatarEditorThumbnailsHelper.findOpaqueBoundsFrame(sprite, texture.width, texture.height);
|
||||
const imageUrl = await TextureUtils.generateImageUrl({
|
||||
target: sprite,
|
||||
frame: new NitroRectangle(0, 0, texture.width, texture.height)
|
||||
frame
|
||||
});
|
||||
|
||||
sprite.destroy();
|
||||
@@ -244,6 +243,49 @@ export class AvatarEditorThumbnailsHelper
|
||||
});
|
||||
}
|
||||
|
||||
private static findOpaqueBoundsFrame(sprite: NitroSprite, fallbackWidth: number, fallbackHeight: number): NitroRectangle
|
||||
{
|
||||
try
|
||||
{
|
||||
const data = TextureUtils.getPixels(sprite);
|
||||
if(!data) return new NitroRectangle(0, 0, fallbackWidth, fallbackHeight);
|
||||
|
||||
const pixels = data.pixels as Uint8ClampedArray | Uint8Array;
|
||||
const width = data.width;
|
||||
const height = data.height;
|
||||
if(!pixels || width <= 0 || height <= 0) return new NitroRectangle(0, 0, fallbackWidth, fallbackHeight);
|
||||
const ALPHA_THRESHOLD = 8;
|
||||
|
||||
let minX = width;
|
||||
let minY = height;
|
||||
let maxX = -1;
|
||||
let maxY = -1;
|
||||
|
||||
for(let y = 0; y < height; y++)
|
||||
{
|
||||
const rowStart = y * width * 4;
|
||||
for(let x = 0; x < width; x++)
|
||||
{
|
||||
if(pixels[rowStart + (x * 4) + 3] > ALPHA_THRESHOLD)
|
||||
{
|
||||
if(x < minX) minX = x;
|
||||
if(x > maxX) maxX = x;
|
||||
if(y < minY) minY = y;
|
||||
if(y > maxY) maxY = y;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(maxX < minX || maxY < minY) return new NitroRectangle(0, 0, fallbackWidth, fallbackHeight);
|
||||
|
||||
return new NitroRectangle(minX, minY, (maxX - minX) + 1, (maxY - minY) + 1);
|
||||
}
|
||||
catch
|
||||
{
|
||||
return new NitroRectangle(0, 0, fallbackWidth, fallbackHeight);
|
||||
}
|
||||
}
|
||||
|
||||
private static sortByDrawOrder(a: IFigurePart, b: IFigurePart): number
|
||||
{
|
||||
const indexA = AvatarEditorThumbnailsHelper.DRAW_ORDER.indexOf(a.type);
|
||||
|
||||
@@ -0,0 +1,172 @@
|
||||
import { GetConfiguration, GetLocalizationManager } from '@nitrots/nitro-renderer';
|
||||
import { getAccessToken } from '../auth';
|
||||
|
||||
export interface CustomBadgeRecord
|
||||
{
|
||||
badgeId: string;
|
||||
badgeCode: string;
|
||||
name: string;
|
||||
description: string;
|
||||
dateCreated: number;
|
||||
dateEdit: number;
|
||||
url: string;
|
||||
}
|
||||
|
||||
export interface CustomBadgeListResponse
|
||||
{
|
||||
badges: CustomBadgeRecord[];
|
||||
max: number;
|
||||
badgeWidth: number;
|
||||
badgeHeight: number;
|
||||
maxBadgeSizeBytes: number;
|
||||
priceBadge?: number;
|
||||
currencyType?: number;
|
||||
}
|
||||
|
||||
export interface CustomBadgeError
|
||||
{
|
||||
error: string;
|
||||
code?: string;
|
||||
}
|
||||
|
||||
const interpolate = (value: string): string =>
|
||||
{
|
||||
try { return GetConfiguration().interpolate(value); }
|
||||
catch { return value; }
|
||||
};
|
||||
|
||||
const getConfigUrl = (key: string, fallback: string): string =>
|
||||
interpolate(GetConfiguration().getValue<string>(key, fallback));
|
||||
|
||||
const buildUrl = (key: string, fallback: string, badgeId?: string): string =>
|
||||
{
|
||||
const template = getConfigUrl(key, fallback);
|
||||
if(!badgeId) return template;
|
||||
if(template.includes('%badgeId%')) return template.replace(/%badgeId%/g, encodeURIComponent(badgeId));
|
||||
return template + (template.endsWith('/') ? '' : '/') + encodeURIComponent(badgeId);
|
||||
};
|
||||
|
||||
const authHeaders = (): Record<string, string> =>
|
||||
{
|
||||
const headers: Record<string, string> = {
|
||||
'Accept': 'application/json',
|
||||
'X-Requested-With': 'NitroCustomBadges'
|
||||
};
|
||||
const token = getAccessToken();
|
||||
if(token) headers['Authorization'] = `Bearer ${ token }`;
|
||||
return headers;
|
||||
};
|
||||
|
||||
const parseJson = async <T>(response: Response): Promise<T> =>
|
||||
{
|
||||
const text = await response.text();
|
||||
if(!text) return {} as T;
|
||||
try { return JSON.parse(text) as T; }
|
||||
catch { throw new Error('Invalid response from server.'); }
|
||||
};
|
||||
|
||||
const throwOnError = async (response: Response): Promise<void> =>
|
||||
{
|
||||
if(response.ok) return;
|
||||
const payload = await parseJson<CustomBadgeError>(response);
|
||||
const message = payload?.error || `Request failed (${ response.status }).`;
|
||||
const err = new Error(message) as Error & { status: number; code?: string };
|
||||
err.status = response.status;
|
||||
if(payload?.code) err.code = payload.code;
|
||||
throw err;
|
||||
};
|
||||
|
||||
export const fetchCustomBadges = async (): Promise<CustomBadgeListResponse> =>
|
||||
{
|
||||
const url = buildUrl('badges.custom.list.endpoint', '/api/badges/custom');
|
||||
const response = await fetch(url, { method: 'GET', credentials: 'include', headers: authHeaders() });
|
||||
await throwOnError(response);
|
||||
return parseJson<CustomBadgeListResponse>(response);
|
||||
};
|
||||
|
||||
export const createCustomBadge = async (body: { name: string; description: string; image: string }): Promise<CustomBadgeRecord> =>
|
||||
{
|
||||
const url = buildUrl('badges.custom.create.endpoint', '/api/badges/custom');
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: { ...authHeaders(), 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
await throwOnError(response);
|
||||
return parseJson<CustomBadgeRecord>(response);
|
||||
};
|
||||
|
||||
export const updateCustomBadge = async (badgeId: string, body: { name: string; description: string; image: string }): Promise<CustomBadgeRecord> =>
|
||||
{
|
||||
const url = buildUrl('badges.custom.update.endpoint', '/api/badges/custom/%badgeId%', badgeId);
|
||||
const response = await fetch(url, {
|
||||
method: 'PUT',
|
||||
credentials: 'include',
|
||||
headers: { ...authHeaders(), 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
await throwOnError(response);
|
||||
return parseJson<CustomBadgeRecord>(response);
|
||||
};
|
||||
|
||||
export const deleteCustomBadge = async (badgeId: string): Promise<void> =>
|
||||
{
|
||||
const url = buildUrl('badges.custom.delete.endpoint', '/api/badges/custom/%badgeId%', badgeId);
|
||||
const response = await fetch(url, { method: 'DELETE', credentials: 'include', headers: authHeaders() });
|
||||
await throwOnError(response);
|
||||
};
|
||||
|
||||
export const isCustomBadgeCode = (code: string | null | undefined): boolean =>
|
||||
{
|
||||
if(!code) return false;
|
||||
return /^CUST[A-Z0-9]{5}-\d+$/.test(code);
|
||||
};
|
||||
|
||||
let customBadgeTextsLoadPromise: Promise<void> | null = null;
|
||||
|
||||
const injectTextsIntoLocalization = (texts: Record<string, string> | null | undefined): void =>
|
||||
{
|
||||
if(!texts) return;
|
||||
let manager: ReturnType<typeof GetLocalizationManager> | null = null;
|
||||
try { manager = GetLocalizationManager(); }
|
||||
catch { return; }
|
||||
if(!manager || typeof manager.setValue !== 'function') return;
|
||||
for(const key of Object.keys(texts))
|
||||
{
|
||||
const value = texts[key];
|
||||
if(typeof value === 'string') manager.setValue(key, value);
|
||||
}
|
||||
};
|
||||
|
||||
export const ensureCustomBadgeTexts = (): Promise<void> =>
|
||||
{
|
||||
if(customBadgeTextsLoadPromise) return customBadgeTextsLoadPromise;
|
||||
customBadgeTextsLoadPromise = (async () =>
|
||||
{
|
||||
try
|
||||
{
|
||||
const url = buildUrl('badges.custom.texts.endpoint', '/api/badges/custom/texts');
|
||||
const response = await fetch(url, { method: 'GET', credentials: 'include', headers: { 'Accept': 'application/json' } });
|
||||
if(!response.ok) return;
|
||||
const payload = await parseJson<{ texts: Record<string, string> }>(response);
|
||||
injectTextsIntoLocalization(payload.texts);
|
||||
}
|
||||
catch {}
|
||||
})();
|
||||
return customBadgeTextsLoadPromise;
|
||||
};
|
||||
|
||||
export const refreshCustomBadgeTexts = (): Promise<void> =>
|
||||
{
|
||||
customBadgeTextsLoadPromise = null;
|
||||
return ensureCustomBadgeTexts();
|
||||
};
|
||||
|
||||
export const setCustomBadgeText = (badgeId: string, name: string, description: string): void =>
|
||||
{
|
||||
injectTextsIntoLocalization({
|
||||
[`badge_name_${ badgeId }`]: name || badgeId,
|
||||
[`badge_desc_${ badgeId }`]: description || ''
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export * from './CustomBadgeApi';
|
||||
@@ -1,7 +1,9 @@
|
||||
export * from './GetRendererVersion';
|
||||
export * from './GetUIVersion';
|
||||
export * from './achievements';
|
||||
export * from './auth';
|
||||
export * from './avatar';
|
||||
export * from './badges';
|
||||
export * from './camera';
|
||||
export * from './campaign';
|
||||
export * from './catalog';
|
||||
|
||||
@@ -23,6 +23,7 @@ export class AvatarInfoUser implements IAvatarInfo
|
||||
public backgroundId: number = 0;
|
||||
public standId: number = 0;
|
||||
public overlayId: number = 0;
|
||||
public cardBackgroundId: number = 0;
|
||||
public webID: number = 0;
|
||||
public xp: number = 0;
|
||||
public userType: number = -1;
|
||||
|
||||
@@ -191,6 +191,7 @@ export class AvatarInfoUtilities
|
||||
userInfo.backgroundId = userData.background;
|
||||
userInfo.standId = userData.stand;
|
||||
userInfo.overlayId = userData.overlay;
|
||||
userInfo.cardBackgroundId = userData.cardBackground ?? 0;
|
||||
userInfo.achievementScore = userData.activityPoints;
|
||||
userInfo.webID = userData.webID;
|
||||
userInfo.roomIndex = userData.roomIndex;
|
||||
|
||||
+127
-14
@@ -1,35 +1,148 @@
|
||||
import { FC } from 'react';
|
||||
import ReactSlider, { ReactSliderProps } from 'react-slider';
|
||||
import * as RadixSlider from '@radix-ui/react-slider';
|
||||
import { CSSProperties, FC, HTMLProps, ReactElement } from 'react';
|
||||
import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
|
||||
import { Button } from './Button';
|
||||
import { Flex } from './Flex';
|
||||
import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
|
||||
|
||||
export interface SliderProps extends ReactSliderProps
|
||||
export interface SliderThumbState
|
||||
{
|
||||
disabledButton?: boolean;
|
||||
index: number;
|
||||
value: number | number[];
|
||||
valueNow: number;
|
||||
}
|
||||
|
||||
export interface SliderProps
|
||||
{
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
value?: number | number[];
|
||||
defaultValue?: number | number[];
|
||||
onChange?: (value: any, thumbIndex: number) => void;
|
||||
disabled?: boolean;
|
||||
disabledButton?: boolean;
|
||||
invert?: boolean;
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
trackClassName?: string;
|
||||
thumbClassName?: string;
|
||||
renderThumb?: (props: HTMLProps<HTMLDivElement>, state: SliderThumbState) => ReactElement;
|
||||
}
|
||||
|
||||
const toArray = (value: number | number[] | undefined): number[] =>
|
||||
{
|
||||
if(Array.isArray(value)) return value;
|
||||
if(typeof value === 'number') return [ value ];
|
||||
|
||||
return [ 0 ];
|
||||
};
|
||||
|
||||
const cn = (...parts: (string | undefined | false)[]) => parts.filter(Boolean).join(' ');
|
||||
|
||||
export const Slider: FC<SliderProps> = props =>
|
||||
{
|
||||
const { disabledButton, max, min, step, value, onChange, ...rest } = props;
|
||||
const currentValue = Array.isArray(value) ? value[0] : ((typeof value === 'number') ? value : 0);
|
||||
const {
|
||||
disabledButton,
|
||||
disabled,
|
||||
max = 100,
|
||||
min = 0,
|
||||
step = 1,
|
||||
value,
|
||||
defaultValue,
|
||||
onChange,
|
||||
invert,
|
||||
className,
|
||||
style,
|
||||
trackClassName,
|
||||
thumbClassName,
|
||||
renderThumb
|
||||
} = props;
|
||||
|
||||
const valueArr = toArray(value);
|
||||
const currentValue = valueArr[0] ?? 0;
|
||||
const minimum = (typeof min === 'number') ? min : 0;
|
||||
const maximum = (typeof max === 'number') ? max : 0;
|
||||
const buttonStep = ((typeof step === 'number') && (step > 0)) ? step : 1;
|
||||
const isRange = valueArr.length > 1;
|
||||
|
||||
const roundToStep = (nextValue: number) =>
|
||||
{
|
||||
if(typeof buttonStep !== 'number') return nextValue;
|
||||
|
||||
const decimalStep = buttonStep.toString();
|
||||
const precision = decimalStep.includes('.') ? (decimalStep.length - decimalStep.indexOf('.') - 1) : 0;
|
||||
|
||||
return parseFloat(nextValue.toFixed(precision));
|
||||
};
|
||||
|
||||
return <Flex fullWidth gap={ 1 } classNames={ [ 'nitro-slider-wrapper' ] }>
|
||||
{ !disabledButton && <Button classNames={ [ 'nitro-slider-button', 'nitro-slider-button-left' ] } disabled={ minimum >= currentValue } onClick={ () => onChange(roundToStep(minimum < currentValue ? currentValue - buttonStep : minimum), 0) }><FaAngleLeft /></Button> }
|
||||
<ReactSlider className={ 'nitro-slider' } max={ max } min={ min } step={ step } value={ value } onChange={ onChange } { ...rest } />
|
||||
{ !disabledButton && <Button classNames={ [ 'nitro-slider-button', 'nitro-slider-button-right' ] } disabled={ maximum <= currentValue } onClick={ () => onChange(roundToStep(maximum > currentValue ? currentValue + buttonStep : maximum), 0) }><FaAngleRight /></Button> }
|
||||
</Flex>;
|
||||
const emit = (next: number[]) =>
|
||||
{
|
||||
if(!onChange) return;
|
||||
|
||||
if(isRange) onChange(next, 0);
|
||||
else onChange(next[0], 0);
|
||||
};
|
||||
|
||||
const stepDown = () =>
|
||||
{
|
||||
const next = roundToStep(minimum < currentValue ? currentValue - buttonStep : minimum);
|
||||
|
||||
emit([ next, ...valueArr.slice(1) ]);
|
||||
};
|
||||
|
||||
const stepUp = () =>
|
||||
{
|
||||
const next = roundToStep(maximum > currentValue ? currentValue + buttonStep : maximum);
|
||||
|
||||
emit([ next, ...valueArr.slice(1) ]);
|
||||
};
|
||||
|
||||
const renderThumbElement = (i: number) =>
|
||||
{
|
||||
const baseProps: HTMLProps<HTMLDivElement> = {
|
||||
key: i,
|
||||
className: cn('thumb', `thumb-${ i }`, thumbClassName)
|
||||
};
|
||||
|
||||
const state: SliderThumbState = {
|
||||
index: i,
|
||||
value: isRange ? valueArr : currentValue,
|
||||
valueNow: valueArr[i] ?? 0
|
||||
};
|
||||
|
||||
return (
|
||||
<RadixSlider.Thumb key={ i } asChild>
|
||||
{ renderThumb ? renderThumb(baseProps, state) : <div { ...baseProps } /> }
|
||||
</RadixSlider.Thumb>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Flex fullWidth gap={ 1 } classNames={ [ 'nitro-slider-wrapper' ] }>
|
||||
{ !disabledButton && (
|
||||
<Button classNames={ [ 'nitro-slider-button', 'nitro-slider-button-left' ] } disabled={ disabled || (minimum >= currentValue) } onClick={ stepDown }>
|
||||
<FaAngleLeft />
|
||||
</Button>
|
||||
) }
|
||||
<RadixSlider.Root
|
||||
inverted={ invert }
|
||||
disabled={ disabled }
|
||||
className={ cn('nitro-slider', 'relative', 'min-w-0', 'grow', className) }
|
||||
style={ style }
|
||||
max={ max }
|
||||
min={ min }
|
||||
step={ step }
|
||||
value={ value !== undefined ? valueArr : undefined }
|
||||
defaultValue={ defaultValue !== undefined ? toArray(defaultValue) : undefined }
|
||||
onValueChange={ emit }>
|
||||
<RadixSlider.Track className={ cn('track', 'track-1', 'grow', trackClassName) }>
|
||||
<RadixSlider.Range className={ cn('track', 'track-0', trackClassName) } />
|
||||
</RadixSlider.Track>
|
||||
{ valueArr.map((_, i) => renderThumbElement(i)) }
|
||||
</RadixSlider.Root>
|
||||
{ !disabledButton && (
|
||||
<Button classNames={ [ 'nitro-slider-button', 'nitro-slider-button-right' ] } disabled={ disabled || (maximum <= currentValue) } onClick={ stepUp }>
|
||||
<FaAngleRight />
|
||||
</Button>
|
||||
) }
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { BadgeImageReadyEvent, GetEventDispatcher, GetSessionDataManager, NitroSprite, TextureUtils } from '@nitrots/nitro-renderer';
|
||||
import { CSSProperties, FC, useEffect, useMemo, useState } from 'react';
|
||||
import { CSSProperties, FC, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { GetConfigurationValue, LocalizeBadgeDescription, LocalizeBadgeName, LocalizeText } from '../../api';
|
||||
import { Base, BaseProps } from '../Base';
|
||||
|
||||
@@ -17,6 +18,26 @@ export const LayoutBadgeImageView: FC<LayoutBadgeImageViewProps> = props =>
|
||||
{
|
||||
const { badgeCode = null, isGroup = false, showInfo = false, customTitle = null, isGrayscale = false, scale = 1, classNames = [], style = {}, children = null, ...rest } = props;
|
||||
const [ imageElement, setImageElement ] = useState<HTMLImageElement>(null);
|
||||
const [ tooltipPosition, setTooltipPosition ] = useState<{ top: number; left: number } | null>(null);
|
||||
const badgeRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const tooltipsEnabled = showInfo && GetConfigurationValue<boolean>('badge.descriptions.enabled', true);
|
||||
|
||||
const showTooltip = () =>
|
||||
{
|
||||
if(!tooltipsEnabled || !badgeRef.current) return;
|
||||
|
||||
const rect = badgeRef.current.getBoundingClientRect();
|
||||
const tooltipWidth = 210;
|
||||
const gap = 10;
|
||||
let left = rect.left - tooltipWidth - gap;
|
||||
|
||||
if(left < gap) left = rect.right + gap;
|
||||
|
||||
setTooltipPosition({ top: rect.top, left });
|
||||
};
|
||||
|
||||
const hideTooltip = () => setTooltipPosition(null);
|
||||
|
||||
const getClassNames = useMemo(() =>
|
||||
{
|
||||
@@ -116,12 +137,22 @@ export const LayoutBadgeImageView: FC<LayoutBadgeImageViewProps> = props =>
|
||||
}, [ badgeCode, isGroup ]);
|
||||
|
||||
return (
|
||||
<Base className="group" classNames={ getClassNames } style={ getStyle } { ...rest }>
|
||||
{ (showInfo && GetConfigurationValue<boolean>('badge.descriptions.enabled', true)) &&
|
||||
<Base className="hidden group-hover:block before:absolute before:content-['_'] before:w-0 before:h-0 before:border-l-10! before:border-b-10! before:border-t-10! before:top-[10px] before:-right-[10px] before:border-l-[white] before:border-t-transparent before:border-b-transparent z-50 absolute pointer-events-none select-none w-[210px] rounded-[.25rem] bg-[#fff] -left-[220px] text-black py-1 px-2 small">
|
||||
<Base
|
||||
innerRef={ badgeRef }
|
||||
classNames={ getClassNames }
|
||||
style={ getStyle }
|
||||
onMouseEnter={ tooltipsEnabled ? showTooltip : undefined }
|
||||
onMouseLeave={ tooltipsEnabled ? hideTooltip : undefined }
|
||||
{ ...rest }>
|
||||
{ tooltipsEnabled && tooltipPosition && createPortal(
|
||||
<div
|
||||
className="fixed z-[9999] pointer-events-none select-none w-[210px] rounded-[.25rem] bg-[#fff] text-black py-1 px-2 small"
|
||||
style={ { top: tooltipPosition.top, left: tooltipPosition.left } }>
|
||||
<div className="font-bold mb-1">{ isGroup ? customTitle : LocalizeBadgeName(badgeCode) }</div>
|
||||
<div>{ isGroup ? LocalizeText('group.badgepopup.body') : LocalizeBadgeDescription(badgeCode) }</div>
|
||||
</Base> }
|
||||
</div>,
|
||||
document.body
|
||||
) }
|
||||
{ children }
|
||||
</Base>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { FC, ReactNode, useEffect, useState } from 'react';
|
||||
import { Transition } from 'react-transition-group';
|
||||
import { getTransitionAnimationStyle } from './TransitionAnimationStyles';
|
||||
import { AnimatePresence, motion, Variants } from 'framer-motion';
|
||||
import { FC, ReactNode } from 'react';
|
||||
import { getTransitionVariants } from './TransitionAnimationStyles';
|
||||
|
||||
interface TransitionAnimationProps
|
||||
{
|
||||
@@ -15,38 +15,22 @@ export const TransitionAnimation: FC<TransitionAnimationProps> = props =>
|
||||
{
|
||||
const { type = null, inProp = false, timeout = 300, className = null, children = null } = props;
|
||||
|
||||
const [ isChildrenVisible, setChildrenVisible ] = useState(false);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
let timeoutData: ReturnType<typeof setTimeout> = null;
|
||||
|
||||
if(inProp)
|
||||
{
|
||||
setChildrenVisible(true);
|
||||
}
|
||||
else
|
||||
{
|
||||
timeoutData = setTimeout(() =>
|
||||
{
|
||||
setChildrenVisible(false);
|
||||
clearTimeout(timeout);
|
||||
}, timeout);
|
||||
}
|
||||
|
||||
return () =>
|
||||
{
|
||||
if(timeoutData) clearTimeout(timeoutData);
|
||||
};
|
||||
}, [ inProp, timeout ]);
|
||||
const variants: Variants = getTransitionVariants(type);
|
||||
const duration = timeout / 1000;
|
||||
|
||||
return (
|
||||
<Transition in={ inProp } timeout={ timeout }>
|
||||
{ state => (
|
||||
<div className={ (className ?? '') + ' animate__animated' } style={ { ...getTransitionAnimationStyle(type, state, timeout) } }>
|
||||
{ isChildrenVisible && children }
|
||||
</div>
|
||||
<AnimatePresence initial={ false }>
|
||||
{ inProp && (
|
||||
<motion.div
|
||||
className={ className ?? '' }
|
||||
variants={ variants }
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="exit"
|
||||
transition={ { duration } }>
|
||||
{ children }
|
||||
</motion.div>
|
||||
) }
|
||||
</Transition>
|
||||
</AnimatePresence>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,136 +1,66 @@
|
||||
import { CSSProperties } from 'react';
|
||||
import { TransitionStatus } from 'react-transition-group';
|
||||
import { ENTERING, EXITING } from 'react-transition-group/Transition';
|
||||
import { Variants } from 'framer-motion';
|
||||
import { TransitionAnimationTypes } from './TransitionAnimationTypes';
|
||||
|
||||
export function getTransitionAnimationStyle(type: string, transition: TransitionStatus, timeout: number = 300): Partial<CSSProperties>
|
||||
export function getTransitionVariants(type: string): Variants
|
||||
{
|
||||
switch(type)
|
||||
{
|
||||
case TransitionAnimationTypes.BOUNCE:
|
||||
switch(transition)
|
||||
{
|
||||
default:
|
||||
return {};
|
||||
case ENTERING:
|
||||
return {
|
||||
animationName: 'bounceIn',
|
||||
animationDuration: `${ timeout }ms`
|
||||
};
|
||||
case EXITING:
|
||||
return {
|
||||
animationName: 'bounceOut',
|
||||
animationDuration: `${ timeout }ms`
|
||||
};
|
||||
}
|
||||
return {
|
||||
hidden: { opacity: 0, scale: 0.3 },
|
||||
visible: { opacity: 1, scale: 1, transition: { type: 'spring', stiffness: 260, damping: 12 } },
|
||||
exit: { opacity: 0, scale: 0.3 }
|
||||
};
|
||||
case TransitionAnimationTypes.SLIDE_LEFT:
|
||||
switch(transition)
|
||||
{
|
||||
default:
|
||||
return {};
|
||||
case ENTERING:
|
||||
return {
|
||||
animationName: 'slideInLeft',
|
||||
animationDuration: `${ timeout }ms`
|
||||
};
|
||||
case EXITING:
|
||||
return {
|
||||
animationName: 'slideOutLeft',
|
||||
animationDuration: `${ timeout }ms`
|
||||
};
|
||||
}
|
||||
return {
|
||||
hidden: { opacity: 0, x: '-100%' },
|
||||
visible: { opacity: 1, x: 0 },
|
||||
exit: { opacity: 0, x: '-100%' }
|
||||
};
|
||||
case TransitionAnimationTypes.SLIDE_RIGHT:
|
||||
switch(transition)
|
||||
{
|
||||
default:
|
||||
return {};
|
||||
case ENTERING:
|
||||
return {
|
||||
animationName: 'slideInRight',
|
||||
animationDuration: `${ timeout }ms`
|
||||
};
|
||||
case EXITING:
|
||||
return {
|
||||
animationName: 'slideOutRight',
|
||||
animationDuration: `${ timeout }ms`
|
||||
};
|
||||
}
|
||||
return {
|
||||
hidden: { opacity: 0, x: '100%' },
|
||||
visible: { opacity: 1, x: 0 },
|
||||
exit: { opacity: 0, x: '100%' }
|
||||
};
|
||||
case TransitionAnimationTypes.FLIP_X:
|
||||
switch(transition)
|
||||
{
|
||||
default:
|
||||
return {};
|
||||
case ENTERING:
|
||||
return {
|
||||
animationName: 'flipInX',
|
||||
animationDuration: `${ timeout }ms`
|
||||
};
|
||||
case EXITING:
|
||||
return {
|
||||
animationName: 'flipOutX',
|
||||
animationDuration: `${ timeout }ms`
|
||||
};
|
||||
}
|
||||
return {
|
||||
hidden: { opacity: 0, rotateX: 90 },
|
||||
visible: { opacity: 1, rotateX: 0 },
|
||||
exit: { opacity: 0, rotateX: 90 }
|
||||
};
|
||||
case TransitionAnimationTypes.FADE_UP:
|
||||
switch(transition)
|
||||
{
|
||||
default:
|
||||
return {};
|
||||
case ENTERING:
|
||||
return {
|
||||
animationName: 'fadeInUp',
|
||||
animationDuration: `${ timeout }ms`
|
||||
};
|
||||
case EXITING:
|
||||
return {
|
||||
animationName: 'fadeOutDown',
|
||||
animationDuration: `${ timeout }ms`
|
||||
};
|
||||
}
|
||||
return {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0 },
|
||||
exit: { opacity: 0, y: 20 }
|
||||
};
|
||||
case TransitionAnimationTypes.FADE_IN:
|
||||
switch(transition)
|
||||
{
|
||||
default:
|
||||
return {};
|
||||
case ENTERING:
|
||||
return {
|
||||
animationName: 'fadeIn',
|
||||
animationDuration: `${ timeout }ms`
|
||||
};
|
||||
case EXITING:
|
||||
return {
|
||||
animationName: 'fadeOut',
|
||||
animationDuration: `${ timeout }ms`
|
||||
};
|
||||
}
|
||||
return {
|
||||
hidden: { opacity: 0 },
|
||||
visible: { opacity: 1 },
|
||||
exit: { opacity: 0 }
|
||||
};
|
||||
case TransitionAnimationTypes.FADE_DOWN:
|
||||
switch(transition)
|
||||
{
|
||||
default:
|
||||
return {};
|
||||
case ENTERING:
|
||||
return {
|
||||
animationName: 'fadeInDown',
|
||||
animationDuration: `${ timeout }ms`
|
||||
};
|
||||
case EXITING:
|
||||
return {
|
||||
animationName: 'fadeOutUp',
|
||||
animationDuration: `${ timeout }ms`
|
||||
};
|
||||
}
|
||||
return {
|
||||
hidden: { opacity: 0, y: -20 },
|
||||
visible: { opacity: 1, y: 0 },
|
||||
exit: { opacity: 0, y: -20 }
|
||||
};
|
||||
case TransitionAnimationTypes.HEAD_SHAKE:
|
||||
switch(transition)
|
||||
{
|
||||
default:
|
||||
return {};
|
||||
case ENTERING:
|
||||
return {
|
||||
animationName: 'headShake',
|
||||
animationDuration: `${ timeout }ms`
|
||||
};
|
||||
}
|
||||
return {
|
||||
hidden: { x: 0 },
|
||||
visible: {
|
||||
x: [ 0, -6, 5, -3, 2, 0 ],
|
||||
transition: { duration: 0.5 }
|
||||
},
|
||||
exit: { x: 0 }
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
return {
|
||||
hidden: {},
|
||||
visible: {},
|
||||
exit: {}
|
||||
};
|
||||
}
|
||||
|
||||
@@ -4,6 +4,8 @@ import { FC, useEffect, useState } from 'react';
|
||||
import { useNitroEvent } from '../hooks';
|
||||
import { AchievementsView } from './achievements/AchievementsView';
|
||||
import { AvatarEditorView } from './avatar-editor';
|
||||
import { BadgeCreatorView } from './badge-creator';
|
||||
import { AvatarEffectsView } from './avatar-effects';
|
||||
import { CameraWidgetView } from './camera/CameraWidgetView';
|
||||
import { CampaignView } from './campaign/CampaignView';
|
||||
import { CatalogView } from './catalog/CatalogView';
|
||||
@@ -121,6 +123,8 @@ export const MainView: FC<{}> = props =>
|
||||
<CustomizeNickIconView />
|
||||
<WiredView />
|
||||
<AvatarEditorView />
|
||||
<BadgeCreatorView />
|
||||
<AvatarEffectsView />
|
||||
<AchievementsView />
|
||||
<NavigatorView />
|
||||
<NitrobubbleHiddenView />
|
||||
|
||||
@@ -89,13 +89,13 @@ export const AvatarEditorModelView: FC<{
|
||||
<div className="flex-1 min-w-0 overflow-hidden avatar-editor-palette-set-view">
|
||||
{ advancedColorMode
|
||||
? <AvatarEditorAdvancedColorView category={ activeCategory } paletteIndex={ 0 } />
|
||||
: <AvatarEditorPaletteSetView category={ activeCategory } columnCount={ 14 } paletteIndex={ 0 } /> }
|
||||
: <AvatarEditorPaletteSetView category={ activeCategory } columnCount={ maxPaletteCount === 2 ? 5 : 14 } paletteIndex={ 0 } /> }
|
||||
</div> }
|
||||
{ (maxPaletteCount === 2) &&
|
||||
<div className="flex-1 min-w-0 overflow-hidden avatar-editor-palette-set-view">
|
||||
{ advancedColorMode
|
||||
? <AvatarEditorAdvancedColorView category={ activeCategory } paletteIndex={ 1 } />
|
||||
: <AvatarEditorPaletteSetView category={ activeCategory } columnCount={ 14 } paletteIndex={ 1 } /> }
|
||||
: <AvatarEditorPaletteSetView category={ activeCategory } columnCount={ 5 } paletteIndex={ 1 } /> }
|
||||
</div> }
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -78,7 +78,8 @@ export const AvatarEditorView: FC<{}> = props =>
|
||||
|
||||
return (
|
||||
<NitroCardView
|
||||
className={ `nitro-avatar-editor ${ isWardrobeOpen ? 'w-[880px]' : 'w-[620px]' } h-[460px]` }
|
||||
className={ `nitro-avatar-editor ${ isWardrobeOpen ? 'w-[880px]' : 'w-[600px]' } h-[460px]` }
|
||||
isResizable={ false }
|
||||
uniqueKey="avatar-editor">
|
||||
<NitroCardHeaderView headerText={ LocalizeText('avatareditor.title') } onCloseClick={ event => setIsVisible(false) } />
|
||||
<NitroCardTabsView classNames={ ['avatar-editor-tabs'] }>
|
||||
|
||||
@@ -77,7 +77,7 @@ export const AvatarEditorFigureSetItemView: FC<{
|
||||
itemActive={ isSelected }
|
||||
itemImage={ (!partItem.isClear && isHead) ? assetUrl : undefined }
|
||||
className={ `avatar-parts mx-auto${ isSelected ? ' part-selected' : '' }${ !partItem.isClear && isSellableNotOwned ? ' pet-sellable-locked' : '' }` }
|
||||
style={ isHead ? { backgroundSize: '200%', backgroundPosition: 'center -32px' } : undefined }
|
||||
style={ isHead ? { backgroundSize: 'auto 80%', backgroundPosition: 'center', imageRendering: 'pixelated' } : undefined }
|
||||
{ ...rest }
|
||||
>
|
||||
{ !partItem.isClear && assetUrl && !isHead &&
|
||||
|
||||
@@ -30,12 +30,12 @@ export const AvatarEditorFigureSetView: FC<{
|
||||
};
|
||||
|
||||
return (
|
||||
<InfiniteGrid<IAvatarEditorCategoryPartItem> columnCount={ columnCount } estimateSize={ estimateSize } itemRender={ (item: IAvatarEditorCategoryPartItem) =>
|
||||
<InfiniteGrid<IAvatarEditorCategoryPartItem> columnCount={ columnCount } itemMinWidth={ 42 } rowGap={ 8 } estimateSize={ estimateSize } itemRender={ (item: IAvatarEditorCategoryPartItem) =>
|
||||
{
|
||||
if(!item) return null;
|
||||
|
||||
return (
|
||||
<AvatarEditorFigureSetItemView isSelected={ isPartItemSelected(item) } partItem={ item } setType={ category.setType } width={ `calc(100% / ${ columnCount })` } onClick={ event => selectEditorPart(category.setType, item.partSet?.id ?? -1) } />
|
||||
<AvatarEditorFigureSetItemView isSelected={ isPartItemSelected(item) } partItem={ item } setType={ category.setType } onClick={ event => selectEditorPart(category.setType, item.partSet?.id ?? -1) } />
|
||||
);
|
||||
} } items={ category.partItems } overscan={ columnCount } />
|
||||
);
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
import { GetRoomEngine, RoomPreviewer } from '@nitrots/nitro-renderer';
|
||||
import { CSSProperties, FC, useEffect, useState } from 'react';
|
||||
import { LayoutRoomPreviewerView } from '../../common';
|
||||
|
||||
interface AvatarEffectPreviewViewProps
|
||||
{
|
||||
figure: string;
|
||||
gender: string;
|
||||
direction: number;
|
||||
effect: number;
|
||||
height?: number;
|
||||
zoom?: number;
|
||||
}
|
||||
|
||||
export const AvatarEffectPreviewView: FC<AvatarEffectPreviewViewProps> = props =>
|
||||
{
|
||||
const { figure = '', gender = 'M', direction = 4, effect = 0, height = 280, zoom = 1 } = props;
|
||||
const [ roomPreviewer, setRoomPreviewer ] = useState<RoomPreviewer>(null);
|
||||
|
||||
const renderHeight = Math.floor(height / zoom);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
const previewer = new RoomPreviewer(GetRoomEngine(), ++RoomPreviewer.PREVIEW_COUNTER);
|
||||
setRoomPreviewer(previewer);
|
||||
|
||||
return () =>
|
||||
{
|
||||
previewer.dispose();
|
||||
setRoomPreviewer(null);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!roomPreviewer || !figure) return;
|
||||
|
||||
roomPreviewer.addAvatarIntoRoom(figure, effect);
|
||||
roomPreviewer.updateObjectUserFigure(figure, gender);
|
||||
}, [ roomPreviewer, figure, gender, effect ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!roomPreviewer) return;
|
||||
roomPreviewer.updateAvatarDirection(direction, direction);
|
||||
}, [ roomPreviewer, direction ]);
|
||||
|
||||
if(!roomPreviewer) return null;
|
||||
|
||||
if(zoom === 1)
|
||||
{
|
||||
return <LayoutRoomPreviewerView roomPreviewer={ roomPreviewer } height={ height } />;
|
||||
}
|
||||
|
||||
const outerStyle: CSSProperties = {
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
overflow: 'hidden'
|
||||
};
|
||||
|
||||
const innerStyle: CSSProperties = {
|
||||
width: `${ 100 / zoom }%`,
|
||||
height: `${ 100 / zoom }%`,
|
||||
transform: `scale(${ zoom })`,
|
||||
transformOrigin: 'top left',
|
||||
imageRendering: 'pixelated'
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={ outerStyle }>
|
||||
<div style={ innerStyle }>
|
||||
<LayoutRoomPreviewerView roomPreviewer={ roomPreviewer } height={ renderHeight } />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,271 @@
|
||||
import { AddLinkEventTracker, AvatarDirectionAngle, AvatarEffectActivatedComposer, GetConfiguration, GetSessionDataManager, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
|
||||
import { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { FaChevronLeft, FaChevronRight, FaSearch } from 'react-icons/fa';
|
||||
import { LocalizeText, SendMessageComposer } from '../../api';
|
||||
import { Button, Column, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
|
||||
import { AvatarEffectPreviewView } from './AvatarEffectPreviewView';
|
||||
|
||||
interface EffectMapEntry
|
||||
{
|
||||
id: string;
|
||||
lib: string;
|
||||
type: string;
|
||||
revision?: string | number;
|
||||
}
|
||||
|
||||
const DEFAULT_DIRECTION = 4;
|
||||
const PAGE_SIZE = 50;
|
||||
|
||||
export const AvatarEffectsView: FC<{}> = () =>
|
||||
{
|
||||
const [ isVisible, setIsVisible ] = useState(false);
|
||||
const [ effects, setEffects ] = useState<EffectMapEntry[]>([]);
|
||||
const [ loadError, setLoadError ] = useState<string>(null);
|
||||
const [ selectedId, setSelectedId ] = useState<number>(0);
|
||||
const [ direction, setDirection ] = useState<number>(DEFAULT_DIRECTION);
|
||||
const [ query, setQuery ] = useState<string>('');
|
||||
const [ visibleCount, setVisibleCount ] = useState<number>(PAGE_SIZE);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
const linkTracker: ILinkEventTracker = {
|
||||
linkReceived: (url: string) =>
|
||||
{
|
||||
const parts = url.split('/');
|
||||
if(parts.length < 2) return;
|
||||
|
||||
switch(parts[1])
|
||||
{
|
||||
case 'show': setIsVisible(true); return;
|
||||
case 'hide': setIsVisible(false); return;
|
||||
case 'toggle': setIsVisible(prev => !prev); return;
|
||||
}
|
||||
},
|
||||
eventUrlPrefix: 'avatar-effects/'
|
||||
};
|
||||
|
||||
AddLinkEventTracker(linkTracker);
|
||||
|
||||
return () => RemoveLinkEventTracker(linkTracker);
|
||||
}, []);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!isVisible || effects.length || loadError) return;
|
||||
|
||||
const url = GetConfiguration().getValue<string>('avatar.effectmap.url');
|
||||
if(!url)
|
||||
{
|
||||
setLoadError('Effect map URL is not configured.');
|
||||
return;
|
||||
}
|
||||
|
||||
let cancelled = false;
|
||||
(async () =>
|
||||
{
|
||||
try
|
||||
{
|
||||
const response = await fetch(url);
|
||||
if(!response.ok) throw new Error(`HTTP ${ response.status }`);
|
||||
const json = await response.json();
|
||||
if(cancelled) return;
|
||||
|
||||
const list: EffectMapEntry[] = Array.isArray(json?.effects)
|
||||
? json.effects.filter((e: EffectMapEntry) => e?.type === 'fx' && /^\d+$/.test(String(e.id)))
|
||||
: [];
|
||||
|
||||
list.sort((a, b) => parseInt(a.id, 10) - parseInt(b.id, 10));
|
||||
setEffects(list);
|
||||
}
|
||||
catch(error)
|
||||
{
|
||||
if(!cancelled) setLoadError(String((error as Error).message ?? error));
|
||||
}
|
||||
})();
|
||||
|
||||
return () => { cancelled = true; };
|
||||
}, [ isVisible, effects.length, loadError ]);
|
||||
|
||||
const session = GetSessionDataManager();
|
||||
const figure = session?.figure ?? '';
|
||||
const gender = session?.gender ?? 'M';
|
||||
|
||||
const rotateFigure = useCallback((delta: number) =>
|
||||
{
|
||||
setDirection(prev =>
|
||||
{
|
||||
let next = prev + delta;
|
||||
if(next < AvatarDirectionAngle.MIN_DIRECTION) next = AvatarDirectionAngle.MAX_DIRECTION;
|
||||
if(next > AvatarDirectionAngle.MAX_DIRECTION) next = AvatarDirectionAngle.MIN_DIRECTION;
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const applySelectedEffect = useCallback(() =>
|
||||
{
|
||||
if(!selectedId) return;
|
||||
SendMessageComposer(new AvatarEffectActivatedComposer(selectedId));
|
||||
setIsVisible(false);
|
||||
}, [ selectedId ]);
|
||||
|
||||
const onClose = useCallback(() => setIsVisible(false), []);
|
||||
|
||||
const filteredEffects = useMemo(() =>
|
||||
{
|
||||
const trimmed = query.trim().toLowerCase();
|
||||
if(!trimmed) return effects;
|
||||
return effects.filter(e =>
|
||||
e.id.toLowerCase().includes(trimmed) ||
|
||||
e.lib.toLowerCase().includes(trimmed));
|
||||
}, [ effects, query ]);
|
||||
|
||||
const onQueryChange = useCallback((event: ChangeEvent<HTMLInputElement>) =>
|
||||
{
|
||||
setQuery(event.target.value);
|
||||
setVisibleCount(PAGE_SIZE);
|
||||
}, []);
|
||||
|
||||
const visibleEffects = filteredEffects.slice(0, visibleCount);
|
||||
const hasMore = filteredEffects.length > visibleEffects.length;
|
||||
const selectedEffect = selectedId ? effects.find(e => parseInt(e.id, 10) === selectedId) : null;
|
||||
|
||||
const selectedRowRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
const jumpToSelected = useCallback(() =>
|
||||
{
|
||||
if(!selectedId) return;
|
||||
|
||||
const indexInFiltered = filteredEffects.findIndex(e => parseInt(e.id, 10) === selectedId);
|
||||
const indexInAll = effects.findIndex(e => parseInt(e.id, 10) === selectedId);
|
||||
|
||||
if(indexInFiltered === -1)
|
||||
{
|
||||
setQuery('');
|
||||
if(indexInAll >= 0 && indexInAll >= visibleCount)
|
||||
{
|
||||
setVisibleCount(Math.ceil((indexInAll + 1) / PAGE_SIZE) * PAGE_SIZE);
|
||||
}
|
||||
}
|
||||
else if(indexInFiltered >= visibleCount)
|
||||
{
|
||||
setVisibleCount(Math.ceil((indexInFiltered + 1) / PAGE_SIZE) * PAGE_SIZE);
|
||||
}
|
||||
|
||||
requestAnimationFrame(() =>
|
||||
{
|
||||
selectedRowRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
});
|
||||
}, [ selectedId, filteredEffects, effects, visibleCount ]);
|
||||
|
||||
if(!isVisible) return null;
|
||||
|
||||
return (
|
||||
<NitroCardView className="nitro-avatar-effects w-[640px] h-[480px]" isResizable={ false } uniqueKey="avatar-effects" theme="primary-slim">
|
||||
<NitroCardHeaderView headerText={ LocalizeText('product.type.effect') || 'Avatar effect' } onCloseClick={ onClose } />
|
||||
<NitroCardContentView className="flex flex-row gap-3 text-black">
|
||||
<Column overflow="hidden" className="w-[220px] items-center justify-between">
|
||||
<div className="figure-preview-container overflow-hidden relative w-full h-[280px] bg-gradient-to-b from-[#1a1a1a] to-black rounded-md shadow-inner">
|
||||
<AvatarEffectPreviewView figure={ figure } gender={ gender } direction={ direction } effect={ selectedId } height={ 280 } zoom={ 2 } />
|
||||
<div className="arrow-container absolute inset-y-0 left-0 right-0 flex items-center justify-between px-1 z-10 pointer-events-none">
|
||||
<button
|
||||
type="button"
|
||||
className="pointer-events-auto flex items-center justify-center w-7 h-7 rounded-full bg-black/45 hover:bg-black/70 border border-white/15 text-white shadow-md backdrop-blur-sm transition-all hover:scale-110 active:scale-95"
|
||||
onClick={ () => rotateFigure(1) }
|
||||
aria-label="Rotate left"
|
||||
>
|
||||
<FaChevronLeft className="w-3 h-3" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="pointer-events-auto flex items-center justify-center w-7 h-7 rounded-full bg-black/45 hover:bg-black/70 border border-white/15 text-white shadow-md backdrop-blur-sm transition-all hover:scale-110 active:scale-95"
|
||||
onClick={ () => rotateFigure(-1) }
|
||||
aria-label="Rotate right"
|
||||
>
|
||||
<FaChevronRight className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
{ selectedEffect &&
|
||||
<div className="absolute top-2 left-2 right-2 bg-black/55 backdrop-blur-sm rounded px-2 py-1 text-white text-xs leading-tight">
|
||||
<div className="font-mono opacity-70 text-[10px]">#{ parseInt(selectedEffect.id, 10) }</div>
|
||||
<div className="font-semibold truncate">{ selectedEffect.lib }</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<Button variant="success" disabled={ !selectedId } onClick={ applySelectedEffect } className="w-full mt-2">
|
||||
{ LocalizeText('inventory.effects.activate') || 'Use' }
|
||||
</Button>
|
||||
</Column>
|
||||
<Column overflow="hidden" className="flex-1 min-h-0">
|
||||
<div className="relative">
|
||||
<FaSearch className="absolute left-2.5 top-1/2 -translate-y-1/2 text-[#888] text-sm pointer-events-none" />
|
||||
<input
|
||||
type="text"
|
||||
value={ query }
|
||||
onChange={ onQueryChange }
|
||||
placeholder={ LocalizeText('generic.search') || 'Search by name or #number' }
|
||||
className="w-full pl-8 pr-3 py-1.5 text-sm border border-[#2a2a2a]/20 rounded-md bg-white outline-none transition-colors focus:border-[#3a78c4] focus:shadow-[0_0_0_2px_rgba(58,120,196,0.15)]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between px-1 py-1 text-[11px] uppercase tracking-wide text-[#666] border-b border-[#2a2a2a]/10">
|
||||
<span>{ filteredEffects.length === effects.length ? `${ effects.length } effects` : `${ filteredEffects.length } of ${ effects.length }` }</span>
|
||||
{ selectedId > 0 &&
|
||||
<button
|
||||
type="button"
|
||||
onClick={ jumpToSelected }
|
||||
className="text-[#3a78c4] hover:text-[#2a5d9e] hover:underline normal-case font-semibold cursor-pointer"
|
||||
title="Jump to selected effect"
|
||||
>
|
||||
#{ selectedId } selected
|
||||
</button> }
|
||||
</div>
|
||||
<div className="flex-1 min-h-0 overflow-auto">
|
||||
{ loadError && <div className="text-red-600 text-sm px-2 py-3">{ loadError }</div> }
|
||||
{ !loadError && !effects.length && <div className="text-sm px-2 py-3 opacity-70">{ LocalizeText('generic.loading') || 'Loading…' }</div> }
|
||||
{ !!effects.length && !filteredEffects.length &&
|
||||
<div className="text-sm px-2 py-3 opacity-70 italic">{ LocalizeText('generic.search.noresults') || 'No effects match your search.' }</div>
|
||||
}
|
||||
{ !!visibleEffects.length &&
|
||||
<ul className="flex flex-col">
|
||||
{ visibleEffects.map((effect, index) =>
|
||||
{
|
||||
const id = parseInt(effect.id, 10);
|
||||
const isSelected = (id === selectedId);
|
||||
return (
|
||||
<li key={ effect.id }>
|
||||
<button
|
||||
ref={ isSelected ? selectedRowRef : undefined }
|
||||
type="button"
|
||||
onClick={ () => setSelectedId(id) }
|
||||
className={ `flex w-full items-center gap-3 px-3 py-1.5 text-sm border-l-[3px] transition-colors ${
|
||||
isSelected
|
||||
? 'border-[#3a78c4] bg-[#cfe1f5] text-[#1d3a5e]'
|
||||
: `border-transparent hover:bg-[#eef3f9] ${ index % 2 === 0 ? 'bg-white' : 'bg-[#fafafa]' }`
|
||||
}` }
|
||||
title={ effect.lib }
|
||||
>
|
||||
<span className={ `font-mono text-xs w-12 text-right shrink-0 ${ isSelected ? 'opacity-80' : 'opacity-50' }` }>#{ id }</span>
|
||||
<span className="truncate font-semibold">{ effect.lib }</span>
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
}) }
|
||||
{ hasMore &&
|
||||
<li className="px-3 py-2 border-t border-[#2a2a2a]/10 mt-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={ () => setVisibleCount(prev => prev + PAGE_SIZE) }
|
||||
className="w-full text-sm font-semibold text-[#3a78c4] hover:text-[#2a5d9e] hover:bg-[#eef3f9] cursor-pointer py-1.5 rounded-md transition-colors"
|
||||
>
|
||||
{ LocalizeText('navigator.show.more') || 'See More' }
|
||||
<span className="opacity-60 ml-1 font-normal">({ filteredEffects.length - visibleEffects.length } more)</span>
|
||||
</button>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
</div>
|
||||
</Column>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from './AvatarEffectPreviewView';
|
||||
export * from './AvatarEffectsView';
|
||||
@@ -1,15 +1,10 @@
|
||||
import { GetSessionDataManager, HabboClubLevelEnum} from '@nitrots/nitro-renderer';
|
||||
import { Dispatch, FC, SetStateAction, useCallback, useMemo, useState } from 'react';
|
||||
import { Base, Grid, Flex, NitroCardView, NitroCardHeaderView, NitroCardTabsView, NitroCardTabsItemView, NitroCardContentView, Text, LayoutCurrencyIcon } from '../../common';
|
||||
import { Base, Grid, Flex, NitroCardView, NitroCardHeaderView, NitroCardTabsView, NitroCardTabsItemView, NitroCardContentView, Text } from '../../common';
|
||||
import { useRoom } from '../../hooks';
|
||||
import { GetClubMemberLevel, GetConfigurationValue } from '../../api';
|
||||
import { GetConfigurationValue } from '../../api';
|
||||
|
||||
interface ItemData {
|
||||
interface ItemData {
|
||||
id: number;
|
||||
isHcOnly: boolean;
|
||||
minRank: number;
|
||||
isAmbassadorOnly: boolean;
|
||||
selectable: boolean;
|
||||
}
|
||||
|
||||
interface BackgroundsViewProps {
|
||||
@@ -20,9 +15,11 @@ interface BackgroundsViewProps {
|
||||
setSelectedStand: Dispatch<SetStateAction<number>>;
|
||||
selectedOverlay: number;
|
||||
setSelectedOverlay: Dispatch<SetStateAction<number>>;
|
||||
selectedCardBackground: number;
|
||||
setSelectedCardBackground: Dispatch<SetStateAction<number>>;
|
||||
}
|
||||
|
||||
const TABS = ['backgrounds', 'stands', 'overlays'] as const;
|
||||
const TABS = ['backgrounds', 'stands', 'overlays', 'cards'] as const;
|
||||
type TabType = typeof TABS[number];
|
||||
|
||||
export const BackgroundsView: FC<BackgroundsViewProps> = ({
|
||||
@@ -32,57 +29,49 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
|
||||
selectedStand,
|
||||
setSelectedStand,
|
||||
selectedOverlay,
|
||||
setSelectedOverlay
|
||||
setSelectedOverlay,
|
||||
selectedCardBackground,
|
||||
setSelectedCardBackground
|
||||
}) => {
|
||||
const [activeTab, setActiveTab] = useState<TabType>('backgrounds');
|
||||
const { roomSession } = useRoom();
|
||||
|
||||
const userData = useMemo(() => ({
|
||||
isHcMember: GetClubMemberLevel() >= HabboClubLevelEnum.CLUB,
|
||||
securityLevel: GetSessionDataManager().canChangeName,
|
||||
isAmbassador: GetSessionDataManager().isAmbassador
|
||||
}), []);
|
||||
|
||||
const processData = useCallback((configData: any[], dataType: string): ItemData[] => {
|
||||
const processData = useCallback((configData: any[], idField: string): ItemData[] => {
|
||||
if (!configData?.length) return [];
|
||||
|
||||
return configData
|
||||
.filter(item => {
|
||||
const meetsRank = userData.securityLevel >= item.minRank;
|
||||
const ambassadorEligible = !item.isAmbassadorOnly || userData.isAmbassador;
|
||||
return item.isHcOnly || (meetsRank && ambassadorEligible);
|
||||
})
|
||||
.map(item => ({ id: item[`${dataType}Id`], ...item, selectable: !item.isHcOnly || userData.isHcMember }));
|
||||
}, [userData]);
|
||||
|
||||
return configData.map(item => ({ id: item[idField] }));
|
||||
}, []);
|
||||
|
||||
const allData = useMemo(() => ({
|
||||
backgrounds: processData(GetConfigurationValue('backgrounds.data'), 'background'),
|
||||
stands: processData(GetConfigurationValue('stands.data'), 'stand'),
|
||||
overlays: processData(GetConfigurationValue('overlays.data'), 'overlay')
|
||||
backgrounds: processData(GetConfigurationValue('backgrounds.data'), 'backgroundId'),
|
||||
stands: processData(GetConfigurationValue('stands.data'), 'standId'),
|
||||
overlays: processData(GetConfigurationValue('overlays.data'), 'overlayId'),
|
||||
cards: processData(GetConfigurationValue('cards.data') || GetConfigurationValue('backgrounds.data'), 'backgroundId')
|
||||
}), [processData]);
|
||||
|
||||
const handleSelection = useCallback((id: number) => {
|
||||
if (!roomSession) return;
|
||||
|
||||
const setters = { backgrounds: setSelectedBackground, stands: setSelectedStand, overlays: setSelectedOverlay };
|
||||
|
||||
const currentValues = { backgrounds: selectedBackground, stands: selectedStand, overlays: selectedOverlay };
|
||||
const setters = { backgrounds: setSelectedBackground, stands: setSelectedStand, overlays: setSelectedOverlay, cards: setSelectedCardBackground };
|
||||
|
||||
const currentValues = { backgrounds: selectedBackground, stands: selectedStand, overlays: selectedOverlay, cards: selectedCardBackground };
|
||||
|
||||
setters[activeTab](id);
|
||||
const newValues = { ...currentValues, [activeTab]: id };
|
||||
roomSession.sendBackgroundMessage( newValues.backgrounds, newValues.stands, newValues.overlays );
|
||||
}, [activeTab, roomSession, selectedBackground, selectedStand, selectedOverlay, setSelectedBackground, setSelectedStand, setSelectedOverlay]);
|
||||
roomSession.sendBackgroundMessage( newValues.backgrounds, newValues.stands, newValues.overlays, newValues.cards );
|
||||
}, [activeTab, roomSession, selectedBackground, selectedStand, selectedOverlay, selectedCardBackground, setSelectedBackground, setSelectedStand, setSelectedOverlay, setSelectedCardBackground]);
|
||||
|
||||
const renderItem = useCallback((item: ItemData, type: string) => (
|
||||
<Flex
|
||||
pointer
|
||||
position="relative"
|
||||
key={item.id}
|
||||
onClick={() => item.selectable && handleSelection(item.id)}
|
||||
className={item.selectable ? '' : 'non-selectable'}
|
||||
onClick={() => handleSelection(item.id)}
|
||||
>
|
||||
<Base className={`profile-${type} ${type}-${item.id}`} />
|
||||
{item.isHcOnly && <LayoutCurrencyIcon position="absolute" className="top-1 inset-e-1" type="hc" />}
|
||||
<Base
|
||||
className={`profile-${type} ${type}-${item.id}`}
|
||||
style={type === 'card-background' ? { width: 60, height: 80, borderRadius: 4 } : undefined}
|
||||
/>
|
||||
</Flex>
|
||||
), [handleSelection]);
|
||||
|
||||
@@ -103,7 +92,7 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
|
||||
<NitroCardContentView gap={1}>
|
||||
<Text bold center>Select an Option</Text>
|
||||
<Grid gap={1} columnCount={7} overflow="auto">
|
||||
{allData[activeTab].map(item => renderItem(item, activeTab.slice(0, -1)))}
|
||||
{allData[activeTab].map(item => renderItem(item, activeTab === 'cards' ? 'card-background' : activeTab.slice(0, -1)))}
|
||||
</Grid>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
|
||||
@@ -0,0 +1,629 @@
|
||||
import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
|
||||
import { FC, MouseEvent as ReactMouseEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { LocalizeText } from '../../api';
|
||||
import { createCustomBadge, CustomBadgeRecord, deleteCustomBadge, ensureCustomBadgeTexts, fetchCustomBadges, refreshCustomBadgeTexts, setCustomBadgeText, updateCustomBadge } from '../../api/badges';
|
||||
import { Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
|
||||
import { useNotification } from '../../hooks';
|
||||
|
||||
const t = (key: string, fallback: string, params?: string[], replacements?: string[]): string =>
|
||||
{
|
||||
try
|
||||
{
|
||||
const value = LocalizeText(key, params ?? null, replacements ?? null);
|
||||
if(value && value !== key) return value;
|
||||
}
|
||||
catch {}
|
||||
|
||||
if(!params || !replacements) return fallback;
|
||||
let out = fallback;
|
||||
for(let i = 0; i < params.length; i++)
|
||||
{
|
||||
if(replacements[i] !== undefined) out = out.replace('%' + params[i] + '%', replacements[i]);
|
||||
}
|
||||
return out;
|
||||
};
|
||||
|
||||
const GRID_WIDTH = 40;
|
||||
const GRID_HEIGHT = 40;
|
||||
const PIXEL_DISPLAY_SIZE = 12;
|
||||
const TRANSPARENT = 0;
|
||||
|
||||
const PALETTE: number[] = [
|
||||
0xFF000000, 0xFF4F4F4F, 0xFF808080, 0xFFB0B0B0, 0xFFD8D8D8, 0xFFFFFFFF, TRANSPARENT, 0xFF7B0000,
|
||||
0xFFBF0000, 0xFFFF0000, 0xFFFF7777, 0xFFFF7700, 0xFFFFAA00, 0xFFFFD700, 0xFFFFEB3B, 0xFF003E1F,
|
||||
0xFF006837, 0xFF00A653, 0xFF2BC93C, 0xFF00C8A0, 0xFF00BCFF, 0xFF2962FF, 0xFF1A237E, 0xFF4A0072,
|
||||
0xFF9C00B5, 0xFFE91E63, 0xFFFF80AB, 0xFF5D2E1A, 0xFF8B5A2B, 0xFFC28E5E, 0xFFF1D7B6, 0xFFE8C3A0
|
||||
];
|
||||
|
||||
const currencyName = (type: number): string =>
|
||||
{
|
||||
if(type === -1) return 'credits';
|
||||
if(type === 0) return 'duckets';
|
||||
if(type === 5) return 'diamonds';
|
||||
return `currency #${ type }`;
|
||||
};
|
||||
|
||||
type Tool = 'paint' | 'erase' | 'picker' | 'fill';
|
||||
|
||||
const floodFill = (grid: Uint32Array, w: number, h: number, startX: number, startY: number, replacement: number): Uint32Array =>
|
||||
{
|
||||
if(startX < 0 || startY < 0 || startX >= w || startY >= h) return grid;
|
||||
const startIdx = startY * w + startX;
|
||||
const target = grid[startIdx];
|
||||
if(target === replacement) return grid;
|
||||
|
||||
const next = new Uint32Array(grid.length);
|
||||
next.set(grid);
|
||||
|
||||
const stack: number[] = [ startIdx ];
|
||||
while(stack.length)
|
||||
{
|
||||
const idx = stack.pop() as number;
|
||||
if(next[idx] !== target) continue;
|
||||
next[idx] = replacement;
|
||||
const x = idx % w;
|
||||
const y = (idx - x) / w;
|
||||
if(x > 0) stack.push(idx - 1);
|
||||
if(x < w - 1) stack.push(idx + 1);
|
||||
if(y > 0) stack.push(idx - w);
|
||||
if(y < h - 1) stack.push(idx + w);
|
||||
}
|
||||
return next;
|
||||
};
|
||||
|
||||
const argbToCss = (argb: number): string =>
|
||||
{
|
||||
if(argb === TRANSPARENT) return 'transparent';
|
||||
const a = ((argb >>> 24) & 0xff) / 255;
|
||||
const r = (argb >>> 16) & 0xff;
|
||||
const g = (argb >>> 8) & 0xff;
|
||||
const b = argb & 0xff;
|
||||
return `rgba(${ r }, ${ g }, ${ b }, ${ a })`;
|
||||
};
|
||||
|
||||
const argbToHex = (argb: number): string =>
|
||||
{
|
||||
if(argb === TRANSPARENT) return '#000000';
|
||||
const r = (argb >>> 16) & 0xff;
|
||||
const g = (argb >>> 8) & 0xff;
|
||||
const b = argb & 0xff;
|
||||
return '#' + [ r, g, b ].map(c => c.toString(16).padStart(2, '0')).join('');
|
||||
};
|
||||
|
||||
const hexToArgb = (hex: string): number =>
|
||||
{
|
||||
const match = /^#?([0-9a-f]{6})$/i.exec(hex || '');
|
||||
if(!match) return 0xFF000000;
|
||||
return (0xFF000000 | parseInt(match[1], 16)) >>> 0;
|
||||
};
|
||||
|
||||
const emptyGrid = (): Uint32Array => new Uint32Array(GRID_WIDTH * GRID_HEIGHT);
|
||||
|
||||
const cloneGrid = (src: Uint32Array): Uint32Array =>
|
||||
{
|
||||
const copy = new Uint32Array(src.length);
|
||||
copy.set(src);
|
||||
return copy;
|
||||
};
|
||||
|
||||
const gridToPngBase64 = async (grid: Uint32Array): Promise<{ b64: string; bytes: number }> =>
|
||||
{
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = GRID_WIDTH;
|
||||
canvas.height = GRID_HEIGHT;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if(!ctx) throw new Error('Canvas not supported.');
|
||||
|
||||
const image = ctx.createImageData(GRID_WIDTH, GRID_HEIGHT);
|
||||
for(let i = 0; i < grid.length; i++)
|
||||
{
|
||||
const argb = grid[i];
|
||||
const o = i * 4;
|
||||
image.data[o] = (argb >>> 16) & 0xff;
|
||||
image.data[o + 1] = (argb >>> 8) & 0xff;
|
||||
image.data[o + 2] = argb & 0xff;
|
||||
image.data[o + 3] = (argb >>> 24) & 0xff;
|
||||
}
|
||||
ctx.putImageData(image, 0, 0);
|
||||
|
||||
const blob: Blob = await new Promise((resolve, reject) => canvas.toBlob(b => b ? resolve(b) : reject(new Error('PNG encode failed.')), 'image/png'));
|
||||
const arrayBuffer = await blob.arrayBuffer();
|
||||
const bytes = arrayBuffer.byteLength;
|
||||
let binary = '';
|
||||
const u8 = new Uint8Array(arrayBuffer);
|
||||
for(let i = 0; i < u8.length; i++) binary += String.fromCharCode(u8[i]);
|
||||
return { b64: window.btoa(binary), bytes };
|
||||
};
|
||||
|
||||
const loadGridFromUrl = (url: string): Promise<Uint32Array> =>
|
||||
new Promise((resolve, reject) =>
|
||||
{
|
||||
const image = new Image();
|
||||
image.crossOrigin = 'anonymous';
|
||||
image.onload = () =>
|
||||
{
|
||||
try
|
||||
{
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = GRID_WIDTH;
|
||||
canvas.height = GRID_HEIGHT;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if(!ctx) return reject(new Error('Canvas not supported.'));
|
||||
ctx.clearRect(0, 0, GRID_WIDTH, GRID_HEIGHT);
|
||||
ctx.drawImage(image, 0, 0, GRID_WIDTH, GRID_HEIGHT);
|
||||
const data = ctx.getImageData(0, 0, GRID_WIDTH, GRID_HEIGHT).data;
|
||||
const grid = emptyGrid();
|
||||
for(let i = 0; i < grid.length; i++)
|
||||
{
|
||||
const o = i * 4;
|
||||
const a = data[o + 3];
|
||||
if(a === 0) { grid[i] = 0; continue; }
|
||||
grid[i] = ((a & 0xff) << 24) | ((data[o] & 0xff) << 16) | ((data[o + 1] & 0xff) << 8) | (data[o + 2] & 0xff);
|
||||
}
|
||||
resolve(grid);
|
||||
}
|
||||
catch(err) { reject(err); }
|
||||
};
|
||||
image.onerror = () => reject(new Error('Could not load badge image (CORS?).'));
|
||||
image.src = url + (url.includes('?') ? '&' : '?') + 't=' + Date.now();
|
||||
});
|
||||
|
||||
export const BadgeCreatorView: FC<{}> = () =>
|
||||
{
|
||||
const [ isVisible, setIsVisible ] = useState(false);
|
||||
const [ grid, setGrid ] = useState<Uint32Array>(() => emptyGrid());
|
||||
const [ selectedColor, setSelectedColor ] = useState<number>(PALETTE[0]);
|
||||
const [ tool, setTool ] = useState<Tool>('paint');
|
||||
const [ showGrid, setShowGrid ] = useState(true);
|
||||
const [ name, setName ] = useState('');
|
||||
const [ description, setDescription ] = useState('');
|
||||
const [ editingBadgeId, setEditingBadgeId ] = useState<string | null>(null);
|
||||
const [ badges, setBadges ] = useState<CustomBadgeRecord[] | null>(null);
|
||||
const [ pendingEditBadgeId, setPendingEditBadgeId ] = useState<string | null>(null);
|
||||
const [ maxBadges, setMaxBadges ] = useState(5);
|
||||
const [ maxBytes, setMaxBytes ] = useState(40960);
|
||||
const [ priceBadge, setPriceBadge ] = useState(0);
|
||||
const [ currencyType, setCurrencyType ] = useState(-1);
|
||||
const [ submitting, setSubmitting ] = useState(false);
|
||||
const [ error, setError ] = useState<string | null>(null);
|
||||
|
||||
const { showConfirm } = useNotification();
|
||||
|
||||
const refresh = useCallback(async () =>
|
||||
{
|
||||
try
|
||||
{
|
||||
const data = await fetchCustomBadges();
|
||||
setBadges(data.badges ?? []);
|
||||
if(typeof data.max === 'number') setMaxBadges(data.max);
|
||||
if(typeof data.maxBadgeSizeBytes === 'number') setMaxBytes(data.maxBadgeSizeBytes);
|
||||
if(typeof data.priceBadge === 'number') setPriceBadge(data.priceBadge);
|
||||
if(typeof data.currencyType === 'number') setCurrencyType(data.currencyType);
|
||||
}
|
||||
catch(err)
|
||||
{
|
||||
setBadges([]);
|
||||
setError((err as Error)?.message || 'Could not load badges.');
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
const tracker: ILinkEventTracker = {
|
||||
linkReceived: (url: string) =>
|
||||
{
|
||||
const parts = url.split('/');
|
||||
if(parts.length < 2) return;
|
||||
switch(parts[1])
|
||||
{
|
||||
case 'show': setIsVisible(true); return;
|
||||
case 'hide': setIsVisible(false); return;
|
||||
case 'toggle': setIsVisible(v => !v); return;
|
||||
case 'edit':
|
||||
if(!parts[2]) return;
|
||||
setPendingEditBadgeId(parts[2]);
|
||||
setIsVisible(true);
|
||||
return;
|
||||
}
|
||||
},
|
||||
eventUrlPrefix: 'badge-creator/'
|
||||
};
|
||||
AddLinkEventTracker(tracker);
|
||||
return () => RemoveLinkEventTracker(tracker);
|
||||
}, []);
|
||||
|
||||
useEffect(() => { if(isVisible) { refresh(); ensureCustomBadgeTexts(); } }, [ isVisible, refresh ]);
|
||||
|
||||
const resetEditor = useCallback(() =>
|
||||
{
|
||||
setGrid(emptyGrid());
|
||||
setName('');
|
||||
setDescription('');
|
||||
setEditingBadgeId(null);
|
||||
setError(null);
|
||||
}, []);
|
||||
|
||||
const startEdit = useCallback(async (badge: CustomBadgeRecord) =>
|
||||
{
|
||||
setError(null);
|
||||
setEditingBadgeId(badge.badgeId);
|
||||
setName(badge.name || '');
|
||||
setDescription(badge.description || '');
|
||||
try
|
||||
{
|
||||
const loaded = await loadGridFromUrl(badge.url);
|
||||
setGrid(loaded);
|
||||
}
|
||||
catch(err)
|
||||
{
|
||||
setError((err as Error)?.message || 'Could not load that badge.');
|
||||
setGrid(emptyGrid());
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!pendingEditBadgeId || !badges) return;
|
||||
const target = badges.find(b => b.badgeId === pendingEditBadgeId);
|
||||
if(!target) return;
|
||||
setPendingEditBadgeId(null);
|
||||
startEdit(target);
|
||||
}, [ pendingEditBadgeId, badges, startEdit ]);
|
||||
|
||||
const paintAt = useCallback((x: number, y: number, isClick: boolean) =>
|
||||
{
|
||||
if(x < 0 || y < 0 || x >= GRID_WIDTH || y >= GRID_HEIGHT) return;
|
||||
const idx = y * GRID_WIDTH + x;
|
||||
|
||||
if(tool === 'picker')
|
||||
{
|
||||
const cell = grid[idx];
|
||||
if(cell !== TRANSPARENT) setSelectedColor(cell);
|
||||
setTool('paint');
|
||||
return;
|
||||
}
|
||||
|
||||
if(tool === 'fill')
|
||||
{
|
||||
if(!isClick) return;
|
||||
setGrid(floodFill(grid, GRID_WIDTH, GRID_HEIGHT, x, y, selectedColor));
|
||||
return;
|
||||
}
|
||||
|
||||
const value = (tool === 'erase') ? TRANSPARENT : selectedColor;
|
||||
if(grid[idx] === value) return;
|
||||
const next = cloneGrid(grid);
|
||||
next[idx] = value;
|
||||
setGrid(next);
|
||||
}, [ grid, selectedColor, tool ]);
|
||||
|
||||
const isDraggingRef = useRef(false);
|
||||
const colorInputRef = useRef<HTMLInputElement>(null);
|
||||
const mainCanvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const previewCanvasRef = useRef<HTMLCanvasElement>(null);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
const targets = [ mainCanvasRef.current, previewCanvasRef.current ];
|
||||
for(const canvas of targets)
|
||||
{
|
||||
if(!canvas) continue;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if(!ctx) continue;
|
||||
const image = ctx.createImageData(GRID_WIDTH, GRID_HEIGHT);
|
||||
const buffer = image.data;
|
||||
for(let i = 0; i < grid.length; i++)
|
||||
{
|
||||
const v = grid[i];
|
||||
const o = i * 4;
|
||||
buffer[o] = (v >>> 16) & 0xff;
|
||||
buffer[o + 1] = (v >>> 8) & 0xff;
|
||||
buffer[o + 2] = v & 0xff;
|
||||
buffer[o + 3] = (v >>> 24) & 0xff;
|
||||
}
|
||||
ctx.putImageData(image, 0, 0);
|
||||
}
|
||||
}, [ grid, isVisible ]);
|
||||
|
||||
const openColorPicker = useCallback(() =>
|
||||
{
|
||||
const input = colorInputRef.current;
|
||||
if(!input) return;
|
||||
input.value = argbToHex(selectedColor);
|
||||
input.click();
|
||||
}, [ selectedColor ]);
|
||||
|
||||
const handleColorPicked = useCallback((event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
{
|
||||
setSelectedColor(hexToArgb(event.target.value));
|
||||
setTool('paint');
|
||||
}, []);
|
||||
|
||||
const cellFromEvent = useCallback((event: ReactMouseEvent<HTMLDivElement>): { x: number; y: number } =>
|
||||
{
|
||||
const rect = event.currentTarget.getBoundingClientRect();
|
||||
const x = Math.floor(((event.clientX - rect.left) / rect.width) * GRID_WIDTH);
|
||||
const y = Math.floor(((event.clientY - rect.top) / rect.height) * GRID_HEIGHT);
|
||||
return { x, y };
|
||||
}, []);
|
||||
|
||||
const handleMouseDown = useCallback((event: ReactMouseEvent<HTMLDivElement>) =>
|
||||
{
|
||||
if(event.button !== 0) return;
|
||||
event.preventDefault();
|
||||
isDraggingRef.current = true;
|
||||
const { x, y } = cellFromEvent(event);
|
||||
paintAt(x, y, true);
|
||||
}, [ cellFromEvent, paintAt ]);
|
||||
|
||||
const handleMouseMove = useCallback((event: ReactMouseEvent<HTMLDivElement>) =>
|
||||
{
|
||||
if(!isDraggingRef.current) return;
|
||||
const { x, y } = cellFromEvent(event);
|
||||
paintAt(x, y, false);
|
||||
}, [ cellFromEvent, paintAt ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
const stopDrag = () => { isDraggingRef.current = false; };
|
||||
window.addEventListener('mouseup', stopDrag);
|
||||
return () => window.removeEventListener('mouseup', stopDrag);
|
||||
}, []);
|
||||
|
||||
const clearCanvas = useCallback(() => setGrid(emptyGrid()), []);
|
||||
|
||||
const copyColor = useCallback(() => setTool('picker'), []);
|
||||
|
||||
const isEmpty = useMemo(() =>
|
||||
{
|
||||
for(let i = 0; i < grid.length; i++) if(grid[i] !== 0) return false;
|
||||
return true;
|
||||
}, [ grid ]);
|
||||
|
||||
const canCreateMore = (badges?.length ?? 0) < maxBadges;
|
||||
|
||||
const handleSave = useCallback(async () =>
|
||||
{
|
||||
if(submitting) return;
|
||||
if(isEmpty) { setError(t('badgecreator.error.empty', 'Draw something first.')); return; }
|
||||
if(!editingBadgeId && !canCreateMore)
|
||||
{
|
||||
setError(t('badgecreator.error.limit', 'You already have %max% custom badges.', [ 'max' ], [ String(maxBadges) ]));
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
setError(null);
|
||||
try
|
||||
{
|
||||
const { b64, bytes } = await gridToPngBase64(grid);
|
||||
if(bytes > maxBytes)
|
||||
{
|
||||
setError(t('badgecreator.error.too_large', `Image is too large (${ bytes } / %max% bytes).`, [ 'max' ], [ String(maxBytes) ]));
|
||||
return;
|
||||
}
|
||||
const body = { name: name.trim(), description: description.trim(), image: b64 };
|
||||
const saved = editingBadgeId
|
||||
? await updateCustomBadge(editingBadgeId, body)
|
||||
: await createCustomBadge(body);
|
||||
if(saved && saved.badgeId) setCustomBadgeText(saved.badgeId, saved.name, saved.description);
|
||||
await refresh();
|
||||
refreshCustomBadgeTexts();
|
||||
resetEditor();
|
||||
}
|
||||
catch(err)
|
||||
{
|
||||
setError((err as Error)?.message || 'Could not save the badge.');
|
||||
}
|
||||
finally
|
||||
{
|
||||
setSubmitting(false);
|
||||
}
|
||||
}, [ submitting, isEmpty, editingBadgeId, canCreateMore, maxBadges, grid, maxBytes, name, description, refresh, resetEditor ]);
|
||||
|
||||
const handleDelete = useCallback((badge: CustomBadgeRecord) =>
|
||||
{
|
||||
showConfirm(
|
||||
t('badgecreator.delete.confirm', 'Delete "%name%"?', [ 'name' ], [ badge.name || badge.badgeId ]),
|
||||
async () =>
|
||||
{
|
||||
try
|
||||
{
|
||||
await deleteCustomBadge(badge.badgeId);
|
||||
if(editingBadgeId === badge.badgeId) resetEditor();
|
||||
await refresh();
|
||||
refreshCustomBadgeTexts();
|
||||
}
|
||||
catch(err)
|
||||
{
|
||||
setError((err as Error)?.message || 'Could not delete the badge.');
|
||||
}
|
||||
},
|
||||
null, null, null,
|
||||
t('badgecreator.delete.title', 'Delete badge')
|
||||
);
|
||||
}, [ showConfirm, editingBadgeId, refresh, resetEditor ]);
|
||||
|
||||
if(!isVisible) return null;
|
||||
|
||||
return (
|
||||
<NitroCardView className="nitro-badge-creator w-[760px] h-[680px]" isResizable={ false } theme="primary-slim" uniqueKey="badge-creator">
|
||||
<NitroCardHeaderView headerText={ t('badgecreator.title', 'Badge Creator') } onCloseClick={ () => setIsVisible(false) } />
|
||||
<NitroCardContentView className="text-black">
|
||||
<Flex gap={ 2 } className="badge-creator-main">
|
||||
<Column gap={ 2 }>
|
||||
<div
|
||||
className="badge-creator-canvas"
|
||||
style={ {
|
||||
width: GRID_WIDTH * PIXEL_DISPLAY_SIZE,
|
||||
height: GRID_HEIGHT * PIXEL_DISPLAY_SIZE,
|
||||
backgroundColor: '#ffffff',
|
||||
backgroundImage: showGrid
|
||||
? 'linear-gradient(to right, rgba(0,0,0,0.18) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.18) 1px, transparent 1px)'
|
||||
: 'none',
|
||||
backgroundSize: `${ PIXEL_DISPLAY_SIZE }px ${ PIXEL_DISPLAY_SIZE }px`,
|
||||
backgroundPosition: '0 0',
|
||||
border: '1px solid #888',
|
||||
boxSizing: 'content-box',
|
||||
imageRendering: 'pixelated',
|
||||
cursor: tool === 'picker' ? 'crosshair' : (tool === 'erase' ? 'cell' : 'crosshair'),
|
||||
position: 'relative',
|
||||
userSelect: 'none'
|
||||
} }
|
||||
onMouseDown={ handleMouseDown }
|
||||
onMouseMove={ handleMouseMove }>
|
||||
<canvas
|
||||
ref={ mainCanvasRef }
|
||||
width={ GRID_WIDTH }
|
||||
height={ GRID_HEIGHT }
|
||||
style={ {
|
||||
display: 'block',
|
||||
width: GRID_WIDTH * PIXEL_DISPLAY_SIZE,
|
||||
height: GRID_HEIGHT * PIXEL_DISPLAY_SIZE,
|
||||
imageRendering: 'pixelated',
|
||||
pointerEvents: 'none'
|
||||
} }
|
||||
/>
|
||||
</div>
|
||||
<Flex gap={ 1 } className="badge-creator-tools">
|
||||
<Button onClick={ () => setTool('paint') } variant={ tool === 'paint' ? 'success' : 'primary' }>{ t('badgecreator.tool.paint', 'Paint') }</Button>
|
||||
<Button onClick={ () => setTool('fill') } variant={ tool === 'fill' ? 'success' : 'primary' }>{ t('badgecreator.tool.fill', 'Fill') }</Button>
|
||||
<Button onClick={ () => setTool('erase') } variant={ tool === 'erase' ? 'success' : 'primary' }>{ t('badgecreator.tool.erase', 'Erase') }</Button>
|
||||
<Button onClick={ copyColor } variant={ tool === 'picker' ? 'success' : 'primary' }>{ t('badgecreator.tool.picker', 'Pick') }</Button>
|
||||
<Button onClick={ clearCanvas } variant="danger">{ t('badgecreator.tool.clear', 'Clear') }</Button>
|
||||
<Button onClick={ () => setShowGrid(g => !g) } variant="primary">{ showGrid ? (t('badgecreator.tool.gridoff', 'Grid off')) : (t('badgecreator.tool.gridon', 'Grid on')) }</Button>
|
||||
</Flex>
|
||||
</Column>
|
||||
<Column gap={ 2 } className="badge-creator-side" style={ { minWidth: 220 } }>
|
||||
<div>
|
||||
<Text bold variant="black">{ t('badgecreator.palette', 'Palette') }</Text>
|
||||
<div className="badge-creator-palette" style={ { display: 'grid', gridTemplateColumns: 'repeat(8, 22px)', gap: 4, marginTop: 4 } }>
|
||||
{ PALETTE.map((color, idx) =>
|
||||
{
|
||||
const isTransparent = color === TRANSPARENT;
|
||||
const isSelected = color === selectedColor;
|
||||
return (
|
||||
<button
|
||||
key={ idx }
|
||||
type="button"
|
||||
onClick={ () => { setSelectedColor(color); setTool('paint'); } }
|
||||
title={ isTransparent ? 'Transparent' : argbToCss(color) }
|
||||
style={ {
|
||||
width: 22,
|
||||
height: 22,
|
||||
border: isSelected ? '2px solid #000' : '1px solid #888',
|
||||
background: isTransparent
|
||||
? 'repeating-conic-gradient(#ddd 0% 25%, #fff 0% 50%) 50% / 8px 8px'
|
||||
: argbToCss(color),
|
||||
cursor: 'pointer',
|
||||
padding: 0
|
||||
} }
|
||||
/>
|
||||
);
|
||||
}) }
|
||||
</div>
|
||||
<div style={ { display: 'flex', alignItems: 'center', gap: 6, marginTop: 6 } }>
|
||||
<button
|
||||
type="button"
|
||||
onClick={ openColorPicker }
|
||||
title={ t('badgecreator.color.custom', 'Pick a custom colour') }
|
||||
style={ {
|
||||
width: 28,
|
||||
height: 26,
|
||||
padding: 2,
|
||||
border: '1px solid #888',
|
||||
background: '#f3f3f3',
|
||||
cursor: 'pointer',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
} }>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M4.5 14.5 12 7l5 5-7.5 7.5a2 2 0 0 1-2.83 0l-2.17-2.17a2 2 0 0 1 0-2.83Z" fill="#d3d3d3" stroke="#222" strokeWidth="1.4" strokeLinejoin="round" />
|
||||
<path d="m12 7-2-2 2-2 2 2" stroke="#222" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M18 14c0 1.5 1.4 2.5 1.4 4a1.4 1.4 0 1 1-2.8 0c0-1.5 1.4-2.5 1.4-4Z" fill="#ffb74d" stroke="#222" strokeWidth="1.2" />
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
onClick={ openColorPicker }
|
||||
title={ argbToHex(selectedColor) }
|
||||
style={ {
|
||||
width: 26,
|
||||
height: 26,
|
||||
border: '1px solid #888',
|
||||
background: selectedColor === TRANSPARENT
|
||||
? 'repeating-conic-gradient(#ddd 0% 25%, #fff 0% 50%) 50% / 8px 8px'
|
||||
: argbToCss(selectedColor),
|
||||
cursor: 'pointer'
|
||||
} }
|
||||
/>
|
||||
<Text small variant="muted">{ argbToHex(selectedColor).toUpperCase() }</Text>
|
||||
<input
|
||||
ref={ colorInputRef }
|
||||
type="color"
|
||||
onChange={ handleColorPicked }
|
||||
style={ { position: 'absolute', width: 0, height: 0, opacity: 0, pointerEvents: 'none' } }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Text bold variant="black">{ t('badgecreator.preview', 'Preview') }</Text>
|
||||
<div style={ { width: GRID_WIDTH, height: GRID_HEIGHT, marginTop: 4, border: '1px solid #888', imageRendering: 'pixelated', position: 'relative', overflow: 'hidden' } }>
|
||||
<canvas
|
||||
ref={ previewCanvasRef }
|
||||
width={ GRID_WIDTH }
|
||||
height={ GRID_HEIGHT }
|
||||
style={ { display: 'block', width: GRID_WIDTH, height: GRID_HEIGHT, imageRendering: 'pixelated' } }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Text variant="black">{ t('badgecreator.name', 'Name') }</Text>
|
||||
<input className="form-control form-control-sm" maxLength={ 64 } value={ name } onChange={ e => setName(e.target.value) } />
|
||||
</div>
|
||||
<div>
|
||||
<Text variant="black">{ t('badgecreator.description', 'Description') }</Text>
|
||||
<input className="form-control form-control-sm" maxLength={ 255 } value={ description } onChange={ e => setDescription(e.target.value) } />
|
||||
</div>
|
||||
{ error && <Text variant="danger">{ error }</Text> }
|
||||
{ !editingBadgeId && priceBadge > 0 &&
|
||||
<Text small variant="muted">
|
||||
{ t('badgecreator.price', 'Cost: %price% %currency%', [ 'price', 'currency' ], [ String(priceBadge), currencyName(currencyType) ]) }
|
||||
</Text> }
|
||||
<Flex gap={ 1 }>
|
||||
<Button onClick={ handleSave } disabled={ submitting } variant="success">
|
||||
{ submitting
|
||||
? (t('badgecreator.saving', 'Saving…'))
|
||||
: (editingBadgeId
|
||||
? (t('badgecreator.save.edit', 'Save changes'))
|
||||
: (priceBadge > 0
|
||||
? t('badgecreator.save.create.priced', 'Create badge (%price% %currency%)', [ 'price', 'currency' ], [ String(priceBadge), currencyName(currencyType) ])
|
||||
: t('badgecreator.save.create', 'Create badge'))) }
|
||||
</Button>
|
||||
{ editingBadgeId &&
|
||||
<Button onClick={ resetEditor } variant="primary">{ t('generic.cancel', 'Cancel') }</Button> }
|
||||
</Flex>
|
||||
</Column>
|
||||
</Flex>
|
||||
<Column gap={ 1 } className="badge-creator-list" style={ { marginTop: 8 } }>
|
||||
<Text bold variant="black">
|
||||
{ t('badgecreator.list.title', 'Your custom badges (%count%/%max%)', [ 'count', 'max' ], [ String(badges?.length ?? 0), String(maxBadges) ]) }
|
||||
</Text>
|
||||
{ badges === null && <Text variant="black">{ t('badgecreator.list.loading', 'Loading…') }</Text> }
|
||||
{ badges !== null && !badges.length && <Text variant="black">{ t('badgecreator.list.empty', 'You haven\'t made any badges yet.') }</Text> }
|
||||
{ badges !== null && badges.map(badge => (
|
||||
<Flex key={ badge.badgeId } alignItems="center" gap={ 2 } style={ { padding: 4, borderTop: '1px solid #ccc' } }>
|
||||
<img src={ badge.url } alt={ badge.name || badge.badgeId } width={ GRID_WIDTH } height={ GRID_HEIGHT } style={ { imageRendering: 'pixelated', border: '1px solid #888' } } />
|
||||
<Column gap={ 0 } style={ { flex: 1, minWidth: 0 } }>
|
||||
<Text bold variant="black" truncate>{ badge.name || badge.badgeId }</Text>
|
||||
{ badge.description && <Text small variant="muted" truncate>{ badge.description }</Text> }
|
||||
</Column>
|
||||
<Button onClick={ () => startEdit(badge) } variant="primary">{ t('generic.edit', 'Edit') }</Button>
|
||||
<Button onClick={ () => handleDelete(badge) } variant="danger">{ t('generic.delete', 'Delete') }</Button>
|
||||
</Flex>
|
||||
)) }
|
||||
</Column>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export * from './BadgeCreatorView';
|
||||
@@ -33,7 +33,7 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props => {
|
||||
onClick={() => setVisible(prev => !prev)}
|
||||
>
|
||||
<div className="absolute left-[6px] top-1/2 h-[24px] w-[24px] -translate-y-1/2 bg-[url('@/assets/images/toolbar/friend-search.png')] bg-contain bg-center bg-no-repeat pointer-events-none" />
|
||||
<div className="truncate text-[0.8rem] font-bold">{LocalizeText('friend.bar.find.title')}</div>
|
||||
<div className="truncate text-[0.83rem]">{LocalizeText('friend.bar.find.title')}</div>
|
||||
</motion.button>
|
||||
|
||||
<AnimatePresence>
|
||||
@@ -45,10 +45,10 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props => {
|
||||
transition={{ type: "spring", stiffness: 400, damping: 25 }}
|
||||
className="absolute bottom-[calc(100%+12px)] left-1/2 -translate-x-1/2 tbme-panel whitespace-nowrap z-[80] flex flex-col items-center gap-2 pointer-events-auto min-w-[170px]"
|
||||
>
|
||||
<div className="text-white text-[13px] font-bold drop-shadow-[1px_1px_0_#000]">{LocalizeText('friend.bar.find.title')}</div>
|
||||
<div className="text-white text-[13px] drop-shadow-[1px_1px_0_#000]">{LocalizeText('friend.bar.find.title')}</div>
|
||||
<div className="text-white/80 text-xs px-2">{LocalizeText('friend.bar.find.text')}</div>
|
||||
<button
|
||||
className="px-3 py-1 bg-black/40 hover:bg-black/60 border border-white/10 rounded-lg text-white text-[11px] font-bold transition-colors cursor-pointer mt-1"
|
||||
className="px-3 py-1 bg-black/40 hover:bg-black/60 border border-white/10 rounded-lg text-white text-[11px] transition-colors cursor-pointer mt-1"
|
||||
onClick={event => { event.stopPropagation(); SendMessageComposer(new FindNewFriendsMessageComposer()); setVisible(false); }}
|
||||
>
|
||||
{LocalizeText('friend.bar.find.button')}
|
||||
@@ -62,8 +62,8 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props => {
|
||||
|
||||
return (
|
||||
<div ref={elementRef} className="relative">
|
||||
<div className="absolute left-[-4px] bottom-[-2px] z-10 h-[66px] w-[34px] overflow-hidden pointer-events-none">
|
||||
{(friend.id > 0) ? (
|
||||
{(friend.id > 0) ? (
|
||||
<div className="absolute left-[-4px] bottom-[-2px] z-10 h-[66px] w-[34px] overflow-hidden pointer-events-none">
|
||||
<LayoutAvatarImageView
|
||||
direction={2}
|
||||
figure={friend.figure}
|
||||
@@ -71,17 +71,19 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props => {
|
||||
className="block pointer-events-none drop-shadow-[1px_1px_0_rgba(0,0,0,0.6)]"
|
||||
style={ { marginLeft: '-28px', marginTop: '-10px' } }
|
||||
/>
|
||||
) : (
|
||||
<LayoutBadgeImageView badgeCode="ADM" isGroup={false} className="scale-75 block pointer-events-none drop-shadow-[1px_1px_0_rgba(0,0,0,0.6)]" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="absolute left-[6px] top-1/2 -translate-y-1/2 z-10 flex h-[28px] w-[28px] items-center justify-center pointer-events-none">
|
||||
<LayoutBadgeImageView badgeCode="ADM" isGroup={false} className="block pointer-events-none drop-shadow-[1px_1px_0_rgba(0,0,0,0.6)]" />
|
||||
</div>
|
||||
)}
|
||||
<motion.button
|
||||
type="button"
|
||||
whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}
|
||||
className="relative flex h-[34px] w-[132px] items-center rounded-[7px] border border-[#9fc56f] bg-[#6f8f39] pl-[44px] pr-[10px] text-left text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_2px_0_rgba(0,0,0,0.25)] overflow-visible"
|
||||
onClick={() => setVisible(prev => !prev)}
|
||||
>
|
||||
<div className="truncate text-[0.82rem] font-bold">{friend.name}</div>
|
||||
<div className="truncate text-[0.83rem]">{friend.name}</div>
|
||||
</motion.button>
|
||||
|
||||
<AnimatePresence>
|
||||
|
||||
@@ -37,7 +37,7 @@ export const FriendBarView: FC<{ onlineFriends: MessengerFriend[]; requestsCount
|
||||
>
|
||||
{ (requestsCount > 0) &&
|
||||
<motion.div variants={ itemVariants }>
|
||||
<div className="flex h-[34px] items-center rounded-[7px] border border-[#9fc56f] bg-[#5f7d2f] px-[10px] text-[0.74rem] font-bold whitespace-nowrap text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_2px_0_rgba(0,0,0,0.25)]">
|
||||
<div className="flex h-[34px] items-center rounded-[7px] border border-[#9fc56f] bg-[#5f7d2f] px-[10px] text-[0.83rem] whitespace-nowrap text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_2px_0_rgba(0,0,0,0.25)]">
|
||||
{ requestsCount } { LocalizeText('friendbar.requests.title') }
|
||||
</div>
|
||||
</motion.div> }
|
||||
@@ -82,7 +82,7 @@ export const FriendBarView: FC<{ onlineFriends: MessengerFriend[]; requestsCount
|
||||
animate="visible"
|
||||
exit="exit"
|
||||
>
|
||||
<div className="flex h-[34px] items-center rounded-[7px] border border-[#9fc56f] bg-[#5f7d2f] px-[10px] text-[0.74rem] font-medium whitespace-nowrap text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_2px_0_rgba(0,0,0,0.25)]">
|
||||
<div className="flex h-[34px] items-center rounded-[7px] border border-[#9fc56f] bg-[#5f7d2f] px-[10px] text-[0.83rem] font-medium whitespace-nowrap text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_2px_0_rgba(0,0,0,0.25)]">
|
||||
Nessun amico online
|
||||
</div>
|
||||
</motion.div> }
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { DeleteBadgeMessageComposer } from '@nitrots/nitro-renderer';
|
||||
import { CreateLinkEvent, DeleteBadgeMessageComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { FaTrashAlt } from 'react-icons/fa';
|
||||
import { GetConfigurationValue, LocalizeBadgeName, LocalizeText, SendMessageComposer, UnseenItemCategory } from '../../../../api';
|
||||
import { FaPaintBrush, FaPencilAlt, FaTrashAlt } from 'react-icons/fa';
|
||||
import { deleteCustomBadge, ensureCustomBadgeTexts, fetchCustomBadges, GetConfigurationValue, isCustomBadgeCode, LocalizeBadgeName, LocalizeText, refreshCustomBadgeTexts, SendMessageComposer, UnseenItemCategory } from '../../../../api';
|
||||
import { LayoutBadgeImageView } from '../../../../common';
|
||||
import { useInventoryBadges, useInventoryUnseenTracker, useNotification } from '../../../../hooks';
|
||||
import { InfiniteGrid, NitroButton } from '../../../../layout';
|
||||
@@ -90,7 +90,60 @@ export const InventoryBadgeView: FC<{ filteredBadgeCodes?: string[] }> = props =
|
||||
const [ isDraggingFromActive, setIsDraggingFromActive ] = useState(false);
|
||||
|
||||
const maxSlots = useMemo(() => GetConfigurationValue<number>('user.badges.max.slots', 5), []);
|
||||
const displayCodes = (filteredBadgeCodes !== null ? filteredBadgeCodes : badgeCodes);
|
||||
|
||||
const [ ownCustomBadgeIds, setOwnCustomBadgeIds ] = useState<Set<string>>(() => new Set());
|
||||
const [ filter, setFilter ] = useState<'all' | 'custom'>('all');
|
||||
|
||||
const refreshOwnCustomBadges = useCallback(async () =>
|
||||
{
|
||||
try
|
||||
{
|
||||
const data = await fetchCustomBadges();
|
||||
setOwnCustomBadgeIds(new Set((data.badges ?? []).map(b => b.badgeId)));
|
||||
}
|
||||
catch
|
||||
{
|
||||
setOwnCustomBadgeIds(new Set());
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => { refreshOwnCustomBadges(); }, [ refreshOwnCustomBadges ]);
|
||||
useEffect(() => { ensureCustomBadgeTexts(); }, []);
|
||||
|
||||
const baseCodes = (filteredBadgeCodes !== null ? filteredBadgeCodes : badgeCodes);
|
||||
const customCount = useMemo(() => baseCodes.filter(c => isCustomBadgeCode(c)).length, [ baseCodes ]);
|
||||
const displayCodes = useMemo(() =>
|
||||
filter === 'custom' ? baseCodes.filter(c => isCustomBadgeCode(c)) : baseCodes,
|
||||
[ baseCodes, filter ]);
|
||||
|
||||
const isOwnCustomBadge = (code: string | null) => !!code && isCustomBadgeCode(code) && ownCustomBadgeIds.has(code);
|
||||
|
||||
const handleEditCustom = useCallback(() =>
|
||||
{
|
||||
if(!selectedBadgeCode) return;
|
||||
CreateLinkEvent(`badge-creator/edit/${ selectedBadgeCode }`);
|
||||
}, [ selectedBadgeCode ]);
|
||||
|
||||
const handleDeleteCustom = useCallback(() =>
|
||||
{
|
||||
if(!selectedBadgeCode) return;
|
||||
const target = selectedBadgeCode;
|
||||
showConfirm(
|
||||
LocalizeText('inventory.delete.confirm_delete.info', [ 'furniname', 'amount' ], [ LocalizeBadgeName(target), '1' ]),
|
||||
async () =>
|
||||
{
|
||||
try
|
||||
{
|
||||
await deleteCustomBadge(target);
|
||||
await refreshOwnCustomBadges();
|
||||
refreshCustomBadgeTexts();
|
||||
}
|
||||
catch { /* error already surfaced server-side */ }
|
||||
},
|
||||
null, null, null,
|
||||
LocalizeText('inventory.delete.confirm_delete.title')
|
||||
);
|
||||
}, [ selectedBadgeCode, showConfirm, refreshOwnCustomBadges ]);
|
||||
|
||||
const attemptDeleteBadge = () =>
|
||||
{
|
||||
@@ -205,6 +258,28 @@ export const InventoryBadgeView: FC<{ filteredBadgeCodes?: string[] }> = props =
|
||||
<span className="text-red-400/60 text-xs font-medium">{ LocalizeText('inventory.badges.clearbadge') }</span>
|
||||
</div>
|
||||
) }
|
||||
<div className="flex items-center gap-1 text-xs">
|
||||
<button
|
||||
type="button"
|
||||
className={ `px-2 py-0.5 rounded ${ filter === 'all' ? 'bg-card-grid-item-active text-white' : 'bg-card-grid-item' }` }
|
||||
onClick={ () => setFilter('all') }>
|
||||
{ LocalizeText('inventory.badges.tab.all') !== 'inventory.badges.tab.all' ? LocalizeText('inventory.badges.tab.all') : 'All' } ({ baseCodes.length })
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={ `px-2 py-0.5 rounded ${ filter === 'custom' ? 'bg-card-grid-item-active text-white' : 'bg-card-grid-item' }` }
|
||||
onClick={ () => setFilter('custom') }>
|
||||
{ LocalizeText('inventory.badges.tab.custom') !== 'inventory.badges.tab.custom' ? LocalizeText('inventory.badges.tab.custom') : 'Custom' } ({ customCount })
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="ml-auto px-2 py-0.5 rounded bg-card-grid-item flex items-center gap-1"
|
||||
onClick={ () => CreateLinkEvent('badge-creator/show') }
|
||||
title={ LocalizeText('inventory.badges.create') !== 'inventory.badges.create' ? LocalizeText('inventory.badges.create') : 'Open badge creator' }>
|
||||
<FaPaintBrush className="fa-icon text-[10px]" />
|
||||
<span>{ LocalizeText('inventory.badges.create') !== 'inventory.badges.create' ? LocalizeText('inventory.badges.create') : 'Create' }</span>
|
||||
</button>
|
||||
</div>
|
||||
<InfiniteGrid<string>
|
||||
columnCount={ 5 }
|
||||
estimateSize={ 50 }
|
||||
@@ -242,8 +317,12 @@ export const InventoryBadgeView: FC<{ filteredBadgeCodes?: string[] }> = props =
|
||||
onClick={ event => toggleBadge(selectedBadgeCode) }>
|
||||
{ LocalizeText(isWearingBadge(selectedBadgeCode) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge') }
|
||||
</NitroButton>
|
||||
{ isOwnCustomBadge(selectedBadgeCode) &&
|
||||
<NitroButton className="p-1" title={ LocalizeText('inventory.badges.edit') !== 'inventory.badges.edit' ? LocalizeText('inventory.badges.edit') : 'Edit' } onClick={ handleEditCustom }>
|
||||
<FaPencilAlt className="fa-icon" />
|
||||
</NitroButton> }
|
||||
{ !isWearingBadge(selectedBadgeCode) &&
|
||||
<NitroButton className="bg-danger! hover:bg-danger/80! p-1" onClick={ attemptDeleteBadge }>
|
||||
<NitroButton className="bg-danger! hover:bg-danger/80! p-1" onClick={ isOwnCustomBadge(selectedBadgeCode) ? handleDeleteCustom : attemptDeleteBadge }>
|
||||
<FaTrashAlt className="fa-icon" />
|
||||
</NitroButton> }
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
import { FC, FormEvent, useCallback, useState } from 'react';
|
||||
import { TurnstileWidget } from '../TurnstileWidget';
|
||||
import { t } from '../utils/i18n';
|
||||
import { DialogSharedProps } from './shared';
|
||||
|
||||
export interface ForgotDialogProps extends DialogSharedProps
|
||||
{
|
||||
onSubmit: (body: { email: string; turnstileToken: string; }, onDialogReset: () => void) => void;
|
||||
}
|
||||
|
||||
export const ForgotDialog: FC<ForgotDialogProps> = props =>
|
||||
{
|
||||
const { onCancel, onSubmit, submitting, error, info, turnstileEnabled, turnstileSiteKey } = props;
|
||||
const [ email, setEmail ] = useState('');
|
||||
const [ localError, setLocalError ] = useState<string | null>(null);
|
||||
const [ turnstileToken, setTurnstileToken ] = useState('');
|
||||
const [ resetSignal, setResetSignal ] = useState(0);
|
||||
|
||||
const resetWidget = useCallback(() =>
|
||||
{
|
||||
setTurnstileToken('');
|
||||
setResetSignal(prev => prev + 1);
|
||||
}, []);
|
||||
|
||||
const handle = (event: FormEvent<HTMLFormElement>) =>
|
||||
{
|
||||
event.preventDefault();
|
||||
setLocalError(null);
|
||||
|
||||
if(!email.trim())
|
||||
{
|
||||
setLocalError(t('nitro.login.error.missing_email', 'Please enter your email address.'));
|
||||
return;
|
||||
}
|
||||
|
||||
onSubmit({ email: email.trim(), turnstileToken }, resetWidget);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="nitro-login-modal">
|
||||
<div className="dialog">
|
||||
<div className="nitro-login-card">
|
||||
<div className="card-title">
|
||||
<span>{ t('nitro.login.forgot.title', 'Reset password') }</span>
|
||||
<span className="nitro-card-close-button" role="button" aria-label={ t('generic.close', 'Close') } onClick={ onCancel } />
|
||||
</div>
|
||||
<form className="card-body" onSubmit={ handle } autoComplete="on">
|
||||
<div className="field">
|
||||
<label htmlFor="forgot-email">{ t('nitro.login.forgot.email.label', 'Email address') }</label>
|
||||
<input id="forgot-email" type="email" maxLength={ 120 } autoComplete="email"
|
||||
value={ email } onChange={ e => setEmail(e.target.value) } />
|
||||
</div>
|
||||
{ turnstileEnabled &&
|
||||
<TurnstileWidget
|
||||
siteKey={ turnstileSiteKey }
|
||||
size="compact"
|
||||
onToken={ setTurnstileToken }
|
||||
onExpire={ () => setTurnstileToken('') }
|
||||
onError={ () => setTurnstileToken('') }
|
||||
resetSignal={ resetSignal }
|
||||
/> }
|
||||
{ (localError || error) && <div className="error-line">{ localError || error }</div> }
|
||||
{ info && <div className="info-line">{ info }</div> }
|
||||
<div className="submit-row">
|
||||
<button type="submit" className="ok-button" disabled={ submitting }>{ t('nitro.login.forgot.send', 'Send email') }</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,122 @@
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { t } from '../utils/i18n';
|
||||
import { resolveNewsImage, resolveNewsLink } from '../utils/news';
|
||||
|
||||
interface NewsItem
|
||||
{
|
||||
id: number;
|
||||
title: string;
|
||||
body: string;
|
||||
image: string | null;
|
||||
linkText: string;
|
||||
linkUrl: string;
|
||||
}
|
||||
|
||||
interface NewsWindowProps { newsUrl: string; }
|
||||
|
||||
const NEWS_AUTO_ADVANCE_MS = 10000;
|
||||
|
||||
export const NewsWindow: FC<NewsWindowProps> = ({ newsUrl }) =>
|
||||
{
|
||||
const [ items, setItems ] = useState<NewsItem[] | null>(null);
|
||||
const [ failed, setFailed ] = useState(false);
|
||||
const [ index, setIndex ] = useState(0);
|
||||
const [ autoTick, setAutoTick ] = useState(0);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!newsUrl) { setFailed(true); return; }
|
||||
let cancelled = false;
|
||||
fetch(newsUrl, { credentials: 'omit' })
|
||||
.then(async r =>
|
||||
{
|
||||
if(!r.ok) throw new Error('status ' + r.status);
|
||||
return r.json();
|
||||
})
|
||||
.then((json: unknown) =>
|
||||
{
|
||||
if(cancelled) return;
|
||||
const list = Array.isArray((json as { news?: unknown })?.news)
|
||||
? (json as { news: NewsItem[] }).news
|
||||
: [];
|
||||
setItems(list);
|
||||
})
|
||||
.catch(() => { if(!cancelled) setFailed(true); });
|
||||
return () => { cancelled = true; };
|
||||
}, [ newsUrl ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!items || items.length < 2) return;
|
||||
const id = window.setTimeout(() =>
|
||||
{
|
||||
setIndex(i => (i + 1) % items.length);
|
||||
}, NEWS_AUTO_ADVANCE_MS);
|
||||
return () => window.clearTimeout(id);
|
||||
}, [ items, index, autoTick ]);
|
||||
|
||||
if(failed) return null;
|
||||
if(!items || !items.length) return null;
|
||||
|
||||
const current = items[Math.min(index, items.length - 1)];
|
||||
const hasMany = items.length > 1;
|
||||
const bumpAuto = () => setAutoTick(t => t + 1);
|
||||
const prev = () => { setIndex(i => (i - 1 + items.length) % items.length); bumpAuto(); };
|
||||
const next = () => { setIndex(i => (i + 1) % items.length); bumpAuto(); };
|
||||
|
||||
const safeLinkUrl = resolveNewsLink(current.linkUrl);
|
||||
const safeImageSrc = resolveNewsImage(current.image);
|
||||
const openLink = () =>
|
||||
{
|
||||
if(!safeLinkUrl) return;
|
||||
window.open(safeLinkUrl, '_blank', 'noopener,noreferrer');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="login-news-stack">
|
||||
<div className="news-card-wrapper" key={ current.id }>
|
||||
<span className="news-sparkle news-sparkle-1" aria-hidden="true">★</span>
|
||||
<span className="news-sparkle news-sparkle-2" aria-hidden="true">✦</span>
|
||||
<span className="news-sparkle news-sparkle-3" aria-hidden="true">✧</span>
|
||||
|
||||
<div className="news-new-badge" aria-hidden="true">
|
||||
<span>{ t('nitro.login.news.new', 'NEW!') }</span>
|
||||
</div>
|
||||
|
||||
<div className="nitro-login-card nitro-news-card">
|
||||
<div className="card-title news-ribbon">
|
||||
<span className="news-ribbon-text">{ t('nitro.login.news.title', 'Hotel News') }</span>
|
||||
</div>
|
||||
<div className="card-body news-body">
|
||||
{ safeImageSrc &&
|
||||
<div className="news-image">
|
||||
<img
|
||||
src={ safeImageSrc }
|
||||
alt={ current.title || 'news' }
|
||||
onError={ e => { (e.currentTarget as HTMLImageElement).style.display = 'none'; } }
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
<div className="news-headline">{ current.title }</div>
|
||||
{ current.body &&
|
||||
<div className="news-text">{ current.body }</div> }
|
||||
|
||||
<div className="news-footer">
|
||||
{ current.linkText && safeLinkUrl
|
||||
? <button type="button" className="ok-button news-link-button" onClick={ openLink }>{ current.linkText }</button>
|
||||
: <span /> }
|
||||
|
||||
{ hasMany &&
|
||||
<div className="news-pager">
|
||||
<button type="button" className="arrow-btn" aria-label="Previous news" onClick={ prev }>‹</button>
|
||||
<span className="news-counter">{ index + 1 }/{ items.length }</span>
|
||||
<button type="button" className="arrow-btn" aria-label="Next news" onClick={ next }>›</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,633 @@
|
||||
import { FC, FormEvent, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { GetConfiguration } from '@nitrots/nitro-renderer';
|
||||
import { GetConfigurationValue } from '../../../api';
|
||||
import { TurnstileWidget } from '../TurnstileWidget';
|
||||
import { t } from '../utils/i18n';
|
||||
import {
|
||||
buildFigureString,
|
||||
buildImagingUrl,
|
||||
buildPartPreviewUrl,
|
||||
EMAIL_REGEX,
|
||||
FALLBACK_DEFAULTS,
|
||||
FALLBACK_HEX,
|
||||
FigureData,
|
||||
FigureSelection,
|
||||
GenderKey,
|
||||
PART_ROWS
|
||||
} from '../utils/figure';
|
||||
import { DialogSharedProps } from './shared';
|
||||
|
||||
export interface RegisterDialogProps extends DialogSharedProps
|
||||
{
|
||||
onSubmit: (body: { username: string; email: string; password: string; figure: string; gender: string; turnstileToken: string; templateId: number | null; }, onDialogReset: () => void) => void;
|
||||
onCheckEmail: (email: string) => Promise<{ available: boolean; error?: string }>;
|
||||
onCheckUsername: (username: string) => Promise<{ available: boolean; error?: string }>;
|
||||
onCheckServer: () => Promise<boolean>;
|
||||
imagingUrl: string;
|
||||
roomTemplatesUrl: string;
|
||||
}
|
||||
|
||||
type RegisterStep = 'credentials' | 'avatar' | 'room';
|
||||
|
||||
interface RoomTemplate { templateId: number; title: string; description: string; thumbnail: string; }
|
||||
|
||||
export const RegisterDialog: FC<RegisterDialogProps> = props =>
|
||||
{
|
||||
const { onCancel, onSubmit, onCheckEmail, onCheckUsername, onCheckServer, imagingUrl, roomTemplatesUrl, submitting, error, info, turnstileEnabled, turnstileSiteKey } = props;
|
||||
|
||||
const [ step, setStep ] = useState<RegisterStep>('credentials');
|
||||
const [ email, setEmail ] = useState('');
|
||||
const [ password, setPassword ] = useState('');
|
||||
const [ confirm, setConfirm ] = useState('');
|
||||
const [ username, setUsername ] = useState('');
|
||||
const [ gender, setGender ] = useState<GenderKey>('F');
|
||||
const [ selection, setSelection ] = useState<FigureSelection>(() => ({ ...FALLBACK_DEFAULTS.F }));
|
||||
const [ localError, setLocalError ] = useState<string | null>(null);
|
||||
const [ checking, setChecking ] = useState(false);
|
||||
const [ turnstileToken, setTurnstileToken ] = useState('');
|
||||
const [ resetSignal, setResetSignal ] = useState(0);
|
||||
const [ serverReachable, setServerReachable ] = useState<boolean | null>(null);
|
||||
const [ pingingServer, setPingingServer ] = useState(false);
|
||||
|
||||
const pingServer = useCallback(async () =>
|
||||
{
|
||||
setPingingServer(true);
|
||||
try
|
||||
{
|
||||
const ok = await onCheckServer();
|
||||
setServerReachable(ok);
|
||||
return ok;
|
||||
}
|
||||
finally
|
||||
{
|
||||
setPingingServer(false);
|
||||
}
|
||||
}, [ onCheckServer ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
let cancelled = false;
|
||||
(async () =>
|
||||
{
|
||||
const ok = await onCheckServer();
|
||||
if(!cancelled) setServerReachable(ok);
|
||||
})();
|
||||
return () => { cancelled = true; };
|
||||
}, [ onCheckServer ]);
|
||||
|
||||
const resetWidget = useCallback(() =>
|
||||
{
|
||||
setTurnstileToken('');
|
||||
setResetSignal(prev => prev + 1);
|
||||
}, []);
|
||||
|
||||
useEffect(() => { setLocalError(null); }, [ step ]);
|
||||
|
||||
const [ roomTemplates, setRoomTemplates ] = useState<RoomTemplate[] | null>(null);
|
||||
const [ roomTemplatesError, setRoomTemplatesError ] = useState<string | null>(null);
|
||||
const [ selectedTemplateId, setSelectedTemplateId ] = useState<number | null>(null);
|
||||
|
||||
const [ figureData, setFigureData ] = useState<FigureData | null>(null);
|
||||
const figureDataUrlRaw = GetConfigurationValue<string>('avatar.figuredata.url', '');
|
||||
const figureDataUrl = useMemo(() =>
|
||||
{
|
||||
if(!figureDataUrlRaw) return '';
|
||||
try { return GetConfiguration().interpolate(figureDataUrlRaw); }
|
||||
catch { return figureDataUrlRaw; }
|
||||
}, [ figureDataUrlRaw ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(step !== 'avatar' || figureData || !figureDataUrl) return;
|
||||
let cancelled = false;
|
||||
fetch(figureDataUrl, { credentials: 'omit' })
|
||||
.then(r => r.ok ? r.json() : null)
|
||||
.then(json => { if(!cancelled && json) setFigureData(json as FigureData); })
|
||||
.catch(() => { });
|
||||
return () => { cancelled = true; };
|
||||
}, [ step, figureData, figureDataUrl ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(step !== 'room' || roomTemplates !== null || !roomTemplatesUrl) return;
|
||||
let cancelled = false;
|
||||
setRoomTemplatesError(null);
|
||||
fetch(roomTemplatesUrl, { credentials: 'include' })
|
||||
.then(async r => {
|
||||
if(!r.ok) throw new Error(`status ${ r.status }`);
|
||||
return r.json();
|
||||
})
|
||||
.then(json => {
|
||||
if(cancelled) return;
|
||||
const list = Array.isArray((json as { templates?: unknown })?.templates)
|
||||
? (json as { templates: RoomTemplate[] }).templates
|
||||
: [];
|
||||
setRoomTemplates(list);
|
||||
})
|
||||
.catch(() => {
|
||||
if(cancelled) return;
|
||||
setRoomTemplates([]);
|
||||
setRoomTemplatesError(t('nitro.login.register.room.error', 'Could not load room options. You can still skip this step.'));
|
||||
});
|
||||
return () => { cancelled = true; };
|
||||
}, [ step, roomTemplates, roomTemplatesUrl ]);
|
||||
|
||||
const partOptions = useMemo(() =>
|
||||
{
|
||||
const result: Record<string, Record<GenderKey, number[]>> = {};
|
||||
if(!figureData) return result;
|
||||
for(const st of figureData.setTypes)
|
||||
{
|
||||
if(!PART_ROWS.includes(st.type)) continue;
|
||||
const forGender = (g: GenderKey) => st.sets
|
||||
.filter(s => s.selectable && s.club === 0 && (s.gender === g || s.gender === 'U'))
|
||||
.map(s => s.id);
|
||||
result[st.type] = { M: forGender('M'), F: forGender('F') };
|
||||
}
|
||||
return result;
|
||||
}, [ figureData ]);
|
||||
|
||||
const paletteOptions = useMemo(() =>
|
||||
{
|
||||
const result: Record<string, { id: number; hex: string }[]> = {};
|
||||
if(!figureData) return result;
|
||||
for(const st of figureData.setTypes)
|
||||
{
|
||||
if(!PART_ROWS.includes(st.type)) continue;
|
||||
const palette = figureData.palettes.find(p => p.id === st.paletteId);
|
||||
if(!palette) { result[st.type] = []; continue; }
|
||||
result[st.type] = palette.colors
|
||||
.filter(c => c.selectable && c.club === 0)
|
||||
.map(c => ({ id: c.id, hex: '#' + c.hexCode.toUpperCase() }));
|
||||
}
|
||||
return result;
|
||||
}, [ figureData ]);
|
||||
|
||||
const hexFor = useCallback((setType: string, colorId: number): string =>
|
||||
{
|
||||
const list = paletteOptions[setType];
|
||||
if(list)
|
||||
{
|
||||
const found = list.find(c => c.id === colorId);
|
||||
if(found) return found.hex;
|
||||
}
|
||||
return FALLBACK_HEX[colorId] || '#c9c9c9';
|
||||
}, [ paletteOptions ]);
|
||||
|
||||
const [ hotLooks, setHotLooks ] = useState<{ gender: GenderKey; figure: string }[]>([]);
|
||||
const [ hotLookIndex, setHotLookIndex ] = useState(-1);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(step !== 'avatar' || hotLooks.length) return;
|
||||
let cancelled = false;
|
||||
fetch('hotlooks.json', { credentials: 'omit' })
|
||||
.then(r => r.ok ? r.json() : null)
|
||||
.then((json: unknown) =>
|
||||
{
|
||||
if(cancelled || !Array.isArray(json)) return;
|
||||
const parsed: { gender: GenderKey; figure: string }[] = [];
|
||||
for(const entry of json as Record<string, unknown>[])
|
||||
{
|
||||
const rawGender = typeof entry._gender === 'string' ? entry._gender.toUpperCase() : '';
|
||||
const figure = typeof entry._figure === 'string' ? entry._figure : '';
|
||||
if((rawGender !== 'M' && rawGender !== 'F') || !figure) continue;
|
||||
parsed.push({ gender: rawGender as GenderKey, figure });
|
||||
}
|
||||
if(parsed.length) setHotLooks(parsed);
|
||||
})
|
||||
.catch(() => { });
|
||||
return () => { cancelled = true; };
|
||||
}, [ step, hotLooks.length ]);
|
||||
|
||||
const applyLook = useCallback((figure: string, lookGender: GenderKey) =>
|
||||
{
|
||||
const next: FigureSelection = {};
|
||||
for(const setPart of figure.split('.'))
|
||||
{
|
||||
const bits = setPart.split('-');
|
||||
if(bits.length < 2) continue;
|
||||
const setType = bits[0];
|
||||
const partId = parseInt(bits[1], 10);
|
||||
if(!setType || Number.isNaN(partId)) continue;
|
||||
const colors: number[] = [];
|
||||
for(let i = 2; i < bits.length; i++)
|
||||
{
|
||||
const c = parseInt(bits[i], 10);
|
||||
if(!Number.isNaN(c)) colors.push(c);
|
||||
}
|
||||
next[setType] = { partId, colors };
|
||||
}
|
||||
|
||||
for(const setType of PART_ROWS)
|
||||
{
|
||||
if(!next[setType]) next[setType] = { ...FALLBACK_DEFAULTS[lookGender][setType] };
|
||||
}
|
||||
setGender(lookGender);
|
||||
setSelection(next);
|
||||
}, []);
|
||||
|
||||
const cycleHotLook = useCallback(() =>
|
||||
{
|
||||
if(!hotLooks.length) return;
|
||||
const nextIdx = (hotLookIndex + 1) % hotLooks.length;
|
||||
setHotLookIndex(nextIdx);
|
||||
const look = hotLooks[nextIdx];
|
||||
applyLook(look.figure, look.gender);
|
||||
}, [ hotLooks, hotLookIndex, applyLook ]);
|
||||
|
||||
const credentialsValid =
|
||||
EMAIL_REGEX.test(email.trim()) &&
|
||||
password.length >= 8 &&
|
||||
password === confirm;
|
||||
|
||||
const handleCredentialsNext = async (event: FormEvent<HTMLFormElement>) =>
|
||||
{
|
||||
event.preventDefault();
|
||||
setLocalError(null);
|
||||
|
||||
if(!email.trim() || !password || !confirm)
|
||||
{
|
||||
setLocalError(t('nitro.login.error.missing_fields', 'Please fill in every field.'));
|
||||
return;
|
||||
}
|
||||
if(!EMAIL_REGEX.test(email.trim()))
|
||||
{
|
||||
setLocalError(t('nitro.login.error.invalid_email', 'Please enter a valid email address.'));
|
||||
return;
|
||||
}
|
||||
if(password.length < 8)
|
||||
{
|
||||
setLocalError(t('nitro.login.error.password_too_short', 'Your password must be at least 8 characters.'));
|
||||
return;
|
||||
}
|
||||
if(password !== confirm)
|
||||
{
|
||||
setLocalError(t('nitro.login.error.password_mismatch', 'Passwords do not match.'));
|
||||
return;
|
||||
}
|
||||
|
||||
setChecking(true);
|
||||
try
|
||||
{
|
||||
const serverOk = await pingServer();
|
||||
if(!serverOk)
|
||||
{
|
||||
setLocalError(t('nitro.login.error.server_offline', 'The gameserver is not running. Please try again later.'));
|
||||
return;
|
||||
}
|
||||
const result = await onCheckEmail(email.trim());
|
||||
if(!result.available)
|
||||
{
|
||||
setLocalError(result.error || t('nitro.login.error.email_taken', 'This email is already in use.'));
|
||||
return;
|
||||
}
|
||||
setStep('avatar');
|
||||
}
|
||||
finally
|
||||
{
|
||||
setChecking(false);
|
||||
}
|
||||
};
|
||||
|
||||
const applyGender = (newGender: GenderKey) =>
|
||||
{
|
||||
setGender(newGender);
|
||||
setSelection({ ...FALLBACK_DEFAULTS[newGender] });
|
||||
setHotLookIndex(-1);
|
||||
};
|
||||
|
||||
const getPartList = useCallback((setType: string): number[] =>
|
||||
{
|
||||
const loaded = partOptions[setType]?.[gender];
|
||||
if(loaded && loaded.length) return loaded;
|
||||
const fallback = FALLBACK_DEFAULTS[gender][setType]?.partId;
|
||||
return fallback !== undefined ? [ fallback ] : [];
|
||||
}, [ partOptions, gender ]);
|
||||
|
||||
const getColorList = useCallback((setType: string): number[] =>
|
||||
{
|
||||
const loaded = paletteOptions[setType];
|
||||
if(loaded && loaded.length) return loaded.map(c => c.id);
|
||||
const fallback = FALLBACK_DEFAULTS[gender][setType]?.colors?.[0];
|
||||
return fallback !== undefined ? [ fallback ] : [];
|
||||
}, [ paletteOptions, gender ]);
|
||||
|
||||
const cyclePart = (setType: string, direction: 1 | -1) =>
|
||||
{
|
||||
const options = getPartList(setType);
|
||||
if(!options.length) return;
|
||||
const current = selection[setType]?.partId ?? options[0];
|
||||
const idx = options.indexOf(current);
|
||||
const nextIdx = ((idx === -1 ? 0 : idx) + direction + options.length) % options.length;
|
||||
const colors = getColorList(setType);
|
||||
setSelection(prev => ({
|
||||
...prev,
|
||||
[setType]: {
|
||||
partId: options[nextIdx],
|
||||
colors: prev[setType]?.colors ?? [ colors[0] ?? 0 ]
|
||||
}
|
||||
}));
|
||||
};
|
||||
|
||||
const cycleColor = (setType: string, direction: 1 | -1) =>
|
||||
{
|
||||
const colors = getColorList(setType);
|
||||
if(!colors.length) return;
|
||||
const currentColor = selection[setType]?.colors?.[0] ?? colors[0];
|
||||
const idx = colors.indexOf(currentColor);
|
||||
const nextIdx = ((idx === -1 ? 0 : idx) + direction + colors.length) % colors.length;
|
||||
const parts = getPartList(setType);
|
||||
setSelection(prev => ({
|
||||
...prev,
|
||||
[setType]: {
|
||||
partId: prev[setType]?.partId ?? parts[0],
|
||||
colors: [ colors[nextIdx] ]
|
||||
}
|
||||
}));
|
||||
};
|
||||
|
||||
const figure = buildFigureString(selection);
|
||||
const previewSrc = buildImagingUrl(imagingUrl, figure, gender);
|
||||
|
||||
const handleAvatarSubmit = async (event: FormEvent<HTMLFormElement>) =>
|
||||
{
|
||||
event.preventDefault();
|
||||
setLocalError(null);
|
||||
|
||||
const trimmed = username.trim();
|
||||
if(!trimmed)
|
||||
{
|
||||
setLocalError(t('nitro.login.error.missing_username', 'Please choose a Habbo name.'));
|
||||
return;
|
||||
}
|
||||
if(trimmed.length < 3 || trimmed.length > 16)
|
||||
{
|
||||
setLocalError(t('nitro.login.error.username_length', 'Habbo name must be 3–16 characters.'));
|
||||
return;
|
||||
}
|
||||
|
||||
if(turnstileEnabled && !turnstileToken)
|
||||
{
|
||||
setLocalError(t('nitro.login.error.turnstile', 'Please complete the security check.'));
|
||||
return;
|
||||
}
|
||||
|
||||
setChecking(true);
|
||||
try
|
||||
{
|
||||
const serverOk = await pingServer();
|
||||
if(!serverOk)
|
||||
{
|
||||
setLocalError(t('nitro.login.error.server_offline', 'The gameserver is not running. Please try again later.'));
|
||||
return;
|
||||
}
|
||||
const result = await onCheckUsername(trimmed);
|
||||
if(!result.available)
|
||||
{
|
||||
setLocalError(result.error || t('nitro.login.error.username_taken', 'This Habbo name is already taken.'));
|
||||
return;
|
||||
}
|
||||
}
|
||||
finally
|
||||
{
|
||||
setChecking(false);
|
||||
}
|
||||
|
||||
setStep('room');
|
||||
};
|
||||
|
||||
const submitRegistration = (templateId: number | null) =>
|
||||
{
|
||||
onSubmit({
|
||||
username: username.trim(),
|
||||
email: email.trim(),
|
||||
password,
|
||||
figure,
|
||||
gender,
|
||||
turnstileToken,
|
||||
templateId
|
||||
}, resetWidget);
|
||||
};
|
||||
|
||||
const handleRoomSubmit = (event: FormEvent<HTMLFormElement>) =>
|
||||
{
|
||||
event.preventDefault();
|
||||
setLocalError(null);
|
||||
submitRegistration(selectedTemplateId);
|
||||
};
|
||||
|
||||
const busy = submitting || checking || pingingServer;
|
||||
const serverOffline = serverReachable === false;
|
||||
|
||||
return (
|
||||
<div className="nitro-login-modal">
|
||||
<div className={ `dialog ${ step === 'avatar' ? 'dialog-avatar' : '' } ${ step === 'room' ? 'dialog-room' : '' }` }>
|
||||
<div className="nitro-login-card">
|
||||
<div className="card-title">
|
||||
<span>{ t('nitro.login.register.title', 'Habbo Details') }</span>
|
||||
<span className="nitro-card-close-button" role="button" aria-label={ t('generic.close', 'Close') } onClick={ onCancel } />
|
||||
</div>
|
||||
|
||||
{ step === 'credentials' &&
|
||||
<form className="card-body" onSubmit={ handleCredentialsNext } autoComplete="on">
|
||||
<div className="register-intro">
|
||||
{ t('nitro.login.register.intro.credentials', 'Let\'s create your account. Enter your email and pick a password — we\'ll check that email isn\'t already in use.') }
|
||||
</div>
|
||||
{ serverOffline &&
|
||||
<div className="error-line server-offline">
|
||||
{ t('nitro.login.server.offline.long', 'The gameserver isn\'t running right now, so new accounts can\'t be created. Please try again in a moment.') }
|
||||
<button type="button" className="retry-link" onClick={ pingServer } disabled={ pingingServer }>
|
||||
{ pingingServer ? t('nitro.login.server.checking', 'Checking…') : t('nitro.login.server.retry', 'Retry') }
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
<div className="field">
|
||||
<label htmlFor="register-email">{ t('register.email', 'Email') }</label>
|
||||
<input id="register-email" type="email" maxLength={ 120 } autoComplete="email"
|
||||
value={ email } onChange={ e => setEmail(e.target.value) } />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label htmlFor="register-password">{ t('generic.password', 'Password') }</label>
|
||||
<input id="register-password" type="password" maxLength={ 128 } autoComplete="new-password"
|
||||
value={ password } onChange={ e => setPassword(e.target.value) } />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label htmlFor="register-confirm">{ t('nitro.login.register.confirm.label', 'Confirm password') }</label>
|
||||
<input id="register-confirm" type="password" maxLength={ 128 } autoComplete="new-password"
|
||||
value={ confirm } onChange={ e => setConfirm(e.target.value) } />
|
||||
</div>
|
||||
{ (localError || error) && <div className="error-line">{ localError || error }</div> }
|
||||
{ info && <div className="info-line">{ info }</div> }
|
||||
<div className="step-footer">
|
||||
<span className="step-indicator">1/3</span>
|
||||
<button type="submit" className="ok-button" disabled={ !credentialsValid || busy || serverOffline }>
|
||||
{ checking || pingingServer ? t('nitro.login.server.checking', 'Checking…') : t('nitro.login.register.next', 'Next') }
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
|
||||
{ step === 'avatar' &&
|
||||
<form className="card-body" onSubmit={ handleAvatarSubmit } autoComplete="on">
|
||||
<div className="register-intro">
|
||||
{ t('nitro.login.register.intro.avatar', 'Now it\'s time to make your own Habbo character! To make your own Habbo, please start by choosing your Habbo Name.') }
|
||||
</div>
|
||||
{ serverOffline &&
|
||||
<div className="error-line server-offline">
|
||||
{ t('nitro.login.server.offline.long', 'The gameserver isn\'t running right now, so new accounts can\'t be created. Please try again in a moment.') }
|
||||
<button type="button" className="retry-link" onClick={ pingServer } disabled={ pingingServer }>
|
||||
{ pingingServer ? t('nitro.login.server.checking', 'Checking…') : t('nitro.login.server.retry', 'Retry') }
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
<div className="field">
|
||||
<input id="register-username" type="text" maxLength={ 16 } autoComplete="username" placeholder={ t('nitro.login.register.username.placeholder', 'HabboName') }
|
||||
value={ username } onChange={ e => setUsername(e.target.value) } />
|
||||
</div>
|
||||
|
||||
<div className="gender-row">
|
||||
<label>
|
||||
<input type="radio" name="register-gender" checked={ gender === 'F' } onChange={ () => applyGender('F') } />
|
||||
<span>{ t('avatareditor.generic.girl', 'Girl') }</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="register-gender" checked={ gender === 'M' } onChange={ () => applyGender('M') } />
|
||||
<span>{ t('avatareditor.generic.boy', 'Boy') }</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="avatar-builder">
|
||||
<div className="avatar-part-col">
|
||||
{ PART_ROWS.map(setType => {
|
||||
const partPreviewSrc = buildPartPreviewUrl(imagingUrl, setType, selection, gender);
|
||||
return (
|
||||
<div className="avatar-part-row" key={ `part-${ setType }` }>
|
||||
<button type="button" className="arrow-btn" aria-label={ `Previous ${ setType }` }
|
||||
onClick={ () => cyclePart(setType, -1) }>‹</button>
|
||||
<div className={ `part-preview part-preview-${ setType }` }>
|
||||
<img src={ partPreviewSrc } alt={ `${ setType } preview` } onError={ e => { (e.currentTarget as HTMLImageElement).style.visibility = 'hidden'; } } />
|
||||
</div>
|
||||
<button type="button" className="arrow-btn" aria-label={ `Next ${ setType }` }
|
||||
onClick={ () => cyclePart(setType, 1) }>›</button>
|
||||
</div>
|
||||
);
|
||||
}) }
|
||||
</div>
|
||||
|
||||
<div className="avatar-preview">
|
||||
<img src={ previewSrc } alt="Habbo preview" onError={ e => { (e.currentTarget as HTMLImageElement).style.visibility = 'hidden'; } } />
|
||||
</div>
|
||||
|
||||
<div className="avatar-color-col">
|
||||
{ PART_ROWS.map(setType => {
|
||||
const fallbackColor = FALLBACK_DEFAULTS[gender][setType]?.colors?.[0] ?? 0;
|
||||
const currentColor = selection[setType]?.colors?.[0] ?? fallbackColor;
|
||||
const swatchHex = hexFor(setType, currentColor);
|
||||
return (
|
||||
<div className="avatar-color-row" key={ `color-${ setType }` }>
|
||||
<button type="button" className="arrow-btn" aria-label={ `Previous color ${ setType }` }
|
||||
onClick={ () => cycleColor(setType, -1) }>‹</button>
|
||||
<div className="color-swatch" style={ { background: swatchHex } } />
|
||||
<button type="button" className="arrow-btn" aria-label={ `Next color ${ setType }` }
|
||||
onClick={ () => cycleColor(setType, 1) }>›</button>
|
||||
</div>
|
||||
);
|
||||
}) }
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="hot-looks-row">
|
||||
<button type="button" className="ok-button hot-looks-button"
|
||||
onClick={ cycleHotLook }
|
||||
disabled={ !hotLooks.length || busy }
|
||||
title={ hotLooks.length
|
||||
? t('nitro.login.register.hotlooks.count', '%count% looks available', [ 'count' ], [ String(hotLooks.length) ])
|
||||
: t('nitro.login.register.hotlooks.none', 'No hot looks loaded') }>
|
||||
{ t('avatareditor.category.hotlooks', 'Hot Looks') }{ hotLookIndex >= 0 && hotLooks.length ? ` (${ hotLookIndex + 1 }/${ hotLooks.length })` : '' }
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{ turnstileEnabled &&
|
||||
<TurnstileWidget
|
||||
siteKey={ turnstileSiteKey }
|
||||
size="compact"
|
||||
onToken={ setTurnstileToken }
|
||||
onExpire={ () => setTurnstileToken('') }
|
||||
onError={ () => setTurnstileToken('') }
|
||||
resetSignal={ resetSignal }
|
||||
/> }
|
||||
{ (localError || error) && <div className="error-line">{ localError || error }</div> }
|
||||
{ info && <div className="info-line">{ info }</div> }
|
||||
|
||||
<div className="step-footer step-footer-split">
|
||||
<button type="button" className="ok-button back-button" onClick={ () => setStep('credentials') } disabled={ busy }>{ t('generic.back', 'Back') }</button>
|
||||
<span className="step-indicator">2/3</span>
|
||||
<button type="submit" className="ok-button" disabled={ !username.trim() || busy || serverOffline }>
|
||||
{ (checking || pingingServer) ? t('nitro.login.server.checking', 'Checking…') : t('nitro.login.register.next', 'Next') }
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
|
||||
{ step === 'room' &&
|
||||
<form className="card-body" onSubmit={ handleRoomSubmit } autoComplete="off">
|
||||
<div className="register-intro">
|
||||
{ t('nitro.login.register.intro.room', 'Last step — pick a starter room, or skip and create your own later.') }
|
||||
</div>
|
||||
{ serverOffline &&
|
||||
<div className="error-line server-offline">
|
||||
{ t('nitro.login.server.offline.long', 'The gameserver isn\'t running right now, so new accounts can\'t be created. Please try again in a moment.') }
|
||||
<button type="button" className="retry-link" onClick={ pingServer } disabled={ pingingServer }>
|
||||
{ pingingServer ? t('nitro.login.server.checking', 'Checking…') : t('nitro.login.server.retry', 'Retry') }
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div className="room-templates-list">
|
||||
<label className={ `room-template-option room-template-skip ${ selectedTemplateId === null ? 'selected' : '' }` }>
|
||||
<input type="radio" name="register-room-template" checked={ selectedTemplateId === null }
|
||||
onChange={ () => setSelectedTemplateId(null) } />
|
||||
<div className="room-template-body">
|
||||
<div className="room-template-title">{ t('nitro.login.register.room.skip.title', 'I\'m okay — I\'ll create my own rooms') }</div>
|
||||
<div className="room-template-description">{ t('nitro.login.register.room.skip.description', 'Skip for now and start with an empty hotel inventory.') }</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
{ roomTemplates === null && <div className="info-line">{ t('nitro.login.register.room.loading', 'Loading rooms…') }</div> }
|
||||
|
||||
{ roomTemplates !== null && roomTemplates.map(template => (
|
||||
<label key={ template.templateId }
|
||||
className={ `room-template-option ${ selectedTemplateId === template.templateId ? 'selected' : '' }` }>
|
||||
<input type="radio" name="register-room-template" checked={ selectedTemplateId === template.templateId }
|
||||
onChange={ () => setSelectedTemplateId(template.templateId) } />
|
||||
{ template.thumbnail &&
|
||||
<img className="room-template-thumb" src={ template.thumbnail } alt={ template.title }
|
||||
onError={ e => { (e.currentTarget as HTMLImageElement).style.visibility = 'hidden'; } } /> }
|
||||
<div className="room-template-body">
|
||||
<div className="room-template-title">{ template.title }</div>
|
||||
{ template.description &&
|
||||
<div className="room-template-description">{ template.description }</div> }
|
||||
</div>
|
||||
</label>
|
||||
)) }
|
||||
</div>
|
||||
|
||||
{ roomTemplatesError && <div className="error-line">{ roomTemplatesError }</div> }
|
||||
{ (localError || error) && <div className="error-line">{ localError || error }</div> }
|
||||
{ info && <div className="info-line">{ info }</div> }
|
||||
|
||||
<div className="step-footer step-footer-split">
|
||||
<button type="button" className="ok-button back-button" onClick={ () => setStep('avatar') } disabled={ busy }>{ t('generic.back', 'Back') }</button>
|
||||
<span className="step-indicator">3/3</span>
|
||||
<button type="submit" className="ok-button" disabled={ busy || serverOffline }>
|
||||
{ submitting ? t('nitro.login.register.creating', 'Creating…') : t('nitro.login.register.finish', 'Finish') }
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,9 @@
|
||||
export interface DialogSharedProps
|
||||
{
|
||||
onCancel: () => void;
|
||||
submitting: boolean;
|
||||
error: string | null;
|
||||
info: string | null;
|
||||
turnstileEnabled: boolean;
|
||||
turnstileSiteKey: string;
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
export interface BanInfo
|
||||
{
|
||||
type: 'account' | 'ip' | 'machine' | 'super' | string;
|
||||
reason: string;
|
||||
permanent: boolean;
|
||||
expiresAt?: number;
|
||||
}
|
||||
|
||||
export const parseBan = (payload: Record<string, unknown>): BanInfo | null =>
|
||||
{
|
||||
const raw = payload?.ban;
|
||||
if(!raw || typeof raw !== 'object') return null;
|
||||
const ban = raw as Record<string, unknown>;
|
||||
const type = typeof ban.type === 'string' ? ban.type : 'account';
|
||||
const reason = typeof ban.reason === 'string' ? ban.reason : '';
|
||||
const permanent = ban.permanent === true || ban.permanent === 'true';
|
||||
const expiresAt = typeof ban.expiresAt === 'number' ? ban.expiresAt : undefined;
|
||||
return { type, reason, permanent, expiresAt };
|
||||
};
|
||||
|
||||
export const formatRemaining = (epochSeconds: number): string =>
|
||||
{
|
||||
const totalSeconds = Math.max(0, epochSeconds - Math.floor(Date.now() / 1000));
|
||||
const days = Math.floor(totalSeconds / 86400);
|
||||
const hours = Math.floor((totalSeconds % 86400) / 3600);
|
||||
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
||||
const seconds = totalSeconds % 60;
|
||||
if(days > 0) return `${ days }d ${ hours }h ${ minutes }m`;
|
||||
if(hours > 0) return `${ hours }h ${ minutes }m`;
|
||||
if(minutes > 0) return `${ minutes }m ${ seconds }s`;
|
||||
return `${ seconds }s`;
|
||||
};
|
||||
@@ -0,0 +1,106 @@
|
||||
export type GenderKey = 'M' | 'F';
|
||||
|
||||
export const PART_ROWS: string[] = [ 'hr', 'hd', 'ch', 'lg', 'sh' ];
|
||||
|
||||
export const FALLBACK_DEFAULTS: Record<GenderKey, Record<string, { partId: number; colors: number[] }>> = {
|
||||
M: {
|
||||
hr: { partId: 180, colors: [ 45 ] },
|
||||
hd: { partId: 180, colors: [ 1 ] },
|
||||
ch: { partId: 215, colors: [ 66 ] },
|
||||
lg: { partId: 270, colors: [ 82 ] },
|
||||
sh: { partId: 290, colors: [ 80 ] }
|
||||
},
|
||||
F: {
|
||||
hr: { partId: 515, colors: [ 45 ] },
|
||||
hd: { partId: 600, colors: [ 1 ] },
|
||||
ch: { partId: 660, colors: [ 100 ] },
|
||||
lg: { partId: 716, colors: [ 82 ] },
|
||||
sh: { partId: 725, colors: [ 61 ] }
|
||||
}
|
||||
};
|
||||
|
||||
export const FALLBACK_HEX: Record<number, string> = {
|
||||
1: '#ffcb98', 8: '#f4ac54', 14: '#f5da88', 19: '#b87560', 20: '#9c543f',
|
||||
45: '#e8c498', 61: '#f1ece3', 66: '#96743d', 80: '#4f4d4d', 82: '#7f4f30',
|
||||
92: '#ececec', 100: '#c7ddff', 106: '#c6e6bd', 110: '#91a7c8', 143: '#ffffff'
|
||||
};
|
||||
|
||||
export interface FigureColor { id: number; hexCode: string; club: number; selectable: boolean; }
|
||||
export interface FigurePalette { id: number; colors: FigureColor[]; }
|
||||
export interface FigureSet { id: number; gender: 'M' | 'F' | 'U'; club: number; selectable: boolean; }
|
||||
export interface FigureSetType { type: string; paletteId: number; sets: FigureSet[]; }
|
||||
export interface FigureData { palettes: FigurePalette[]; setTypes: FigureSetType[]; }
|
||||
|
||||
export interface PartSelection { partId: number; colors: number[]; }
|
||||
export type FigureSelection = Record<string, PartSelection>;
|
||||
|
||||
export const buildFigureString = (selection: FigureSelection): string =>
|
||||
{
|
||||
const seen = new Set<string>();
|
||||
const parts: string[] = [];
|
||||
const push = (setType: string) =>
|
||||
{
|
||||
if(seen.has(setType)) return;
|
||||
seen.add(setType);
|
||||
const sel = selection[setType];
|
||||
if(!sel || sel.partId < 0) return;
|
||||
const tail = (sel.colors && sel.colors.length) ? `-${ sel.colors.join('-') }` : '';
|
||||
parts.push(`${ setType }-${ sel.partId }${ tail }`);
|
||||
};
|
||||
for(const setType of PART_ROWS) push(setType);
|
||||
for(const setType of Object.keys(selection)) push(setType);
|
||||
return parts.join('.');
|
||||
};
|
||||
|
||||
export const buildImagingUrl = (template: string, figure: string, gender: GenderKey): string =>
|
||||
template
|
||||
.replace(/\{figure\}/g, encodeURIComponent(figure))
|
||||
.replace(/\{gender\}/g, gender)
|
||||
.replace(/\{direction\}/g, '2');
|
||||
|
||||
const HEAD_ONLY_PARTS = new Set([ 'hr', 'hd' ]);
|
||||
|
||||
export const buildPartPreviewUrl = (
|
||||
template: string,
|
||||
setType: string,
|
||||
selection: FigureSelection,
|
||||
gender: GenderKey
|
||||
): string =>
|
||||
{
|
||||
const defaults = FALLBACK_DEFAULTS[gender];
|
||||
const partSel = selection[setType] ?? defaults[setType];
|
||||
const tail = (partSel.colors && partSel.colors.length) ? `-${ partSel.colors.join('-') }` : '';
|
||||
const isHeadOnly = HEAD_ONLY_PARTS.has(setType);
|
||||
|
||||
let parts: string[];
|
||||
if(isHeadOnly)
|
||||
{
|
||||
const hd = defaults.hd;
|
||||
const pieces = new Map<string, string>();
|
||||
pieces.set('hd', `hd-${ hd.partId }-${ hd.colors.join('-') }`);
|
||||
pieces.set(setType, `${ setType }-${ partSel.partId }${ tail }`);
|
||||
parts = Array.from(pieces.values());
|
||||
}
|
||||
else
|
||||
{
|
||||
const hd = defaults.hd;
|
||||
parts = [
|
||||
`hd-${ hd.partId }-${ hd.colors.join('-') }`,
|
||||
`${ setType }-${ partSel.partId }${ tail }`
|
||||
];
|
||||
}
|
||||
|
||||
const figure = parts.join('.');
|
||||
let url = template
|
||||
.replace(/\{figure\}/g, encodeURIComponent(figure))
|
||||
.replace(/\{gender\}/g, gender)
|
||||
.replace(/\{direction\}/g, '2');
|
||||
|
||||
url = url.replace(/size=l/, 'size=s').replace(/size=m/, 'size=s');
|
||||
if(!/size=/.test(url)) url += (url.includes('?') ? '&' : '?') + 'size=s';
|
||||
if(isHeadOnly && !/headonly=/.test(url)) url += '&headonly=1';
|
||||
|
||||
return url;
|
||||
};
|
||||
|
||||
export const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
@@ -0,0 +1,27 @@
|
||||
import { GetConfiguration } from '@nitrots/nitro-renderer';
|
||||
import { LocalizeText } from '../../../api';
|
||||
|
||||
export const t = (key: string, fallback: string, params?: string[], replacements?: string[]): string =>
|
||||
{
|
||||
try
|
||||
{
|
||||
const value = LocalizeText(key, params ?? null, replacements ?? null);
|
||||
if(value && value !== key) return value;
|
||||
}
|
||||
catch {}
|
||||
|
||||
if(!params || !replacements) return fallback;
|
||||
let out = fallback;
|
||||
for(let i = 0; i < params.length; i++)
|
||||
{
|
||||
if(replacements[i] !== undefined) out = out.replace('%' + params[i] + '%', replacements[i]);
|
||||
}
|
||||
return out;
|
||||
};
|
||||
|
||||
export const interpolate = (value: string | null | undefined): string =>
|
||||
{
|
||||
if(!value) return '';
|
||||
try { return GetConfiguration().interpolate(value); }
|
||||
catch { return value; }
|
||||
};
|
||||
@@ -0,0 +1,23 @@
|
||||
export const LOCK_KEY = 'nitro.login.lock';
|
||||
export const MAX_ATTEMPTS = 5;
|
||||
export const LOCK_WINDOW_MS = 60_000;
|
||||
export const LOCK_DURATION_MS = 2 * 60_000;
|
||||
|
||||
export type AttemptState = { attempts: number; firstAt: number; lockedUntil: number };
|
||||
|
||||
export const readLock = (): AttemptState =>
|
||||
{
|
||||
try
|
||||
{
|
||||
const raw = sessionStorage.getItem(LOCK_KEY);
|
||||
if(!raw) return { attempts: 0, firstAt: 0, lockedUntil: 0 };
|
||||
return JSON.parse(raw);
|
||||
}
|
||||
catch { return { attempts: 0, firstAt: 0, lockedUntil: 0 }; }
|
||||
};
|
||||
|
||||
export const writeLock = (state: AttemptState) =>
|
||||
{
|
||||
try { sessionStorage.setItem(LOCK_KEY, JSON.stringify(state)); }
|
||||
catch { }
|
||||
};
|
||||
@@ -0,0 +1,50 @@
|
||||
/**
|
||||
* Accepts a URL (http/https, protocol-relative, or site-relative),
|
||||
* a data URL with an image mime type, or a raw base64 image payload.
|
||||
* Anything else (including data:text/html, javascript:, etc.) is rejected
|
||||
* to keep an admin-set DB value from becoming an XSS / phishing vector.
|
||||
*/
|
||||
export const resolveNewsImage = (raw: string | null | undefined): string =>
|
||||
{
|
||||
const value = (raw ?? '').trim();
|
||||
if(!value) return '';
|
||||
if(/^https?:\/\//i.test(value)) return value;
|
||||
if(value.startsWith('//')) return window.location.protocol + value;
|
||||
if(value.startsWith('/'))
|
||||
{
|
||||
try { return new URL(value, window.location.origin).href; }
|
||||
catch { return window.location.origin + value; }
|
||||
}
|
||||
if(value.startsWith('data:'))
|
||||
{
|
||||
return /^data:image\/[a-z0-9.+-]+[,;]/i.test(value) ? value : '';
|
||||
}
|
||||
|
||||
const stripped = value.replace(/\s+/g, '');
|
||||
if(!/^[A-Za-z0-9+/=]+$/.test(stripped)) return '';
|
||||
let mime = 'image/png';
|
||||
if(stripped.startsWith('/9j/')) mime = 'image/jpeg';
|
||||
else if(stripped.startsWith('R0lGOD')) mime = 'image/gif';
|
||||
else if(stripped.startsWith('UklGR')) mime = 'image/webp';
|
||||
else if(stripped.startsWith('PHN2Zy') || stripped.startsWith('PD94bWw')) mime = 'image/svg+xml';
|
||||
else if(stripped.startsWith('iVBORw0KGgo')) mime = 'image/png';
|
||||
return `data:${ mime };base64,${ stripped }`;
|
||||
};
|
||||
|
||||
/**
|
||||
* Rejects anything that isn't an http(s) URL or a same-origin path so a
|
||||
* malicious DB value can't be a `javascript:` / `data:` / `file:` link.
|
||||
*/
|
||||
export const resolveNewsLink = (raw: string | null | undefined): string =>
|
||||
{
|
||||
const value = (raw ?? '').trim();
|
||||
if(!value) return '';
|
||||
try
|
||||
{
|
||||
const url = new URL(value, window.location.href);
|
||||
const proto = url.protocol.toLowerCase();
|
||||
if(proto !== 'http:' && proto !== 'https:') return '';
|
||||
return url.href;
|
||||
}
|
||||
catch { return ''; }
|
||||
};
|
||||
@@ -1,7 +1,7 @@
|
||||
import { RoomDataParser, RoomSettingsComposer, UpdateHomeRoomMessageComposer } from '@nitrots/nitro-renderer';
|
||||
import * as Popover from '@radix-ui/react-popover';
|
||||
import React, { FC, useRef, useState } from 'react';
|
||||
import { FaUser } from 'react-icons/fa';
|
||||
import { ArrowContainer, Popover } from 'react-tiny-popover';
|
||||
import { GetGroupInformation, GetSessionDataManager, GetUserProfile, LocalizeText, ReportType, SendMessageComposer, ToggleFavoriteRoom } from '../../../../api';
|
||||
import { Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, Text, UserProfileIconView } from '../../../../common';
|
||||
import { useHelp, useNavigator } from '../../../../hooks';
|
||||
@@ -26,6 +26,12 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
|
||||
const isControlled = isVisible !== undefined;
|
||||
const popoverOpen = isControlled ? isVisible : internalVisible;
|
||||
|
||||
const handleOpenChange = (open: boolean) =>
|
||||
{
|
||||
if(!isControlled) setInternalVisible(open);
|
||||
if(!open && setIsPopoverActive) setIsPopoverActive(false);
|
||||
};
|
||||
|
||||
const getUserCounterColor = () =>
|
||||
{
|
||||
const num: number = (100 * (roomData.userCount / roomData.maxUserCount));
|
||||
@@ -88,17 +94,22 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
|
||||
};
|
||||
|
||||
return (
|
||||
<Popover
|
||||
containerClassName="max-w-[276px] not-italic font-normal leading-normal text-left no-underline text-shadow-none normal-case tracking-[normal] [word-break:normal] [word-spacing:normal] whitespace-normal text-[.7875rem] [word-wrap:break-word] bg-[#f2f2eb] border border-[#000] rounded-[8px] shadow-none z-[1070]"
|
||||
content={ ({ position, childRect, popoverRect }) => (
|
||||
<ArrowContainer
|
||||
arrowColor="black"
|
||||
arrowSize={ 7 }
|
||||
arrowStyle={ { left: 'calc(-.5rem - 0px)' } }
|
||||
childRect={ childRect }
|
||||
popoverRect={ popoverRect }
|
||||
position={ position }
|
||||
>
|
||||
<Popover.Root open={ popoverOpen } onOpenChange={ handleOpenChange }>
|
||||
<Popover.Trigger asChild>
|
||||
<div
|
||||
ref={ elementRef }
|
||||
className="cursor-pointer nitro-icon icon-navigator-info"
|
||||
onClick={ handleIconClick }
|
||||
onMouseOver={ () => { if(!isControlled) setInternalVisible(true); } }
|
||||
onMouseLeave={ () => { if(!isControlled) setInternalVisible(false); } }
|
||||
/>
|
||||
</Popover.Trigger>
|
||||
<Popover.Portal>
|
||||
<Popover.Content
|
||||
side="right"
|
||||
sideOffset={ 10 }
|
||||
collisionPadding={ 8 }
|
||||
className="max-w-[276px] not-italic font-normal leading-normal text-left no-underline normal-case tracking-normal whitespace-normal text-[.7875rem] [word-wrap:break-word] bg-[#f2f2eb] border border-black rounded-[8px] shadow-none z-[1070]">
|
||||
<NitroCardContentView className="bg-transparent room-info image-rendering-pixelated !p-0" overflow="hidden" onClick={ e => e.stopPropagation() }>
|
||||
<Flex gap={ 1 } overflow="hidden" className="p-2">
|
||||
<LayoutRoomThumbnailView className="flex flex-col items-center justify-end mb-1" customUrl={ roomData.officialRoomPicRef } roomId={ roomData.roomId }>
|
||||
@@ -173,24 +184,9 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
|
||||
</Flex> }
|
||||
</Column>
|
||||
</NitroCardContentView>
|
||||
</ArrowContainer>
|
||||
) }
|
||||
isOpen={ popoverOpen }
|
||||
onClickOutside={ () =>
|
||||
{
|
||||
if(!isControlled) setInternalVisible(false);
|
||||
if(setIsPopoverActive) setIsPopoverActive(false);
|
||||
} }
|
||||
padding={ 10 }
|
||||
positions={ [ 'right', 'left', 'top', 'bottom' ] }
|
||||
>
|
||||
<div
|
||||
ref={ elementRef }
|
||||
className="cursor-pointer nitro-icon icon-navigator-info"
|
||||
onClick={ handleIconClick }
|
||||
onMouseOver={ () => { if(!isControlled) setInternalVisible(true); } }
|
||||
onMouseLeave={ () => { if(!isControlled) setInternalVisible(false); } }
|
||||
/>
|
||||
</Popover>
|
||||
<Popover.Arrow className="fill-black" width={ 14 } height={ 7 } />
|
||||
</Popover.Content>
|
||||
</Popover.Portal>
|
||||
</Popover.Root>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { FC, useMemo } from 'react';
|
||||
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
|
||||
import { LocalizeFormattedNumber, LocalizeShortNumber } from '../../../api';
|
||||
import { Flex, LayoutCurrencyIcon, Text } from '../../../common';
|
||||
|
||||
@@ -17,23 +16,22 @@ export const CurrencyView: FC<CurrencyViewProps> = props =>
|
||||
const element = useMemo(() =>
|
||||
{
|
||||
return (
|
||||
<Flex justifyContent="end" pointer gap={ 1 } className={`nitro-purse-button rounded allcurrencypurse nitro-purse-button currency-${type}`}>
|
||||
<Flex justifyContent="end" pointer gap={ 1 } className={ `nitro-purse-button rounded allcurrencypurse nitro-purse-button currency-${ type }` }>
|
||||
<Text truncate textEnd variant="white" grow>{ short ? LocalizeShortNumber(amount) : LocalizeFormattedNumber(amount) }</Text>
|
||||
<LayoutCurrencyIcon type={ type } />
|
||||
</Flex>);
|
||||
}, [ amount, short, type ]);
|
||||
|
||||
if(!short) return element;
|
||||
|
||||
|
||||
return (
|
||||
<OverlayTrigger
|
||||
placement="left"
|
||||
overlay={
|
||||
<Tooltip id={ `tooltip-${ type }` }>
|
||||
{ LocalizeFormattedNumber(amount) }
|
||||
</Tooltip>
|
||||
}>
|
||||
<div className="group relative">
|
||||
{ element }
|
||||
</OverlayTrigger>
|
||||
<div
|
||||
role="tooltip"
|
||||
className="pointer-events-none absolute right-full top-1/2 z-50 mr-2 -translate-y-1/2 whitespace-nowrap rounded bg-black/80 px-2 py-1 text-xs text-white opacity-0 shadow transition-opacity duration-150 group-hover:opacity-100">
|
||||
{ LocalizeFormattedNumber(amount) }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { FC, useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { FaPlus } from 'react-icons/fa';
|
||||
import { GetConfigurationValue, LocalizeText } from '../../../../../api';
|
||||
import { LayoutBadgeImageView } from '../../../../../common';
|
||||
@@ -15,7 +16,8 @@ const BadgeMiniPicker: FC<{
|
||||
onSelect: (badgeCode: string) => void;
|
||||
onClose: () => void;
|
||||
activeBadgeCodes: (string | null)[];
|
||||
}> = ({ onSelect, onClose, activeBadgeCodes }) =>
|
||||
position: { top: number; left: number };
|
||||
}> = ({ onSelect, onClose, activeBadgeCodes, position }) =>
|
||||
{
|
||||
const { badgeCodes = [], requestBadges = null } = useInventoryBadges();
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
@@ -43,10 +45,11 @@ const BadgeMiniPicker: FC<{
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, [ onClose ]);
|
||||
|
||||
return (
|
||||
return createPortal(
|
||||
<div
|
||||
ref={ ref }
|
||||
className="absolute right-[calc(100%+8px)] top-0 z-50 bg-[rgba(28,28,32,0.97)] border border-white/20 rounded-md p-2 shadow-lg min-w-[160px]"
|
||||
className="fixed z-[9999] bg-[rgba(28,28,32,0.97)] border border-white/20 rounded-md p-2 shadow-lg min-w-[160px]"
|
||||
style={ { top: position.top, left: position.left } }
|
||||
onClick={ e => e.stopPropagation() }>
|
||||
<input
|
||||
autoFocus
|
||||
@@ -73,7 +76,8 @@ const BadgeMiniPicker: FC<{
|
||||
) }
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
);
|
||||
};
|
||||
|
||||
@@ -83,7 +87,9 @@ export const InfoStandBadgeSlotView: FC<InfoStandBadgeSlotProps> = ({ slotIndex,
|
||||
const [ isDragOver, setIsDragOver ] = useState(false);
|
||||
const [ isDragging, setIsDragging ] = useState(false);
|
||||
const [ justDropped, setJustDropped ] = useState(false);
|
||||
const [ showPicker, setShowPicker ] = useState(false);
|
||||
const [ pickerPosition, setPickerPosition ] = useState<{ top: number; left: number } | null>(null);
|
||||
const slotRef = useRef<HTMLDivElement>(null);
|
||||
const showPicker = pickerPosition !== null;
|
||||
|
||||
const hookInitialized = activeBadgeCodes.length > 0;
|
||||
|
||||
@@ -152,9 +158,17 @@ export const InfoStandBadgeSlotView: FC<InfoStandBadgeSlotProps> = ({ slotIndex,
|
||||
|
||||
const handleSlotClick = useCallback(() =>
|
||||
{
|
||||
if(!isOwnUser || badgeCode) return;
|
||||
if(!isOwnUser || badgeCode || !slotRef.current) return;
|
||||
|
||||
setShowPicker(true);
|
||||
const rect = slotRef.current.getBoundingClientRect();
|
||||
const pickerWidth = 180;
|
||||
const gap = 8;
|
||||
let left = rect.right + gap;
|
||||
|
||||
if((left + pickerWidth) > (window.innerWidth - gap)) left = rect.left - pickerWidth - gap;
|
||||
if(left < gap) left = gap;
|
||||
|
||||
setPickerPosition({ top: rect.top, left });
|
||||
}, [ isOwnUser, badgeCode ]);
|
||||
|
||||
const handleDoubleClick = useCallback(() =>
|
||||
@@ -167,12 +181,13 @@ export const InfoStandBadgeSlotView: FC<InfoStandBadgeSlotProps> = ({ slotIndex,
|
||||
const handlePickerSelect = useCallback((code: string) =>
|
||||
{
|
||||
setBadgeAtSlot(code, slotIndex);
|
||||
setShowPicker(false);
|
||||
setPickerPosition(null);
|
||||
}, [ setBadgeAtSlot, slotIndex ]);
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<div
|
||||
ref={ slotRef }
|
||||
className={ `flex items-center justify-center relative w-[40px] h-[40px] bg-no-repeat bg-center transition-all duration-150
|
||||
${ isOwnUser && badgeCode ? 'cursor-grab active:cursor-grabbing' : '' }
|
||||
${ isOwnUser && !badgeCode ? 'cursor-pointer' : '' }
|
||||
@@ -196,8 +211,9 @@ export const InfoStandBadgeSlotView: FC<InfoStandBadgeSlotProps> = ({ slotIndex,
|
||||
{ showPicker && (
|
||||
<BadgeMiniPicker
|
||||
activeBadgeCodes={ activeBadgeCodes }
|
||||
onClose={ () => setShowPicker(false) }
|
||||
onClose={ () => setPickerPosition(null) }
|
||||
onSelect={ handlePickerSelect }
|
||||
position={ pickerPosition }
|
||||
/>
|
||||
) }
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { CrackableDataType, CreateLinkEvent, FurnitureFloorUpdateEvent, GetRoomEngine, GetSoundManager, GroupInformationComposer, GroupInformationEvent, NowPlayingEvent, RoomControllerLevel, RoomObjectCategory, RoomObjectOperationType, RoomObjectVariable, RoomWidgetEnumItemExtradataParameter, RoomWidgetFurniInfoUsagePolicyEnum, SetObjectDataMessageComposer, SongInfoReceivedEvent, StringDataType, UpdateFurniturePositionComposer } from '@nitrots/nitro-renderer';
|
||||
import { CrackableDataType, CreateLinkEvent, FurnitureFloorUpdateEvent, GetRoomEngine, GetSessionDataManager, GetSoundManager, GroupInformationComposer, GroupInformationEvent, NowPlayingEvent, RoomControllerLevel, RoomObjectCategory, RoomObjectOperationType, RoomObjectVariable, RoomWidgetEnumItemExtradataParameter, RoomWidgetFurniInfoUsagePolicyEnum, SetObjectDataMessageComposer, SongInfoReceivedEvent, StringDataType, UpdateFurniturePositionComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { FaCrosshairs, FaRulerVertical, FaTimes } from 'react-icons/fa';
|
||||
import { GrFormNextLink, GrRotateLeft, GrRotateRight } from 'react-icons/gr';
|
||||
@@ -585,19 +585,20 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
|
||||
onClick={ () => setDropdownOpen(!dropdownOpen) }>
|
||||
{ dropdownOpen ? `${LocalizeText('widget.furni.present.close')} Buildtools` : `${LocalizeText('navigator.roomsettings.doormode.open')} Buildtools` }
|
||||
</button>
|
||||
<button
|
||||
className="w-full text-white text-xs bg-[#1e7295] hover:bg-[#1a617f] border border-[#ffffff33] rounded px-2 py-1 cursor-pointer transition-colors"
|
||||
onClick={ () =>
|
||||
{
|
||||
const roomObject = GetRoomEngine().getRoomObject(roomSession.roomId, avatarInfo.id, avatarInfo.isWallItem ? RoomObjectCategory.WALL : RoomObjectCategory.FLOOR);
|
||||
const typeId = roomObject?.model?.getValue(RoomObjectVariable.FURNITURE_TYPE_ID);
|
||||
{ GetSessionDataManager().isModerator &&
|
||||
<button
|
||||
className="w-full text-white text-xs bg-[#1e7295] hover:bg-[#1a617f] border border-[#ffffff33] rounded px-2 py-1 cursor-pointer transition-colors"
|
||||
onClick={ () =>
|
||||
{
|
||||
const roomObject = GetRoomEngine().getRoomObject(roomSession.roomId, avatarInfo.id, avatarInfo.isWallItem ? RoomObjectCategory.WALL : RoomObjectCategory.FLOOR);
|
||||
const typeId = roomObject?.model?.getValue(RoomObjectVariable.FURNITURE_TYPE_ID);
|
||||
|
||||
CreateLinkEvent('furni-editor/show');
|
||||
CreateLinkEvent('furni-editor/show');
|
||||
|
||||
if(typeId) window.dispatchEvent(new CustomEvent('furni-editor:open', { detail: { spriteId: typeId } }));
|
||||
} }>
|
||||
Edit Furni
|
||||
</button>
|
||||
if(typeId) window.dispatchEvent(new CustomEvent('furni-editor:open', { detail: { spriteId: typeId } }));
|
||||
} }>
|
||||
Edit Furni
|
||||
</button> }
|
||||
{ dropdownOpen &&
|
||||
<div className="flex gap-[4px] w-full">
|
||||
{ /* Left panel: position + rotation */ }
|
||||
|
||||
@@ -24,12 +24,14 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
|
||||
const [backgroundId, setBackgroundId] = useState<number>(null);
|
||||
const [standId, setStandId] = useState<number>(null);
|
||||
const [overlayId, setOverlayId] = useState<number>(null);
|
||||
const [cardBackgroundId, setCardBackgroundId] = useState<number>(null);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const { roomSession = null } = useRoom();
|
||||
|
||||
const infostandBackgroundClass = `background-${backgroundId ?? 'default'}`;
|
||||
const infostandStandClass = `stand-${standId ?? 'default'}`;
|
||||
const infostandOverlayClass = `overlay-${overlayId ?? 'default'}`;
|
||||
const infostandCardBackgroundClass = cardBackgroundId ? `card-background-${cardBackgroundId}` : '';
|
||||
const handleProfileClick = useCallback(() => { GetUserProfile(avatarInfo.webID); }, [avatarInfo.webID]);
|
||||
|
||||
const handleEditClick = useCallback((event: React.MouseEvent) => { event.stopPropagation(); setIsVisible(prev => !prev); }, []);
|
||||
@@ -96,6 +98,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
|
||||
newValue.backgroundId = event.backgroundId;
|
||||
newValue.standId = event.standId;
|
||||
newValue.overlayId = event.overlayId;
|
||||
newValue.cardBackgroundId = event.cardBackgroundId ?? 0;
|
||||
return newValue;
|
||||
});
|
||||
});
|
||||
@@ -130,16 +133,12 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
|
||||
setBackgroundId(avatarInfo.backgroundId);
|
||||
setStandId(avatarInfo.standId);
|
||||
setOverlayId(avatarInfo.overlayId);
|
||||
setCardBackgroundId(avatarInfo.cardBackgroundId ?? 0);
|
||||
|
||||
SendMessageComposer(new UserRelationshipsComposer(avatarInfo.webID));
|
||||
|
||||
return () => {
|
||||
setIsEditingMotto(false);
|
||||
setMotto(null);
|
||||
setRelationships(null);
|
||||
setBackgroundId(null);
|
||||
setStandId(null);
|
||||
setOverlayId(null);
|
||||
};
|
||||
}, [avatarInfo]);
|
||||
|
||||
@@ -147,7 +146,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
|
||||
|
||||
return (
|
||||
<>
|
||||
<Column className="relative min-w-[190px] max-w-[190px] z-30 pointer-events-auto bg-[rgba(28,28,32,0.95)] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] rounded">
|
||||
<Column className={`relative min-w-[190px] max-w-[190px] z-30 pointer-events-auto ${cardBackgroundId ? '' : 'bg-[rgba(28,28,32,0.95)]'} [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] rounded overflow-hidden profile-card-background ${infostandCardBackgroundClass}`}>
|
||||
<Column className="h-full p-[8px] overflow-auto" gap={1} overflow="visible">
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center justify-between">
|
||||
@@ -292,6 +291,8 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
|
||||
setSelectedStand={setStandId}
|
||||
selectedOverlay={overlayId}
|
||||
setSelectedOverlay={setOverlayId}
|
||||
selectedCardBackground={cardBackgroundId}
|
||||
setSelectedCardBackground={setCardBackgroundId}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -55,6 +55,9 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
|
||||
case 'change_looks':
|
||||
CreateLinkEvent('avatar-editor/show');
|
||||
break;
|
||||
case 'avatar_effect':
|
||||
CreateLinkEvent('avatar-effects/show');
|
||||
break;
|
||||
case 'expressions':
|
||||
hideMenu = false;
|
||||
setMode(MODE_EXPRESSIONS);
|
||||
@@ -137,6 +140,9 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
|
||||
<ContextMenuListItemView onClick={ event => processAction('change_looks') }>
|
||||
{ LocalizeText('widget.memenu.myclothes') }
|
||||
</ContextMenuListItemView>
|
||||
<ContextMenuListItemView onClick={ event => processAction('avatar_effect') }>
|
||||
{ LocalizeText('product.type.effect') }
|
||||
</ContextMenuListItemView>
|
||||
{ (HasHabboClub() && !isRidingHorse) &&
|
||||
<ContextMenuListItemView onClick={ event => processAction('dance_menu') }>
|
||||
<FaChevronRight className="right fa-icon" />
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import data from '@emoji-mart/data';
|
||||
import Picker from '@emoji-mart/react';
|
||||
import * as Popover from '@radix-ui/react-popover';
|
||||
import { FC, useState } from 'react';
|
||||
import { Popover } from 'react-tiny-popover';
|
||||
|
||||
interface ChatInputEmojiSelectorViewProps
|
||||
{
|
||||
@@ -19,19 +19,16 @@ export const ChatInputEmojiSelectorView: FC<ChatInputEmojiSelectorViewProps> = p
|
||||
setSelectorVisible(false);
|
||||
};
|
||||
|
||||
const toggleSelector = () => setSelectorVisible(prev => !prev);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Popover
|
||||
containerClassName="z-[1070]"
|
||||
content={ <Picker data={ data } onEmojiSelect={ handleEmojiSelect } /> }
|
||||
isOpen={ selectorVisible }
|
||||
positions={ [ 'top' ] }
|
||||
onClickOutside={ () => setSelectorVisible(false) }
|
||||
>
|
||||
<div className="cursor-pointer text-lg select-none px-1" onClick={ toggleSelector }>🙂</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<Popover.Root open={ selectorVisible } onOpenChange={ setSelectorVisible }>
|
||||
<Popover.Trigger asChild>
|
||||
<div className="cursor-pointer text-lg select-none px-1">🙂</div>
|
||||
</Popover.Trigger>
|
||||
<Popover.Portal>
|
||||
<Popover.Content className="z-[1070]" side="top" sideOffset={ 8 }>
|
||||
<Picker data={ data } onEmojiSelect={ handleEmojiSelect } />
|
||||
</Popover.Content>
|
||||
</Popover.Portal>
|
||||
</Popover.Root>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import * as Popover from '@radix-ui/react-popover';
|
||||
import { FC, useState } from 'react';
|
||||
import { ArrowContainer, Popover } from 'react-tiny-popover';
|
||||
import { Flex, Grid, NitroCardContentView } from '../../../../common';
|
||||
|
||||
interface ChatInputStyleSelectorViewProps
|
||||
@@ -21,20 +21,17 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
|
||||
};
|
||||
|
||||
return (
|
||||
<Popover
|
||||
padding={12}
|
||||
isOpen={selectorVisible}
|
||||
positions={['top']}
|
||||
reposition={false}
|
||||
containerClassName="max-w-[276px] not-italic font-normal leading-normal text-left no-underline text-shadow-none normal-case tracking-[normal] [word-break:normal] [word-spacing:normal] whitespace-normal text-[.7875rem] [word-wrap:break-word] bg-[#dfdfdf] bg-clip-padding border border-[solid] border-[#283F5D] rounded-[.25rem] [box-shadow:0_2px_#00000073] z-1070"
|
||||
content={({ position, childRect, popoverRect }) => (
|
||||
<ArrowContainer
|
||||
arrowColor={'black'}
|
||||
arrowSize={7}
|
||||
arrowStyle={{ bottom: 'calc(-.5rem - 1px)' }}
|
||||
childRect={childRect}
|
||||
popoverRect={popoverRect}
|
||||
position={position}
|
||||
<Popover.Root open={selectorVisible} onOpenChange={setSelectorVisible}>
|
||||
<Popover.Trigger asChild>
|
||||
<div className="chatstyles-anchor">
|
||||
<div className="nitro-icon chatstyles-icon" />
|
||||
</div>
|
||||
</Popover.Trigger>
|
||||
<Popover.Portal>
|
||||
<Popover.Content
|
||||
side="top"
|
||||
sideOffset={12}
|
||||
className="max-w-[276px] not-italic font-normal leading-normal text-left no-underline normal-case tracking-normal whitespace-normal text-[.7875rem] [word-wrap:break-word] bg-[#dfdfdf] bg-clip-padding border border-solid border-[#283F5D] rounded-[.25rem] [box-shadow:0_2px_#00000073] z-[1070]"
|
||||
>
|
||||
<NitroCardContentView className="bg-transparent max-h-[210px]!" overflow="hidden">
|
||||
<Grid columnCount={3} overflow="auto">
|
||||
@@ -47,15 +44,9 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
|
||||
))}
|
||||
</Grid>
|
||||
</NitroCardContentView>
|
||||
</ArrowContainer>
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className="chatstyles-anchor"
|
||||
onClick={() => setSelectorVisible(v => !v)}
|
||||
>
|
||||
<div className="nitro-icon chatstyles-icon" />
|
||||
</div>
|
||||
</Popover>
|
||||
<Popover.Arrow className="fill-black" width={14} height={7} />
|
||||
</Popover.Content>
|
||||
</Popover.Portal>
|
||||
</Popover.Root>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import YouTube, { Options } from 'react-youtube';
|
||||
import { YouTubePlayer } from 'youtube-player/dist/types';
|
||||
import { FC, useRef } from 'react';
|
||||
import ReactPlayer from 'react-player/youtube';
|
||||
import { LocalizeText, YoutubeVideoPlaybackStateEnum } from '../../../../api';
|
||||
import { AutoGrid, AutoGridProps, LayoutGridItem, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
|
||||
import { useFurnitureYoutubeWidget } from '../../../../hooks';
|
||||
@@ -12,71 +11,24 @@ interface FurnitureYoutubeDisplayViewProps extends AutoGridProps
|
||||
|
||||
export const FurnitureYoutubeDisplayView: FC<{}> = FurnitureYoutubeDisplayViewProps =>
|
||||
{
|
||||
const [ player, setPlayer ] = useState<any>(null);
|
||||
const { objectId = -1, videoId = null, videoStart = 0, videoEnd = 0, currentVideoState = null, selectedVideo = null, playlists = [], onClose = null, previous = null, next = null, pause = null, play = null, selectVideo = null } = useFurnitureYoutubeWidget();
|
||||
const playerRef = useRef<ReactPlayer>(null);
|
||||
|
||||
const onStateChange = (event: { target: YouTubePlayer; data: number }) =>
|
||||
const handlePlay = () =>
|
||||
{
|
||||
try
|
||||
{
|
||||
setPlayer(event.target);
|
||||
|
||||
if(objectId === -1) return;
|
||||
|
||||
switch(event.target.getPlayerState())
|
||||
{
|
||||
case -1:
|
||||
case 1:
|
||||
if(currentVideoState !== 1) play();
|
||||
return;
|
||||
case 2:
|
||||
if(currentVideoState !== 2) pause();
|
||||
}
|
||||
}
|
||||
catch(err) {}
|
||||
if(objectId === -1) return;
|
||||
if(currentVideoState !== YoutubeVideoPlaybackStateEnum.PLAYING) play();
|
||||
};
|
||||
|
||||
useEffect(() =>
|
||||
const handlePause = () =>
|
||||
{
|
||||
if((currentVideoState === null) || !player) return;
|
||||
|
||||
try
|
||||
{
|
||||
if((currentVideoState === YoutubeVideoPlaybackStateEnum.PLAYING) && (player.getPlayerState() !== YoutubeVideoPlaybackStateEnum.PLAYING))
|
||||
{
|
||||
player.playVideo();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if((currentVideoState === YoutubeVideoPlaybackStateEnum.PAUSED) && (player.getPlayerState() !== YoutubeVideoPlaybackStateEnum.PAUSED))
|
||||
{
|
||||
player.pauseVideo();
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
catch(err)
|
||||
{
|
||||
setPlayer(null);
|
||||
}
|
||||
}, [ currentVideoState, player ]);
|
||||
if(objectId === -1) return;
|
||||
if(currentVideoState !== YoutubeVideoPlaybackStateEnum.PAUSED) pause();
|
||||
};
|
||||
|
||||
if(objectId === -1) return null;
|
||||
|
||||
const youtubeOptions: Options = {
|
||||
height: '375',
|
||||
width: '500',
|
||||
playerVars: {
|
||||
autoplay: 1,
|
||||
disablekb: 1,
|
||||
controls: 0,
|
||||
origin: window.origin,
|
||||
modestbranding: 1,
|
||||
start: videoStart,
|
||||
end: videoEnd
|
||||
}
|
||||
};
|
||||
const playing = (currentVideoState === null) ? true : (currentVideoState === YoutubeVideoPlaybackStateEnum.PLAYING);
|
||||
|
||||
return (
|
||||
<NitroCardView className="youtube-tv-widget">
|
||||
@@ -85,7 +37,26 @@ export const FurnitureYoutubeDisplayView: FC<{}> = FurnitureYoutubeDisplayViewPr
|
||||
<div className="row size-full">
|
||||
<div className="youtube-video-container col-span-9 overflow-hidden">
|
||||
{ (videoId && videoId.length > 0) &&
|
||||
<YouTube containerClassName={ 'youtubeContainer' } opts={ youtubeOptions } videoId={ videoId } onReady={ event => setPlayer(event.target) } onStateChange={ onStateChange } />
|
||||
<ReactPlayer
|
||||
ref={ playerRef }
|
||||
url={ `https://www.youtube.com/watch?v=${ videoId }` }
|
||||
width={ 500 }
|
||||
height={ 375 }
|
||||
playing={ playing }
|
||||
controls={ false }
|
||||
onPlay={ handlePlay }
|
||||
onPause={ handlePause }
|
||||
config={ {
|
||||
playerVars: {
|
||||
autoplay: 1,
|
||||
disablekb: 1,
|
||||
controls: 0,
|
||||
origin: window.origin,
|
||||
modestbranding: 1,
|
||||
start: videoStart,
|
||||
end: videoEnd
|
||||
}
|
||||
} } />
|
||||
}
|
||||
{ (!videoId || videoId.length === 0) &&
|
||||
<div className="empty-video size-full justify-center items-center flex">{ LocalizeText('widget.furni.video_viewer.no_videos') }</div>
|
||||
|
||||
@@ -32,7 +32,7 @@ export const ToolbarMeView: FC<PropsWithChildren<{
|
||||
}, [ setMeExpanded ]);
|
||||
|
||||
return (
|
||||
<Flex alignItems="center" className="absolute bottom-[60px] left-[33px] bg-[rgba(20,20,20,.95)] border border-[solid] border-[#101010] [box-shadow:inset_2px_2px_rgba(255,255,255,.1),inset_-2px_-2px_rgba(255,255,255,.1)] rounded-[$border-radius] p-2" gap={ 2 } innerRef={ elementRef }>
|
||||
<Flex alignItems="center" className="bg-[rgba(20,20,20,.95)] border border-[solid] border-[#101010] [box-shadow:inset_2px_2px_rgba(255,255,255,.1),inset_-2px_-2px_rgba(255,255,255,.1)] rounded-[$border-radius] p-2" gap={ 2 } innerRef={ elementRef }>
|
||||
{ (GetConfigurationValue('guides.enabled') && useGuideTool) &&
|
||||
<div className="navigation-item relative nitro-icon icon-me-helper-tool cursor-pointer" onClick={ event => DispatchUiEvent(new GuideToolEvent(GuideToolEvent.TOGGLE_GUIDE_TOOL)) } /> }
|
||||
<div className="navigation-item relative nitro-icon icon-me-achievements cursor-pointer" onClick={ event => CreateLinkEvent('achievements/toggle') }>
|
||||
@@ -42,6 +42,7 @@ export const ToolbarMeView: FC<PropsWithChildren<{
|
||||
<div className="navigation-item relative nitro-icon icon-me-profile cursor-pointer" onClick={ event => GetUserProfile(GetSessionDataManager().userId) } />
|
||||
<div className="navigation-item relative nitro-icon icon-me-rooms cursor-pointer" onClick={ event => CreateLinkEvent('navigator/search/myworld_view') } />
|
||||
<div className="navigation-item relative nitro-icon icon-me-clothing cursor-pointer" onClick={ event => CreateLinkEvent('avatar-editor/toggle') } />
|
||||
<div className="navigation-item relative nitro-icon icon-me-badge-creator cursor-pointer" onClick={ event => CreateLinkEvent('badge-creator/toggle') } title={ LocalizeText('toolbar.icon.label.badge_creator') } />
|
||||
<div className="navigation-item relative nitro-icon icon-me-settings cursor-pointer" onClick={ event => CreateLinkEvent('user-settings/toggle') } />
|
||||
<div className="navigation-item relative nitro-icon icon-me-forums cursor-pointer" onClick={ event => CreateLinkEvent('groupforum/toggle') } title={ LocalizeText('toolbar.icon.label.forums') } />
|
||||
{ children }
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { ControlYoutubeDisplayPlaybackMessageComposer, YouTubeRoomBroadcastEvent, YouTubeRoomPlayComposer, YouTubeRoomSettingsEvent, YouTubeRoomWatchersEvent, YouTubeRoomWatchingComposer } from "@nitrots/nitro-renderer";
|
||||
import { FC, useEffect, useRef, useState } from "react";
|
||||
import YouTube from "react-youtube";
|
||||
import ReactPlayer from "react-player/youtube";
|
||||
import { GetRoomSession, getYoutubeRoomEnabled, GetSessionDataManager, LocalizeText, SendMessageComposer, YoutubeVideoPlaybackStateEnum } from "../../api";
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView, LayoutAvatarImageView } from "../../common";
|
||||
import { useFurnitureYoutubeWidget, useMessageEvent } from "../../hooks";
|
||||
@@ -35,7 +35,7 @@ export const YouTubePlayerView: FC<{}> = () => {
|
||||
const [playlist, setPlaylist] = useState<string[]>([]);
|
||||
const [history, setHistory] = useState<string[]>([]);
|
||||
const [showVolumeSlider, setShowVolumeSlider] = useState(true);
|
||||
const playerRef = useRef<any>(null);
|
||||
const playerRef = useRef<ReactPlayer | null>(null);
|
||||
const { objectId: youtubeObjectId, videoId: roomVideoId, currentVideoState, hasControl } = useFurnitureYoutubeWidget();
|
||||
const [spectators, setSpectators] = useState< { id: number; name: string; look: string }[] >([]);
|
||||
const [broadcastVideo, setBroadcastVideo] = useState("");
|
||||
@@ -310,22 +310,22 @@ export const YouTubePlayerView: FC<{}> = () => {
|
||||
)}
|
||||
|
||||
{videoId ? (
|
||||
<YouTube
|
||||
videoId={videoId}
|
||||
opts={{
|
||||
width: "100%",
|
||||
height: isFullscreen ? "100%" : "280",
|
||||
<ReactPlayer
|
||||
ref={ref => { playerRef.current = ref; }}
|
||||
url={`https://www.youtube.com/watch?v=${videoId}`}
|
||||
width="100%"
|
||||
height={isFullscreen ? "100%" : 280}
|
||||
playing
|
||||
muted={isMuted}
|
||||
loop={isLooping}
|
||||
volume={Math.max(0, Math.min(1, volume / 100))}
|
||||
config={{
|
||||
playerVars: {
|
||||
autoplay: 1,
|
||||
volume: volume,
|
||||
muted: isMuted ? 1 : 0,
|
||||
loop: isLooping ? 1 : 0,
|
||||
},
|
||||
}}
|
||||
onReady={(e) => {
|
||||
playerRef.current = e.target;
|
||||
addToHistory(videoId);
|
||||
}}
|
||||
onReady={() => addToHistory(videoId)}
|
||||
/>
|
||||
) : (
|
||||
<div className="h-[280px] flex items-center justify-center bg-gray-800 text-gray-500">
|
||||
|
||||
@@ -18,6 +18,7 @@ export const UserContainerView: FC<{
|
||||
const infostandBackgroundClass = `background-${userProfile.backgroundId ?? 'default'}`;
|
||||
const infostandStandClass = `stand-${userProfile.standId ?? 'default'}`;
|
||||
const infostandOverlayClass = `overlay-${userProfile.overlayId ?? 'default'}`;
|
||||
const profileCardBgClass = userProfile.cardBackgroundId ? `card-background-${userProfile.cardBackgroundId}` : '';
|
||||
const addFriend = () =>
|
||||
{
|
||||
setRequestSent(true);
|
||||
@@ -31,7 +32,7 @@ export const UserContainerView: FC<{
|
||||
}, [ userProfile ]);
|
||||
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<div className={`flex gap-2 p-2 rounded profile-card-background ${profileCardBgClass}`}>
|
||||
<div className={`flex flex-col justify-center items-center w-[75px] h-[120px] rounded-sm relative overflow-hidden profile-background ${infostandBackgroundClass}`}>
|
||||
<div className={`absolute inset-0 profile-stand ${infostandStandClass}`} />
|
||||
<LayoutAvatarImageView direction={ 2 } figure={ userProfile.figure } />
|
||||
|
||||
@@ -78,6 +78,656 @@
|
||||
background: none;
|
||||
}
|
||||
|
||||
.profile-card-background {
|
||||
background-repeat: repeat;
|
||||
background-position: top left;
|
||||
background-size: auto;
|
||||
&.card-background-0 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_0.png');
|
||||
}
|
||||
&.card-background-1 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_1.png');
|
||||
}
|
||||
&.card-background-2 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_2.png');
|
||||
}
|
||||
&.card-background-3 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_3.png');
|
||||
}
|
||||
&.card-background-4 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_4.png');
|
||||
}
|
||||
&.card-background-5 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_5.png');
|
||||
}
|
||||
&.card-background-6 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_6.png');
|
||||
}
|
||||
&.card-background-7 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_7.png');
|
||||
}
|
||||
&.card-background-8 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_8.png');
|
||||
}
|
||||
&.card-background-9 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_9.png');
|
||||
}
|
||||
&.card-background-10 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_10.png');
|
||||
}
|
||||
&.card-background-11 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_11.png');
|
||||
}
|
||||
&.card-background-12 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_12.png');
|
||||
}
|
||||
&.card-background-13 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_13.png');
|
||||
}
|
||||
&.card-background-14 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_14.png');
|
||||
}
|
||||
&.card-background-15 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_15.png');
|
||||
}
|
||||
&.card-background-16 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_16.png');
|
||||
}
|
||||
&.card-background-17 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_17.png');
|
||||
}
|
||||
&.card-background-18 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_18.png');
|
||||
}
|
||||
&.card-background-19 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_19.png');
|
||||
}
|
||||
&.card-background-20 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_20.png');
|
||||
}
|
||||
&.card-background-21 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_21.png');
|
||||
}
|
||||
&.card-background-22 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_22.png');
|
||||
}
|
||||
&.card-background-23 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_23.png');
|
||||
}
|
||||
&.card-background-24 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_24.png');
|
||||
}
|
||||
&.card-background-25 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_25.png');
|
||||
}
|
||||
&.card-background-26 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_26.png');
|
||||
}
|
||||
&.card-background-27 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_27.png');
|
||||
}
|
||||
&.card-background-28 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_28.png');
|
||||
}
|
||||
&.card-background-29 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_29.png');
|
||||
}
|
||||
&.card-background-30 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_30.png');
|
||||
}
|
||||
&.card-background-31 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_31.png');
|
||||
}
|
||||
&.card-background-32 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_32.png');
|
||||
}
|
||||
&.card-background-33 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_33.png');
|
||||
}
|
||||
&.card-background-34 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_34.png');
|
||||
}
|
||||
&.card-background-35 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_35.png');
|
||||
}
|
||||
&.card-background-36 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_36.gif');
|
||||
}
|
||||
&.card-background-37 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_37.png');
|
||||
}
|
||||
&.card-background-38 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_38.png');
|
||||
}
|
||||
&.card-background-39 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_39.png');
|
||||
}
|
||||
&.card-background-40 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_40.png');
|
||||
}
|
||||
&.card-background-41 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_41.png');
|
||||
}
|
||||
&.card-background-42 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_42.png');
|
||||
}
|
||||
&.card-background-43 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_43.png');
|
||||
}
|
||||
&.card-background-44 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_44.png');
|
||||
}
|
||||
&.card-background-45 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_45.png');
|
||||
}
|
||||
&.card-background-46 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_46.png');
|
||||
}
|
||||
&.card-background-47 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_47.png');
|
||||
}
|
||||
&.card-background-48 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_48.png');
|
||||
}
|
||||
&.card-background-49 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_49.png');
|
||||
}
|
||||
&.card-background-50 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_50.png');
|
||||
}
|
||||
&.card-background-51 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_51.gif');
|
||||
}
|
||||
&.card-background-52 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_52.gif');
|
||||
}
|
||||
&.card-background-53 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_53.gif');
|
||||
}
|
||||
&.card-background-54 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_54.gif');
|
||||
}
|
||||
&.card-background-55 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_55.gif');
|
||||
}
|
||||
&.card-background-56 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_56.gif');
|
||||
}
|
||||
&.card-background-57 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_57.gif');
|
||||
}
|
||||
&.card-background-58 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_58.gif');
|
||||
}
|
||||
&.card-background-59 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_59.gif');
|
||||
}
|
||||
&.card-background-60 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_60.gif');
|
||||
}
|
||||
&.card-background-61 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_61.gif');
|
||||
}
|
||||
&.card-background-62 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_62.gif');
|
||||
}
|
||||
&.card-background-63 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_63.gif');
|
||||
}
|
||||
&.card-background-64 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_64.gif');
|
||||
}
|
||||
&.card-background-65 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_65.gif');
|
||||
}
|
||||
&.card-background-66 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_66.gif');
|
||||
}
|
||||
&.card-background-67 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_67.gif');
|
||||
}
|
||||
&.card-background-68 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_68.gif');
|
||||
}
|
||||
&.card-background-69 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_69.gif');
|
||||
}
|
||||
&.card-background-70 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_70.gif');
|
||||
}
|
||||
&.card-background-71 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_71.gif');
|
||||
}
|
||||
&.card-background-72 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_72.gif');
|
||||
}
|
||||
&.card-background-73 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_73.gif');
|
||||
}
|
||||
&.card-background-74 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_74.gif');
|
||||
}
|
||||
&.card-background-75 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_75.gif');
|
||||
}
|
||||
&.card-background-76 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_76.gif');
|
||||
}
|
||||
&.card-background-77 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_77.gif');
|
||||
}
|
||||
&.card-background-78 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_78.gif');
|
||||
}
|
||||
&.card-background-79 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_79.gif');
|
||||
}
|
||||
&.card-background-80 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_80.gif');
|
||||
}
|
||||
&.card-background-81 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_81.gif');
|
||||
}
|
||||
&.card-background-82 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_82.gif');
|
||||
}
|
||||
&.card-background-83 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_83.gif');
|
||||
}
|
||||
&.card-background-84 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_84.gif');
|
||||
}
|
||||
&.card-background-85 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_85.gif');
|
||||
}
|
||||
&.card-background-86 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_86.png');
|
||||
}
|
||||
&.card-background-87 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_87.gif');
|
||||
}
|
||||
&.card-background-88 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_88.gif');
|
||||
}
|
||||
&.card-background-89 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_89.gif');
|
||||
}
|
||||
&.card-background-90 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_90.gif');
|
||||
}
|
||||
&.card-background-91 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_91.gif');
|
||||
}
|
||||
&.card-background-92 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_92.gif');
|
||||
}
|
||||
&.card-background-93 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_93.gif');
|
||||
}
|
||||
&.card-background-94 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_94.gif');
|
||||
}
|
||||
&.card-background-95 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_95.gif');
|
||||
}
|
||||
&.card-background-96 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_96.gif');
|
||||
}
|
||||
&.card-background-97 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_97.gif');
|
||||
}
|
||||
&.card-background-98 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_98.gif');
|
||||
}
|
||||
&.card-background-99 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_99.gif');
|
||||
}
|
||||
&.card-background-100 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_100.gif');
|
||||
}
|
||||
&.card-background-101 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_101.png');
|
||||
}
|
||||
&.card-background-102 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_102.gif');
|
||||
}
|
||||
&.card-background-103 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_103.gif');
|
||||
}
|
||||
&.card-background-104 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_104.gif');
|
||||
}
|
||||
&.card-background-105 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_105.gif');
|
||||
}
|
||||
&.card-background-106 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_106.gif');
|
||||
}
|
||||
&.card-background-107 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_107.gif');
|
||||
}
|
||||
&.card-background-108 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_108.gif');
|
||||
}
|
||||
&.card-background-109 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_109.gif');
|
||||
}
|
||||
&.card-background-110 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_110.gif');
|
||||
}
|
||||
&.card-background-111 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_111.gif');
|
||||
}
|
||||
&.card-background-112 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_112.gif');
|
||||
}
|
||||
&.card-background-113 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_113.gif');
|
||||
}
|
||||
&.card-background-114 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_114.gif');
|
||||
}
|
||||
&.card-background-115 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_115.gif');
|
||||
}
|
||||
&.card-background-116 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_116.gif');
|
||||
}
|
||||
&.card-background-117 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_117.gif');
|
||||
}
|
||||
&.card-background-118 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_118.gif');
|
||||
}
|
||||
&.card-background-119 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_119.gif');
|
||||
}
|
||||
&.card-background-120 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_120.gif');
|
||||
}
|
||||
&.card-background-121 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_121.gif');
|
||||
}
|
||||
&.card-background-122 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_122.gif');
|
||||
}
|
||||
&.card-background-123 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_123.gif');
|
||||
}
|
||||
&.card-background-124 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_124.gif');
|
||||
}
|
||||
&.card-background-125 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_125.gif');
|
||||
}
|
||||
&.card-background-126 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_126.gif');
|
||||
}
|
||||
&.card-background-127 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_127.gif');
|
||||
}
|
||||
&.card-background-128 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_128.gif');
|
||||
}
|
||||
&.card-background-129 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_129.gif');
|
||||
}
|
||||
&.card-background-130 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_130.gif');
|
||||
}
|
||||
&.card-background-131 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_131.gif');
|
||||
}
|
||||
&.card-background-132 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_132.gif');
|
||||
}
|
||||
&.card-background-133 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_133.gif');
|
||||
}
|
||||
&.card-background-134 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_134.gif');
|
||||
}
|
||||
&.card-background-135 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_135.gif');
|
||||
}
|
||||
&.card-background-136 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_136.gif');
|
||||
}
|
||||
&.card-background-137 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_137.gif');
|
||||
}
|
||||
&.card-background-138 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_138.gif');
|
||||
}
|
||||
&.card-background-139 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_139.gif');
|
||||
}
|
||||
&.card-background-140 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_140.gif');
|
||||
}
|
||||
&.card-background-141 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_141.gif');
|
||||
}
|
||||
&.card-background-142 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_142.gif');
|
||||
}
|
||||
&.card-background-143 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_143.gif');
|
||||
}
|
||||
&.card-background-144 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_144.gif');
|
||||
}
|
||||
&.card-background-145 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_145.gif');
|
||||
}
|
||||
&.card-background-146 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_146.gif');
|
||||
}
|
||||
&.card-background-147 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_147.gif');
|
||||
}
|
||||
&.card-background-148 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_148.gif');
|
||||
}
|
||||
&.card-background-149 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_149.gif');
|
||||
}
|
||||
&.card-background-150 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_150.gif');
|
||||
}
|
||||
&.card-background-151 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_151.gif');
|
||||
}
|
||||
&.card-background-152 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_152.gif');
|
||||
}
|
||||
&.card-background-153 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_153.gif');
|
||||
}
|
||||
&.card-background-154 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_154.gif');
|
||||
}
|
||||
&.card-background-155 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_155.gif');
|
||||
}
|
||||
&.card-background-156 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_156.gif');
|
||||
}
|
||||
&.card-background-157 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_157.gif');
|
||||
}
|
||||
&.card-background-158 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_158.gif');
|
||||
}
|
||||
&.card-background-159 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_159.gif');
|
||||
}
|
||||
&.card-background-160 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_160.gif');
|
||||
}
|
||||
&.card-background-161 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_161.gif');
|
||||
}
|
||||
&.card-background-162 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_162.gif');
|
||||
}
|
||||
&.card-background-163 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_163.gif');
|
||||
}
|
||||
&.card-background-164 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_164.gif');
|
||||
}
|
||||
&.card-background-165 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_165.gif');
|
||||
}
|
||||
&.card-background-166 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_166.gif');
|
||||
}
|
||||
&.card-background-167 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_167.gif');
|
||||
}
|
||||
&.card-background-168 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_168.gif');
|
||||
}
|
||||
&.card-background-169 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_169.gif');
|
||||
}
|
||||
&.card-background-170 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_170.png');
|
||||
}
|
||||
&.card-background-171 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_171.png');
|
||||
}
|
||||
&.card-background-172 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_172.png');
|
||||
}
|
||||
&.card-background-173 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_173.png');
|
||||
}
|
||||
&.card-background-174 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_174.png');
|
||||
}
|
||||
&.card-background-175 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_175.png');
|
||||
}
|
||||
&.card-background-176 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_176.png');
|
||||
}
|
||||
&.card-background-177 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_177.gif');
|
||||
}
|
||||
&.card-background-178 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_178.png');
|
||||
}
|
||||
&.card-background-179 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_179.png');
|
||||
}
|
||||
&.card-background-180 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_180.png');
|
||||
}
|
||||
&.card-background-181 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_181.png');
|
||||
}
|
||||
&.card-background-182 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_182.png');
|
||||
}
|
||||
&.card-background-183 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_183.png');
|
||||
}
|
||||
&.card-background-184 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_184.png');
|
||||
}
|
||||
&.card-background-185 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_185.png');
|
||||
}
|
||||
&.card-background-186 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_186.png');
|
||||
}
|
||||
&.card-background-187 {
|
||||
background-image: url('@/assets/images/backgrounds/background/bg_187.gif');
|
||||
}
|
||||
}
|
||||
|
||||
.profile-card-background.card-background-1 {
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.profile-card-background.card-background-2 {
|
||||
background: linear-gradient(135deg, #4ecdc4 0%, #44a8a3 100%);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.profile-card-background.card-background-3 {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.profile-card-background.card-background-4 {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.profile-card-background.card-background-5 {
|
||||
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.profile-card-background.card-background-6 {
|
||||
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.profile-card-background.card-background-7 {
|
||||
background: linear-gradient(135deg, #5ee7df 0%, #b490ca 100%);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.profile-card-background.card-background-8 {
|
||||
background: linear-gradient(135deg, #243949 0%, #517fa4 100%);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.profile-card-background.card-background-9 {
|
||||
background-image: repeating-linear-gradient(45deg, #ff6b9d 0 10px, #c06c84 10px 20px);
|
||||
background-color: #c06c84;
|
||||
background-size: auto;
|
||||
}
|
||||
.profile-card-background.card-background-10 {
|
||||
background-image: repeating-linear-gradient(90deg, #2b5876 0 8px, #4e4376 8px 16px);
|
||||
background-color: #2b5876;
|
||||
background-size: auto;
|
||||
}
|
||||
.profile-card-background.card-background-11 {
|
||||
background-image: radial-gradient(circle, #ffd54f 1.5px, transparent 2px);
|
||||
background-color: #2c3e50;
|
||||
background-size: 12px 12px;
|
||||
background-repeat: repeat;
|
||||
}
|
||||
.profile-card-background.card-background-12 {
|
||||
background-image: linear-gradient(45deg, #1a1a2e 25%, transparent 25%), linear-gradient(-45deg, #1a1a2e 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1a1a2e 75%), linear-gradient(-45deg, transparent 75%, #1a1a2e 75%);
|
||||
background-color: #16213e;
|
||||
background-size: 16px 16px;
|
||||
background-position: 0 0, 0 8px, 8px -8px, -8px 0;
|
||||
background-repeat: repeat;
|
||||
}
|
||||
.profile-card-background.card-background-13 {
|
||||
background: linear-gradient(135deg, #232526 0%, #414345 100%);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.profile-card-background.card-background-14 {
|
||||
background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.profile-card-background.card-background-15 {
|
||||
background-image: linear-gradient(0deg, transparent 49%, rgba(255,255,255,0.08) 49% 51%, transparent 51%), linear-gradient(90deg, transparent 49%, rgba(255,255,255,0.08) 49% 51%, transparent 51%);
|
||||
background-color: #1a1a2e;
|
||||
background-size: 24px 24px;
|
||||
background-repeat: repeat;
|
||||
}
|
||||
|
||||
.profile-background {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
|
||||
&.type-0 {
|
||||
|
||||
// normal
|
||||
/* normal */
|
||||
.message {
|
||||
font-weight: 400;
|
||||
}
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
&.type-1 {
|
||||
|
||||
// whisper
|
||||
/* whisper */
|
||||
.message {
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
@@ -27,7 +27,7 @@
|
||||
|
||||
&.type-2 {
|
||||
|
||||
// shout
|
||||
/* shout */
|
||||
.message {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -143,6 +143,15 @@
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.nitro-icon.icon-me-badge-creator {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><linearGradient id='b' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23ffd966'/><stop offset='1' stop-color='%23e69138'/></linearGradient></defs><path d='M5 7 Q5 5 7 5 L19 5 Q21 5 21 7 L21 18 Q21 22 13 26 Q5 22 5 18 Z' fill='url(%23b)' stroke='%23222' stroke-width='1.6' stroke-linejoin='round'/><polygon points='13,8 14.4,12 18.6,12 15.2,14.6 16.5,18.6 13,16.2 9.5,18.6 10.8,14.6 7.4,12 11.6,12' fill='%23ffffff' stroke='%23222' stroke-width='0.7' stroke-linejoin='round'/><g transform='rotate(40 24 22)'><rect x='17' y='20' width='12' height='4' fill='%23ffd84d' stroke='%23222' stroke-width='1.2' rx='0.5'/><rect x='25' y='20' width='3' height='4' fill='%23ec5e5e' stroke='%23222' stroke-width='1.2'/><polygon points='17,20 17,24 13,22' fill='%23222'/><polygon points='15,21.4 17,21.4 17,22.6 15,22.6' fill='%23ffeb3b'/></g></svg>");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 30px 30px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.nitro-icon.icon-me-settings {
|
||||
background-image: url("@/assets/images/toolbar/icons/me-menu/cog.png");
|
||||
width: 28px;
|
||||
|
||||
+1
-1
@@ -1856,7 +1856,7 @@ body {
|
||||
position: relative;
|
||||
aspect-ratio: 1;
|
||||
width: 100%;
|
||||
max-width: 42px;
|
||||
max-width: 64px;
|
||||
border-radius: 0.3rem !important;
|
||||
overflow: hidden !important;
|
||||
background-color: #e9e8e4;
|
||||
|
||||
@@ -1,3 +1,25 @@
|
||||
@font-face {
|
||||
font-family: Volter;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
src: url("@/assets/webfonts/Volter.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Volter;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
src: url("@/assets/webfonts/Volter-b.ttf") format("truetype");
|
||||
}
|
||||
|
||||
.nitro-login-view,
|
||||
.nitro-login-view * {
|
||||
font-family: Volter, "Volter (Goldfish)", monospace;
|
||||
-webkit-font-smoothing: none;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-smooth: never;
|
||||
}
|
||||
|
||||
.nitro-login-view {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
@@ -325,6 +347,33 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nitro-login-card .error-line.ban-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
padding: 8px 10px;
|
||||
text-align: left;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.nitro-login-card .error-line.ban-message .ban-title {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.nitro-login-card .error-line.ban-message .ban-status {
|
||||
font-size: 11px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.nitro-login-card .error-line.ban-message .ban-reason {
|
||||
font-size: 11px;
|
||||
font-style: italic;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.nitro-login-card .register-card-body a {
|
||||
color: #134b6e;
|
||||
text-decoration: underline;
|
||||
@@ -659,3 +708,446 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Login News Window (Habbo flavour) ─── */
|
||||
|
||||
.nitro-login-view .login-news-stack {
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 8vw;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 388px;
|
||||
z-index: 50;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.nitro-login-view .news-card-wrapper {
|
||||
position: relative;
|
||||
animation: news-pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
|
||||
}
|
||||
|
||||
.nitro-login-view .news-card-wrapper > .nitro-login-card.nitro-news-card {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
border-width: 3px;
|
||||
padding-top: 22px;
|
||||
background: linear-gradient(180deg, #b9d4e3 0%, #a2bfd1 60%, #93b3c8 100%);
|
||||
box-shadow:
|
||||
inset 0 2px rgba(255, 255, 255, 0.5),
|
||||
inset 0 -2px rgba(0, 0, 0, 0.12),
|
||||
0 6px 14px rgba(0, 0, 0, 0.35),
|
||||
0 0 0 4px rgba(63, 106, 133, 0.0);
|
||||
animation: news-glow 3.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Yellow Habbo-style ribbon title */
|
||||
.nitro-login-card.nitro-news-card .card-title.news-ribbon {
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
left: -10px;
|
||||
right: -10px;
|
||||
margin: 0;
|
||||
padding: 6px 12px;
|
||||
background: linear-gradient(180deg, #ffe27a 0%, #ffc742 50%, #f0a812 100%);
|
||||
color: #5a3a00;
|
||||
text-shadow: 0 1px rgba(255, 255, 255, 0.55);
|
||||
border: 2px solid #8a5a00;
|
||||
border-radius: 6px;
|
||||
box-shadow:
|
||||
inset 0 1px rgba(255, 255, 255, 0.7),
|
||||
inset 0 -2px rgba(0, 0, 0, 0.15),
|
||||
0 3px 0 rgba(0, 0, 0, 0.2);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.6px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Pennant tails on the ribbon */
|
||||
.nitro-login-card.nitro-news-card .card-title.news-ribbon::before,
|
||||
.nitro-login-card.nitro-news-card .card-title.news-ribbon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -6px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #c47800;
|
||||
border: 2px solid #8a5a00;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.nitro-login-card.nitro-news-card .card-title.news-ribbon::before {
|
||||
left: -2px;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 100%);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.nitro-login-card.nitro-news-card .card-title.news-ribbon::after {
|
||||
right: -2px;
|
||||
clip-path: polygon(0 0, 100% 0, 0 100%);
|
||||
}
|
||||
|
||||
.nitro-login-card.nitro-news-card .news-ribbon-text {
|
||||
display: inline-block;
|
||||
animation: news-ribbon-wobble 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* "NEW!" star badge */
|
||||
.nitro-login-view .news-new-badge {
|
||||
position: absolute;
|
||||
top: -28px;
|
||||
right: -24px;
|
||||
width: 78px;
|
||||
height: 78px;
|
||||
background:
|
||||
radial-gradient(circle at 35% 30%, #fff7c2 0%, #ffd23a 45%, #d97c00 100%);
|
||||
color: #5a1900;
|
||||
font-weight: 900;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid #8a3a00;
|
||||
box-shadow:
|
||||
inset 0 2px rgba(255, 255, 255, 0.55),
|
||||
inset 0 -2px rgba(0, 0, 0, 0.2),
|
||||
0 3px 6px rgba(0, 0, 0, 0.35);
|
||||
clip-path: polygon(
|
||||
50% 0%, 61% 35%, 98% 35%, 68% 57%,
|
||||
79% 91%, 50% 70%, 21% 91%, 32% 57%,
|
||||
2% 35%, 39% 35%
|
||||
);
|
||||
z-index: 4;
|
||||
animation: news-badge-spin 2.8s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nitro-login-view .news-new-badge span {
|
||||
transform: rotate(-10deg);
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Sparkles around the card */
|
||||
.nitro-login-view .news-sparkle {
|
||||
position: absolute;
|
||||
color: #fff5b0;
|
||||
text-shadow:
|
||||
0 0 6px rgba(255, 220, 120, 0.9),
|
||||
0 0 12px rgba(255, 200, 60, 0.6);
|
||||
pointer-events: none;
|
||||
z-index: 3;
|
||||
user-select: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.nitro-login-view .news-sparkle-1 {
|
||||
top: -8px;
|
||||
left: 18px;
|
||||
font-size: 14px;
|
||||
animation: news-sparkle 2.1s ease-in-out infinite;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.nitro-login-view .news-sparkle-2 {
|
||||
top: 38%;
|
||||
left: -12px;
|
||||
font-size: 12px;
|
||||
animation: news-sparkle 2.4s ease-in-out infinite;
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
.nitro-login-view .news-sparkle-3 {
|
||||
bottom: -6px;
|
||||
right: 36px;
|
||||
font-size: 16px;
|
||||
animation: news-sparkle 2.7s ease-in-out infinite;
|
||||
animation-delay: 1.1s;
|
||||
}
|
||||
|
||||
/* Body */
|
||||
.nitro-login-card.nitro-news-card .card-body.news-body {
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: #0a2e45;
|
||||
}
|
||||
|
||||
.nitro-login-card.nitro-news-card .news-image {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid #3f6a85;
|
||||
border-radius: 4px;
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 255, 255, 0.15) 0 6px,
|
||||
rgba(255, 255, 255, 0) 6px 12px
|
||||
),
|
||||
linear-gradient(180deg, #cfe1ee 0%, #a8c5d6 100%);
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
inset 0 2px rgba(255, 255, 255, 0.6),
|
||||
inset 0 -2px rgba(0, 0, 0, 0.15);
|
||||
max-height: 150px;
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
|
||||
.nitro-login-card.nitro-news-card .news-image:hover {
|
||||
transform: translateY(-1px) scale(1.01);
|
||||
}
|
||||
|
||||
.nitro-login-card.nitro-news-card .news-image::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 35%);
|
||||
}
|
||||
|
||||
.nitro-login-card.nitro-news-card .news-image img {
|
||||
max-width: 100%;
|
||||
max-height: 146px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: block;
|
||||
image-rendering: pixelated;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.nitro-login-card.nitro-news-card .news-headline {
|
||||
font-weight: 800;
|
||||
font-size: 13px;
|
||||
line-height: 1.25;
|
||||
color: #0a2e45;
|
||||
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
|
||||
letter-spacing: 0.2px;
|
||||
border-bottom: 1px dashed rgba(63, 106, 133, 0.4);
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.nitro-login-card.nitro-news-card .news-text {
|
||||
font-size: 11px;
|
||||
line-height: 1.45;
|
||||
color: #103e5d;
|
||||
white-space: pre-line;
|
||||
word-break: break-word;
|
||||
max-height: 120px;
|
||||
overflow-y: auto;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.nitro-login-card.nitro-news-card .news-text::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.nitro-login-card.nitro-news-card .news-text::-webkit-scrollbar-thumb {
|
||||
background: rgba(63, 106, 133, 0.6);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.nitro-login-card.nitro-news-card .news-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.nitro-login-card.nitro-news-card .news-link-button {
|
||||
padding: 4px 14px;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(180deg, #ffe27a 0%, #ffc742 60%, #f0a812 100%);
|
||||
color: #5a3a00;
|
||||
border: 1px solid #8a5a00;
|
||||
text-shadow: 0 1px rgba(255, 255, 255, 0.45);
|
||||
box-shadow:
|
||||
inset 0 1px rgba(255, 255, 255, 0.7),
|
||||
inset 0 -1px rgba(0, 0, 0, 0.15),
|
||||
0 2px 0 rgba(0, 0, 0, 0.2);
|
||||
transition: transform 0.12s ease, box-shadow 0.12s ease;
|
||||
}
|
||||
|
||||
.nitro-login-card.nitro-news-card .news-link-button:hover {
|
||||
background: linear-gradient(180deg, #fff0a8 0%, #ffd45c 60%, #f7b822 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow:
|
||||
inset 0 1px rgba(255, 255, 255, 0.8),
|
||||
inset 0 -1px rgba(0, 0, 0, 0.15),
|
||||
0 3px 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.nitro-login-card.nitro-news-card .news-link-button:active {
|
||||
transform: translateY(1px);
|
||||
box-shadow:
|
||||
inset 0 1px rgba(0, 0, 0, 0.15),
|
||||
0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.nitro-login-card.nitro-news-card .news-pager {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.nitro-login-card.nitro-news-card .news-pager .arrow-btn {
|
||||
transition: transform 0.12s ease;
|
||||
}
|
||||
|
||||
.nitro-login-card.nitro-news-card .news-pager .arrow-btn:hover {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
.nitro-login-card.nitro-news-card .news-counter {
|
||||
font-size: 11px;
|
||||
color: #134b6e;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
min-width: 28px;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
@keyframes news-pop-in {
|
||||
0% { opacity: 0; transform: scale(0.85) translateY(8px); }
|
||||
60% { opacity: 1; transform: scale(1.04) translateY(0); }
|
||||
100% { opacity: 1; transform: scale(1) translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes news-glow {
|
||||
0%, 100% { box-shadow:
|
||||
inset 0 2px rgba(255, 255, 255, 0.5),
|
||||
inset 0 -2px rgba(0, 0, 0, 0.12),
|
||||
0 6px 14px rgba(0, 0, 0, 0.35),
|
||||
0 0 0 0 rgba(255, 210, 60, 0.0); }
|
||||
50% { box-shadow:
|
||||
inset 0 2px rgba(255, 255, 255, 0.5),
|
||||
inset 0 -2px rgba(0, 0, 0, 0.12),
|
||||
0 6px 14px rgba(0, 0, 0, 0.35),
|
||||
0 0 18px 4px rgba(255, 210, 60, 0.45); }
|
||||
}
|
||||
|
||||
@keyframes news-ribbon-wobble {
|
||||
0%, 100% { transform: rotate(0deg) translateY(0); }
|
||||
25% { transform: rotate(-1.2deg) translateY(-1px); }
|
||||
75% { transform: rotate(1.2deg) translateY(1px); }
|
||||
}
|
||||
|
||||
@keyframes news-badge-spin {
|
||||
0%, 100% { transform: rotate(-8deg) scale(1); }
|
||||
50% { transform: rotate(8deg) scale(1.08); }
|
||||
}
|
||||
|
||||
@keyframes news-sparkle {
|
||||
0%, 100% { opacity: 0.2; transform: scale(0.7) rotate(0deg); }
|
||||
50% { opacity: 1; transform: scale(1.2) rotate(20deg); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.nitro-login-view .news-card-wrapper,
|
||||
.nitro-login-view .news-card-wrapper > .nitro-login-card.nitro-news-card,
|
||||
.nitro-login-view .news-new-badge,
|
||||
.nitro-login-view .news-sparkle,
|
||||
.nitro-login-card.nitro-news-card .news-ribbon-text {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.nitro-login-view .login-news-stack {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Cloud intro (plays once per session) ─── */
|
||||
|
||||
.login-intro-clouds {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
animation: cloud-overlay-fade 2.8s linear forwards;
|
||||
}
|
||||
|
||||
.intro-cloud-bank {
|
||||
position: absolute;
|
||||
left: -10%;
|
||||
width: 120%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.intro-cloud-bank-top {
|
||||
top: -70%;
|
||||
animation: cloud-bank-top 2.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
|
||||
}
|
||||
|
||||
.intro-cloud-bank-bottom {
|
||||
bottom: -70%;
|
||||
animation: cloud-bank-bottom 2.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
|
||||
}
|
||||
|
||||
.intro-cloud-puff {
|
||||
flex-shrink: 0;
|
||||
background:
|
||||
radial-gradient(ellipse at 45% 38%, #ffffff 0%, #fbfdff 35%, rgba(247, 251, 255, 0.85) 60%, rgba(255, 255, 255, 0) 78%);
|
||||
filter: drop-shadow(0 8px 14px rgba(140, 175, 205, 0.35));
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.intro-cloud-bank-top .intro-cloud-puff {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.intro-cloud-bank-bottom .intro-cloud-puff {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.intro-cloud-puff-1 { width: 360px; height: 320px; transform: translateY(-10px); }
|
||||
.intro-cloud-puff-2 { width: 260px; height: 240px; transform: translateY(20px); }
|
||||
.intro-cloud-puff-3 { width: 420px; height: 380px; transform: translateY(-30px); }
|
||||
.intro-cloud-puff-4 { width: 300px; height: 280px; transform: translateY(15px); }
|
||||
.intro-cloud-puff-5 { width: 340px; height: 300px; transform: translateY(-5px); }
|
||||
|
||||
@keyframes cloud-bank-top {
|
||||
0% { transform: translateY(0); }
|
||||
35% { transform: translateY(105%); }
|
||||
55% { transform: translateY(105%); }
|
||||
100% { transform: translateY(-10%); }
|
||||
}
|
||||
|
||||
@keyframes cloud-bank-bottom {
|
||||
0% { transform: translateY(0); }
|
||||
35% { transform: translateY(-105%); }
|
||||
55% { transform: translateY(-105%); }
|
||||
100% { transform: translateY(10%); }
|
||||
}
|
||||
|
||||
@keyframes cloud-overlay-fade {
|
||||
0%, 88% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.login-intro-clouds,
|
||||
.intro-cloud-bank-top,
|
||||
.intro-cloud-bank-bottom {
|
||||
animation-duration: 0.4s !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,19 +10,54 @@ type Props<T> = {
|
||||
overscan?: number;
|
||||
estimateSize?: number;
|
||||
squareItems?: boolean;
|
||||
itemMinWidth?: number;
|
||||
rowGap?: number;
|
||||
itemRender?: (item: T, index?: number) => ReactElement;
|
||||
}
|
||||
|
||||
const GRID_GAP_PX = 4;
|
||||
|
||||
const InfiniteGridRoot = <T,>(props: Props<T>) =>
|
||||
{
|
||||
const { items = [], columnCount = 4, overscan = 5, estimateSize = 45, squareItems = false, itemRender = null } = props;
|
||||
const { items = [], columnCount: columnCountProp = 4, overscan = 5, estimateSize = 45, squareItems = false, itemMinWidth = null, rowGap = null, itemRender = null } = props;
|
||||
const parentRef = useRef<HTMLDivElement>(null);
|
||||
const [ measuredColumnCount, setMeasuredColumnCount ] = useState<number>(columnCountProp);
|
||||
|
||||
const columnCount = (itemMinWidth && itemMinWidth > 0) ? measuredColumnCount : columnCountProp;
|
||||
const rowsContainerClassName = (rowGap !== null) ? 'flex flex-col w-full relative' : 'flex flex-col w-full *:pb-1 relative';
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!itemMinWidth || itemMinWidth <= 0) return;
|
||||
|
||||
const element = parentRef.current;
|
||||
if(!element) return;
|
||||
|
||||
const recompute = () =>
|
||||
{
|
||||
const width = element.clientWidth;
|
||||
const cols = Math.max(1, Math.floor((width + GRID_GAP_PX) / (itemMinWidth + GRID_GAP_PX)));
|
||||
setMeasuredColumnCount(prev => prev === cols ? prev : cols);
|
||||
};
|
||||
|
||||
recompute();
|
||||
|
||||
const observer = new ResizeObserver(recompute);
|
||||
observer.observe(element);
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, [ itemMinWidth ]);
|
||||
|
||||
const autoFillStyle = (itemMinWidth && itemMinWidth > 0)
|
||||
? { gridTemplateColumns: `repeat(auto-fill, ${ itemMinWidth }px)` }
|
||||
: null;
|
||||
const fixedColsClass = (itemMinWidth && itemMinWidth > 0) ? '' : `grid-cols-${ columnCountProp }`;
|
||||
|
||||
if(squareItems)
|
||||
{
|
||||
return (
|
||||
<div ref={ parentRef } className="overflow-y-auto size-full">
|
||||
<div className={ `grid grid-cols-${ columnCount } gap-1 w-full` }>
|
||||
<div className={ `grid ${ fixedColsClass } gap-1 w-full` } style={ autoFillStyle ?? undefined }>
|
||||
{ items.map((item, index) =>
|
||||
{
|
||||
if(!item) return <Fragment key={ `${ index }-empty` } />;
|
||||
@@ -78,7 +113,7 @@ const InfiniteGridRoot = <T,>(props: Props<T>) =>
|
||||
ref={ parentRef }
|
||||
className="overflow-y-auto size-full">
|
||||
<div
|
||||
className="flex flex-col w-full *:pb-1 relative"
|
||||
className={ rowsContainerClassName }
|
||||
style={ {
|
||||
height: virtualizer.getTotalSize()
|
||||
} }>
|
||||
@@ -86,10 +121,12 @@ const InfiniteGridRoot = <T,>(props: Props<T>) =>
|
||||
<div
|
||||
key={ virtualRow.key + 'a' }
|
||||
ref={ virtualizer.measureElement }
|
||||
className={ `grid grid-cols-${ columnCount } gap-1 absolute top-0 left-0 last:pb-0 w-full` }
|
||||
className={ `grid ${ fixedColsClass } gap-1 absolute top-0 left-0 last:pb-0 w-full` }
|
||||
data-index={ virtualRow.index }
|
||||
style={ {
|
||||
...(!squareItems && { height: virtualRow.size }),
|
||||
...(!squareItems && rowGap === null && { height: virtualRow.size }),
|
||||
...(autoFillStyle ?? {}),
|
||||
...(rowGap !== null && { paddingBottom: `${ rowGap }px` }),
|
||||
transform: `translateY(${ virtualRow.start }px)`
|
||||
} }>
|
||||
{ Array.from(Array(columnCount)).map((e, i) =>
|
||||
|
||||
Reference in New Issue
Block a user