├── .gitignore ├── .prettierrc ├── README.md ├── index.html ├── package.json ├── public ├── fonts │ ├── OpenSans │ │ ├── OpenSans-Bold.ttf │ │ ├── OpenSans-BoldItalic.ttf │ │ ├── OpenSans-ExtraBold.ttf │ │ ├── OpenSans-ExtraBoldItalic.ttf │ │ ├── OpenSans-Italic.ttf │ │ ├── OpenSans-Light.ttf │ │ ├── OpenSans-LightItalic.ttf │ │ ├── OpenSans-Medium.ttf │ │ ├── OpenSans-MediumItalic.ttf │ │ ├── OpenSans-Regular.ttf │ │ ├── OpenSans-SemiBold.ttf │ │ └── OpenSans-SemiBoldItalic.ttf │ ├── shicon.svg │ ├── shicon.ttf │ └── shicon.woff └── vite.svg ├── src ├── App.svelte ├── Packet.svelte ├── global.css ├── main.ts └── types.ts ├── svelte.config.js ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "bracketSpacing": true, 3 | "singleQuote": false, 4 | "semi": true 5 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Packet Visualizer 2 | Visualize packets in an already familiar way.\ 3 | Uses **Vite** + **Svelte** + **TypeScript**. 4 | 5 | ## Based on [Crepe-Inc/Iridium](https://github.com/Crepe-Inc/Iridium). 6 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Packet Visualizer 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "packet-visualizer", 3 | "description": "Visualize packets with a familiar UI.", 4 | "version": "1.1.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview", 10 | "check": "svelte-check --tsconfig ./tsconfig.json" 11 | }, 12 | "devDependencies": { 13 | "@types/node": "^18.11.9", 14 | "vite-plugin-compression": "^0.5.1", 15 | "vite-plugin-singlefile": "^0.13.5", 16 | "@sveltejs/vite-plugin-svelte": "^1.1.0", 17 | "@tsconfig/svelte": "^3.0.0", 18 | "json-bigint": "^1.0.0", 19 | "prettier": "^2.7.1", 20 | "sirv-cli": "^2.0.0", 21 | "svelte": "^3.52.0", 22 | "svelte-check": "^2.9.2", 23 | "svelte-jsoneditor": "^0.3.58", 24 | "svelte-preprocess": "^4.10.7", 25 | "svelte-virtual-list-ce": "^3.1.0-beta.2", 26 | "tslib": "^2.4.0", 27 | "typescript": "^4.6.4", 28 | "vite": "5.2.6" 29 | }, 30 | "dependencies": { 31 | "svelte-highlight": "^6.2.1" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /public/fonts/OpenSans/OpenSans-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KingRainbow44/Packet-Visualizer/61eb92bba23132c47956005a7c1e1c508040a933/public/fonts/OpenSans/OpenSans-Bold.ttf -------------------------------------------------------------------------------- /public/fonts/OpenSans/OpenSans-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KingRainbow44/Packet-Visualizer/61eb92bba23132c47956005a7c1e1c508040a933/public/fonts/OpenSans/OpenSans-BoldItalic.ttf -------------------------------------------------------------------------------- /public/fonts/OpenSans/OpenSans-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KingRainbow44/Packet-Visualizer/61eb92bba23132c47956005a7c1e1c508040a933/public/fonts/OpenSans/OpenSans-ExtraBold.ttf -------------------------------------------------------------------------------- /public/fonts/OpenSans/OpenSans-ExtraBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KingRainbow44/Packet-Visualizer/61eb92bba23132c47956005a7c1e1c508040a933/public/fonts/OpenSans/OpenSans-ExtraBoldItalic.ttf -------------------------------------------------------------------------------- /public/fonts/OpenSans/OpenSans-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KingRainbow44/Packet-Visualizer/61eb92bba23132c47956005a7c1e1c508040a933/public/fonts/OpenSans/OpenSans-Italic.ttf -------------------------------------------------------------------------------- /public/fonts/OpenSans/OpenSans-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KingRainbow44/Packet-Visualizer/61eb92bba23132c47956005a7c1e1c508040a933/public/fonts/OpenSans/OpenSans-Light.ttf -------------------------------------------------------------------------------- /public/fonts/OpenSans/OpenSans-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KingRainbow44/Packet-Visualizer/61eb92bba23132c47956005a7c1e1c508040a933/public/fonts/OpenSans/OpenSans-LightItalic.ttf -------------------------------------------------------------------------------- /public/fonts/OpenSans/OpenSans-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KingRainbow44/Packet-Visualizer/61eb92bba23132c47956005a7c1e1c508040a933/public/fonts/OpenSans/OpenSans-Medium.ttf -------------------------------------------------------------------------------- /public/fonts/OpenSans/OpenSans-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KingRainbow44/Packet-Visualizer/61eb92bba23132c47956005a7c1e1c508040a933/public/fonts/OpenSans/OpenSans-MediumItalic.ttf -------------------------------------------------------------------------------- /public/fonts/OpenSans/OpenSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KingRainbow44/Packet-Visualizer/61eb92bba23132c47956005a7c1e1c508040a933/public/fonts/OpenSans/OpenSans-Regular.ttf -------------------------------------------------------------------------------- /public/fonts/OpenSans/OpenSans-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KingRainbow44/Packet-Visualizer/61eb92bba23132c47956005a7c1e1c508040a933/public/fonts/OpenSans/OpenSans-SemiBold.ttf -------------------------------------------------------------------------------- /public/fonts/OpenSans/OpenSans-SemiBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KingRainbow44/Packet-Visualizer/61eb92bba23132c47956005a7c1e1c508040a933/public/fonts/OpenSans/OpenSans-SemiBoldItalic.ttf -------------------------------------------------------------------------------- /public/fonts/shicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /public/fonts/shicon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KingRainbow44/Packet-Visualizer/61eb92bba23132c47956005a7c1e1c508040a933/public/fonts/shicon.ttf -------------------------------------------------------------------------------- /public/fonts/shicon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KingRainbow44/Packet-Visualizer/61eb92bba23132c47956005a7c1e1c508040a933/public/fonts/shicon.woff -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/App.svelte: -------------------------------------------------------------------------------- 1 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 378 | 379 |
380 |
381 |
382 | 383 |
orand = !orand} 386 | on:keypress={() => null} 387 | > 388 | AND 389 | OR 390 |
391 | 392 |
393 | 394 |
395 |
396 |
397 |
Time
398 |
#
399 |
Sender
400 |
ID
401 |
Packet Name
402 |
Length
403 |
Data
404 |
405 |
406 | 407 | { 412 | scrollToIndex?.(packet.index); 413 | showPacketDetails?.(packet); 414 | }} 415 | /> 416 | 417 |
418 |
419 |
420 | 421 |
422 |
423 |
424 |
Time
425 |
#
426 |
Sender
427 |
ID
428 |
Packet Name
429 |
Length
430 |
Data
431 |
432 |
433 | 434 | 435 | showPacketDetails(packet)} 440 | /> 441 | 442 |
443 |
444 |
445 |
446 | 447 |
448 | 449 |
450 | {#if currentPacket} 451 | {#if currentPacket.data} 452 |
453 | 458 |
459 | {/if} 460 | 461 | {#if currentPacket.decode && showDecode} 462 |
463 | 464 |
465 | {/if} 466 | {/if} 467 |
468 |
469 | 470 | 471 | 707 | -------------------------------------------------------------------------------- /src/Packet.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 |
17 |
{#if packet.time}{packet.time.toFixed(0)}{/if}
18 |
{idx + 1}
19 |
20 | {packet.source.toUpperCase()} 21 |
22 |
{packet.packetId}
23 |
{packet.packetName}
24 |
{packet.length}
25 |
26 | {packet.data} 27 |
28 |
29 | 30 | 31 | 88 | -------------------------------------------------------------------------------- /src/global.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap'); 2 | 3 | /* http://meyerweb.com/eric/tools/css/reset/ 4 | v2.0-modified | 20110126 5 | License: none (public domain) 6 | */ 7 | 8 | html, body, div, span, applet, object, iframe, 9 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 10 | a, abbr, acronym, address, big, cite, code, 11 | del, dfn, em, img, ins, kbd, q, s, samp, 12 | small, strike, strong, sub, sup, tt, var, 13 | b, u, i, center, 14 | dl, dt, dd, ol, ul, li, 15 | fieldset, form, label, legend, 16 | table, caption, tbody, tfoot, thead, tr, th, td, 17 | article, aside, canvas, details, embed, 18 | figure, figcaption, footer, header, hgroup, 19 | menu, nav, output, ruby, section, summary, 20 | time, mark, audio, video { 21 | margin: 0; 22 | padding: 0; 23 | border: 0; 24 | font-size: 100%; 25 | font: inherit; 26 | vertical-align: baseline; 27 | } 28 | 29 | /* make sure to set some focus styles for accessibility */ 30 | :focus { 31 | outline: 0; 32 | } 33 | 34 | /* HTML5 display-role reset for older browsers */ 35 | article, aside, details, figcaption, figure, 36 | footer, header, hgroup, menu, nav, section { 37 | display: block; 38 | } 39 | 40 | body { 41 | line-height: 1; 42 | } 43 | 44 | ol, ul { 45 | list-style: none; 46 | } 47 | 48 | blockquote, q { 49 | quotes: none; 50 | } 51 | 52 | blockquote:before, blockquote:after, 53 | q:before, q:after { 54 | content: ''; 55 | content: none; 56 | } 57 | 58 | table { 59 | border-collapse: collapse; 60 | border-spacing: 0; 61 | } 62 | 63 | input[type=search]::-webkit-search-cancel-button, 64 | input[type=search]::-webkit-search-decoration, 65 | input[type=search]::-webkit-search-results-button, 66 | input[type=search]::-webkit-search-results-decoration { 67 | -webkit-appearance: none; 68 | -moz-appearance: none; 69 | } 70 | 71 | input[type=search] { 72 | -webkit-appearance: none; 73 | -moz-appearance: none; 74 | -webkit-box-sizing: content-box; 75 | -moz-box-sizing: content-box; 76 | box-sizing: content-box; 77 | } 78 | 79 | textarea { 80 | overflow: auto; 81 | vertical-align: top; 82 | resize: vertical; 83 | } 84 | 85 | /** 86 | * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. 87 | */ 88 | 89 | audio, 90 | canvas, 91 | video { 92 | display: inline-block; 93 | *display: inline; 94 | *zoom: 1; 95 | max-width: 100%; 96 | } 97 | 98 | /** 99 | * Prevent modern browsers from displaying `audio` without controls. 100 | * Remove excess height in iOS 5 devices. 101 | */ 102 | 103 | audio:not([controls]) { 104 | display: none; 105 | height: 0; 106 | } 107 | 108 | /** 109 | * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. 110 | * Known issue: no IE 6 support. 111 | */ 112 | 113 | [hidden] { 114 | display: none; 115 | } 116 | 117 | /** 118 | * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using 119 | * `em` units. 120 | * 2. Prevent iOS text size adjust after orientation change, without disabling 121 | * user zoom. 122 | */ 123 | 124 | html { 125 | font-size: 100%;/* 1 */ 126 | -webkit-text-size-adjust: 100%;/* 2 */ 127 | -ms-text-size-adjust: 100%; /* 2 */ 128 | } 129 | 130 | /** 131 | * Address `outline` inconsistency between Chrome and other browsers. 132 | */ 133 | 134 | a:focus { 135 | outline: thin dotted; 136 | } 137 | 138 | /** 139 | * Improve readability when focused and also mouse hovered in all browsers. 140 | */ 141 | 142 | a:active, 143 | a:hover { 144 | outline: 0; 145 | } 146 | 147 | /** 148 | * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. 149 | * 2. Improve image quality when scaled in IE 7. 150 | */ 151 | 152 | img { 153 | border: 0; /* 1 */ 154 | -ms-interpolation-mode: bicubic; /* 2 */ 155 | } 156 | 157 | /** 158 | * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. 159 | */ 160 | 161 | figure { 162 | margin: 0; 163 | } 164 | 165 | /** 166 | * Correct margin displayed oddly in IE 6/7. 167 | */ 168 | 169 | form { 170 | margin: 0; 171 | } 172 | 173 | /** 174 | * Define consistent border, margin, and padding. 175 | */ 176 | 177 | fieldset { 178 | border: 1px solid #c0c0c0; 179 | margin: 0 2px; 180 | padding: 0.35em 0.625em 0.75em; 181 | } 182 | 183 | /** 184 | * 1. Correct color not being inherited in IE 6/7/8/9. 185 | * 2. Correct text not wrapping in Firefox 3. 186 | * 3. Correct alignment displayed oddly in IE 6/7. 187 | */ 188 | 189 | legend { 190 | border: 0; /* 1 */ 191 | padding: 0; 192 | white-space: normal; /* 2 */ 193 | *margin-left: -7px; /* 3 */ 194 | } 195 | 196 | /** 197 | * 1. Correct font size not being inherited in all browsers. 198 | * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, 199 | * and Chrome. 200 | * 3. Improve appearance and consistency in all browsers. 201 | */ 202 | 203 | button, 204 | input, 205 | select, 206 | textarea { 207 | font-size: 100%; /* 1 */ 208 | margin: 0; /* 2 */ 209 | vertical-align: baseline; /* 3 */ 210 | *vertical-align: middle; /* 3 */ 211 | } 212 | 213 | /** 214 | * Address Firefox 3+ setting `line-height` on `input` using `!important` in 215 | * the UA stylesheet. 216 | */ 217 | 218 | button, 219 | input { 220 | line-height: normal; 221 | } 222 | 223 | /** 224 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 225 | * All other form control elements do not inherit `text-transform` values. 226 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. 227 | * Correct `select` style inheritance in Firefox 4+ and Opera. 228 | */ 229 | 230 | button, 231 | select { 232 | text-transform: none; 233 | } 234 | 235 | /** 236 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 237 | * and `video` controls. 238 | * 2. Correct inability to style clickable `input` types in iOS. 239 | * 3. Improve usability and consistency of cursor style between image-type 240 | * `input` and others. 241 | * 4. Remove inner spacing in IE 7 without affecting normal text inputs. 242 | * Known issue: inner spacing remains in IE 6. 243 | */ 244 | 245 | button, 246 | html input[type="button"], /* 1 */ 247 | input[type="reset"], 248 | input[type="submit"] { 249 | -webkit-appearance: button; /* 2 */ 250 | cursor: pointer; /* 3 */ 251 | *overflow: visible; /* 4 */ 252 | } 253 | 254 | /** 255 | * Re-set default cursor for disabled elements. 256 | */ 257 | 258 | button[disabled], 259 | html input[disabled] { 260 | cursor: default; 261 | } 262 | 263 | /** 264 | * 1. Address box sizing set to content-box in IE 8/9. 265 | * 2. Remove excess padding in IE 8/9. 266 | * 3. Remove excess padding in IE 7. 267 | * Known issue: excess padding remains in IE 6. 268 | */ 269 | 270 | input[type="checkbox"], 271 | input[type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | *height: 13px; /* 3 */ 275 | *width: 13px; /* 3 */ 276 | } 277 | 278 | /** 279 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 280 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 281 | * (include `-moz` to future-proof). 282 | */ 283 | 284 | input[type="search"] { 285 | -webkit-appearance: textfield; /* 1 */ 286 | -moz-box-sizing: content-box; 287 | -webkit-box-sizing: content-box; /* 2 */ 288 | box-sizing: content-box; 289 | } 290 | 291 | /** 292 | * Remove inner padding and search cancel button in Safari 5 and Chrome 293 | * on OS X. 294 | */ 295 | 296 | input[type="search"]::-webkit-search-cancel-button, 297 | input[type="search"]::-webkit-search-decoration { 298 | -webkit-appearance: none; 299 | } 300 | 301 | /** 302 | * Remove inner padding and border in Firefox 3+. 303 | */ 304 | 305 | button::-moz-focus-inner, 306 | input::-moz-focus-inner { 307 | border: 0; 308 | padding: 0; 309 | } 310 | 311 | /** 312 | * 1. Remove default vertical scrollbar in IE 6/7/8/9. 313 | * 2. Improve readability and alignment in all browsers. 314 | */ 315 | 316 | textarea { 317 | overflow: auto; /* 1 */ 318 | vertical-align: top; /* 2 */ 319 | } 320 | 321 | /** 322 | * Remove most spacing between table cells. 323 | */ 324 | 325 | table { 326 | border-collapse: collapse; 327 | border-spacing: 0; 328 | } 329 | 330 | html, 331 | button, 332 | input, 333 | select, 334 | textarea { 335 | color: #222; 336 | } 337 | 338 | 339 | ::-moz-selection { 340 | background: #b3d4fc; 341 | text-shadow: none; 342 | } 343 | 344 | ::selection { 345 | background: #b3d4fc; 346 | text-shadow: none; 347 | } 348 | 349 | img { 350 | vertical-align: middle; 351 | } 352 | 353 | fieldset { 354 | border: 0; 355 | margin: 0; 356 | padding: 0; 357 | } 358 | 359 | textarea { 360 | resize: vertical; 361 | } 362 | 363 | .chromeframe { 364 | margin: 0.2em 0; 365 | background: #ccc; 366 | color: #000; 367 | padding: 0.2em 0; 368 | } 369 | 370 | 371 | @font-face { 372 | font-family: 'shicon'; 373 | src: 374 | url('/fonts/shicon.ttf?kckii0') format('truetype'), 375 | url('/fonts/shicon.woff?kckii0') format('woff'), 376 | url('/fonts/shicon.svg?kckii0#shicon') format('svg'); 377 | font-weight: normal; 378 | font-style: normal; 379 | font-display: block; 380 | } 381 | 382 | [data-icon]:before { 383 | /* use !important to prevent issues with browser extensions that change fonts */ 384 | font-family: 'shicon' !important; 385 | speak: never; 386 | font-style: normal; 387 | font-weight: normal; 388 | font-variant: normal; 389 | text-transform: none; 390 | line-height: 1; 391 | 392 | /* Better Font Rendering =========== */ 393 | -webkit-font-smoothing: antialiased; 394 | -moz-osx-font-smoothing: grayscale; 395 | } 396 | 397 | [data-icon="network-off-outline"]:before{content:"\e924"} 398 | [data-icon="play-network-outline"]:before{content:"\e934"} 399 | [data-icon="open-in-app"]:before{content:"\e937"} 400 | [data-icon="card-off"]:before{content:"\e923"} 401 | [data-icon="sharios"]:before{content:"\e922"} 402 | [data-icon="image-off-1"]:before{content:"\e921"} 403 | [data-icon="language"]:before{content:"\e918"} 404 | [data-icon="twitter"]:before{content:"\e916"} 405 | [data-icon="discord"]:before{content:"\e917"} 406 | [data-icon="heart"]:before{content:"\e912"} 407 | [data-icon="help"]:before{content:"\e910"} 408 | [data-icon="numeric-3"]:before{content:"\e90e"} 409 | [data-icon="numeric-4"]:before{content:"\e90f"} 410 | [data-icon="arrow-all"]:before{content:"\e90a"} 411 | [data-icon="email-outline"]:before{content:"\e90b"} 412 | [data-icon="keyboard_arrow_down"]:before{content:"\e90c"} 413 | [data-icon="information-outline"]:before{content:"\e90d"} 414 | [data-icon="clear"]:before{content:"\e911"} 415 | [data-icon="keyboard_arrow_left"]:before{content:"\e913"} 416 | [data-icon="keyboard_arrow_right"]:before{content:"\e914"} 417 | [data-icon="keyboard_arrow_up"]:before{content:"\e915"} 418 | [data-icon="fullscreen"]:before{content:"\e91a"} 419 | [data-icon="unfold_more"]:before{content:"\e91b"} 420 | [data-icon="check_box"]:before{content:"\e91c"} 421 | [data-icon="check_box_outline_blank"]:before{content:"\e91d"} 422 | [data-icon="collections_bookmark"]:before{content:"\e925"} 423 | [data-icon="code"]:before{content:"\e926"} 424 | [data-icon="chat"]:before{content:"\e927"} 425 | [data-icon="link"]:before{content:"\e928"} 426 | [data-icon="launch"]:before{content:"\e929"} 427 | [data-icon="file"]:before{content:"\e92a"} 428 | [data-icon="crop_free"]:before{content:"\e92b"} 429 | [data-icon="crop_original"]:before{content:"\e92c"} 430 | [data-icon="zoom_out_map"]:before{content:"\e92d"} 431 | [data-icon="fullscreen_exit"]:before{content:"\e92e"} 432 | [data-icon="menu"]:before{content:"\e92f"} 433 | [data-icon="keyboard_control"]:before{content:"\e930"} 434 | [data-icon="more_vert"]:before{content:"\e931"} 435 | [data-icon="search"]:before{content:"\e932"} 436 | [data-icon="settings"]:before{content:"\e933"} 437 | [data-icon="insert_drive_file"]:before{content:"\e935"} 438 | [data-icon="file-image-outline"]:before{content:"\e936"} 439 | [data-icon="pan"]:before{content:"\e939"} 440 | [data-icon="image"]:before{content:"\e93b"} 441 | [data-icon="zoom-out"]:before{content:"\e93c"} 442 | [data-icon="zoom-in"]:before{content:"\e93d"} 443 | [data-icon="cogs"]:before{content:"\e93e"} 444 | [data-icon="view-grid-plus"]:before{content:"\e93f"} 445 | [data-icon="palette"]:before{content:"\e941"} 446 | [data-icon="download"]:before{content:"\e942"} 447 | [data-icon="check"]:before{content:"\e943"} 448 | [data-icon="home"]:before{content:"\e944"} 449 | [data-icon="loading"]:before{content:"\e97c"} 450 | [data-icon="layout-gid"]:before{content:"\e91f"} 451 | [data-icon="layout-wide"]:before{content:"\e919"} 452 | [data-icon="layout-mid"]:before{content:"\e91e"} 453 | [data-icon="shinshin"]:before{content:"\e920"} 454 | [data-icon="art0"]:before{content:"\e900"} 455 | [data-icon="art1"]:before{content:"\e901"} 456 | [data-icon="art2"]:before{content:"\e902"} 457 | [data-icon="art3"]:before{content:"\e903"} 458 | [data-icon="art4"]:before{content:"\e904"} 459 | [data-icon="weapon"]:before{content:"\e905"} 460 | [data-icon="const"]:before{content:"\e906"} 461 | [data-icon="table"]:before{content:"\e907"} 462 | [data-icon="talent"]:before{content:"\e908"} 463 | [data-icon="info"]:before{content:"\e909"} 464 | 465 | 466 | body { 467 | font-family: 'Open Sans', sans-serif; 468 | background: #333; 469 | display: flex; 470 | min-height: 100vh; 471 | max-height: 100vh; 472 | max-width: 100vw; 473 | align-items: stretch; 474 | justify-content: stretch; 475 | color: white; 476 | } 477 | 478 | button { 479 | background: #4360A2; 480 | border: 0; 481 | border-bottom: 2px solid rgba(0,0,0,0.4); 482 | padding: 0.3em 0.4em; 483 | color: inherit; 484 | 485 | } 486 | 487 | button:hover { 488 | filter: brightness(1.5) 489 | } 490 | 491 | .green { 492 | background: green; 493 | } 494 | .red { 495 | background: darkred; 496 | } 497 | 498 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import App from "./App.svelte"; 2 | 3 | const app = new App({ 4 | target: document.body, 5 | props: { 6 | name: "world", 7 | }, 8 | }); 9 | 10 | export default app; 11 | -------------------------------------------------------------------------------- /src/types.ts: -------------------------------------------------------------------------------- 1 | export type Packet = { 2 | time: number; 3 | source: "client" | "server"; 4 | packetId: number; 5 | packetName: string; 6 | length: number; 7 | data: any | object; 8 | 9 | index?: number; 10 | decode?: boolean; 11 | binary?: string; // Base64-encoded raw packet data. 12 | }; 13 | -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | import sveltePreprocess from 'svelte-preprocess' 2 | 3 | export default { 4 | // Consult https://github.com/sveltejs/svelte-preprocess 5 | // for more information about preprocessors 6 | preprocess: sveltePreprocess() 7 | } 8 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "compilerOptions": { 4 | "target": "ESNext", 5 | "useDefineForClassFields": true, 6 | "module": "ESNext", 7 | "resolveJsonModule": true, 8 | /** 9 | * Typecheck JS in `.svelte` and `.js` files by default. 10 | * Disable checkJs if you'd like to use dynamic types in JS. 11 | * Note that setting allowJs false does not prevent the use 12 | * of JS in `.svelte` files. 13 | */ 14 | "allowJs": true, 15 | "checkJs": true, 16 | "isolatedModules": true 17 | }, 18 | "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], 19 | "references": [{ "path": "./tsconfig.node.json" }] 20 | } 21 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node" 6 | }, 7 | "include": ["vite.config.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import { svelte } from '@sveltejs/vite-plugin-svelte'; 3 | import viteCompression from 'vite-plugin-compression'; 4 | import { viteSingleFile } from 'vite-plugin-singlefile'; 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig({ 8 | plugins: [svelte(), viteCompression(), viteSingleFile()] 9 | }) 10 | --------------------------------------------------------------------------------