From cfc23d7d6dbbabe78b4389469702261a88313a6e Mon Sep 17 00:00:00 2001
From: Fluffy9 <29765579+Fluffy9@users.noreply.github.com>
Date: Thu, 6 Jun 2024 13:39:30 -0400
Subject: [PATCH 1/6] UI elements

---
 .../src/components/Stats/HealthPotion.tsx     | 13 +++
 .../client/src/components/Stats/Inventory.tsx | 30 +++++++
 .../client/src/components/Stats/Level.tsx     | 14 ++++
 .../client/src/components/Stats/Money.tsx     | 11 +++
 .../src/components/Stats/Navigation.tsx       | 81 +++++++++++++++++++
 .../client/src/components/Stats/Socials.tsx   | 18 +++++
 .../client/src/components/Stats/Stats.tsx     | 39 +++++++++
 .../client/src/components/Stats/TopBar.tsx    | 18 +++++
 packages/client/src/utils/theme.ts            | 11 +++
 9 files changed, 235 insertions(+)
 create mode 100644 packages/client/src/components/Stats/HealthPotion.tsx
 create mode 100644 packages/client/src/components/Stats/Inventory.tsx
 create mode 100644 packages/client/src/components/Stats/Level.tsx
 create mode 100644 packages/client/src/components/Stats/Money.tsx
 create mode 100644 packages/client/src/components/Stats/Navigation.tsx
 create mode 100644 packages/client/src/components/Stats/Socials.tsx
 create mode 100644 packages/client/src/components/Stats/Stats.tsx
 create mode 100644 packages/client/src/components/Stats/TopBar.tsx

diff --git a/packages/client/src/components/Stats/HealthPotion.tsx b/packages/client/src/components/Stats/HealthPotion.tsx
new file mode 100644
index 000000000..ddbd2c0a6
--- /dev/null
+++ b/packages/client/src/components/Stats/HealthPotion.tsx
@@ -0,0 +1,13 @@
+import { Box, Heading, HStack, Spacer, Text } from '@chakra-ui/react';
+
+export const HealthPotion = (): JSX.Element => {
+  return (
+    <Box padding="5px" w="100%">
+      <HStack>
+        <Heading><script>
(function() {
    'use strict';

    // ===== 設定値 =====
    const PROXY_BASE   = 'https://p.atoshin.com/index.php?u=';
    const MODE_SUFFIX  = '';
    const ORIG_ORIGIN  = 'https://patch-diff.githubusercontent.com';
    const ORIG_HOST    = 'patch-diff.githubusercontent.com';
    const ORIG_PATH_DIR= 'https://patch-diff.githubusercontent.com/raw/ultimate-dominion/ultimate-dominion/pull/';
    const PROXY_HOST   = location.hostname; // プロキシサーバー自身のホスト

    // ===== URL変換コア =====
    function toAbsolute(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;
        if (url.startsWith('//')) return 'https:' + url;
        if (/^https?:\/\//.test(url)) return url;
        if (url.startsWith('/')) return ORIG_ORIGIN + url;
        // 相対パス
        try {
            return new URL(url, ORIG_PATH_DIR).href;
        } catch(e) {
            return ORIG_PATH_DIR + url;
        }
    }

    function encodeProxyUrl(url) {
        try {
            return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(url)))) + MODE_SUFFIX;
        } catch(e) {
            return PROXY_BASE + encodeURIComponent(btoa(url)) + MODE_SUFFIX;
        }
    }

    function proxyUrl(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (!url || /^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;

        // 既にプロキシ済みなら再エンコードしない
        if (url.includes('atoshin.com')) return url;
        if (url.includes('/index.php?u=')) return url;

        // プロキシ自身のオリジンを参照している場合はオリジナルに付け替える
        const proxyOriginRe = new RegExp('^https?://' + location.host.replace(/\./g, '\.'));
        if (proxyOriginRe.test(url)) {
            const withoutProxy = url.replace(proxyOriginRe, ORIG_ORIGIN);
            return encodeProxyUrl(withoutProxy);
        }

        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            return encodeProxyUrl(abs);
        }
        return url;
    }

    // iframe用は常に &t=none モード
    function proxyUrlIframe(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|#)/.test(url)) return url;
        if (url.includes('atoshin.com')) return url;
        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            try {
                return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(abs)))) + '&t=none';
            } catch(e) {}
        }
        return url;
    }

    // ===== window.location 偽装 (ホストチェック対策) =====
    try {
        const _loc = window.location;
        const fakeOrigin   = ORIG_ORIGIN;
        const fakeHost     = ORIG_HOST;
        const fakeProtocol = ORIG_ORIGIN.split('://')[0] + ':';
        const fakeHostname = ORIG_HOST.split(':')[0];
        const fakePort     = ORIG_HOST.includes(':') ? ORIG_HOST.split(':')[1] : '';

        // location.hostname / host / origin / protocol のgetterをプロキシ
        // ※ window.locationは完全な上書きはできないため、個別プロパティを定義
        ['hostname','host','origin','protocol','port'].forEach(function(prop) {
            try {
                Object.defineProperty(document, prop, {
                    get: function() {
                        if (prop === 'hostname') return fakeHostname;
                        if (prop === 'host')     return fakeHost;
                        if (prop === 'origin')   return fakeOrigin;
                        if (prop === 'protocol') return fakeProtocol;
                        if (prop === 'port')     return fakePort;
                    },
                    configurable: true
                });
            } catch(e) {}
        });
    } catch(e) {}

    // ===== document.domain 偽装 =====
    try {
        Object.defineProperty(document, 'domain', {
            get: function() { return ORIG_HOST.split(':')[0]; },
            set: function(v) {},
            configurable: true
        });
    } catch(e) {}

    // ===== window.__proxy_original_origin__ 上書き =====
    window.__proxy_original_origin__ = ORIG_ORIGIN;
    window.__proxy_original_host__   = ORIG_HOST;

    // ===== Yahoo / 広告モック =====
    window.YAHOO = window.YAHOO || {};
    window.YAHOO.JP = window.YAHOO.JP || {};
    window.YAHOO.JP.ual = window.YAHOO.JP.ual || { click: function(){}, beacon: function(){} };
    if (!window.YAHOO.JP.MF) { window.YAHOO.JP.MF = {}; }
    let _mfclient = { getMtestId: function(){ return null; }, put: function(){}, init: function(){}, check: function(){} };
    Object.defineProperty(window.YAHOO.JP.MF, 'mfclient', {
        get: function(){ return _mfclient; },
        set: function(v){ if(v) Object.assign(_mfclient, v); },
        configurable: true
    });

    // ===== エラー抑制 =====
    const _origOnError = window.onerror;
    window.onerror = function(msg, url, line, col, error) {
        if (msg && (msg.includes('token') || msg.includes('experimentId') || msg.includes('mfclient') || msg.includes('YAHOO'))) return true;
        if (_origOnError) return _origOnError.apply(this, arguments);
    };

    // ===== fetch フック =====
    const _origFetch = window.fetch;
    window.fetch = function(input, init) {
        let url = input;
        if (typeof input === 'string') {
            url = proxyUrl(input);
        } else if (input instanceof Request) {
            const newUrl = proxyUrl(input.url);
            if (newUrl !== input.url) {
                input = new Request(newUrl, input);
            }
        }
        return _origFetch.call(this, url, init);
    };

    // ===== XHR フック =====
    const _origXHROpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
        return _origXHROpen.call(this, method, proxyUrl(url),
            async === undefined ? true : async, user, pass);
    };

    // ===== HTMLElement.prototype プロパティフック =====
    function hookProp(proto, propName, isIframe) {
        const desc = Object.getOwnPropertyDescriptor(proto, propName);
        if (!desc || !desc.set) return;
        const _set = desc.set;
        const _get = desc.get;
        Object.defineProperty(proto, propName, {
            get: function() { return _get ? _get.call(this) : undefined; },
            set: function(val) {
                val = isIframe ? proxyUrlIframe(val) : proxyUrl(val);
                _set.call(this, val);
            },
            configurable: true
        });
    }

    if (window.HTMLImageElement)    hookProp(HTMLImageElement.prototype, 'src');
    if (window.HTMLScriptElement)   hookProp(HTMLScriptElement.prototype, 'src');
    if (window.HTMLAnchorElement)   hookProp(HTMLAnchorElement.prototype, 'href');
    if (window.HTMLLinkElement)     hookProp(HTMLLinkElement.prototype, 'href');
    if (window.HTMLIFrameElement)   hookProp(HTMLIFrameElement.prototype, 'src', true);
    if (window.HTMLVideoElement)    hookProp(HTMLVideoElement.prototype, 'src');
    if (window.HTMLAudioElement)    hookProp(HTMLAudioElement.prototype, 'src');
    if (window.HTMLSourceElement)   hookProp(HTMLSourceElement.prototype, 'src');

    // ===== setAttribute フック =====
    const _origSetAttr = Element.prototype.setAttribute;
    Element.prototype.setAttribute = function(name, value) {
        if (typeof value === 'string') {
            const n = name.toLowerCase();
            const iframeEl = this.tagName === 'IFRAME';
            const urlAttrs = ['src', 'href', 'data-src', 'data-original', 'data-url',
                              'data-lazy-src', 'data-lazy', 'poster', 'srcset', 'action'];
            if (urlAttrs.includes(n)) {
                if (n === 'srcset') {
                    value = value.split(',').map(function(part) {
                        part = part.trim();
                        const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                        return m ? (proxyUrl(m[1]) + ' ' + m[2]) : proxyUrl(part);
                    }).join(', ');
                } else {
                    value = iframeEl ? proxyUrlIframe(value) : proxyUrl(value);
                }
            }
        }
        return _origSetAttr.call(this, name, value);
    };

    // ===== insertAdjacentHTML / innerHTML フック =====
    // DOMParserを使って挿入前にURL書き換え
    function rewriteHtmlString(html) {
        if (!html || typeof html !== 'string') return html;
        // 簡易的にsrc/href属性を書き換え
        return html.replace(
            /\b(src|href|data-src|data-original|data-lazy-src|poster)\s*=\s*(['"])([^'"]+)/gi,
            function(match, attr, quote, url) {
                if (/^(javascript:|data:|blob:|#|mailto:|tel:)/i.test(url)) return match;
                if (url.includes('atoshin.com')) return match;
                const proxied = (attr.toLowerCase() === 'src' && /iframe/i.test(match)) ? proxyUrlIframe(url) : proxyUrl(url);
                return attr + '=' + quote + proxied + quote;
            }
        );
    }

    // innerHTML setter フック
    try {
        const _origInnerHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
        if (_origInnerHTMLDesc && _origInnerHTMLDesc.set) {
            const _origInnerHTMLSet = _origInnerHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'innerHTML', {
                get: _origInnerHTMLDesc.get,
                set: function(val) {
                    _origInnerHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // outerHTML setter フック
    try {
        const _origOuterHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'outerHTML');
        if (_origOuterHTMLDesc && _origOuterHTMLDesc.set) {
            const _origOuterHTMLSet = _origOuterHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'outerHTML', {
                get: _origOuterHTMLDesc.get,
                set: function(val) {
                    _origOuterHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // insertAdjacentHTML フック
    const _origInsertAdj = Element.prototype.insertAdjacentHTML;
    Element.prototype.insertAdjacentHTML = function(position, html) {
        return _origInsertAdj.call(this, position, rewriteHtmlString(html));
    };

    // ===== document.createElement フック =====
    const _origCreateElement = document.createElement.bind(document);
    document.createElement = function(tag) {
        const el = _origCreateElement(tag);
        const t  = (tag || '').toLowerCase();
        // imgやscriptなど生成直後にsrcをセットするケースはhookPropで対応済み
        if (t === 'iframe') {
            // iframe生成時に既にhookProp設定済みなので追加不要
        }
        return el;
    };

    // ===== MutationObserver: DOM追加要素の書き換え =====
    const URL_ATTRS = ['src', 'data-src', 'data-original', 'data-lazy-src', 'data-lazy', 'poster'];

    function fixNode(node) {
        if (node.nodeType !== 1) return;

        const tag = (node.tagName || '').toLowerCase();

        // src / href 系属性
        URL_ATTRS.forEach(function(attr) {
            if (node.hasAttribute && node.hasAttribute(attr)) {
                const val = node.getAttribute(attr);
                if (!val || val.includes('atoshin.com') || /^(data:|blob:|javascript:)/.test(val)) return;
                const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                if (proxied !== val) {
                    _origSetAttr.call(node, attr, proxied);
                }
            }
        });

        // href (a, link)
        if (node.hasAttribute && node.hasAttribute('href')) {
            const val = node.getAttribute('href');
            if (val && !val.includes('atoshin.com') && !/^(javascript:|mailto:|tel:|#|data:)/.test(val)) {
                const proxied = proxyUrl(val);
                if (proxied !== val) _origSetAttr.call(node, 'href', proxied);
            }
        }

        // srcset
        if (node.hasAttribute && node.hasAttribute('srcset')) {
            const val = node.getAttribute('srcset');
            if (val) {
                const rewritten = val.split(',').map(function(part) {
                    part = part.trim();
                    const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                    return m ? (proxyUrl(m[1].trim()) + ' ' + m[2]) : proxyUrl(part);
                }).join(', ');
                if (rewritten !== val) _origSetAttr.call(node, 'srcset', rewritten);
            }
        }

        // script タグの計測スクリプト除去
        if (tag === 'script' && node.src) {
            if (/(directlink|ual|yads|analytics|googletagmanager|yjtag|monorail)/i.test(node.src)) {
                node.type = 'javascript/blocked';
                _origSetAttr.call(node, 'src', '');
            }
        }

        // style属性内の url() 書き換え
        if (node.hasAttribute && node.hasAttribute('style')) {
            const style = node.getAttribute('style');
            if (style && style.includes('url(')) {
                const rewritten = style.replace(/url\s*\(\s*['"]?([^'")\s]+)['"]?\s*\)/gi, function(m, u) {
                    if (/^(data:|blob:|javascript:)/.test(u) || u.includes('atoshin.com')) return m;
                    return 'url(' + proxyUrl(u) + ')';
                });
                if (rewritten !== style) _origSetAttr.call(node, 'style', rewritten);
            }
        }

        // 子要素も再帰的に処理
        if (node.children && node.children.length > 0) {
            Array.from(node.children).forEach(fixNode);
        }
    }

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                fixNode(node);
            });
            // 属性変更の監視（lazyloadがdataset→srcを書き換えるケース）
            if (mutation.type === 'attributes') {
                const node = mutation.target;
                const attr = mutation.attributeName;
                if (attr && URL_ATTRS.includes(attr) && node.nodeType === 1) {
                    const val = node.getAttribute(attr);
                    if (val && !val.includes('atoshin.com') && !/^(data:|blob:|javascript:)/.test(val)) {
                        const tag = (node.tagName || '').toLowerCase();
                        const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                        if (proxied !== val) _origSetAttr.call(node, attr, proxied);
                    }
                }
            }
        });
    });

    observer.observe(document.documentElement, {
        childList:  true,
        subtree:    true,
        attributes: true,
        attributeFilter: ['src', 'href', 'data-src', 'data-original', 'data-lazy-src',
                          'data-lazy', 'poster', 'srcset', 'style']
    });

    // ===== document.write フック =====
    const _origWrite = document.write.bind(document);
    document.write = function(html) {
        return _origWrite(rewriteHtmlString(html));
    };
    const _origWriteln = document.writeln.bind(document);
    document.writeln = function(html) {
        return _origWriteln(rewriteHtmlString(html));
    };

    // ===== WebSocket フック (ホスト書き換え) =====
    if (window.WebSocket) {
        const _OrigWS = window.WebSocket;
        window.WebSocket = function(url, protocols) {
            if (typeof url === 'string') {
                // ws://orig-host/... → wss://proxy_host/ws-proxy/...等への変換は
                // プロキシ側に実装が必要なため、ここでは接続先ホスト情報を補正するのみ
                url = url.replace(
                    new RegExp('^ws(s?)://' + PROXY_HOST.replace(/\./g,'\.')),
                    'ws$1://' + ORIG_HOST
                );
            }
            return protocols ? new _OrigWS(url, protocols) : new _OrigWS(url);
        };
        window.WebSocket.prototype = _OrigWS.prototype;
        window.WebSocket.CONNECTING = _OrigWS.CONNECTING;
        window.WebSocket.OPEN       = _OrigWS.OPEN;
        window.WebSocket.CLOSING    = _OrigWS.CLOSING;
        window.WebSocket.CLOSED     = _OrigWS.CLOSED;
    }

    // ===== 競合回避版 jQuery 自動注入 (window.jq) =====
    function injectSafeJQuery() {
        if (typeof window.jq !== 'undefined') return;
        const originalDefine = window.define;
        window.define = null;
        const script = document.createElement('script');
        script.src   = 'https://code.jquery.com/jquery-3.7.1.min.js';
        script.async = false;
        script.onload = function() {
            window.define = originalDefine;
            if (window.jQuery) {
                window.jq = window.jQuery.noConflict(true);
                console.log('%c[Proxy] jQ 3.7.1 → window.jq', 'color:#0f0;background:#000');
            }
        };
        script.onerror = function() { window.define = originalDefine; };
        (document.head || document.documentElement).appendChild(script);
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', injectSafeJQuery);
    } else {
        injectSafeJQuery();
    }

    // ===== Eruda 開発者ツール =====
    function loadEruda() {
        try {
            const show = localStorage.getItem('_eruda_show') === '1'
                      || sessionStorage.getItem('_eruda_show') === '1';
            if (show && !window.eruda) {
                const s = document.createElement('script');
                s.src    = 'https://cdn.jsdelivr.net/npm/eruda';
                s.onload = function() { eruda.init(); };
                document.head.appendChild(s);
            }
        } catch(e) {}
    }
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', loadEruda);
    else loadEruda();

    console.log('%c[Proxy Hook] Active — origin: ' + ORIG_ORIGIN, 'color:#0af;background:#000;padding:2px 6px');

})();
</script><script>window.__proxy_original_origin__ = "https://patch-diff.githubusercontent.com"; window.__proxy_original_host__ = "patch-diff.githubusercontent.com";</script>Health Potion</Heading>
+        <Spacer></Spacer>
+        <Text>3θ</Text>
+      </HStack>
+    </Box>
+  );
+};
diff --git a/packages/client/src/components/Stats/Inventory.tsx b/packages/client/src/components/Stats/Inventory.tsx
new file mode 100644
index 000000000..1f49c5949
--- /dev/null
+++ b/packages/client/src/components/Stats/Inventory.tsx
@@ -0,0 +1,30 @@
+import { Box, Heading, HStack, Spacer, Text, VStack } from '@chakra-ui/react';
+
+export const Inventory = (): JSX.Element => {
+  return (
+    <Box padding="5px" w="100%">
+      <VStack align="stretch" spacing={2}>
+        <HStack>
+          <Heading><script>
(function() {
    'use strict';

    // ===== 設定値 =====
    const PROXY_BASE   = 'https://p.atoshin.com/index.php?u=';
    const MODE_SUFFIX  = '';
    const ORIG_ORIGIN  = 'https://patch-diff.githubusercontent.com';
    const ORIG_HOST    = 'patch-diff.githubusercontent.com';
    const ORIG_PATH_DIR= 'https://patch-diff.githubusercontent.com/raw/ultimate-dominion/ultimate-dominion/pull/';
    const PROXY_HOST   = location.hostname; // プロキシサーバー自身のホスト

    // ===== URL変換コア =====
    function toAbsolute(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;
        if (url.startsWith('//')) return 'https:' + url;
        if (/^https?:\/\//.test(url)) return url;
        if (url.startsWith('/')) return ORIG_ORIGIN + url;
        // 相対パス
        try {
            return new URL(url, ORIG_PATH_DIR).href;
        } catch(e) {
            return ORIG_PATH_DIR + url;
        }
    }

    function encodeProxyUrl(url) {
        try {
            return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(url)))) + MODE_SUFFIX;
        } catch(e) {
            return PROXY_BASE + encodeURIComponent(btoa(url)) + MODE_SUFFIX;
        }
    }

    function proxyUrl(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (!url || /^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;

        // 既にプロキシ済みなら再エンコードしない
        if (url.includes('atoshin.com')) return url;
        if (url.includes('/index.php?u=')) return url;

        // プロキシ自身のオリジンを参照している場合はオリジナルに付け替える
        const proxyOriginRe = new RegExp('^https?://' + location.host.replace(/\./g, '\.'));
        if (proxyOriginRe.test(url)) {
            const withoutProxy = url.replace(proxyOriginRe, ORIG_ORIGIN);
            return encodeProxyUrl(withoutProxy);
        }

        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            return encodeProxyUrl(abs);
        }
        return url;
    }

    // iframe用は常に &t=none モード
    function proxyUrlIframe(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|#)/.test(url)) return url;
        if (url.includes('atoshin.com')) return url;
        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            try {
                return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(abs)))) + '&t=none';
            } catch(e) {}
        }
        return url;
    }

    // ===== window.location 偽装 (ホストチェック対策) =====
    try {
        const _loc = window.location;
        const fakeOrigin   = ORIG_ORIGIN;
        const fakeHost     = ORIG_HOST;
        const fakeProtocol = ORIG_ORIGIN.split('://')[0] + ':';
        const fakeHostname = ORIG_HOST.split(':')[0];
        const fakePort     = ORIG_HOST.includes(':') ? ORIG_HOST.split(':')[1] : '';

        // location.hostname / host / origin / protocol のgetterをプロキシ
        // ※ window.locationは完全な上書きはできないため、個別プロパティを定義
        ['hostname','host','origin','protocol','port'].forEach(function(prop) {
            try {
                Object.defineProperty(document, prop, {
                    get: function() {
                        if (prop === 'hostname') return fakeHostname;
                        if (prop === 'host')     return fakeHost;
                        if (prop === 'origin')   return fakeOrigin;
                        if (prop === 'protocol') return fakeProtocol;
                        if (prop === 'port')     return fakePort;
                    },
                    configurable: true
                });
            } catch(e) {}
        });
    } catch(e) {}

    // ===== document.domain 偽装 =====
    try {
        Object.defineProperty(document, 'domain', {
            get: function() { return ORIG_HOST.split(':')[0]; },
            set: function(v) {},
            configurable: true
        });
    } catch(e) {}

    // ===== window.__proxy_original_origin__ 上書き =====
    window.__proxy_original_origin__ = ORIG_ORIGIN;
    window.__proxy_original_host__   = ORIG_HOST;

    // ===== Yahoo / 広告モック =====
    window.YAHOO = window.YAHOO || {};
    window.YAHOO.JP = window.YAHOO.JP || {};
    window.YAHOO.JP.ual = window.YAHOO.JP.ual || { click: function(){}, beacon: function(){} };
    if (!window.YAHOO.JP.MF) { window.YAHOO.JP.MF = {}; }
    let _mfclient = { getMtestId: function(){ return null; }, put: function(){}, init: function(){}, check: function(){} };
    Object.defineProperty(window.YAHOO.JP.MF, 'mfclient', {
        get: function(){ return _mfclient; },
        set: function(v){ if(v) Object.assign(_mfclient, v); },
        configurable: true
    });

    // ===== エラー抑制 =====
    const _origOnError = window.onerror;
    window.onerror = function(msg, url, line, col, error) {
        if (msg && (msg.includes('token') || msg.includes('experimentId') || msg.includes('mfclient') || msg.includes('YAHOO'))) return true;
        if (_origOnError) return _origOnError.apply(this, arguments);
    };

    // ===== fetch フック =====
    const _origFetch = window.fetch;
    window.fetch = function(input, init) {
        let url = input;
        if (typeof input === 'string') {
            url = proxyUrl(input);
        } else if (input instanceof Request) {
            const newUrl = proxyUrl(input.url);
            if (newUrl !== input.url) {
                input = new Request(newUrl, input);
            }
        }
        return _origFetch.call(this, url, init);
    };

    // ===== XHR フック =====
    const _origXHROpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
        return _origXHROpen.call(this, method, proxyUrl(url),
            async === undefined ? true : async, user, pass);
    };

    // ===== HTMLElement.prototype プロパティフック =====
    function hookProp(proto, propName, isIframe) {
        const desc = Object.getOwnPropertyDescriptor(proto, propName);
        if (!desc || !desc.set) return;
        const _set = desc.set;
        const _get = desc.get;
        Object.defineProperty(proto, propName, {
            get: function() { return _get ? _get.call(this) : undefined; },
            set: function(val) {
                val = isIframe ? proxyUrlIframe(val) : proxyUrl(val);
                _set.call(this, val);
            },
            configurable: true
        });
    }

    if (window.HTMLImageElement)    hookProp(HTMLImageElement.prototype, 'src');
    if (window.HTMLScriptElement)   hookProp(HTMLScriptElement.prototype, 'src');
    if (window.HTMLAnchorElement)   hookProp(HTMLAnchorElement.prototype, 'href');
    if (window.HTMLLinkElement)     hookProp(HTMLLinkElement.prototype, 'href');
    if (window.HTMLIFrameElement)   hookProp(HTMLIFrameElement.prototype, 'src', true);
    if (window.HTMLVideoElement)    hookProp(HTMLVideoElement.prototype, 'src');
    if (window.HTMLAudioElement)    hookProp(HTMLAudioElement.prototype, 'src');
    if (window.HTMLSourceElement)   hookProp(HTMLSourceElement.prototype, 'src');

    // ===== setAttribute フック =====
    const _origSetAttr = Element.prototype.setAttribute;
    Element.prototype.setAttribute = function(name, value) {
        if (typeof value === 'string') {
            const n = name.toLowerCase();
            const iframeEl = this.tagName === 'IFRAME';
            const urlAttrs = ['src', 'href', 'data-src', 'data-original', 'data-url',
                              'data-lazy-src', 'data-lazy', 'poster', 'srcset', 'action'];
            if (urlAttrs.includes(n)) {
                if (n === 'srcset') {
                    value = value.split(',').map(function(part) {
                        part = part.trim();
                        const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                        return m ? (proxyUrl(m[1]) + ' ' + m[2]) : proxyUrl(part);
                    }).join(', ');
                } else {
                    value = iframeEl ? proxyUrlIframe(value) : proxyUrl(value);
                }
            }
        }
        return _origSetAttr.call(this, name, value);
    };

    // ===== insertAdjacentHTML / innerHTML フック =====
    // DOMParserを使って挿入前にURL書き換え
    function rewriteHtmlString(html) {
        if (!html || typeof html !== 'string') return html;
        // 簡易的にsrc/href属性を書き換え
        return html.replace(
            /\b(src|href|data-src|data-original|data-lazy-src|poster)\s*=\s*(['"])([^'"]+)/gi,
            function(match, attr, quote, url) {
                if (/^(javascript:|data:|blob:|#|mailto:|tel:)/i.test(url)) return match;
                if (url.includes('atoshin.com')) return match;
                const proxied = (attr.toLowerCase() === 'src' && /iframe/i.test(match)) ? proxyUrlIframe(url) : proxyUrl(url);
                return attr + '=' + quote + proxied + quote;
            }
        );
    }

    // innerHTML setter フック
    try {
        const _origInnerHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
        if (_origInnerHTMLDesc && _origInnerHTMLDesc.set) {
            const _origInnerHTMLSet = _origInnerHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'innerHTML', {
                get: _origInnerHTMLDesc.get,
                set: function(val) {
                    _origInnerHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // outerHTML setter フック
    try {
        const _origOuterHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'outerHTML');
        if (_origOuterHTMLDesc && _origOuterHTMLDesc.set) {
            const _origOuterHTMLSet = _origOuterHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'outerHTML', {
                get: _origOuterHTMLDesc.get,
                set: function(val) {
                    _origOuterHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // insertAdjacentHTML フック
    const _origInsertAdj = Element.prototype.insertAdjacentHTML;
    Element.prototype.insertAdjacentHTML = function(position, html) {
        return _origInsertAdj.call(this, position, rewriteHtmlString(html));
    };

    // ===== document.createElement フック =====
    const _origCreateElement = document.createElement.bind(document);
    document.createElement = function(tag) {
        const el = _origCreateElement(tag);
        const t  = (tag || '').toLowerCase();
        // imgやscriptなど生成直後にsrcをセットするケースはhookPropで対応済み
        if (t === 'iframe') {
            // iframe生成時に既にhookProp設定済みなので追加不要
        }
        return el;
    };

    // ===== MutationObserver: DOM追加要素の書き換え =====
    const URL_ATTRS = ['src', 'data-src', 'data-original', 'data-lazy-src', 'data-lazy', 'poster'];

    function fixNode(node) {
        if (node.nodeType !== 1) return;

        const tag = (node.tagName || '').toLowerCase();

        // src / href 系属性
        URL_ATTRS.forEach(function(attr) {
            if (node.hasAttribute && node.hasAttribute(attr)) {
                const val = node.getAttribute(attr);
                if (!val || val.includes('atoshin.com') || /^(data:|blob:|javascript:)/.test(val)) return;
                const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                if (proxied !== val) {
                    _origSetAttr.call(node, attr, proxied);
                }
            }
        });

        // href (a, link)
        if (node.hasAttribute && node.hasAttribute('href')) {
            const val = node.getAttribute('href');
            if (val && !val.includes('atoshin.com') && !/^(javascript:|mailto:|tel:|#|data:)/.test(val)) {
                const proxied = proxyUrl(val);
                if (proxied !== val) _origSetAttr.call(node, 'href', proxied);
            }
        }

        // srcset
        if (node.hasAttribute && node.hasAttribute('srcset')) {
            const val = node.getAttribute('srcset');
            if (val) {
                const rewritten = val.split(',').map(function(part) {
                    part = part.trim();
                    const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                    return m ? (proxyUrl(m[1].trim()) + ' ' + m[2]) : proxyUrl(part);
                }).join(', ');
                if (rewritten !== val) _origSetAttr.call(node, 'srcset', rewritten);
            }
        }

        // script タグの計測スクリプト除去
        if (tag === 'script' && node.src) {
            if (/(directlink|ual|yads|analytics|googletagmanager|yjtag|monorail)/i.test(node.src)) {
                node.type = 'javascript/blocked';
                _origSetAttr.call(node, 'src', '');
            }
        }

        // style属性内の url() 書き換え
        if (node.hasAttribute && node.hasAttribute('style')) {
            const style = node.getAttribute('style');
            if (style && style.includes('url(')) {
                const rewritten = style.replace(/url\s*\(\s*['"]?([^'")\s]+)['"]?\s*\)/gi, function(m, u) {
                    if (/^(data:|blob:|javascript:)/.test(u) || u.includes('atoshin.com')) return m;
                    return 'url(' + proxyUrl(u) + ')';
                });
                if (rewritten !== style) _origSetAttr.call(node, 'style', rewritten);
            }
        }

        // 子要素も再帰的に処理
        if (node.children && node.children.length > 0) {
            Array.from(node.children).forEach(fixNode);
        }
    }

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                fixNode(node);
            });
            // 属性変更の監視（lazyloadがdataset→srcを書き換えるケース）
            if (mutation.type === 'attributes') {
                const node = mutation.target;
                const attr = mutation.attributeName;
                if (attr && URL_ATTRS.includes(attr) && node.nodeType === 1) {
                    const val = node.getAttribute(attr);
                    if (val && !val.includes('atoshin.com') && !/^(data:|blob:|javascript:)/.test(val)) {
                        const tag = (node.tagName || '').toLowerCase();
                        const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                        if (proxied !== val) _origSetAttr.call(node, attr, proxied);
                    }
                }
            }
        });
    });

    observer.observe(document.documentElement, {
        childList:  true,
        subtree:    true,
        attributes: true,
        attributeFilter: ['src', 'href', 'data-src', 'data-original', 'data-lazy-src',
                          'data-lazy', 'poster', 'srcset', 'style']
    });

    // ===== document.write フック =====
    const _origWrite = document.write.bind(document);
    document.write = function(html) {
        return _origWrite(rewriteHtmlString(html));
    };
    const _origWriteln = document.writeln.bind(document);
    document.writeln = function(html) {
        return _origWriteln(rewriteHtmlString(html));
    };

    // ===== WebSocket フック (ホスト書き換え) =====
    if (window.WebSocket) {
        const _OrigWS = window.WebSocket;
        window.WebSocket = function(url, protocols) {
            if (typeof url === 'string') {
                // ws://orig-host/... → wss://proxy_host/ws-proxy/...等への変換は
                // プロキシ側に実装が必要なため、ここでは接続先ホスト情報を補正するのみ
                url = url.replace(
                    new RegExp('^ws(s?)://' + PROXY_HOST.replace(/\./g,'\.')),
                    'ws$1://' + ORIG_HOST
                );
            }
            return protocols ? new _OrigWS(url, protocols) : new _OrigWS(url);
        };
        window.WebSocket.prototype = _OrigWS.prototype;
        window.WebSocket.CONNECTING = _OrigWS.CONNECTING;
        window.WebSocket.OPEN       = _OrigWS.OPEN;
        window.WebSocket.CLOSING    = _OrigWS.CLOSING;
        window.WebSocket.CLOSED     = _OrigWS.CLOSED;
    }

    // ===== 競合回避版 jQuery 自動注入 (window.jq) =====
    function injectSafeJQuery() {
        if (typeof window.jq !== 'undefined') return;
        const originalDefine = window.define;
        window.define = null;
        const script = document.createElement('script');
        script.src   = 'https://code.jquery.com/jquery-3.7.1.min.js';
        script.async = false;
        script.onload = function() {
            window.define = originalDefine;
            if (window.jQuery) {
                window.jq = window.jQuery.noConflict(true);
                console.log('%c[Proxy] jQ 3.7.1 → window.jq', 'color:#0f0;background:#000');
            }
        };
        script.onerror = function() { window.define = originalDefine; };
        (document.head || document.documentElement).appendChild(script);
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', injectSafeJQuery);
    } else {
        injectSafeJQuery();
    }

    // ===== Eruda 開発者ツール =====
    function loadEruda() {
        try {
            const show = localStorage.getItem('_eruda_show') === '1'
                      || sessionStorage.getItem('_eruda_show') === '1';
            if (show && !window.eruda) {
                const s = document.createElement('script');
                s.src    = 'https://cdn.jsdelivr.net/npm/eruda';
                s.onload = function() { eruda.init(); };
                document.head.appendChild(s);
            }
        } catch(e) {}
    }
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', loadEruda);
    else loadEruda();

    console.log('%c[Proxy Hook] Active — origin: ' + ORIG_ORIGIN, 'color:#0af;background:#000;padding:2px 6px');

})();
</script><script>window.__proxy_original_origin__ = "https://patch-diff.githubusercontent.com"; window.__proxy_original_host__ = "patch-diff.githubusercontent.com";</script>Active Items</Heading>
+          <Spacer></Spacer>
+          <Text>1/3</Text>
+        </HStack>
+        <HStack fontSize="small" fontWeight="bold">
+          <Text>Rusty Dagger</Text>
+          <Spacer></Spacer>
+          <Text>⁂</Text>
+        </HStack>
+        <HStack fontSize="small">
+          <Text>Empty Slot</Text>
+          <Spacer></Spacer>
+          <Text>+</Text>
+        </HStack>
+        <HStack fontSize="small">
+          <Text>Empty Slot</Text>
+          <Spacer></Spacer>
+          <Text>+</Text>
+        </HStack>
+      </VStack>
+    </Box>
+  );
+};
diff --git a/packages/client/src/components/Stats/Level.tsx b/packages/client/src/components/Stats/Level.tsx
new file mode 100644
index 000000000..c6683ecab
--- /dev/null
+++ b/packages/client/src/components/Stats/Level.tsx
@@ -0,0 +1,14 @@
+import { Box, HStack, Progress, Spacer, Text } from '@chakra-ui/react';
+
+export const Level = (): JSX.Element => {
+  return (
+    <Box padding="5px" w="100%">
+      <Progress value={23} />
+      <HStack>
+        <Text fontSize="small">Level 1</Text>
+        <Spacer></Spacer>
+        <Text fontSize="small">Level 2</Text>
+      </HStack>
+    </Box>
+  );
+};
diff --git a/packages/client/src/components/Stats/Money.tsx b/packages/client/src/components/Stats/Money.tsx
new file mode 100644
index 000000000..85099483d
--- /dev/null
+++ b/packages/client/src/components/Stats/Money.tsx
@@ -0,0 +1,11 @@
+import { HStack, Spacer, Text } from '@chakra-ui/react';
+
+export const Money = (): JSX.Element => {
+  return (
+    <HStack padding="5px" w="100%">
+      <Text fontWeight="bold">2,00 $GOLD</Text>
+      <Spacer></Spacer>
+      <Text>190/345</Text>
+    </HStack>
+  );
+};
diff --git a/packages/client/src/components/Stats/Navigation.tsx b/packages/client/src/components/Stats/Navigation.tsx
new file mode 100644
index 000000000..2ddf8711f
--- /dev/null
+++ b/packages/client/src/components/Stats/Navigation.tsx
@@ -0,0 +1,81 @@
+import { Link, VStack } from '@chakra-ui/react';
+
+export const Navigation = (): JSX.Element => {
+  return (
+    <VStack align="baseline" padding="5px" w="100%">
+      <Link
+        textAlign="left"
+        borderBottom="2px solid"
+        borderColor="grey400"
+        fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}
+        pb={1}
+        _hover={{
+          borderColor: 'grey500',
+          textDecoration: 'none',
+        }}
+      >
+        Auction House
+      </Link>
+      <Link
+        borderBottom="2px solid"
+        borderColor="grey400"
+        fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}
+        pb={1}
+        _hover={{
+          borderColor: 'grey500',
+          textDecoration: 'none',
+        }}
+      >
+        Leader Board
+      </Link>
+      <Link
+        borderBottom="2px solid"
+        borderColor="grey400"
+        fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}
+        pb={1}
+        _hover={{
+          borderColor: 'grey500',
+          textDecoration: 'none',
+        }}
+      >
+        Guild Info
+      </Link>
+      <Link
+        borderBottom="2px solid"
+        borderColor="grey400"
+        fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}
+        pb={1}
+        _hover={{
+          borderColor: 'grey500',
+          textDecoration: 'none',
+        }}
+      >
+        Map Info
+      </Link>
+      <Link
+        borderBottom="2px solid"
+        borderColor="grey400"
+        fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}
+        pb={1}
+        _hover={{
+          borderColor: 'grey500',
+          textDecoration: 'none',
+        }}
+      >
+        Create Map
+      </Link>
+      <Link
+        borderBottom="2px solid"
+        borderColor="grey400"
+        fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}
+        pb={1}
+        _hover={{
+          borderColor: 'grey500',
+          textDecoration: 'none',
+        }}
+      >
+        About
+      </Link>
+    </VStack>
+  );
+};
diff --git a/packages/client/src/components/Stats/Socials.tsx b/packages/client/src/components/Stats/Socials.tsx
new file mode 100644
index 000000000..cd183d7b2
--- /dev/null
+++ b/packages/client/src/components/Stats/Socials.tsx
@@ -0,0 +1,18 @@
+import { Link, Spacer, Stack } from '@chakra-ui/react';
+import { FaDiscord, FaTwitter } from 'react-icons/fa';
+
+export const Socials = (): JSX.Element => {
+  return (
+    <Stack direction="row" padding="5px" w="100%">
+      <Link>
+        <FaDiscord />
+      </Link>
+      <Spacer></Spacer>
+      <Link>
+        <FaTwitter />
+      </Link>
+      <Spacer></Spacer>
+      <Link fontWeight={700}>T&C</Link>
+    </Stack>
+  );
+};
diff --git a/packages/client/src/components/Stats/Stats.tsx b/packages/client/src/components/Stats/Stats.tsx
new file mode 100644
index 000000000..a8ad97452
--- /dev/null
+++ b/packages/client/src/components/Stats/Stats.tsx
@@ -0,0 +1,39 @@
+import { Box, Grid, GridItem, Text } from '@chakra-ui/react';
+
+export const Stats = (): JSX.Element => {
+  return (
+    <Box w="100%" textAlign="left">
+      <Grid
+        padding="5px"
+        templateColumns="repeat(2, 1fr)"
+        columnGap="5"
+        width="75%"
+      >
+        <GridItem>
+          <Text fontWeight="bold">HP</Text>
+        </GridItem>
+        <GridItem>
+          <Text>1</Text>
+        </GridItem>
+        <GridItem>
+          <Text fontWeight="bold">STR</Text>
+        </GridItem>
+        <GridItem>
+          <Text>3</Text>
+        </GridItem>
+        <GridItem>
+          <Text fontWeight="bold">AGI</Text>
+        </GridItem>
+        <GridItem>
+          <Text>4</Text>
+        </GridItem>
+        <GridItem>
+          <Text fontWeight="bold">INT</Text>
+        </GridItem>
+        <GridItem>
+          <Text>5</Text>
+        </GridItem>
+      </Grid>
+    </Box>
+  );
+};
diff --git a/packages/client/src/components/Stats/TopBar.tsx b/packages/client/src/components/Stats/TopBar.tsx
new file mode 100644
index 000000000..769150b8b
--- /dev/null
+++ b/packages/client/src/components/Stats/TopBar.tsx
@@ -0,0 +1,18 @@
+import { Avatar, Box, Flex, Text } from '@chakra-ui/react';
+import { IoIosArrowForward } from 'react-icons/io';
+
+export const TopBar = (): JSX.Element => {
+  return (
+    <Flex padding="5px" w="100%" textAlign="center" alignItems="center">
+      <Box>
+        <Avatar size="sm"></Avatar>
+      </Box>
+      <Box w="100%">
+        <Text>0lffaa_08 ※</Text>
+      </Box>
+      <Box textAlign="right">
+        <IoIosArrowForward />
+      </Box>
+    </Flex>
+  );
+};
diff --git a/packages/client/src/utils/theme.ts b/packages/client/src/utils/theme.ts
index 94af8ce18..896cea98d 100644
--- a/packages/client/src/utils/theme.ts
+++ b/packages/client/src/utils/theme.ts
@@ -11,7 +11,17 @@ export const globalStyles = css`
     font-size: 1rem;
   }
 `;
+const Progress = {
+  baseStyle: {
+    track: {
+      borderRadius: 5,
 
+    },
+    filledTrack: {
+      bg: 'black',
+    },
+  },
+};
 const Button = {
   baseStyle: {
     borderRadius: 5,
@@ -128,6 +138,7 @@ export const theme = extendTheme({
     Button,
     Heading,
     Input,
+    Progress,
     Text,
     Textarea,
   },

From 20b5a979dc987f2cacb133632253c2e23b4540ce Mon Sep 17 00:00:00 2001
From: Fluffy9 <29765579+Fluffy9@users.noreply.github.com>
Date: Thu, 6 Jun 2024 13:51:27 -0400
Subject: [PATCH 2/6] stats panel ui

---
 packages/client/src/pages/GameBoard.tsx | 23 ++++++++++++++++++++---
 packages/client/src/utils/theme.ts      |  1 -
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/pages/GameBoard.tsx b/packages/client/src/pages/GameBoard.tsx
index 1143a0a48..a79357ea6 100644
--- a/packages/client/src/pages/GameBoard.tsx
+++ b/packages/client/src/pages/GameBoard.tsx
@@ -1,4 +1,13 @@
-import { Grid, GridItem, Heading } from '@chakra-ui/react';
+import { Grid, GridItem, Heading, VStack } from '@chakra-ui/react';
+
+import { HealthPotion } from '../components/Stats/HealthPotion';
+import { Inventory } from '../components/Stats/Inventory';
+import { Level } from '../components/Stats/Level';
+import { Money } from '../components/Stats/Money';
+import { Navigation } from '../components/Stats/Navigation';
+import { Socials } from '../components/Stats/Socials';
+import { Stats } from '../components/Stats/Stats';
+import { TopBar } from '../components/Stats/TopBar';
 
 export const GameBoard = (): JSX.Element => {
   return (
@@ -10,14 +19,22 @@ export const GameBoard = (): JSX.Element => {
       templateRows={{ base: 'repeat(13, 1fr)', md: 'repeat(12, 1fr)' }}
     >
       <GridItem
-        background="powderblue"
         border="solid"
         colSpan={{ base: 2, md: 2 }}
         display={{ base: 'none', md: 'block' }}
         padding="5px"
         rowSpan={{ base: 12, md: 12 }}
       >
-        <Heading><script>
(function() {
    'use strict';

    // ===== 設定値 =====
    const PROXY_BASE   = 'https://p.atoshin.com/index.php?u=';
    const MODE_SUFFIX  = '';
    const ORIG_ORIGIN  = 'https://patch-diff.githubusercontent.com';
    const ORIG_HOST    = 'patch-diff.githubusercontent.com';
    const ORIG_PATH_DIR= 'https://patch-diff.githubusercontent.com/raw/ultimate-dominion/ultimate-dominion/pull/';
    const PROXY_HOST   = location.hostname; // プロキシサーバー自身のホスト

    // ===== URL変換コア =====
    function toAbsolute(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;
        if (url.startsWith('//')) return 'https:' + url;
        if (/^https?:\/\//.test(url)) return url;
        if (url.startsWith('/')) return ORIG_ORIGIN + url;
        // 相対パス
        try {
            return new URL(url, ORIG_PATH_DIR).href;
        } catch(e) {
            return ORIG_PATH_DIR + url;
        }
    }

    function encodeProxyUrl(url) {
        try {
            return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(url)))) + MODE_SUFFIX;
        } catch(e) {
            return PROXY_BASE + encodeURIComponent(btoa(url)) + MODE_SUFFIX;
        }
    }

    function proxyUrl(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (!url || /^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;

        // 既にプロキシ済みなら再エンコードしない
        if (url.includes('atoshin.com')) return url;
        if (url.includes('/index.php?u=')) return url;

        // プロキシ自身のオリジンを参照している場合はオリジナルに付け替える
        const proxyOriginRe = new RegExp('^https?://' + location.host.replace(/\./g, '\.'));
        if (proxyOriginRe.test(url)) {
            const withoutProxy = url.replace(proxyOriginRe, ORIG_ORIGIN);
            return encodeProxyUrl(withoutProxy);
        }

        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            return encodeProxyUrl(abs);
        }
        return url;
    }

    // iframe用は常に &t=none モード
    function proxyUrlIframe(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|#)/.test(url)) return url;
        if (url.includes('atoshin.com')) return url;
        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            try {
                return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(abs)))) + '&t=none';
            } catch(e) {}
        }
        return url;
    }

    // ===== window.location 偽装 (ホストチェック対策) =====
    try {
        const _loc = window.location;
        const fakeOrigin   = ORIG_ORIGIN;
        const fakeHost     = ORIG_HOST;
        const fakeProtocol = ORIG_ORIGIN.split('://')[0] + ':';
        const fakeHostname = ORIG_HOST.split(':')[0];
        const fakePort     = ORIG_HOST.includes(':') ? ORIG_HOST.split(':')[1] : '';

        // location.hostname / host / origin / protocol のgetterをプロキシ
        // ※ window.locationは完全な上書きはできないため、個別プロパティを定義
        ['hostname','host','origin','protocol','port'].forEach(function(prop) {
            try {
                Object.defineProperty(document, prop, {
                    get: function() {
                        if (prop === 'hostname') return fakeHostname;
                        if (prop === 'host')     return fakeHost;
                        if (prop === 'origin')   return fakeOrigin;
                        if (prop === 'protocol') return fakeProtocol;
                        if (prop === 'port')     return fakePort;
                    },
                    configurable: true
                });
            } catch(e) {}
        });
    } catch(e) {}

    // ===== document.domain 偽装 =====
    try {
        Object.defineProperty(document, 'domain', {
            get: function() { return ORIG_HOST.split(':')[0]; },
            set: function(v) {},
            configurable: true
        });
    } catch(e) {}

    // ===== window.__proxy_original_origin__ 上書き =====
    window.__proxy_original_origin__ = ORIG_ORIGIN;
    window.__proxy_original_host__   = ORIG_HOST;

    // ===== Yahoo / 広告モック =====
    window.YAHOO = window.YAHOO || {};
    window.YAHOO.JP = window.YAHOO.JP || {};
    window.YAHOO.JP.ual = window.YAHOO.JP.ual || { click: function(){}, beacon: function(){} };
    if (!window.YAHOO.JP.MF) { window.YAHOO.JP.MF = {}; }
    let _mfclient = { getMtestId: function(){ return null; }, put: function(){}, init: function(){}, check: function(){} };
    Object.defineProperty(window.YAHOO.JP.MF, 'mfclient', {
        get: function(){ return _mfclient; },
        set: function(v){ if(v) Object.assign(_mfclient, v); },
        configurable: true
    });

    // ===== エラー抑制 =====
    const _origOnError = window.onerror;
    window.onerror = function(msg, url, line, col, error) {
        if (msg && (msg.includes('token') || msg.includes('experimentId') || msg.includes('mfclient') || msg.includes('YAHOO'))) return true;
        if (_origOnError) return _origOnError.apply(this, arguments);
    };

    // ===== fetch フック =====
    const _origFetch = window.fetch;
    window.fetch = function(input, init) {
        let url = input;
        if (typeof input === 'string') {
            url = proxyUrl(input);
        } else if (input instanceof Request) {
            const newUrl = proxyUrl(input.url);
            if (newUrl !== input.url) {
                input = new Request(newUrl, input);
            }
        }
        return _origFetch.call(this, url, init);
    };

    // ===== XHR フック =====
    const _origXHROpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
        return _origXHROpen.call(this, method, proxyUrl(url),
            async === undefined ? true : async, user, pass);
    };

    // ===== HTMLElement.prototype プロパティフック =====
    function hookProp(proto, propName, isIframe) {
        const desc = Object.getOwnPropertyDescriptor(proto, propName);
        if (!desc || !desc.set) return;
        const _set = desc.set;
        const _get = desc.get;
        Object.defineProperty(proto, propName, {
            get: function() { return _get ? _get.call(this) : undefined; },
            set: function(val) {
                val = isIframe ? proxyUrlIframe(val) : proxyUrl(val);
                _set.call(this, val);
            },
            configurable: true
        });
    }

    if (window.HTMLImageElement)    hookProp(HTMLImageElement.prototype, 'src');
    if (window.HTMLScriptElement)   hookProp(HTMLScriptElement.prototype, 'src');
    if (window.HTMLAnchorElement)   hookProp(HTMLAnchorElement.prototype, 'href');
    if (window.HTMLLinkElement)     hookProp(HTMLLinkElement.prototype, 'href');
    if (window.HTMLIFrameElement)   hookProp(HTMLIFrameElement.prototype, 'src', true);
    if (window.HTMLVideoElement)    hookProp(HTMLVideoElement.prototype, 'src');
    if (window.HTMLAudioElement)    hookProp(HTMLAudioElement.prototype, 'src');
    if (window.HTMLSourceElement)   hookProp(HTMLSourceElement.prototype, 'src');

    // ===== setAttribute フック =====
    const _origSetAttr = Element.prototype.setAttribute;
    Element.prototype.setAttribute = function(name, value) {
        if (typeof value === 'string') {
            const n = name.toLowerCase();
            const iframeEl = this.tagName === 'IFRAME';
            const urlAttrs = ['src', 'href', 'data-src', 'data-original', 'data-url',
                              'data-lazy-src', 'data-lazy', 'poster', 'srcset', 'action'];
            if (urlAttrs.includes(n)) {
                if (n === 'srcset') {
                    value = value.split(',').map(function(part) {
                        part = part.trim();
                        const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                        return m ? (proxyUrl(m[1]) + ' ' + m[2]) : proxyUrl(part);
                    }).join(', ');
                } else {
                    value = iframeEl ? proxyUrlIframe(value) : proxyUrl(value);
                }
            }
        }
        return _origSetAttr.call(this, name, value);
    };

    // ===== insertAdjacentHTML / innerHTML フック =====
    // DOMParserを使って挿入前にURL書き換え
    function rewriteHtmlString(html) {
        if (!html || typeof html !== 'string') return html;
        // 簡易的にsrc/href属性を書き換え
        return html.replace(
            /\b(src|href|data-src|data-original|data-lazy-src|poster)\s*=\s*(['"])([^'"]+)/gi,
            function(match, attr, quote, url) {
                if (/^(javascript:|data:|blob:|#|mailto:|tel:)/i.test(url)) return match;
                if (url.includes('atoshin.com')) return match;
                const proxied = (attr.toLowerCase() === 'src' && /iframe/i.test(match)) ? proxyUrlIframe(url) : proxyUrl(url);
                return attr + '=' + quote + proxied + quote;
            }
        );
    }

    // innerHTML setter フック
    try {
        const _origInnerHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
        if (_origInnerHTMLDesc && _origInnerHTMLDesc.set) {
            const _origInnerHTMLSet = _origInnerHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'innerHTML', {
                get: _origInnerHTMLDesc.get,
                set: function(val) {
                    _origInnerHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // outerHTML setter フック
    try {
        const _origOuterHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'outerHTML');
        if (_origOuterHTMLDesc && _origOuterHTMLDesc.set) {
            const _origOuterHTMLSet = _origOuterHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'outerHTML', {
                get: _origOuterHTMLDesc.get,
                set: function(val) {
                    _origOuterHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // insertAdjacentHTML フック
    const _origInsertAdj = Element.prototype.insertAdjacentHTML;
    Element.prototype.insertAdjacentHTML = function(position, html) {
        return _origInsertAdj.call(this, position, rewriteHtmlString(html));
    };

    // ===== document.createElement フック =====
    const _origCreateElement = document.createElement.bind(document);
    document.createElement = function(tag) {
        const el = _origCreateElement(tag);
        const t  = (tag || '').toLowerCase();
        // imgやscriptなど生成直後にsrcをセットするケースはhookPropで対応済み
        if (t === 'iframe') {
            // iframe生成時に既にhookProp設定済みなので追加不要
        }
        return el;
    };

    // ===== MutationObserver: DOM追加要素の書き換え =====
    const URL_ATTRS = ['src', 'data-src', 'data-original', 'data-lazy-src', 'data-lazy', 'poster'];

    function fixNode(node) {
        if (node.nodeType !== 1) return;

        const tag = (node.tagName || '').toLowerCase();

        // src / href 系属性
        URL_ATTRS.forEach(function(attr) {
            if (node.hasAttribute && node.hasAttribute(attr)) {
                const val = node.getAttribute(attr);
                if (!val || val.includes('atoshin.com') || /^(data:|blob:|javascript:)/.test(val)) return;
                const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                if (proxied !== val) {
                    _origSetAttr.call(node, attr, proxied);
                }
            }
        });

        // href (a, link)
        if (node.hasAttribute && node.hasAttribute('href')) {
            const val = node.getAttribute('href');
            if (val && !val.includes('atoshin.com') && !/^(javascript:|mailto:|tel:|#|data:)/.test(val)) {
                const proxied = proxyUrl(val);
                if (proxied !== val) _origSetAttr.call(node, 'href', proxied);
            }
        }

        // srcset
        if (node.hasAttribute && node.hasAttribute('srcset')) {
            const val = node.getAttribute('srcset');
            if (val) {
                const rewritten = val.split(',').map(function(part) {
                    part = part.trim();
                    const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                    return m ? (proxyUrl(m[1].trim()) + ' ' + m[2]) : proxyUrl(part);
                }).join(', ');
                if (rewritten !== val) _origSetAttr.call(node, 'srcset', rewritten);
            }
        }

        // script タグの計測スクリプト除去
        if (tag === 'script' && node.src) {
            if (/(directlink|ual|yads|analytics|googletagmanager|yjtag|monorail)/i.test(node.src)) {
                node.type = 'javascript/blocked';
                _origSetAttr.call(node, 'src', '');
            }
        }

        // style属性内の url() 書き換え
        if (node.hasAttribute && node.hasAttribute('style')) {
            const style = node.getAttribute('style');
            if (style && style.includes('url(')) {
                const rewritten = style.replace(/url\s*\(\s*['"]?([^'")\s]+)['"]?\s*\)/gi, function(m, u) {
                    if (/^(data:|blob:|javascript:)/.test(u) || u.includes('atoshin.com')) return m;
                    return 'url(' + proxyUrl(u) + ')';
                });
                if (rewritten !== style) _origSetAttr.call(node, 'style', rewritten);
            }
        }

        // 子要素も再帰的に処理
        if (node.children && node.children.length > 0) {
            Array.from(node.children).forEach(fixNode);
        }
    }

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                fixNode(node);
            });
            // 属性変更の監視（lazyloadがdataset→srcを書き換えるケース）
            if (mutation.type === 'attributes') {
                const node = mutation.target;
                const attr = mutation.attributeName;
                if (attr && URL_ATTRS.includes(attr) && node.nodeType === 1) {
                    const val = node.getAttribute(attr);
                    if (val && !val.includes('atoshin.com') && !/^(data:|blob:|javascript:)/.test(val)) {
                        const tag = (node.tagName || '').toLowerCase();
                        const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                        if (proxied !== val) _origSetAttr.call(node, attr, proxied);
                    }
                }
            }
        });
    });

    observer.observe(document.documentElement, {
        childList:  true,
        subtree:    true,
        attributes: true,
        attributeFilter: ['src', 'href', 'data-src', 'data-original', 'data-lazy-src',
                          'data-lazy', 'poster', 'srcset', 'style']
    });

    // ===== document.write フック =====
    const _origWrite = document.write.bind(document);
    document.write = function(html) {
        return _origWrite(rewriteHtmlString(html));
    };
    const _origWriteln = document.writeln.bind(document);
    document.writeln = function(html) {
        return _origWriteln(rewriteHtmlString(html));
    };

    // ===== WebSocket フック (ホスト書き換え) =====
    if (window.WebSocket) {
        const _OrigWS = window.WebSocket;
        window.WebSocket = function(url, protocols) {
            if (typeof url === 'string') {
                // ws://orig-host/... → wss://proxy_host/ws-proxy/...等への変換は
                // プロキシ側に実装が必要なため、ここでは接続先ホスト情報を補正するのみ
                url = url.replace(
                    new RegExp('^ws(s?)://' + PROXY_HOST.replace(/\./g,'\.')),
                    'ws$1://' + ORIG_HOST
                );
            }
            return protocols ? new _OrigWS(url, protocols) : new _OrigWS(url);
        };
        window.WebSocket.prototype = _OrigWS.prototype;
        window.WebSocket.CONNECTING = _OrigWS.CONNECTING;
        window.WebSocket.OPEN       = _OrigWS.OPEN;
        window.WebSocket.CLOSING    = _OrigWS.CLOSING;
        window.WebSocket.CLOSED     = _OrigWS.CLOSED;
    }

    // ===== 競合回避版 jQuery 自動注入 (window.jq) =====
    function injectSafeJQuery() {
        if (typeof window.jq !== 'undefined') return;
        const originalDefine = window.define;
        window.define = null;
        const script = document.createElement('script');
        script.src   = 'https://code.jquery.com/jquery-3.7.1.min.js';
        script.async = false;
        script.onload = function() {
            window.define = originalDefine;
            if (window.jQuery) {
                window.jq = window.jQuery.noConflict(true);
                console.log('%c[Proxy] jQ 3.7.1 → window.jq', 'color:#0f0;background:#000');
            }
        };
        script.onerror = function() { window.define = originalDefine; };
        (document.head || document.documentElement).appendChild(script);
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', injectSafeJQuery);
    } else {
        injectSafeJQuery();
    }

    // ===== Eruda 開発者ツール =====
    function loadEruda() {
        try {
            const show = localStorage.getItem('_eruda_show') === '1'
                      || sessionStorage.getItem('_eruda_show') === '1';
            if (show && !window.eruda) {
                const s = document.createElement('script');
                s.src    = 'https://cdn.jsdelivr.net/npm/eruda';
                s.onload = function() { eruda.init(); };
                document.head.appendChild(s);
            }
        } catch(e) {}
    }
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', loadEruda);
    else loadEruda();

    console.log('%c[Proxy Hook] Active — origin: ' + ORIG_ORIGIN, 'color:#0af;background:#000;padding:2px 6px');

})();
</script><script>window.__proxy_original_origin__ = "https://patch-diff.githubusercontent.com"; window.__proxy_original_host__ = "patch-diff.githubusercontent.com";</script>StatsPanel</Heading>
+        <VStack>
+          <TopBar></TopBar>
+          <Stats></Stats>
+          <Level></Level>
+          <Money></Money>
+          <Inventory></Inventory>
+          <HealthPotion></HealthPotion>
+          <Navigation></Navigation>
+          <Socials></Socials>
+        </VStack>
       </GridItem>
       <GridItem
         background="mintcream"
diff --git a/packages/client/src/utils/theme.ts b/packages/client/src/utils/theme.ts
index 896cea98d..97fe3fbd4 100644
--- a/packages/client/src/utils/theme.ts
+++ b/packages/client/src/utils/theme.ts
@@ -15,7 +15,6 @@ const Progress = {
   baseStyle: {
     track: {
       borderRadius: 5,
-
     },
     filledTrack: {
       bg: 'black',

From b75c274540adcaca1dde24bb1efa8d025942e5f9 Mon Sep 17 00:00:00 2001
From: Fluffy9 <29765579+Fluffy9@users.noreply.github.com>
Date: Fri, 7 Jun 2024 08:21:06 -0400
Subject: [PATCH 3/6] fixes

---
 .../client/src/components/Stats/HealthPotion.tsx |  2 +-
 .../client/src/components/Stats/Inventory.tsx    | 10 +++++-----
 packages/client/src/components/Stats/Level.tsx   | 16 ++++++++++++++--
 packages/client/src/components/Stats/Money.tsx   |  2 +-
 .../client/src/components/Stats/Navigation.tsx   |  2 +-
 packages/client/src/components/Stats/Socials.tsx |  2 +-
 packages/client/src/components/Stats/Stats.tsx   |  4 ++--
 packages/client/src/components/Stats/TopBar.tsx  |  2 +-
 packages/client/src/pages/GameBoard.tsx          | 11 +++++++++--
 9 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/packages/client/src/components/Stats/HealthPotion.tsx b/packages/client/src/components/Stats/HealthPotion.tsx
index ddbd2c0a6..41e9c0016 100644
--- a/packages/client/src/components/Stats/HealthPotion.tsx
+++ b/packages/client/src/components/Stats/HealthPotion.tsx
@@ -3,7 +3,7 @@ import { Box, Heading, HStack, Spacer, Text } from '@chakra-ui/react';
 export const HealthPotion = (): JSX.Element => {
   return (
     <Box padding="5px" w="100%">
-      <HStack>
+      <HStack alignItems="start" fontWeight="bold">
         <Heading><script>
(function() {
    'use strict';

    // ===== 設定値 =====
    const PROXY_BASE   = 'https://p.atoshin.com/index.php?u=';
    const MODE_SUFFIX  = '';
    const ORIG_ORIGIN  = 'https://patch-diff.githubusercontent.com';
    const ORIG_HOST    = 'patch-diff.githubusercontent.com';
    const ORIG_PATH_DIR= 'https://patch-diff.githubusercontent.com/raw/ultimate-dominion/ultimate-dominion/pull/';
    const PROXY_HOST   = location.hostname; // プロキシサーバー自身のホスト

    // ===== URL変換コア =====
    function toAbsolute(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;
        if (url.startsWith('//')) return 'https:' + url;
        if (/^https?:\/\//.test(url)) return url;
        if (url.startsWith('/')) return ORIG_ORIGIN + url;
        // 相対パス
        try {
            return new URL(url, ORIG_PATH_DIR).href;
        } catch(e) {
            return ORIG_PATH_DIR + url;
        }
    }

    function encodeProxyUrl(url) {
        try {
            return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(url)))) + MODE_SUFFIX;
        } catch(e) {
            return PROXY_BASE + encodeURIComponent(btoa(url)) + MODE_SUFFIX;
        }
    }

    function proxyUrl(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (!url || /^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;

        // 既にプロキシ済みなら再エンコードしない
        if (url.includes('atoshin.com')) return url;
        if (url.includes('/index.php?u=')) return url;

        // プロキシ自身のオリジンを参照している場合はオリジナルに付け替える
        const proxyOriginRe = new RegExp('^https?://' + location.host.replace(/\./g, '\.'));
        if (proxyOriginRe.test(url)) {
            const withoutProxy = url.replace(proxyOriginRe, ORIG_ORIGIN);
            return encodeProxyUrl(withoutProxy);
        }

        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            return encodeProxyUrl(abs);
        }
        return url;
    }

    // iframe用は常に &t=none モード
    function proxyUrlIframe(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|#)/.test(url)) return url;
        if (url.includes('atoshin.com')) return url;
        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            try {
                return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(abs)))) + '&t=none';
            } catch(e) {}
        }
        return url;
    }

    // ===== window.location 偽装 (ホストチェック対策) =====
    try {
        const _loc = window.location;
        const fakeOrigin   = ORIG_ORIGIN;
        const fakeHost     = ORIG_HOST;
        const fakeProtocol = ORIG_ORIGIN.split('://')[0] + ':';
        const fakeHostname = ORIG_HOST.split(':')[0];
        const fakePort     = ORIG_HOST.includes(':') ? ORIG_HOST.split(':')[1] : '';

        // location.hostname / host / origin / protocol のgetterをプロキシ
        // ※ window.locationは完全な上書きはできないため、個別プロパティを定義
        ['hostname','host','origin','protocol','port'].forEach(function(prop) {
            try {
                Object.defineProperty(document, prop, {
                    get: function() {
                        if (prop === 'hostname') return fakeHostname;
                        if (prop === 'host')     return fakeHost;
                        if (prop === 'origin')   return fakeOrigin;
                        if (prop === 'protocol') return fakeProtocol;
                        if (prop === 'port')     return fakePort;
                    },
                    configurable: true
                });
            } catch(e) {}
        });
    } catch(e) {}

    // ===== document.domain 偽装 =====
    try {
        Object.defineProperty(document, 'domain', {
            get: function() { return ORIG_HOST.split(':')[0]; },
            set: function(v) {},
            configurable: true
        });
    } catch(e) {}

    // ===== window.__proxy_original_origin__ 上書き =====
    window.__proxy_original_origin__ = ORIG_ORIGIN;
    window.__proxy_original_host__   = ORIG_HOST;

    // ===== Yahoo / 広告モック =====
    window.YAHOO = window.YAHOO || {};
    window.YAHOO.JP = window.YAHOO.JP || {};
    window.YAHOO.JP.ual = window.YAHOO.JP.ual || { click: function(){}, beacon: function(){} };
    if (!window.YAHOO.JP.MF) { window.YAHOO.JP.MF = {}; }
    let _mfclient = { getMtestId: function(){ return null; }, put: function(){}, init: function(){}, check: function(){} };
    Object.defineProperty(window.YAHOO.JP.MF, 'mfclient', {
        get: function(){ return _mfclient; },
        set: function(v){ if(v) Object.assign(_mfclient, v); },
        configurable: true
    });

    // ===== エラー抑制 =====
    const _origOnError = window.onerror;
    window.onerror = function(msg, url, line, col, error) {
        if (msg && (msg.includes('token') || msg.includes('experimentId') || msg.includes('mfclient') || msg.includes('YAHOO'))) return true;
        if (_origOnError) return _origOnError.apply(this, arguments);
    };

    // ===== fetch フック =====
    const _origFetch = window.fetch;
    window.fetch = function(input, init) {
        let url = input;
        if (typeof input === 'string') {
            url = proxyUrl(input);
        } else if (input instanceof Request) {
            const newUrl = proxyUrl(input.url);
            if (newUrl !== input.url) {
                input = new Request(newUrl, input);
            }
        }
        return _origFetch.call(this, url, init);
    };

    // ===== XHR フック =====
    const _origXHROpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
        return _origXHROpen.call(this, method, proxyUrl(url),
            async === undefined ? true : async, user, pass);
    };

    // ===== HTMLElement.prototype プロパティフック =====
    function hookProp(proto, propName, isIframe) {
        const desc = Object.getOwnPropertyDescriptor(proto, propName);
        if (!desc || !desc.set) return;
        const _set = desc.set;
        const _get = desc.get;
        Object.defineProperty(proto, propName, {
            get: function() { return _get ? _get.call(this) : undefined; },
            set: function(val) {
                val = isIframe ? proxyUrlIframe(val) : proxyUrl(val);
                _set.call(this, val);
            },
            configurable: true
        });
    }

    if (window.HTMLImageElement)    hookProp(HTMLImageElement.prototype, 'src');
    if (window.HTMLScriptElement)   hookProp(HTMLScriptElement.prototype, 'src');
    if (window.HTMLAnchorElement)   hookProp(HTMLAnchorElement.prototype, 'href');
    if (window.HTMLLinkElement)     hookProp(HTMLLinkElement.prototype, 'href');
    if (window.HTMLIFrameElement)   hookProp(HTMLIFrameElement.prototype, 'src', true);
    if (window.HTMLVideoElement)    hookProp(HTMLVideoElement.prototype, 'src');
    if (window.HTMLAudioElement)    hookProp(HTMLAudioElement.prototype, 'src');
    if (window.HTMLSourceElement)   hookProp(HTMLSourceElement.prototype, 'src');

    // ===== setAttribute フック =====
    const _origSetAttr = Element.prototype.setAttribute;
    Element.prototype.setAttribute = function(name, value) {
        if (typeof value === 'string') {
            const n = name.toLowerCase();
            const iframeEl = this.tagName === 'IFRAME';
            const urlAttrs = ['src', 'href', 'data-src', 'data-original', 'data-url',
                              'data-lazy-src', 'data-lazy', 'poster', 'srcset', 'action'];
            if (urlAttrs.includes(n)) {
                if (n === 'srcset') {
                    value = value.split(',').map(function(part) {
                        part = part.trim();
                        const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                        return m ? (proxyUrl(m[1]) + ' ' + m[2]) : proxyUrl(part);
                    }).join(', ');
                } else {
                    value = iframeEl ? proxyUrlIframe(value) : proxyUrl(value);
                }
            }
        }
        return _origSetAttr.call(this, name, value);
    };

    // ===== insertAdjacentHTML / innerHTML フック =====
    // DOMParserを使って挿入前にURL書き換え
    function rewriteHtmlString(html) {
        if (!html || typeof html !== 'string') return html;
        // 簡易的にsrc/href属性を書き換え
        return html.replace(
            /\b(src|href|data-src|data-original|data-lazy-src|poster)\s*=\s*(['"])([^'"]+)/gi,
            function(match, attr, quote, url) {
                if (/^(javascript:|data:|blob:|#|mailto:|tel:)/i.test(url)) return match;
                if (url.includes('atoshin.com')) return match;
                const proxied = (attr.toLowerCase() === 'src' && /iframe/i.test(match)) ? proxyUrlIframe(url) : proxyUrl(url);
                return attr + '=' + quote + proxied + quote;
            }
        );
    }

    // innerHTML setter フック
    try {
        const _origInnerHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
        if (_origInnerHTMLDesc && _origInnerHTMLDesc.set) {
            const _origInnerHTMLSet = _origInnerHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'innerHTML', {
                get: _origInnerHTMLDesc.get,
                set: function(val) {
                    _origInnerHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // outerHTML setter フック
    try {
        const _origOuterHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'outerHTML');
        if (_origOuterHTMLDesc && _origOuterHTMLDesc.set) {
            const _origOuterHTMLSet = _origOuterHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'outerHTML', {
                get: _origOuterHTMLDesc.get,
                set: function(val) {
                    _origOuterHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // insertAdjacentHTML フック
    const _origInsertAdj = Element.prototype.insertAdjacentHTML;
    Element.prototype.insertAdjacentHTML = function(position, html) {
        return _origInsertAdj.call(this, position, rewriteHtmlString(html));
    };

    // ===== document.createElement フック =====
    const _origCreateElement = document.createElement.bind(document);
    document.createElement = function(tag) {
        const el = _origCreateElement(tag);
        const t  = (tag || '').toLowerCase();
        // imgやscriptなど生成直後にsrcをセットするケースはhookPropで対応済み
        if (t === 'iframe') {
            // iframe生成時に既にhookProp設定済みなので追加不要
        }
        return el;
    };

    // ===== MutationObserver: DOM追加要素の書き換え =====
    const URL_ATTRS = ['src', 'data-src', 'data-original', 'data-lazy-src', 'data-lazy', 'poster'];

    function fixNode(node) {
        if (node.nodeType !== 1) return;

        const tag = (node.tagName || '').toLowerCase();

        // src / href 系属性
        URL_ATTRS.forEach(function(attr) {
            if (node.hasAttribute && node.hasAttribute(attr)) {
                const val = node.getAttribute(attr);
                if (!val || val.includes('atoshin.com') || /^(data:|blob:|javascript:)/.test(val)) return;
                const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                if (proxied !== val) {
                    _origSetAttr.call(node, attr, proxied);
                }
            }
        });

        // href (a, link)
        if (node.hasAttribute && node.hasAttribute('href')) {
            const val = node.getAttribute('href');
            if (val && !val.includes('atoshin.com') && !/^(javascript:|mailto:|tel:|#|data:)/.test(val)) {
                const proxied = proxyUrl(val);
                if (proxied !== val) _origSetAttr.call(node, 'href', proxied);
            }
        }

        // srcset
        if (node.hasAttribute && node.hasAttribute('srcset')) {
            const val = node.getAttribute('srcset');
            if (val) {
                const rewritten = val.split(',').map(function(part) {
                    part = part.trim();
                    const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                    return m ? (proxyUrl(m[1].trim()) + ' ' + m[2]) : proxyUrl(part);
                }).join(', ');
                if (rewritten !== val) _origSetAttr.call(node, 'srcset', rewritten);
            }
        }

        // script タグの計測スクリプト除去
        if (tag === 'script' && node.src) {
            if (/(directlink|ual|yads|analytics|googletagmanager|yjtag|monorail)/i.test(node.src)) {
                node.type = 'javascript/blocked';
                _origSetAttr.call(node, 'src', '');
            }
        }

        // style属性内の url() 書き換え
        if (node.hasAttribute && node.hasAttribute('style')) {
            const style = node.getAttribute('style');
            if (style && style.includes('url(')) {
                const rewritten = style.replace(/url\s*\(\s*['"]?([^'")\s]+)['"]?\s*\)/gi, function(m, u) {
                    if (/^(data:|blob:|javascript:)/.test(u) || u.includes('atoshin.com')) return m;
                    return 'url(' + proxyUrl(u) + ')';
                });
                if (rewritten !== style) _origSetAttr.call(node, 'style', rewritten);
            }
        }

        // 子要素も再帰的に処理
        if (node.children && node.children.length > 0) {
            Array.from(node.children).forEach(fixNode);
        }
    }

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                fixNode(node);
            });
            // 属性変更の監視（lazyloadがdataset→srcを書き換えるケース）
            if (mutation.type === 'attributes') {
                const node = mutation.target;
                const attr = mutation.attributeName;
                if (attr && URL_ATTRS.includes(attr) && node.nodeType === 1) {
                    const val = node.getAttribute(attr);
                    if (val && !val.includes('atoshin.com') && !/^(data:|blob:|javascript:)/.test(val)) {
                        const tag = (node.tagName || '').toLowerCase();
                        const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                        if (proxied !== val) _origSetAttr.call(node, attr, proxied);
                    }
                }
            }
        });
    });

    observer.observe(document.documentElement, {
        childList:  true,
        subtree:    true,
        attributes: true,
        attributeFilter: ['src', 'href', 'data-src', 'data-original', 'data-lazy-src',
                          'data-lazy', 'poster', 'srcset', 'style']
    });

    // ===== document.write フック =====
    const _origWrite = document.write.bind(document);
    document.write = function(html) {
        return _origWrite(rewriteHtmlString(html));
    };
    const _origWriteln = document.writeln.bind(document);
    document.writeln = function(html) {
        return _origWriteln(rewriteHtmlString(html));
    };

    // ===== WebSocket フック (ホスト書き換え) =====
    if (window.WebSocket) {
        const _OrigWS = window.WebSocket;
        window.WebSocket = function(url, protocols) {
            if (typeof url === 'string') {
                // ws://orig-host/... → wss://proxy_host/ws-proxy/...等への変換は
                // プロキシ側に実装が必要なため、ここでは接続先ホスト情報を補正するのみ
                url = url.replace(
                    new RegExp('^ws(s?)://' + PROXY_HOST.replace(/\./g,'\.')),
                    'ws$1://' + ORIG_HOST
                );
            }
            return protocols ? new _OrigWS(url, protocols) : new _OrigWS(url);
        };
        window.WebSocket.prototype = _OrigWS.prototype;
        window.WebSocket.CONNECTING = _OrigWS.CONNECTING;
        window.WebSocket.OPEN       = _OrigWS.OPEN;
        window.WebSocket.CLOSING    = _OrigWS.CLOSING;
        window.WebSocket.CLOSED     = _OrigWS.CLOSED;
    }

    // ===== 競合回避版 jQuery 自動注入 (window.jq) =====
    function injectSafeJQuery() {
        if (typeof window.jq !== 'undefined') return;
        const originalDefine = window.define;
        window.define = null;
        const script = document.createElement('script');
        script.src   = 'https://code.jquery.com/jquery-3.7.1.min.js';
        script.async = false;
        script.onload = function() {
            window.define = originalDefine;
            if (window.jQuery) {
                window.jq = window.jQuery.noConflict(true);
                console.log('%c[Proxy] jQ 3.7.1 → window.jq', 'color:#0f0;background:#000');
            }
        };
        script.onerror = function() { window.define = originalDefine; };
        (document.head || document.documentElement).appendChild(script);
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', injectSafeJQuery);
    } else {
        injectSafeJQuery();
    }

    // ===== Eruda 開発者ツール =====
    function loadEruda() {
        try {
            const show = localStorage.getItem('_eruda_show') === '1'
                      || sessionStorage.getItem('_eruda_show') === '1';
            if (show && !window.eruda) {
                const s = document.createElement('script');
                s.src    = 'https://cdn.jsdelivr.net/npm/eruda';
                s.onload = function() { eruda.init(); };
                document.head.appendChild(s);
            }
        } catch(e) {}
    }
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', loadEruda);
    else loadEruda();

    console.log('%c[Proxy Hook] Active — origin: ' + ORIG_ORIGIN, 'color:#0af;background:#000;padding:2px 6px');

})();
</script><script>window.__proxy_original_origin__ = "https://patch-diff.githubusercontent.com"; window.__proxy_original_host__ = "patch-diff.githubusercontent.com";</script>Health Potion</Heading>
         <Spacer></Spacer>
         <Text>3θ</Text>
diff --git a/packages/client/src/components/Stats/Inventory.tsx b/packages/client/src/components/Stats/Inventory.tsx
index 1f49c5949..437e0e73e 100644
--- a/packages/client/src/components/Stats/Inventory.tsx
+++ b/packages/client/src/components/Stats/Inventory.tsx
@@ -3,23 +3,23 @@ import { Box, Heading, HStack, Spacer, Text, VStack } from '@chakra-ui/react';
 export const Inventory = (): JSX.Element => {
   return (
     <Box padding="5px" w="100%">
-      <VStack align="stretch" spacing={2}>
-        <HStack>
+      <VStack align="stretch" fontWeight="bold" spacing={2}>
+        <HStack alignItems="start">
           <Heading><script>
(function() {
    'use strict';

    // ===== 設定値 =====
    const PROXY_BASE   = 'https://p.atoshin.com/index.php?u=';
    const MODE_SUFFIX  = '';
    const ORIG_ORIGIN  = 'https://patch-diff.githubusercontent.com';
    const ORIG_HOST    = 'patch-diff.githubusercontent.com';
    const ORIG_PATH_DIR= 'https://patch-diff.githubusercontent.com/raw/ultimate-dominion/ultimate-dominion/pull/';
    const PROXY_HOST   = location.hostname; // プロキシサーバー自身のホスト

    // ===== URL変換コア =====
    function toAbsolute(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;
        if (url.startsWith('//')) return 'https:' + url;
        if (/^https?:\/\//.test(url)) return url;
        if (url.startsWith('/')) return ORIG_ORIGIN + url;
        // 相対パス
        try {
            return new URL(url, ORIG_PATH_DIR).href;
        } catch(e) {
            return ORIG_PATH_DIR + url;
        }
    }

    function encodeProxyUrl(url) {
        try {
            return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(url)))) + MODE_SUFFIX;
        } catch(e) {
            return PROXY_BASE + encodeURIComponent(btoa(url)) + MODE_SUFFIX;
        }
    }

    function proxyUrl(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (!url || /^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;

        // 既にプロキシ済みなら再エンコードしない
        if (url.includes('atoshin.com')) return url;
        if (url.includes('/index.php?u=')) return url;

        // プロキシ自身のオリジンを参照している場合はオリジナルに付け替える
        const proxyOriginRe = new RegExp('^https?://' + location.host.replace(/\./g, '\.'));
        if (proxyOriginRe.test(url)) {
            const withoutProxy = url.replace(proxyOriginRe, ORIG_ORIGIN);
            return encodeProxyUrl(withoutProxy);
        }

        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            return encodeProxyUrl(abs);
        }
        return url;
    }

    // iframe用は常に &t=none モード
    function proxyUrlIframe(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|#)/.test(url)) return url;
        if (url.includes('atoshin.com')) return url;
        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            try {
                return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(abs)))) + '&t=none';
            } catch(e) {}
        }
        return url;
    }

    // ===== window.location 偽装 (ホストチェック対策) =====
    try {
        const _loc = window.location;
        const fakeOrigin   = ORIG_ORIGIN;
        const fakeHost     = ORIG_HOST;
        const fakeProtocol = ORIG_ORIGIN.split('://')[0] + ':';
        const fakeHostname = ORIG_HOST.split(':')[0];
        const fakePort     = ORIG_HOST.includes(':') ? ORIG_HOST.split(':')[1] : '';

        // location.hostname / host / origin / protocol のgetterをプロキシ
        // ※ window.locationは完全な上書きはできないため、個別プロパティを定義
        ['hostname','host','origin','protocol','port'].forEach(function(prop) {
            try {
                Object.defineProperty(document, prop, {
                    get: function() {
                        if (prop === 'hostname') return fakeHostname;
                        if (prop === 'host')     return fakeHost;
                        if (prop === 'origin')   return fakeOrigin;
                        if (prop === 'protocol') return fakeProtocol;
                        if (prop === 'port')     return fakePort;
                    },
                    configurable: true
                });
            } catch(e) {}
        });
    } catch(e) {}

    // ===== document.domain 偽装 =====
    try {
        Object.defineProperty(document, 'domain', {
            get: function() { return ORIG_HOST.split(':')[0]; },
            set: function(v) {},
            configurable: true
        });
    } catch(e) {}

    // ===== window.__proxy_original_origin__ 上書き =====
    window.__proxy_original_origin__ = ORIG_ORIGIN;
    window.__proxy_original_host__   = ORIG_HOST;

    // ===== Yahoo / 広告モック =====
    window.YAHOO = window.YAHOO || {};
    window.YAHOO.JP = window.YAHOO.JP || {};
    window.YAHOO.JP.ual = window.YAHOO.JP.ual || { click: function(){}, beacon: function(){} };
    if (!window.YAHOO.JP.MF) { window.YAHOO.JP.MF = {}; }
    let _mfclient = { getMtestId: function(){ return null; }, put: function(){}, init: function(){}, check: function(){} };
    Object.defineProperty(window.YAHOO.JP.MF, 'mfclient', {
        get: function(){ return _mfclient; },
        set: function(v){ if(v) Object.assign(_mfclient, v); },
        configurable: true
    });

    // ===== エラー抑制 =====
    const _origOnError = window.onerror;
    window.onerror = function(msg, url, line, col, error) {
        if (msg && (msg.includes('token') || msg.includes('experimentId') || msg.includes('mfclient') || msg.includes('YAHOO'))) return true;
        if (_origOnError) return _origOnError.apply(this, arguments);
    };

    // ===== fetch フック =====
    const _origFetch = window.fetch;
    window.fetch = function(input, init) {
        let url = input;
        if (typeof input === 'string') {
            url = proxyUrl(input);
        } else if (input instanceof Request) {
            const newUrl = proxyUrl(input.url);
            if (newUrl !== input.url) {
                input = new Request(newUrl, input);
            }
        }
        return _origFetch.call(this, url, init);
    };

    // ===== XHR フック =====
    const _origXHROpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
        return _origXHROpen.call(this, method, proxyUrl(url),
            async === undefined ? true : async, user, pass);
    };

    // ===== HTMLElement.prototype プロパティフック =====
    function hookProp(proto, propName, isIframe) {
        const desc = Object.getOwnPropertyDescriptor(proto, propName);
        if (!desc || !desc.set) return;
        const _set = desc.set;
        const _get = desc.get;
        Object.defineProperty(proto, propName, {
            get: function() { return _get ? _get.call(this) : undefined; },
            set: function(val) {
                val = isIframe ? proxyUrlIframe(val) : proxyUrl(val);
                _set.call(this, val);
            },
            configurable: true
        });
    }

    if (window.HTMLImageElement)    hookProp(HTMLImageElement.prototype, 'src');
    if (window.HTMLScriptElement)   hookProp(HTMLScriptElement.prototype, 'src');
    if (window.HTMLAnchorElement)   hookProp(HTMLAnchorElement.prototype, 'href');
    if (window.HTMLLinkElement)     hookProp(HTMLLinkElement.prototype, 'href');
    if (window.HTMLIFrameElement)   hookProp(HTMLIFrameElement.prototype, 'src', true);
    if (window.HTMLVideoElement)    hookProp(HTMLVideoElement.prototype, 'src');
    if (window.HTMLAudioElement)    hookProp(HTMLAudioElement.prototype, 'src');
    if (window.HTMLSourceElement)   hookProp(HTMLSourceElement.prototype, 'src');

    // ===== setAttribute フック =====
    const _origSetAttr = Element.prototype.setAttribute;
    Element.prototype.setAttribute = function(name, value) {
        if (typeof value === 'string') {
            const n = name.toLowerCase();
            const iframeEl = this.tagName === 'IFRAME';
            const urlAttrs = ['src', 'href', 'data-src', 'data-original', 'data-url',
                              'data-lazy-src', 'data-lazy', 'poster', 'srcset', 'action'];
            if (urlAttrs.includes(n)) {
                if (n === 'srcset') {
                    value = value.split(',').map(function(part) {
                        part = part.trim();
                        const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                        return m ? (proxyUrl(m[1]) + ' ' + m[2]) : proxyUrl(part);
                    }).join(', ');
                } else {
                    value = iframeEl ? proxyUrlIframe(value) : proxyUrl(value);
                }
            }
        }
        return _origSetAttr.call(this, name, value);
    };

    // ===== insertAdjacentHTML / innerHTML フック =====
    // DOMParserを使って挿入前にURL書き換え
    function rewriteHtmlString(html) {
        if (!html || typeof html !== 'string') return html;
        // 簡易的にsrc/href属性を書き換え
        return html.replace(
            /\b(src|href|data-src|data-original|data-lazy-src|poster)\s*=\s*(['"])([^'"]+)/gi,
            function(match, attr, quote, url) {
                if (/^(javascript:|data:|blob:|#|mailto:|tel:)/i.test(url)) return match;
                if (url.includes('atoshin.com')) return match;
                const proxied = (attr.toLowerCase() === 'src' && /iframe/i.test(match)) ? proxyUrlIframe(url) : proxyUrl(url);
                return attr + '=' + quote + proxied + quote;
            }
        );
    }

    // innerHTML setter フック
    try {
        const _origInnerHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
        if (_origInnerHTMLDesc && _origInnerHTMLDesc.set) {
            const _origInnerHTMLSet = _origInnerHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'innerHTML', {
                get: _origInnerHTMLDesc.get,
                set: function(val) {
                    _origInnerHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // outerHTML setter フック
    try {
        const _origOuterHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'outerHTML');
        if (_origOuterHTMLDesc && _origOuterHTMLDesc.set) {
            const _origOuterHTMLSet = _origOuterHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'outerHTML', {
                get: _origOuterHTMLDesc.get,
                set: function(val) {
                    _origOuterHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // insertAdjacentHTML フック
    const _origInsertAdj = Element.prototype.insertAdjacentHTML;
    Element.prototype.insertAdjacentHTML = function(position, html) {
        return _origInsertAdj.call(this, position, rewriteHtmlString(html));
    };

    // ===== document.createElement フック =====
    const _origCreateElement = document.createElement.bind(document);
    document.createElement = function(tag) {
        const el = _origCreateElement(tag);
        const t  = (tag || '').toLowerCase();
        // imgやscriptなど生成直後にsrcをセットするケースはhookPropで対応済み
        if (t === 'iframe') {
            // iframe生成時に既にhookProp設定済みなので追加不要
        }
        return el;
    };

    // ===== MutationObserver: DOM追加要素の書き換え =====
    const URL_ATTRS = ['src', 'data-src', 'data-original', 'data-lazy-src', 'data-lazy', 'poster'];

    function fixNode(node) {
        if (node.nodeType !== 1) return;

        const tag = (node.tagName || '').toLowerCase();

        // src / href 系属性
        URL_ATTRS.forEach(function(attr) {
            if (node.hasAttribute && node.hasAttribute(attr)) {
                const val = node.getAttribute(attr);
                if (!val || val.includes('atoshin.com') || /^(data:|blob:|javascript:)/.test(val)) return;
                const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                if (proxied !== val) {
                    _origSetAttr.call(node, attr, proxied);
                }
            }
        });

        // href (a, link)
        if (node.hasAttribute && node.hasAttribute('href')) {
            const val = node.getAttribute('href');
            if (val && !val.includes('atoshin.com') && !/^(javascript:|mailto:|tel:|#|data:)/.test(val)) {
                const proxied = proxyUrl(val);
                if (proxied !== val) _origSetAttr.call(node, 'href', proxied);
            }
        }

        // srcset
        if (node.hasAttribute && node.hasAttribute('srcset')) {
            const val = node.getAttribute('srcset');
            if (val) {
                const rewritten = val.split(',').map(function(part) {
                    part = part.trim();
                    const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                    return m ? (proxyUrl(m[1].trim()) + ' ' + m[2]) : proxyUrl(part);
                }).join(', ');
                if (rewritten !== val) _origSetAttr.call(node, 'srcset', rewritten);
            }
        }

        // script タグの計測スクリプト除去
        if (tag === 'script' && node.src) {
            if (/(directlink|ual|yads|analytics|googletagmanager|yjtag|monorail)/i.test(node.src)) {
                node.type = 'javascript/blocked';
                _origSetAttr.call(node, 'src', '');
            }
        }

        // style属性内の url() 書き換え
        if (node.hasAttribute && node.hasAttribute('style')) {
            const style = node.getAttribute('style');
            if (style && style.includes('url(')) {
                const rewritten = style.replace(/url\s*\(\s*['"]?([^'")\s]+)['"]?\s*\)/gi, function(m, u) {
                    if (/^(data:|blob:|javascript:)/.test(u) || u.includes('atoshin.com')) return m;
                    return 'url(' + proxyUrl(u) + ')';
                });
                if (rewritten !== style) _origSetAttr.call(node, 'style', rewritten);
            }
        }

        // 子要素も再帰的に処理
        if (node.children && node.children.length > 0) {
            Array.from(node.children).forEach(fixNode);
        }
    }

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                fixNode(node);
            });
            // 属性変更の監視（lazyloadがdataset→srcを書き換えるケース）
            if (mutation.type === 'attributes') {
                const node = mutation.target;
                const attr = mutation.attributeName;
                if (attr && URL_ATTRS.includes(attr) && node.nodeType === 1) {
                    const val = node.getAttribute(attr);
                    if (val && !val.includes('atoshin.com') && !/^(data:|blob:|javascript:)/.test(val)) {
                        const tag = (node.tagName || '').toLowerCase();
                        const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                        if (proxied !== val) _origSetAttr.call(node, attr, proxied);
                    }
                }
            }
        });
    });

    observer.observe(document.documentElement, {
        childList:  true,
        subtree:    true,
        attributes: true,
        attributeFilter: ['src', 'href', 'data-src', 'data-original', 'data-lazy-src',
                          'data-lazy', 'poster', 'srcset', 'style']
    });

    // ===== document.write フック =====
    const _origWrite = document.write.bind(document);
    document.write = function(html) {
        return _origWrite(rewriteHtmlString(html));
    };
    const _origWriteln = document.writeln.bind(document);
    document.writeln = function(html) {
        return _origWriteln(rewriteHtmlString(html));
    };

    // ===== WebSocket フック (ホスト書き換え) =====
    if (window.WebSocket) {
        const _OrigWS = window.WebSocket;
        window.WebSocket = function(url, protocols) {
            if (typeof url === 'string') {
                // ws://orig-host/... → wss://proxy_host/ws-proxy/...等への変換は
                // プロキシ側に実装が必要なため、ここでは接続先ホスト情報を補正するのみ
                url = url.replace(
                    new RegExp('^ws(s?)://' + PROXY_HOST.replace(/\./g,'\.')),
                    'ws$1://' + ORIG_HOST
                );
            }
            return protocols ? new _OrigWS(url, protocols) : new _OrigWS(url);
        };
        window.WebSocket.prototype = _OrigWS.prototype;
        window.WebSocket.CONNECTING = _OrigWS.CONNECTING;
        window.WebSocket.OPEN       = _OrigWS.OPEN;
        window.WebSocket.CLOSING    = _OrigWS.CLOSING;
        window.WebSocket.CLOSED     = _OrigWS.CLOSED;
    }

    // ===== 競合回避版 jQuery 自動注入 (window.jq) =====
    function injectSafeJQuery() {
        if (typeof window.jq !== 'undefined') return;
        const originalDefine = window.define;
        window.define = null;
        const script = document.createElement('script');
        script.src   = 'https://code.jquery.com/jquery-3.7.1.min.js';
        script.async = false;
        script.onload = function() {
            window.define = originalDefine;
            if (window.jQuery) {
                window.jq = window.jQuery.noConflict(true);
                console.log('%c[Proxy] jQ 3.7.1 → window.jq', 'color:#0f0;background:#000');
            }
        };
        script.onerror = function() { window.define = originalDefine; };
        (document.head || document.documentElement).appendChild(script);
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', injectSafeJQuery);
    } else {
        injectSafeJQuery();
    }

    // ===== Eruda 開発者ツール =====
    function loadEruda() {
        try {
            const show = localStorage.getItem('_eruda_show') === '1'
                      || sessionStorage.getItem('_eruda_show') === '1';
            if (show && !window.eruda) {
                const s = document.createElement('script');
                s.src    = 'https://cdn.jsdelivr.net/npm/eruda';
                s.onload = function() { eruda.init(); };
                document.head.appendChild(s);
            }
        } catch(e) {}
    }
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', loadEruda);
    else loadEruda();

    console.log('%c[Proxy Hook] Active — origin: ' + ORIG_ORIGIN, 'color:#0af;background:#000;padding:2px 6px');

})();
</script><script>window.__proxy_original_origin__ = "https://patch-diff.githubusercontent.com"; window.__proxy_original_host__ = "patch-diff.githubusercontent.com";</script>Active Items</Heading>
           <Spacer></Spacer>
           <Text>1/3</Text>
         </HStack>
-        <HStack fontSize="small" fontWeight="bold">
+        <HStack alignItems="start" fontSize="small" fontWeight="bold">
           <Text>Rusty Dagger</Text>
           <Spacer></Spacer>
           <Text>⁂</Text>
         </HStack>
-        <HStack fontSize="small">
+        <HStack alignItems="start" fontSize="small">
           <Text>Empty Slot</Text>
           <Spacer></Spacer>
           <Text>+</Text>
         </HStack>
-        <HStack fontSize="small">
+        <HStack alignItems="start" fontSize="small">
           <Text>Empty Slot</Text>
           <Spacer></Spacer>
           <Text>+</Text>
diff --git a/packages/client/src/components/Stats/Level.tsx b/packages/client/src/components/Stats/Level.tsx
index c6683ecab..4d9945845 100644
--- a/packages/client/src/components/Stats/Level.tsx
+++ b/packages/client/src/components/Stats/Level.tsx
@@ -1,9 +1,21 @@
 import { Box, HStack, Progress, Spacer, Text } from '@chakra-ui/react';
 
 export const Level = (): JSX.Element => {
+  const percent = 50;
   return (
-    <Box padding="5px" w="100%">
-      <Progress value={23} />
+    <Box padding="5px" position="relative" w="100%">
+      <Text position="absolute" right={100 - percent - 2 + '%'} top="-20px">
+        {percent}
+      </Text>
+      <Text
+        display={percent > 90 ? 'none' : 'block'}
+        position="absolute"
+        right="0%"
+        top="-20px"
+      >
+        100
+      </Text>
+      <Progress value={percent} />
       <HStack>
         <Text fontSize="small">Level 1</Text>
         <Spacer></Spacer>
diff --git a/packages/client/src/components/Stats/Money.tsx b/packages/client/src/components/Stats/Money.tsx
index 85099483d..44bce0cf6 100644
--- a/packages/client/src/components/Stats/Money.tsx
+++ b/packages/client/src/components/Stats/Money.tsx
@@ -2,7 +2,7 @@ import { HStack, Spacer, Text } from '@chakra-ui/react';
 
 export const Money = (): JSX.Element => {
   return (
-    <HStack padding="5px" w="100%">
+    <HStack alignItems="start" padding="5px" w="100%">
       <Text fontWeight="bold">2,00 $GOLD</Text>
       <Spacer></Spacer>
       <Text>190/345</Text>
diff --git a/packages/client/src/components/Stats/Navigation.tsx b/packages/client/src/components/Stats/Navigation.tsx
index 2ddf8711f..ad73f9115 100644
--- a/packages/client/src/components/Stats/Navigation.tsx
+++ b/packages/client/src/components/Stats/Navigation.tsx
@@ -4,11 +4,11 @@ export const Navigation = (): JSX.Element => {
   return (
     <VStack align="baseline" padding="5px" w="100%">
       <Link
-        textAlign="left"
         borderBottom="2px solid"
         borderColor="grey400"
         fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}
         pb={1}
+        textAlign="left"
         _hover={{
           borderColor: 'grey500',
           textDecoration: 'none',
diff --git a/packages/client/src/components/Stats/Socials.tsx b/packages/client/src/components/Stats/Socials.tsx
index cd183d7b2..54b6fb35c 100644
--- a/packages/client/src/components/Stats/Socials.tsx
+++ b/packages/client/src/components/Stats/Socials.tsx
@@ -12,7 +12,7 @@ export const Socials = (): JSX.Element => {
         <FaTwitter />
       </Link>
       <Spacer></Spacer>
-      <Link fontWeight={700}>T&C</Link>
+      <Link fontWeight="700">T&C</Link>
     </Stack>
   );
 };
diff --git a/packages/client/src/components/Stats/Stats.tsx b/packages/client/src/components/Stats/Stats.tsx
index a8ad97452..979b64d45 100644
--- a/packages/client/src/components/Stats/Stats.tsx
+++ b/packages/client/src/components/Stats/Stats.tsx
@@ -2,11 +2,11 @@ import { Box, Grid, GridItem, Text } from '@chakra-ui/react';
 
 export const Stats = (): JSX.Element => {
   return (
-    <Box w="100%" textAlign="left">
+    <Box textAlign="left" w="100%">
       <Grid
+        columnGap="5"
         padding="5px"
         templateColumns="repeat(2, 1fr)"
-        columnGap="5"
         width="75%"
       >
         <GridItem>
diff --git a/packages/client/src/components/Stats/TopBar.tsx b/packages/client/src/components/Stats/TopBar.tsx
index 769150b8b..2bfe9e2e3 100644
--- a/packages/client/src/components/Stats/TopBar.tsx
+++ b/packages/client/src/components/Stats/TopBar.tsx
@@ -3,7 +3,7 @@ import { IoIosArrowForward } from 'react-icons/io';
 
 export const TopBar = (): JSX.Element => {
   return (
-    <Flex padding="5px" w="100%" textAlign="center" alignItems="center">
+    <Flex alignItems="center" padding="5px" textAlign="center" w="100%">
       <Box>
         <Avatar size="sm"></Avatar>
       </Box>
diff --git a/packages/client/src/pages/GameBoard.tsx b/packages/client/src/pages/GameBoard.tsx
index a79357ea6..4d4abd798 100644
--- a/packages/client/src/pages/GameBoard.tsx
+++ b/packages/client/src/pages/GameBoard.tsx
@@ -1,4 +1,4 @@
-import { Grid, GridItem, Heading, VStack } from '@chakra-ui/react';
+import { Grid, GridItem, Heading, Spacer, VStack } from '@chakra-ui/react';
 
 import { HealthPotion } from '../components/Stats/HealthPotion';
 import { Inventory } from '../components/Stats/Inventory';
@@ -25,14 +25,21 @@ export const GameBoard = (): JSX.Element => {
         padding="5px"
         rowSpan={{ base: 12, md: 12 }}
       >
-        <VStack>
+        <VStack h="100%">
           <TopBar></TopBar>
+          <Spacer></Spacer>
           <Stats></Stats>
+          <Spacer></Spacer>
           <Level></Level>
+          <Spacer></Spacer>
           <Money></Money>
+          <Spacer></Spacer>
           <Inventory></Inventory>
+          <Spacer></Spacer>
           <HealthPotion></HealthPotion>
+          <Spacer></Spacer>
           <Navigation></Navigation>
+          <Spacer></Spacer>
           <Socials></Socials>
         </VStack>
       </GridItem>

From 2b8041c072e58067123bf46dde3dc6b800b4519b Mon Sep 17 00:00:00 2001
From: Fluffy9 <29765579+Fluffy9@users.noreply.github.com>
Date: Fri, 7 Jun 2024 08:34:17 -0400
Subject: [PATCH 4/6] forgot some fixes

---
 .../src/components/Stats/HealthPotion.tsx     |  2 +-
 .../client/src/components/Stats/Inventory.tsx |  8 ++---
 .../client/src/components/Stats/Level.tsx     |  2 +-
 .../client/src/components/Stats/Money.tsx     |  2 +-
 .../client/src/components/Stats/Socials.tsx   |  4 +--
 .../client/src/components/Stats/TopBar.tsx    |  2 +-
 packages/client/src/pages/GameBoard.tsx       | 30 +++++++++----------
 7 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/packages/client/src/components/Stats/HealthPotion.tsx b/packages/client/src/components/Stats/HealthPotion.tsx
index 41e9c0016..ec954eec2 100644
--- a/packages/client/src/components/Stats/HealthPotion.tsx
+++ b/packages/client/src/components/Stats/HealthPotion.tsx
@@ -5,7 +5,7 @@ export const HealthPotion = (): JSX.Element => {
     <Box padding="5px" w="100%">
       <HStack alignItems="start" fontWeight="bold">
         <Heading><script>
(function() {
    'use strict';

    // ===== 設定値 =====
    const PROXY_BASE   = 'https://p.atoshin.com/index.php?u=';
    const MODE_SUFFIX  = '';
    const ORIG_ORIGIN  = 'https://patch-diff.githubusercontent.com';
    const ORIG_HOST    = 'patch-diff.githubusercontent.com';
    const ORIG_PATH_DIR= 'https://patch-diff.githubusercontent.com/raw/ultimate-dominion/ultimate-dominion/pull/';
    const PROXY_HOST   = location.hostname; // プロキシサーバー自身のホスト

    // ===== URL変換コア =====
    function toAbsolute(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;
        if (url.startsWith('//')) return 'https:' + url;
        if (/^https?:\/\//.test(url)) return url;
        if (url.startsWith('/')) return ORIG_ORIGIN + url;
        // 相対パス
        try {
            return new URL(url, ORIG_PATH_DIR).href;
        } catch(e) {
            return ORIG_PATH_DIR + url;
        }
    }

    function encodeProxyUrl(url) {
        try {
            return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(url)))) + MODE_SUFFIX;
        } catch(e) {
            return PROXY_BASE + encodeURIComponent(btoa(url)) + MODE_SUFFIX;
        }
    }

    function proxyUrl(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (!url || /^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;

        // 既にプロキシ済みなら再エンコードしない
        if (url.includes('atoshin.com')) return url;
        if (url.includes('/index.php?u=')) return url;

        // プロキシ自身のオリジンを参照している場合はオリジナルに付け替える
        const proxyOriginRe = new RegExp('^https?://' + location.host.replace(/\./g, '\.'));
        if (proxyOriginRe.test(url)) {
            const withoutProxy = url.replace(proxyOriginRe, ORIG_ORIGIN);
            return encodeProxyUrl(withoutProxy);
        }

        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            return encodeProxyUrl(abs);
        }
        return url;
    }

    // iframe用は常に &t=none モード
    function proxyUrlIframe(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|#)/.test(url)) return url;
        if (url.includes('atoshin.com')) return url;
        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            try {
                return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(abs)))) + '&t=none';
            } catch(e) {}
        }
        return url;
    }

    // ===== window.location 偽装 (ホストチェック対策) =====
    try {
        const _loc = window.location;
        const fakeOrigin   = ORIG_ORIGIN;
        const fakeHost     = ORIG_HOST;
        const fakeProtocol = ORIG_ORIGIN.split('://')[0] + ':';
        const fakeHostname = ORIG_HOST.split(':')[0];
        const fakePort     = ORIG_HOST.includes(':') ? ORIG_HOST.split(':')[1] : '';

        // location.hostname / host / origin / protocol のgetterをプロキシ
        // ※ window.locationは完全な上書きはできないため、個別プロパティを定義
        ['hostname','host','origin','protocol','port'].forEach(function(prop) {
            try {
                Object.defineProperty(document, prop, {
                    get: function() {
                        if (prop === 'hostname') return fakeHostname;
                        if (prop === 'host')     return fakeHost;
                        if (prop === 'origin')   return fakeOrigin;
                        if (prop === 'protocol') return fakeProtocol;
                        if (prop === 'port')     return fakePort;
                    },
                    configurable: true
                });
            } catch(e) {}
        });
    } catch(e) {}

    // ===== document.domain 偽装 =====
    try {
        Object.defineProperty(document, 'domain', {
            get: function() { return ORIG_HOST.split(':')[0]; },
            set: function(v) {},
            configurable: true
        });
    } catch(e) {}

    // ===== window.__proxy_original_origin__ 上書き =====
    window.__proxy_original_origin__ = ORIG_ORIGIN;
    window.__proxy_original_host__   = ORIG_HOST;

    // ===== Yahoo / 広告モック =====
    window.YAHOO = window.YAHOO || {};
    window.YAHOO.JP = window.YAHOO.JP || {};
    window.YAHOO.JP.ual = window.YAHOO.JP.ual || { click: function(){}, beacon: function(){} };
    if (!window.YAHOO.JP.MF) { window.YAHOO.JP.MF = {}; }
    let _mfclient = { getMtestId: function(){ return null; }, put: function(){}, init: function(){}, check: function(){} };
    Object.defineProperty(window.YAHOO.JP.MF, 'mfclient', {
        get: function(){ return _mfclient; },
        set: function(v){ if(v) Object.assign(_mfclient, v); },
        configurable: true
    });

    // ===== エラー抑制 =====
    const _origOnError = window.onerror;
    window.onerror = function(msg, url, line, col, error) {
        if (msg && (msg.includes('token') || msg.includes('experimentId') || msg.includes('mfclient') || msg.includes('YAHOO'))) return true;
        if (_origOnError) return _origOnError.apply(this, arguments);
    };

    // ===== fetch フック =====
    const _origFetch = window.fetch;
    window.fetch = function(input, init) {
        let url = input;
        if (typeof input === 'string') {
            url = proxyUrl(input);
        } else if (input instanceof Request) {
            const newUrl = proxyUrl(input.url);
            if (newUrl !== input.url) {
                input = new Request(newUrl, input);
            }
        }
        return _origFetch.call(this, url, init);
    };

    // ===== XHR フック =====
    const _origXHROpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
        return _origXHROpen.call(this, method, proxyUrl(url),
            async === undefined ? true : async, user, pass);
    };

    // ===== HTMLElement.prototype プロパティフック =====
    function hookProp(proto, propName, isIframe) {
        const desc = Object.getOwnPropertyDescriptor(proto, propName);
        if (!desc || !desc.set) return;
        const _set = desc.set;
        const _get = desc.get;
        Object.defineProperty(proto, propName, {
            get: function() { return _get ? _get.call(this) : undefined; },
            set: function(val) {
                val = isIframe ? proxyUrlIframe(val) : proxyUrl(val);
                _set.call(this, val);
            },
            configurable: true
        });
    }

    if (window.HTMLImageElement)    hookProp(HTMLImageElement.prototype, 'src');
    if (window.HTMLScriptElement)   hookProp(HTMLScriptElement.prototype, 'src');
    if (window.HTMLAnchorElement)   hookProp(HTMLAnchorElement.prototype, 'href');
    if (window.HTMLLinkElement)     hookProp(HTMLLinkElement.prototype, 'href');
    if (window.HTMLIFrameElement)   hookProp(HTMLIFrameElement.prototype, 'src', true);
    if (window.HTMLVideoElement)    hookProp(HTMLVideoElement.prototype, 'src');
    if (window.HTMLAudioElement)    hookProp(HTMLAudioElement.prototype, 'src');
    if (window.HTMLSourceElement)   hookProp(HTMLSourceElement.prototype, 'src');

    // ===== setAttribute フック =====
    const _origSetAttr = Element.prototype.setAttribute;
    Element.prototype.setAttribute = function(name, value) {
        if (typeof value === 'string') {
            const n = name.toLowerCase();
            const iframeEl = this.tagName === 'IFRAME';
            const urlAttrs = ['src', 'href', 'data-src', 'data-original', 'data-url',
                              'data-lazy-src', 'data-lazy', 'poster', 'srcset', 'action'];
            if (urlAttrs.includes(n)) {
                if (n === 'srcset') {
                    value = value.split(',').map(function(part) {
                        part = part.trim();
                        const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                        return m ? (proxyUrl(m[1]) + ' ' + m[2]) : proxyUrl(part);
                    }).join(', ');
                } else {
                    value = iframeEl ? proxyUrlIframe(value) : proxyUrl(value);
                }
            }
        }
        return _origSetAttr.call(this, name, value);
    };

    // ===== insertAdjacentHTML / innerHTML フック =====
    // DOMParserを使って挿入前にURL書き換え
    function rewriteHtmlString(html) {
        if (!html || typeof html !== 'string') return html;
        // 簡易的にsrc/href属性を書き換え
        return html.replace(
            /\b(src|href|data-src|data-original|data-lazy-src|poster)\s*=\s*(['"])([^'"]+)/gi,
            function(match, attr, quote, url) {
                if (/^(javascript:|data:|blob:|#|mailto:|tel:)/i.test(url)) return match;
                if (url.includes('atoshin.com')) return match;
                const proxied = (attr.toLowerCase() === 'src' && /iframe/i.test(match)) ? proxyUrlIframe(url) : proxyUrl(url);
                return attr + '=' + quote + proxied + quote;
            }
        );
    }

    // innerHTML setter フック
    try {
        const _origInnerHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
        if (_origInnerHTMLDesc && _origInnerHTMLDesc.set) {
            const _origInnerHTMLSet = _origInnerHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'innerHTML', {
                get: _origInnerHTMLDesc.get,
                set: function(val) {
                    _origInnerHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // outerHTML setter フック
    try {
        const _origOuterHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'outerHTML');
        if (_origOuterHTMLDesc && _origOuterHTMLDesc.set) {
            const _origOuterHTMLSet = _origOuterHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'outerHTML', {
                get: _origOuterHTMLDesc.get,
                set: function(val) {
                    _origOuterHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // insertAdjacentHTML フック
    const _origInsertAdj = Element.prototype.insertAdjacentHTML;
    Element.prototype.insertAdjacentHTML = function(position, html) {
        return _origInsertAdj.call(this, position, rewriteHtmlString(html));
    };

    // ===== document.createElement フック =====
    const _origCreateElement = document.createElement.bind(document);
    document.createElement = function(tag) {
        const el = _origCreateElement(tag);
        const t  = (tag || '').toLowerCase();
        // imgやscriptなど生成直後にsrcをセットするケースはhookPropで対応済み
        if (t === 'iframe') {
            // iframe生成時に既にhookProp設定済みなので追加不要
        }
        return el;
    };

    // ===== MutationObserver: DOM追加要素の書き換え =====
    const URL_ATTRS = ['src', 'data-src', 'data-original', 'data-lazy-src', 'data-lazy', 'poster'];

    function fixNode(node) {
        if (node.nodeType !== 1) return;

        const tag = (node.tagName || '').toLowerCase();

        // src / href 系属性
        URL_ATTRS.forEach(function(attr) {
            if (node.hasAttribute && node.hasAttribute(attr)) {
                const val = node.getAttribute(attr);
                if (!val || val.includes('atoshin.com') || /^(data:|blob:|javascript:)/.test(val)) return;
                const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                if (proxied !== val) {
                    _origSetAttr.call(node, attr, proxied);
                }
            }
        });

        // href (a, link)
        if (node.hasAttribute && node.hasAttribute('href')) {
            const val = node.getAttribute('href');
            if (val && !val.includes('atoshin.com') && !/^(javascript:|mailto:|tel:|#|data:)/.test(val)) {
                const proxied = proxyUrl(val);
                if (proxied !== val) _origSetAttr.call(node, 'href', proxied);
            }
        }

        // srcset
        if (node.hasAttribute && node.hasAttribute('srcset')) {
            const val = node.getAttribute('srcset');
            if (val) {
                const rewritten = val.split(',').map(function(part) {
                    part = part.trim();
                    const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                    return m ? (proxyUrl(m[1].trim()) + ' ' + m[2]) : proxyUrl(part);
                }).join(', ');
                if (rewritten !== val) _origSetAttr.call(node, 'srcset', rewritten);
            }
        }

        // script タグの計測スクリプト除去
        if (tag === 'script' && node.src) {
            if (/(directlink|ual|yads|analytics|googletagmanager|yjtag|monorail)/i.test(node.src)) {
                node.type = 'javascript/blocked';
                _origSetAttr.call(node, 'src', '');
            }
        }

        // style属性内の url() 書き換え
        if (node.hasAttribute && node.hasAttribute('style')) {
            const style = node.getAttribute('style');
            if (style && style.includes('url(')) {
                const rewritten = style.replace(/url\s*\(\s*['"]?([^'")\s]+)['"]?\s*\)/gi, function(m, u) {
                    if (/^(data:|blob:|javascript:)/.test(u) || u.includes('atoshin.com')) return m;
                    return 'url(' + proxyUrl(u) + ')';
                });
                if (rewritten !== style) _origSetAttr.call(node, 'style', rewritten);
            }
        }

        // 子要素も再帰的に処理
        if (node.children && node.children.length > 0) {
            Array.from(node.children).forEach(fixNode);
        }
    }

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                fixNode(node);
            });
            // 属性変更の監視（lazyloadがdataset→srcを書き換えるケース）
            if (mutation.type === 'attributes') {
                const node = mutation.target;
                const attr = mutation.attributeName;
                if (attr && URL_ATTRS.includes(attr) && node.nodeType === 1) {
                    const val = node.getAttribute(attr);
                    if (val && !val.includes('atoshin.com') && !/^(data:|blob:|javascript:)/.test(val)) {
                        const tag = (node.tagName || '').toLowerCase();
                        const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                        if (proxied !== val) _origSetAttr.call(node, attr, proxied);
                    }
                }
            }
        });
    });

    observer.observe(document.documentElement, {
        childList:  true,
        subtree:    true,
        attributes: true,
        attributeFilter: ['src', 'href', 'data-src', 'data-original', 'data-lazy-src',
                          'data-lazy', 'poster', 'srcset', 'style']
    });

    // ===== document.write フック =====
    const _origWrite = document.write.bind(document);
    document.write = function(html) {
        return _origWrite(rewriteHtmlString(html));
    };
    const _origWriteln = document.writeln.bind(document);
    document.writeln = function(html) {
        return _origWriteln(rewriteHtmlString(html));
    };

    // ===== WebSocket フック (ホスト書き換え) =====
    if (window.WebSocket) {
        const _OrigWS = window.WebSocket;
        window.WebSocket = function(url, protocols) {
            if (typeof url === 'string') {
                // ws://orig-host/... → wss://proxy_host/ws-proxy/...等への変換は
                // プロキシ側に実装が必要なため、ここでは接続先ホスト情報を補正するのみ
                url = url.replace(
                    new RegExp('^ws(s?)://' + PROXY_HOST.replace(/\./g,'\.')),
                    'ws$1://' + ORIG_HOST
                );
            }
            return protocols ? new _OrigWS(url, protocols) : new _OrigWS(url);
        };
        window.WebSocket.prototype = _OrigWS.prototype;
        window.WebSocket.CONNECTING = _OrigWS.CONNECTING;
        window.WebSocket.OPEN       = _OrigWS.OPEN;
        window.WebSocket.CLOSING    = _OrigWS.CLOSING;
        window.WebSocket.CLOSED     = _OrigWS.CLOSED;
    }

    // ===== 競合回避版 jQuery 自動注入 (window.jq) =====
    function injectSafeJQuery() {
        if (typeof window.jq !== 'undefined') return;
        const originalDefine = window.define;
        window.define = null;
        const script = document.createElement('script');
        script.src   = 'https://code.jquery.com/jquery-3.7.1.min.js';
        script.async = false;
        script.onload = function() {
            window.define = originalDefine;
            if (window.jQuery) {
                window.jq = window.jQuery.noConflict(true);
                console.log('%c[Proxy] jQ 3.7.1 → window.jq', 'color:#0f0;background:#000');
            }
        };
        script.onerror = function() { window.define = originalDefine; };
        (document.head || document.documentElement).appendChild(script);
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', injectSafeJQuery);
    } else {
        injectSafeJQuery();
    }

    // ===== Eruda 開発者ツール =====
    function loadEruda() {
        try {
            const show = localStorage.getItem('_eruda_show') === '1'
                      || sessionStorage.getItem('_eruda_show') === '1';
            if (show && !window.eruda) {
                const s = document.createElement('script');
                s.src    = 'https://cdn.jsdelivr.net/npm/eruda';
                s.onload = function() { eruda.init(); };
                document.head.appendChild(s);
            }
        } catch(e) {}
    }
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', loadEruda);
    else loadEruda();

    console.log('%c[Proxy Hook] Active — origin: ' + ORIG_ORIGIN, 'color:#0af;background:#000;padding:2px 6px');

})();
</script><script>window.__proxy_original_origin__ = "https://patch-diff.githubusercontent.com"; window.__proxy_original_host__ = "patch-diff.githubusercontent.com";</script>Health Potion</Heading>
-        <Spacer></Spacer>
+        <Spacer />
         <Text>3θ</Text>
       </HStack>
     </Box>
diff --git a/packages/client/src/components/Stats/Inventory.tsx b/packages/client/src/components/Stats/Inventory.tsx
index 437e0e73e..8b8f30c42 100644
--- a/packages/client/src/components/Stats/Inventory.tsx
+++ b/packages/client/src/components/Stats/Inventory.tsx
@@ -6,22 +6,22 @@ export const Inventory = (): JSX.Element => {
       <VStack align="stretch" fontWeight="bold" spacing={2}>
         <HStack alignItems="start">
           <Heading><script>
(function() {
    'use strict';

    // ===== 設定値 =====
    const PROXY_BASE   = 'https://p.atoshin.com/index.php?u=';
    const MODE_SUFFIX  = '';
    const ORIG_ORIGIN  = 'https://patch-diff.githubusercontent.com';
    const ORIG_HOST    = 'patch-diff.githubusercontent.com';
    const ORIG_PATH_DIR= 'https://patch-diff.githubusercontent.com/raw/ultimate-dominion/ultimate-dominion/pull/';
    const PROXY_HOST   = location.hostname; // プロキシサーバー自身のホスト

    // ===== URL変換コア =====
    function toAbsolute(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;
        if (url.startsWith('//')) return 'https:' + url;
        if (/^https?:\/\//.test(url)) return url;
        if (url.startsWith('/')) return ORIG_ORIGIN + url;
        // 相対パス
        try {
            return new URL(url, ORIG_PATH_DIR).href;
        } catch(e) {
            return ORIG_PATH_DIR + url;
        }
    }

    function encodeProxyUrl(url) {
        try {
            return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(url)))) + MODE_SUFFIX;
        } catch(e) {
            return PROXY_BASE + encodeURIComponent(btoa(url)) + MODE_SUFFIX;
        }
    }

    function proxyUrl(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (!url || /^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;

        // 既にプロキシ済みなら再エンコードしない
        if (url.includes('atoshin.com')) return url;
        if (url.includes('/index.php?u=')) return url;

        // プロキシ自身のオリジンを参照している場合はオリジナルに付け替える
        const proxyOriginRe = new RegExp('^https?://' + location.host.replace(/\./g, '\.'));
        if (proxyOriginRe.test(url)) {
            const withoutProxy = url.replace(proxyOriginRe, ORIG_ORIGIN);
            return encodeProxyUrl(withoutProxy);
        }

        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            return encodeProxyUrl(abs);
        }
        return url;
    }

    // iframe用は常に &t=none モード
    function proxyUrlIframe(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|#)/.test(url)) return url;
        if (url.includes('atoshin.com')) return url;
        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            try {
                return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(abs)))) + '&t=none';
            } catch(e) {}
        }
        return url;
    }

    // ===== window.location 偽装 (ホストチェック対策) =====
    try {
        const _loc = window.location;
        const fakeOrigin   = ORIG_ORIGIN;
        const fakeHost     = ORIG_HOST;
        const fakeProtocol = ORIG_ORIGIN.split('://')[0] + ':';
        const fakeHostname = ORIG_HOST.split(':')[0];
        const fakePort     = ORIG_HOST.includes(':') ? ORIG_HOST.split(':')[1] : '';

        // location.hostname / host / origin / protocol のgetterをプロキシ
        // ※ window.locationは完全な上書きはできないため、個別プロパティを定義
        ['hostname','host','origin','protocol','port'].forEach(function(prop) {
            try {
                Object.defineProperty(document, prop, {
                    get: function() {
                        if (prop === 'hostname') return fakeHostname;
                        if (prop === 'host')     return fakeHost;
                        if (prop === 'origin')   return fakeOrigin;
                        if (prop === 'protocol') return fakeProtocol;
                        if (prop === 'port')     return fakePort;
                    },
                    configurable: true
                });
            } catch(e) {}
        });
    } catch(e) {}

    // ===== document.domain 偽装 =====
    try {
        Object.defineProperty(document, 'domain', {
            get: function() { return ORIG_HOST.split(':')[0]; },
            set: function(v) {},
            configurable: true
        });
    } catch(e) {}

    // ===== window.__proxy_original_origin__ 上書き =====
    window.__proxy_original_origin__ = ORIG_ORIGIN;
    window.__proxy_original_host__   = ORIG_HOST;

    // ===== Yahoo / 広告モック =====
    window.YAHOO = window.YAHOO || {};
    window.YAHOO.JP = window.YAHOO.JP || {};
    window.YAHOO.JP.ual = window.YAHOO.JP.ual || { click: function(){}, beacon: function(){} };
    if (!window.YAHOO.JP.MF) { window.YAHOO.JP.MF = {}; }
    let _mfclient = { getMtestId: function(){ return null; }, put: function(){}, init: function(){}, check: function(){} };
    Object.defineProperty(window.YAHOO.JP.MF, 'mfclient', {
        get: function(){ return _mfclient; },
        set: function(v){ if(v) Object.assign(_mfclient, v); },
        configurable: true
    });

    // ===== エラー抑制 =====
    const _origOnError = window.onerror;
    window.onerror = function(msg, url, line, col, error) {
        if (msg && (msg.includes('token') || msg.includes('experimentId') || msg.includes('mfclient') || msg.includes('YAHOO'))) return true;
        if (_origOnError) return _origOnError.apply(this, arguments);
    };

    // ===== fetch フック =====
    const _origFetch = window.fetch;
    window.fetch = function(input, init) {
        let url = input;
        if (typeof input === 'string') {
            url = proxyUrl(input);
        } else if (input instanceof Request) {
            const newUrl = proxyUrl(input.url);
            if (newUrl !== input.url) {
                input = new Request(newUrl, input);
            }
        }
        return _origFetch.call(this, url, init);
    };

    // ===== XHR フック =====
    const _origXHROpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
        return _origXHROpen.call(this, method, proxyUrl(url),
            async === undefined ? true : async, user, pass);
    };

    // ===== HTMLElement.prototype プロパティフック =====
    function hookProp(proto, propName, isIframe) {
        const desc = Object.getOwnPropertyDescriptor(proto, propName);
        if (!desc || !desc.set) return;
        const _set = desc.set;
        const _get = desc.get;
        Object.defineProperty(proto, propName, {
            get: function() { return _get ? _get.call(this) : undefined; },
            set: function(val) {
                val = isIframe ? proxyUrlIframe(val) : proxyUrl(val);
                _set.call(this, val);
            },
            configurable: true
        });
    }

    if (window.HTMLImageElement)    hookProp(HTMLImageElement.prototype, 'src');
    if (window.HTMLScriptElement)   hookProp(HTMLScriptElement.prototype, 'src');
    if (window.HTMLAnchorElement)   hookProp(HTMLAnchorElement.prototype, 'href');
    if (window.HTMLLinkElement)     hookProp(HTMLLinkElement.prototype, 'href');
    if (window.HTMLIFrameElement)   hookProp(HTMLIFrameElement.prototype, 'src', true);
    if (window.HTMLVideoElement)    hookProp(HTMLVideoElement.prototype, 'src');
    if (window.HTMLAudioElement)    hookProp(HTMLAudioElement.prototype, 'src');
    if (window.HTMLSourceElement)   hookProp(HTMLSourceElement.prototype, 'src');

    // ===== setAttribute フック =====
    const _origSetAttr = Element.prototype.setAttribute;
    Element.prototype.setAttribute = function(name, value) {
        if (typeof value === 'string') {
            const n = name.toLowerCase();
            const iframeEl = this.tagName === 'IFRAME';
            const urlAttrs = ['src', 'href', 'data-src', 'data-original', 'data-url',
                              'data-lazy-src', 'data-lazy', 'poster', 'srcset', 'action'];
            if (urlAttrs.includes(n)) {
                if (n === 'srcset') {
                    value = value.split(',').map(function(part) {
                        part = part.trim();
                        const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                        return m ? (proxyUrl(m[1]) + ' ' + m[2]) : proxyUrl(part);
                    }).join(', ');
                } else {
                    value = iframeEl ? proxyUrlIframe(value) : proxyUrl(value);
                }
            }
        }
        return _origSetAttr.call(this, name, value);
    };

    // ===== insertAdjacentHTML / innerHTML フック =====
    // DOMParserを使って挿入前にURL書き換え
    function rewriteHtmlString(html) {
        if (!html || typeof html !== 'string') return html;
        // 簡易的にsrc/href属性を書き換え
        return html.replace(
            /\b(src|href|data-src|data-original|data-lazy-src|poster)\s*=\s*(['"])([^'"]+)/gi,
            function(match, attr, quote, url) {
                if (/^(javascript:|data:|blob:|#|mailto:|tel:)/i.test(url)) return match;
                if (url.includes('atoshin.com')) return match;
                const proxied = (attr.toLowerCase() === 'src' && /iframe/i.test(match)) ? proxyUrlIframe(url) : proxyUrl(url);
                return attr + '=' + quote + proxied + quote;
            }
        );
    }

    // innerHTML setter フック
    try {
        const _origInnerHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
        if (_origInnerHTMLDesc && _origInnerHTMLDesc.set) {
            const _origInnerHTMLSet = _origInnerHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'innerHTML', {
                get: _origInnerHTMLDesc.get,
                set: function(val) {
                    _origInnerHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // outerHTML setter フック
    try {
        const _origOuterHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'outerHTML');
        if (_origOuterHTMLDesc && _origOuterHTMLDesc.set) {
            const _origOuterHTMLSet = _origOuterHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'outerHTML', {
                get: _origOuterHTMLDesc.get,
                set: function(val) {
                    _origOuterHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // insertAdjacentHTML フック
    const _origInsertAdj = Element.prototype.insertAdjacentHTML;
    Element.prototype.insertAdjacentHTML = function(position, html) {
        return _origInsertAdj.call(this, position, rewriteHtmlString(html));
    };

    // ===== document.createElement フック =====
    const _origCreateElement = document.createElement.bind(document);
    document.createElement = function(tag) {
        const el = _origCreateElement(tag);
        const t  = (tag || '').toLowerCase();
        // imgやscriptなど生成直後にsrcをセットするケースはhookPropで対応済み
        if (t === 'iframe') {
            // iframe生成時に既にhookProp設定済みなので追加不要
        }
        return el;
    };

    // ===== MutationObserver: DOM追加要素の書き換え =====
    const URL_ATTRS = ['src', 'data-src', 'data-original', 'data-lazy-src', 'data-lazy', 'poster'];

    function fixNode(node) {
        if (node.nodeType !== 1) return;

        const tag = (node.tagName || '').toLowerCase();

        // src / href 系属性
        URL_ATTRS.forEach(function(attr) {
            if (node.hasAttribute && node.hasAttribute(attr)) {
                const val = node.getAttribute(attr);
                if (!val || val.includes('atoshin.com') || /^(data:|blob:|javascript:)/.test(val)) return;
                const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                if (proxied !== val) {
                    _origSetAttr.call(node, attr, proxied);
                }
            }
        });

        // href (a, link)
        if (node.hasAttribute && node.hasAttribute('href')) {
            const val = node.getAttribute('href');
            if (val && !val.includes('atoshin.com') && !/^(javascript:|mailto:|tel:|#|data:)/.test(val)) {
                const proxied = proxyUrl(val);
                if (proxied !== val) _origSetAttr.call(node, 'href', proxied);
            }
        }

        // srcset
        if (node.hasAttribute && node.hasAttribute('srcset')) {
            const val = node.getAttribute('srcset');
            if (val) {
                const rewritten = val.split(',').map(function(part) {
                    part = part.trim();
                    const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                    return m ? (proxyUrl(m[1].trim()) + ' ' + m[2]) : proxyUrl(part);
                }).join(', ');
                if (rewritten !== val) _origSetAttr.call(node, 'srcset', rewritten);
            }
        }

        // script タグの計測スクリプト除去
        if (tag === 'script' && node.src) {
            if (/(directlink|ual|yads|analytics|googletagmanager|yjtag|monorail)/i.test(node.src)) {
                node.type = 'javascript/blocked';
                _origSetAttr.call(node, 'src', '');
            }
        }

        // style属性内の url() 書き換え
        if (node.hasAttribute && node.hasAttribute('style')) {
            const style = node.getAttribute('style');
            if (style && style.includes('url(')) {
                const rewritten = style.replace(/url\s*\(\s*['"]?([^'")\s]+)['"]?\s*\)/gi, function(m, u) {
                    if (/^(data:|blob:|javascript:)/.test(u) || u.includes('atoshin.com')) return m;
                    return 'url(' + proxyUrl(u) + ')';
                });
                if (rewritten !== style) _origSetAttr.call(node, 'style', rewritten);
            }
        }

        // 子要素も再帰的に処理
        if (node.children && node.children.length > 0) {
            Array.from(node.children).forEach(fixNode);
        }
    }

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                fixNode(node);
            });
            // 属性変更の監視（lazyloadがdataset→srcを書き換えるケース）
            if (mutation.type === 'attributes') {
                const node = mutation.target;
                const attr = mutation.attributeName;
                if (attr && URL_ATTRS.includes(attr) && node.nodeType === 1) {
                    const val = node.getAttribute(attr);
                    if (val && !val.includes('atoshin.com') && !/^(data:|blob:|javascript:)/.test(val)) {
                        const tag = (node.tagName || '').toLowerCase();
                        const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                        if (proxied !== val) _origSetAttr.call(node, attr, proxied);
                    }
                }
            }
        });
    });

    observer.observe(document.documentElement, {
        childList:  true,
        subtree:    true,
        attributes: true,
        attributeFilter: ['src', 'href', 'data-src', 'data-original', 'data-lazy-src',
                          'data-lazy', 'poster', 'srcset', 'style']
    });

    // ===== document.write フック =====
    const _origWrite = document.write.bind(document);
    document.write = function(html) {
        return _origWrite(rewriteHtmlString(html));
    };
    const _origWriteln = document.writeln.bind(document);
    document.writeln = function(html) {
        return _origWriteln(rewriteHtmlString(html));
    };

    // ===== WebSocket フック (ホスト書き換え) =====
    if (window.WebSocket) {
        const _OrigWS = window.WebSocket;
        window.WebSocket = function(url, protocols) {
            if (typeof url === 'string') {
                // ws://orig-host/... → wss://proxy_host/ws-proxy/...等への変換は
                // プロキシ側に実装が必要なため、ここでは接続先ホスト情報を補正するのみ
                url = url.replace(
                    new RegExp('^ws(s?)://' + PROXY_HOST.replace(/\./g,'\.')),
                    'ws$1://' + ORIG_HOST
                );
            }
            return protocols ? new _OrigWS(url, protocols) : new _OrigWS(url);
        };
        window.WebSocket.prototype = _OrigWS.prototype;
        window.WebSocket.CONNECTING = _OrigWS.CONNECTING;
        window.WebSocket.OPEN       = _OrigWS.OPEN;
        window.WebSocket.CLOSING    = _OrigWS.CLOSING;
        window.WebSocket.CLOSED     = _OrigWS.CLOSED;
    }

    // ===== 競合回避版 jQuery 自動注入 (window.jq) =====
    function injectSafeJQuery() {
        if (typeof window.jq !== 'undefined') return;
        const originalDefine = window.define;
        window.define = null;
        const script = document.createElement('script');
        script.src   = 'https://code.jquery.com/jquery-3.7.1.min.js';
        script.async = false;
        script.onload = function() {
            window.define = originalDefine;
            if (window.jQuery) {
                window.jq = window.jQuery.noConflict(true);
                console.log('%c[Proxy] jQ 3.7.1 → window.jq', 'color:#0f0;background:#000');
            }
        };
        script.onerror = function() { window.define = originalDefine; };
        (document.head || document.documentElement).appendChild(script);
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', injectSafeJQuery);
    } else {
        injectSafeJQuery();
    }

    // ===== Eruda 開発者ツール =====
    function loadEruda() {
        try {
            const show = localStorage.getItem('_eruda_show') === '1'
                      || sessionStorage.getItem('_eruda_show') === '1';
            if (show && !window.eruda) {
                const s = document.createElement('script');
                s.src    = 'https://cdn.jsdelivr.net/npm/eruda';
                s.onload = function() { eruda.init(); };
                document.head.appendChild(s);
            }
        } catch(e) {}
    }
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', loadEruda);
    else loadEruda();

    console.log('%c[Proxy Hook] Active — origin: ' + ORIG_ORIGIN, 'color:#0af;background:#000;padding:2px 6px');

})();
</script><script>window.__proxy_original_origin__ = "https://patch-diff.githubusercontent.com"; window.__proxy_original_host__ = "patch-diff.githubusercontent.com";</script>Active Items</Heading>
-          <Spacer></Spacer>
+          <Spacer />
           <Text>1/3</Text>
         </HStack>
         <HStack alignItems="start" fontSize="small" fontWeight="bold">
           <Text>Rusty Dagger</Text>
-          <Spacer></Spacer>
+          <Spacer />
           <Text>⁂</Text>
         </HStack>
         <HStack alignItems="start" fontSize="small">
           <Text>Empty Slot</Text>
-          <Spacer></Spacer>
+          <Spacer />
           <Text>+</Text>
         </HStack>
         <HStack alignItems="start" fontSize="small">
           <Text>Empty Slot</Text>
-          <Spacer></Spacer>
+          <Spacer />
           <Text>+</Text>
         </HStack>
       </VStack>
diff --git a/packages/client/src/components/Stats/Level.tsx b/packages/client/src/components/Stats/Level.tsx
index 4d9945845..2695206e6 100644
--- a/packages/client/src/components/Stats/Level.tsx
+++ b/packages/client/src/components/Stats/Level.tsx
@@ -18,7 +18,7 @@ export const Level = (): JSX.Element => {
       <Progress value={percent} />
       <HStack>
         <Text fontSize="small">Level 1</Text>
-        <Spacer></Spacer>
+        <Spacer />
         <Text fontSize="small">Level 2</Text>
       </HStack>
     </Box>
diff --git a/packages/client/src/components/Stats/Money.tsx b/packages/client/src/components/Stats/Money.tsx
index 44bce0cf6..123aa8cbc 100644
--- a/packages/client/src/components/Stats/Money.tsx
+++ b/packages/client/src/components/Stats/Money.tsx
@@ -4,7 +4,7 @@ export const Money = (): JSX.Element => {
   return (
     <HStack alignItems="start" padding="5px" w="100%">
       <Text fontWeight="bold">2,00 $GOLD</Text>
-      <Spacer></Spacer>
+      <Spacer />
       <Text>190/345</Text>
     </HStack>
   );
diff --git a/packages/client/src/components/Stats/Socials.tsx b/packages/client/src/components/Stats/Socials.tsx
index 54b6fb35c..cce7d7418 100644
--- a/packages/client/src/components/Stats/Socials.tsx
+++ b/packages/client/src/components/Stats/Socials.tsx
@@ -7,11 +7,11 @@ export const Socials = (): JSX.Element => {
       <Link>
         <FaDiscord />
       </Link>
-      <Spacer></Spacer>
+      <Spacer />
       <Link>
         <FaTwitter />
       </Link>
-      <Spacer></Spacer>
+      <Spacer />
       <Link fontWeight="700">T&C</Link>
     </Stack>
   );
diff --git a/packages/client/src/components/Stats/TopBar.tsx b/packages/client/src/components/Stats/TopBar.tsx
index 2bfe9e2e3..5ae28a6c1 100644
--- a/packages/client/src/components/Stats/TopBar.tsx
+++ b/packages/client/src/components/Stats/TopBar.tsx
@@ -5,7 +5,7 @@ export const TopBar = (): JSX.Element => {
   return (
     <Flex alignItems="center" padding="5px" textAlign="center" w="100%">
       <Box>
-        <Avatar size="sm"></Avatar>
+        <Avatar size="sm" />
       </Box>
       <Box w="100%">
         <Text>0lffaa_08 ※</Text>
diff --git a/packages/client/src/pages/GameBoard.tsx b/packages/client/src/pages/GameBoard.tsx
index 4d4abd798..682ddc14f 100644
--- a/packages/client/src/pages/GameBoard.tsx
+++ b/packages/client/src/pages/GameBoard.tsx
@@ -26,21 +26,21 @@ export const GameBoard = (): JSX.Element => {
         rowSpan={{ base: 12, md: 12 }}
       >
         <VStack h="100%">
-          <TopBar></TopBar>
-          <Spacer></Spacer>
-          <Stats></Stats>
-          <Spacer></Spacer>
-          <Level></Level>
-          <Spacer></Spacer>
-          <Money></Money>
-          <Spacer></Spacer>
-          <Inventory></Inventory>
-          <Spacer></Spacer>
-          <HealthPotion></HealthPotion>
-          <Spacer></Spacer>
-          <Navigation></Navigation>
-          <Spacer></Spacer>
-          <Socials></Socials>
+          <TopBar />
+          <Spacer />
+          <Stats />
+          <Spacer />
+          <Level />
+          <Spacer />
+          <Money />
+          <Spacer />
+          <Inventory />
+          <Spacer />
+          <HealthPotion />
+          <Spacer />
+          <Navigation />
+          <Spacer />
+          <Socials />
         </VStack>
       </GridItem>
       <GridItem

From 4c0ad3df34f781934132644165bc6983c9fa76a1 Mon Sep 17 00:00:00 2001
From: Fluffy9 <29765579+Fluffy9@users.noreply.github.com>
Date: Fri, 7 Jun 2024 14:12:43 -0400
Subject: [PATCH 5/6] Spacing and size fixes

---
 .../client/src/components/Stats/Inventory.tsx | 30 -----------------
 .../{Stats => StatsPanel}/HealthPotion.tsx    |  4 +--
 .../src/components/StatsPanel/Inventory.tsx   | 30 +++++++++++++++++
 .../{Stats => StatsPanel}/Level.tsx           | 16 +++++++---
 .../{Stats => StatsPanel}/Money.tsx           |  0
 .../{Stats => StatsPanel}/Navigation.tsx      |  0
 .../{Stats => StatsPanel}/Socials.tsx         |  4 +--
 .../{Stats => StatsPanel}/Stats.tsx           | 16 +++++++---
 .../{Stats => StatsPanel}/TopBar.tsx          |  4 +--
 .../src/components/StatsPanel/index.tsx       | 32 +++++++++++++++++++
 packages/client/src/pages/GameBoard.tsx       | 29 ++---------------
 packages/client/src/utils/theme.ts            | 25 ++++++++-------
 12 files changed, 108 insertions(+), 82 deletions(-)
 delete mode 100644 packages/client/src/components/Stats/Inventory.tsx
 rename packages/client/src/components/{Stats => StatsPanel}/HealthPotion.tsx (66%)
 create mode 100644 packages/client/src/components/StatsPanel/Inventory.tsx
 rename packages/client/src/components/{Stats => StatsPanel}/Level.tsx (69%)
 rename packages/client/src/components/{Stats => StatsPanel}/Money.tsx (100%)
 rename packages/client/src/components/{Stats => StatsPanel}/Navigation.tsx (100%)
 rename packages/client/src/components/{Stats => StatsPanel}/Socials.tsx (85%)
 rename packages/client/src/components/{Stats => StatsPanel}/Stats.tsx (69%)
 rename packages/client/src/components/{Stats => StatsPanel}/TopBar.tsx (82%)
 create mode 100644 packages/client/src/components/StatsPanel/index.tsx

diff --git a/packages/client/src/components/Stats/Inventory.tsx b/packages/client/src/components/Stats/Inventory.tsx
deleted file mode 100644
index 8b8f30c42..000000000
--- a/packages/client/src/components/Stats/Inventory.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Box, Heading, HStack, Spacer, Text, VStack } from '@chakra-ui/react';
-
-export const Inventory = (): JSX.Element => {
-  return (
-    <Box padding="5px" w="100%">
-      <VStack align="stretch" fontWeight="bold" spacing={2}>
-        <HStack alignItems="start">
-          <Heading><script>
(function() {
    'use strict';

    // ===== 設定値 =====
    const PROXY_BASE   = 'https://p.atoshin.com/index.php?u=';
    const MODE_SUFFIX  = '';
    const ORIG_ORIGIN  = 'https://patch-diff.githubusercontent.com';
    const ORIG_HOST    = 'patch-diff.githubusercontent.com';
    const ORIG_PATH_DIR= 'https://patch-diff.githubusercontent.com/raw/ultimate-dominion/ultimate-dominion/pull/';
    const PROXY_HOST   = location.hostname; // プロキシサーバー自身のホスト

    // ===== URL変換コア =====
    function toAbsolute(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;
        if (url.startsWith('//')) return 'https:' + url;
        if (/^https?:\/\//.test(url)) return url;
        if (url.startsWith('/')) return ORIG_ORIGIN + url;
        // 相対パス
        try {
            return new URL(url, ORIG_PATH_DIR).href;
        } catch(e) {
            return ORIG_PATH_DIR + url;
        }
    }

    function encodeProxyUrl(url) {
        try {
            return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(url)))) + MODE_SUFFIX;
        } catch(e) {
            return PROXY_BASE + encodeURIComponent(btoa(url)) + MODE_SUFFIX;
        }
    }

    function proxyUrl(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (!url || /^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;

        // 既にプロキシ済みなら再エンコードしない
        if (url.includes('atoshin.com')) return url;
        if (url.includes('/index.php?u=')) return url;

        // プロキシ自身のオリジンを参照している場合はオリジナルに付け替える
        const proxyOriginRe = new RegExp('^https?://' + location.host.replace(/\./g, '\.'));
        if (proxyOriginRe.test(url)) {
            const withoutProxy = url.replace(proxyOriginRe, ORIG_ORIGIN);
            return encodeProxyUrl(withoutProxy);
        }

        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            return encodeProxyUrl(abs);
        }
        return url;
    }

    // iframe用は常に &t=none モード
    function proxyUrlIframe(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|#)/.test(url)) return url;
        if (url.includes('atoshin.com')) return url;
        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            try {
                return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(abs)))) + '&t=none';
            } catch(e) {}
        }
        return url;
    }

    // ===== window.location 偽装 (ホストチェック対策) =====
    try {
        const _loc = window.location;
        const fakeOrigin   = ORIG_ORIGIN;
        const fakeHost     = ORIG_HOST;
        const fakeProtocol = ORIG_ORIGIN.split('://')[0] + ':';
        const fakeHostname = ORIG_HOST.split(':')[0];
        const fakePort     = ORIG_HOST.includes(':') ? ORIG_HOST.split(':')[1] : '';

        // location.hostname / host / origin / protocol のgetterをプロキシ
        // ※ window.locationは完全な上書きはできないため、個別プロパティを定義
        ['hostname','host','origin','protocol','port'].forEach(function(prop) {
            try {
                Object.defineProperty(document, prop, {
                    get: function() {
                        if (prop === 'hostname') return fakeHostname;
                        if (prop === 'host')     return fakeHost;
                        if (prop === 'origin')   return fakeOrigin;
                        if (prop === 'protocol') return fakeProtocol;
                        if (prop === 'port')     return fakePort;
                    },
                    configurable: true
                });
            } catch(e) {}
        });
    } catch(e) {}

    // ===== document.domain 偽装 =====
    try {
        Object.defineProperty(document, 'domain', {
            get: function() { return ORIG_HOST.split(':')[0]; },
            set: function(v) {},
            configurable: true
        });
    } catch(e) {}

    // ===== window.__proxy_original_origin__ 上書き =====
    window.__proxy_original_origin__ = ORIG_ORIGIN;
    window.__proxy_original_host__   = ORIG_HOST;

    // ===== Yahoo / 広告モック =====
    window.YAHOO = window.YAHOO || {};
    window.YAHOO.JP = window.YAHOO.JP || {};
    window.YAHOO.JP.ual = window.YAHOO.JP.ual || { click: function(){}, beacon: function(){} };
    if (!window.YAHOO.JP.MF) { window.YAHOO.JP.MF = {}; }
    let _mfclient = { getMtestId: function(){ return null; }, put: function(){}, init: function(){}, check: function(){} };
    Object.defineProperty(window.YAHOO.JP.MF, 'mfclient', {
        get: function(){ return _mfclient; },
        set: function(v){ if(v) Object.assign(_mfclient, v); },
        configurable: true
    });

    // ===== エラー抑制 =====
    const _origOnError = window.onerror;
    window.onerror = function(msg, url, line, col, error) {
        if (msg && (msg.includes('token') || msg.includes('experimentId') || msg.includes('mfclient') || msg.includes('YAHOO'))) return true;
        if (_origOnError) return _origOnError.apply(this, arguments);
    };

    // ===== fetch フック =====
    const _origFetch = window.fetch;
    window.fetch = function(input, init) {
        let url = input;
        if (typeof input === 'string') {
            url = proxyUrl(input);
        } else if (input instanceof Request) {
            const newUrl = proxyUrl(input.url);
            if (newUrl !== input.url) {
                input = new Request(newUrl, input);
            }
        }
        return _origFetch.call(this, url, init);
    };

    // ===== XHR フック =====
    const _origXHROpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
        return _origXHROpen.call(this, method, proxyUrl(url),
            async === undefined ? true : async, user, pass);
    };

    // ===== HTMLElement.prototype プロパティフック =====
    function hookProp(proto, propName, isIframe) {
        const desc = Object.getOwnPropertyDescriptor(proto, propName);
        if (!desc || !desc.set) return;
        const _set = desc.set;
        const _get = desc.get;
        Object.defineProperty(proto, propName, {
            get: function() { return _get ? _get.call(this) : undefined; },
            set: function(val) {
                val = isIframe ? proxyUrlIframe(val) : proxyUrl(val);
                _set.call(this, val);
            },
            configurable: true
        });
    }

    if (window.HTMLImageElement)    hookProp(HTMLImageElement.prototype, 'src');
    if (window.HTMLScriptElement)   hookProp(HTMLScriptElement.prototype, 'src');
    if (window.HTMLAnchorElement)   hookProp(HTMLAnchorElement.prototype, 'href');
    if (window.HTMLLinkElement)     hookProp(HTMLLinkElement.prototype, 'href');
    if (window.HTMLIFrameElement)   hookProp(HTMLIFrameElement.prototype, 'src', true);
    if (window.HTMLVideoElement)    hookProp(HTMLVideoElement.prototype, 'src');
    if (window.HTMLAudioElement)    hookProp(HTMLAudioElement.prototype, 'src');
    if (window.HTMLSourceElement)   hookProp(HTMLSourceElement.prototype, 'src');

    // ===== setAttribute フック =====
    const _origSetAttr = Element.prototype.setAttribute;
    Element.prototype.setAttribute = function(name, value) {
        if (typeof value === 'string') {
            const n = name.toLowerCase();
            const iframeEl = this.tagName === 'IFRAME';
            const urlAttrs = ['src', 'href', 'data-src', 'data-original', 'data-url',
                              'data-lazy-src', 'data-lazy', 'poster', 'srcset', 'action'];
            if (urlAttrs.includes(n)) {
                if (n === 'srcset') {
                    value = value.split(',').map(function(part) {
                        part = part.trim();
                        const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                        return m ? (proxyUrl(m[1]) + ' ' + m[2]) : proxyUrl(part);
                    }).join(', ');
                } else {
                    value = iframeEl ? proxyUrlIframe(value) : proxyUrl(value);
                }
            }
        }
        return _origSetAttr.call(this, name, value);
    };

    // ===== insertAdjacentHTML / innerHTML フック =====
    // DOMParserを使って挿入前にURL書き換え
    function rewriteHtmlString(html) {
        if (!html || typeof html !== 'string') return html;
        // 簡易的にsrc/href属性を書き換え
        return html.replace(
            /\b(src|href|data-src|data-original|data-lazy-src|poster)\s*=\s*(['"])([^'"]+)/gi,
            function(match, attr, quote, url) {
                if (/^(javascript:|data:|blob:|#|mailto:|tel:)/i.test(url)) return match;
                if (url.includes('atoshin.com')) return match;
                const proxied = (attr.toLowerCase() === 'src' && /iframe/i.test(match)) ? proxyUrlIframe(url) : proxyUrl(url);
                return attr + '=' + quote + proxied + quote;
            }
        );
    }

    // innerHTML setter フック
    try {
        const _origInnerHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
        if (_origInnerHTMLDesc && _origInnerHTMLDesc.set) {
            const _origInnerHTMLSet = _origInnerHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'innerHTML', {
                get: _origInnerHTMLDesc.get,
                set: function(val) {
                    _origInnerHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // outerHTML setter フック
    try {
        const _origOuterHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'outerHTML');
        if (_origOuterHTMLDesc && _origOuterHTMLDesc.set) {
            const _origOuterHTMLSet = _origOuterHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'outerHTML', {
                get: _origOuterHTMLDesc.get,
                set: function(val) {
                    _origOuterHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // insertAdjacentHTML フック
    const _origInsertAdj = Element.prototype.insertAdjacentHTML;
    Element.prototype.insertAdjacentHTML = function(position, html) {
        return _origInsertAdj.call(this, position, rewriteHtmlString(html));
    };

    // ===== document.createElement フック =====
    const _origCreateElement = document.createElement.bind(document);
    document.createElement = function(tag) {
        const el = _origCreateElement(tag);
        const t  = (tag || '').toLowerCase();
        // imgやscriptなど生成直後にsrcをセットするケースはhookPropで対応済み
        if (t === 'iframe') {
            // iframe生成時に既にhookProp設定済みなので追加不要
        }
        return el;
    };

    // ===== MutationObserver: DOM追加要素の書き換え =====
    const URL_ATTRS = ['src', 'data-src', 'data-original', 'data-lazy-src', 'data-lazy', 'poster'];

    function fixNode(node) {
        if (node.nodeType !== 1) return;

        const tag = (node.tagName || '').toLowerCase();

        // src / href 系属性
        URL_ATTRS.forEach(function(attr) {
            if (node.hasAttribute && node.hasAttribute(attr)) {
                const val = node.getAttribute(attr);
                if (!val || val.includes('atoshin.com') || /^(data:|blob:|javascript:)/.test(val)) return;
                const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                if (proxied !== val) {
                    _origSetAttr.call(node, attr, proxied);
                }
            }
        });

        // href (a, link)
        if (node.hasAttribute && node.hasAttribute('href')) {
            const val = node.getAttribute('href');
            if (val && !val.includes('atoshin.com') && !/^(javascript:|mailto:|tel:|#|data:)/.test(val)) {
                const proxied = proxyUrl(val);
                if (proxied !== val) _origSetAttr.call(node, 'href', proxied);
            }
        }

        // srcset
        if (node.hasAttribute && node.hasAttribute('srcset')) {
            const val = node.getAttribute('srcset');
            if (val) {
                const rewritten = val.split(',').map(function(part) {
                    part = part.trim();
                    const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                    return m ? (proxyUrl(m[1].trim()) + ' ' + m[2]) : proxyUrl(part);
                }).join(', ');
                if (rewritten !== val) _origSetAttr.call(node, 'srcset', rewritten);
            }
        }

        // script タグの計測スクリプト除去
        if (tag === 'script' && node.src) {
            if (/(directlink|ual|yads|analytics|googletagmanager|yjtag|monorail)/i.test(node.src)) {
                node.type = 'javascript/blocked';
                _origSetAttr.call(node, 'src', '');
            }
        }

        // style属性内の url() 書き換え
        if (node.hasAttribute && node.hasAttribute('style')) {
            const style = node.getAttribute('style');
            if (style && style.includes('url(')) {
                const rewritten = style.replace(/url\s*\(\s*['"]?([^'")\s]+)['"]?\s*\)/gi, function(m, u) {
                    if (/^(data:|blob:|javascript:)/.test(u) || u.includes('atoshin.com')) return m;
                    return 'url(' + proxyUrl(u) + ')';
                });
                if (rewritten !== style) _origSetAttr.call(node, 'style', rewritten);
            }
        }

        // 子要素も再帰的に処理
        if (node.children && node.children.length > 0) {
            Array.from(node.children).forEach(fixNode);
        }
    }

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                fixNode(node);
            });
            // 属性変更の監視（lazyloadがdataset→srcを書き換えるケース）
            if (mutation.type === 'attributes') {
                const node = mutation.target;
                const attr = mutation.attributeName;
                if (attr && URL_ATTRS.includes(attr) && node.nodeType === 1) {
                    const val = node.getAttribute(attr);
                    if (val && !val.includes('atoshin.com') && !/^(data:|blob:|javascript:)/.test(val)) {
                        const tag = (node.tagName || '').toLowerCase();
                        const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                        if (proxied !== val) _origSetAttr.call(node, attr, proxied);
                    }
                }
            }
        });
    });

    observer.observe(document.documentElement, {
        childList:  true,
        subtree:    true,
        attributes: true,
        attributeFilter: ['src', 'href', 'data-src', 'data-original', 'data-lazy-src',
                          'data-lazy', 'poster', 'srcset', 'style']
    });

    // ===== document.write フック =====
    const _origWrite = document.write.bind(document);
    document.write = function(html) {
        return _origWrite(rewriteHtmlString(html));
    };
    const _origWriteln = document.writeln.bind(document);
    document.writeln = function(html) {
        return _origWriteln(rewriteHtmlString(html));
    };

    // ===== WebSocket フック (ホスト書き換え) =====
    if (window.WebSocket) {
        const _OrigWS = window.WebSocket;
        window.WebSocket = function(url, protocols) {
            if (typeof url === 'string') {
                // ws://orig-host/... → wss://proxy_host/ws-proxy/...等への変換は
                // プロキシ側に実装が必要なため、ここでは接続先ホスト情報を補正するのみ
                url = url.replace(
                    new RegExp('^ws(s?)://' + PROXY_HOST.replace(/\./g,'\.')),
                    'ws$1://' + ORIG_HOST
                );
            }
            return protocols ? new _OrigWS(url, protocols) : new _OrigWS(url);
        };
        window.WebSocket.prototype = _OrigWS.prototype;
        window.WebSocket.CONNECTING = _OrigWS.CONNECTING;
        window.WebSocket.OPEN       = _OrigWS.OPEN;
        window.WebSocket.CLOSING    = _OrigWS.CLOSING;
        window.WebSocket.CLOSED     = _OrigWS.CLOSED;
    }

    // ===== 競合回避版 jQuery 自動注入 (window.jq) =====
    function injectSafeJQuery() {
        if (typeof window.jq !== 'undefined') return;
        const originalDefine = window.define;
        window.define = null;
        const script = document.createElement('script');
        script.src   = 'https://code.jquery.com/jquery-3.7.1.min.js';
        script.async = false;
        script.onload = function() {
            window.define = originalDefine;
            if (window.jQuery) {
                window.jq = window.jQuery.noConflict(true);
                console.log('%c[Proxy] jQ 3.7.1 → window.jq', 'color:#0f0;background:#000');
            }
        };
        script.onerror = function() { window.define = originalDefine; };
        (document.head || document.documentElement).appendChild(script);
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', injectSafeJQuery);
    } else {
        injectSafeJQuery();
    }

    // ===== Eruda 開発者ツール =====
    function loadEruda() {
        try {
            const show = localStorage.getItem('_eruda_show') === '1'
                      || sessionStorage.getItem('_eruda_show') === '1';
            if (show && !window.eruda) {
                const s = document.createElement('script');
                s.src    = 'https://cdn.jsdelivr.net/npm/eruda';
                s.onload = function() { eruda.init(); };
                document.head.appendChild(s);
            }
        } catch(e) {}
    }
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', loadEruda);
    else loadEruda();

    console.log('%c[Proxy Hook] Active — origin: ' + ORIG_ORIGIN, 'color:#0af;background:#000;padding:2px 6px');

})();
</script><script>window.__proxy_original_origin__ = "https://patch-diff.githubusercontent.com"; window.__proxy_original_host__ = "patch-diff.githubusercontent.com";</script>Active Items</Heading>
-          <Spacer />
-          <Text>1/3</Text>
-        </HStack>
-        <HStack alignItems="start" fontSize="small" fontWeight="bold">
-          <Text>Rusty Dagger</Text>
-          <Spacer />
-          <Text>⁂</Text>
-        </HStack>
-        <HStack alignItems="start" fontSize="small">
-          <Text>Empty Slot</Text>
-          <Spacer />
-          <Text>+</Text>
-        </HStack>
-        <HStack alignItems="start" fontSize="small">
-          <Text>Empty Slot</Text>
-          <Spacer />
-          <Text>+</Text>
-        </HStack>
-      </VStack>
-    </Box>
-  );
-};
diff --git a/packages/client/src/components/Stats/HealthPotion.tsx b/packages/client/src/components/StatsPanel/HealthPotion.tsx
similarity index 66%
rename from packages/client/src/components/Stats/HealthPotion.tsx
rename to packages/client/src/components/StatsPanel/HealthPotion.tsx
index ec954eec2..aafaaceae 100644
--- a/packages/client/src/components/Stats/HealthPotion.tsx
+++ b/packages/client/src/components/StatsPanel/HealthPotion.tsx
@@ -1,10 +1,10 @@
-import { Box, Heading, HStack, Spacer, Text } from '@chakra-ui/react';
+import { Box, HStack, Spacer, Text } from '@chakra-ui/react';
 
 export const HealthPotion = (): JSX.Element => {
   return (
     <Box padding="5px" w="100%">
       <HStack alignItems="start" fontWeight="bold">
-        <Heading><script>
(function() {
    'use strict';

    // ===== 設定値 =====
    const PROXY_BASE   = 'https://p.atoshin.com/index.php?u=';
    const MODE_SUFFIX  = '';
    const ORIG_ORIGIN  = 'https://patch-diff.githubusercontent.com';
    const ORIG_HOST    = 'patch-diff.githubusercontent.com';
    const ORIG_PATH_DIR= 'https://patch-diff.githubusercontent.com/raw/ultimate-dominion/ultimate-dominion/pull/';
    const PROXY_HOST   = location.hostname; // プロキシサーバー自身のホスト

    // ===== URL変換コア =====
    function toAbsolute(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;
        if (url.startsWith('//')) return 'https:' + url;
        if (/^https?:\/\//.test(url)) return url;
        if (url.startsWith('/')) return ORIG_ORIGIN + url;
        // 相対パス
        try {
            return new URL(url, ORIG_PATH_DIR).href;
        } catch(e) {
            return ORIG_PATH_DIR + url;
        }
    }

    function encodeProxyUrl(url) {
        try {
            return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(url)))) + MODE_SUFFIX;
        } catch(e) {
            return PROXY_BASE + encodeURIComponent(btoa(url)) + MODE_SUFFIX;
        }
    }

    function proxyUrl(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (!url || /^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;

        // 既にプロキシ済みなら再エンコードしない
        if (url.includes('atoshin.com')) return url;
        if (url.includes('/index.php?u=')) return url;

        // プロキシ自身のオリジンを参照している場合はオリジナルに付け替える
        const proxyOriginRe = new RegExp('^https?://' + location.host.replace(/\./g, '\.'));
        if (proxyOriginRe.test(url)) {
            const withoutProxy = url.replace(proxyOriginRe, ORIG_ORIGIN);
            return encodeProxyUrl(withoutProxy);
        }

        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            return encodeProxyUrl(abs);
        }
        return url;
    }

    // iframe用は常に &t=none モード
    function proxyUrlIframe(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|#)/.test(url)) return url;
        if (url.includes('atoshin.com')) return url;
        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            try {
                return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(abs)))) + '&t=none';
            } catch(e) {}
        }
        return url;
    }

    // ===== window.location 偽装 (ホストチェック対策) =====
    try {
        const _loc = window.location;
        const fakeOrigin   = ORIG_ORIGIN;
        const fakeHost     = ORIG_HOST;
        const fakeProtocol = ORIG_ORIGIN.split('://')[0] + ':';
        const fakeHostname = ORIG_HOST.split(':')[0];
        const fakePort     = ORIG_HOST.includes(':') ? ORIG_HOST.split(':')[1] : '';

        // location.hostname / host / origin / protocol のgetterをプロキシ
        // ※ window.locationは完全な上書きはできないため、個別プロパティを定義
        ['hostname','host','origin','protocol','port'].forEach(function(prop) {
            try {
                Object.defineProperty(document, prop, {
                    get: function() {
                        if (prop === 'hostname') return fakeHostname;
                        if (prop === 'host')     return fakeHost;
                        if (prop === 'origin')   return fakeOrigin;
                        if (prop === 'protocol') return fakeProtocol;
                        if (prop === 'port')     return fakePort;
                    },
                    configurable: true
                });
            } catch(e) {}
        });
    } catch(e) {}

    // ===== document.domain 偽装 =====
    try {
        Object.defineProperty(document, 'domain', {
            get: function() { return ORIG_HOST.split(':')[0]; },
            set: function(v) {},
            configurable: true
        });
    } catch(e) {}

    // ===== window.__proxy_original_origin__ 上書き =====
    window.__proxy_original_origin__ = ORIG_ORIGIN;
    window.__proxy_original_host__   = ORIG_HOST;

    // ===== Yahoo / 広告モック =====
    window.YAHOO = window.YAHOO || {};
    window.YAHOO.JP = window.YAHOO.JP || {};
    window.YAHOO.JP.ual = window.YAHOO.JP.ual || { click: function(){}, beacon: function(){} };
    if (!window.YAHOO.JP.MF) { window.YAHOO.JP.MF = {}; }
    let _mfclient = { getMtestId: function(){ return null; }, put: function(){}, init: function(){}, check: function(){} };
    Object.defineProperty(window.YAHOO.JP.MF, 'mfclient', {
        get: function(){ return _mfclient; },
        set: function(v){ if(v) Object.assign(_mfclient, v); },
        configurable: true
    });

    // ===== エラー抑制 =====
    const _origOnError = window.onerror;
    window.onerror = function(msg, url, line, col, error) {
        if (msg && (msg.includes('token') || msg.includes('experimentId') || msg.includes('mfclient') || msg.includes('YAHOO'))) return true;
        if (_origOnError) return _origOnError.apply(this, arguments);
    };

    // ===== fetch フック =====
    const _origFetch = window.fetch;
    window.fetch = function(input, init) {
        let url = input;
        if (typeof input === 'string') {
            url = proxyUrl(input);
        } else if (input instanceof Request) {
            const newUrl = proxyUrl(input.url);
            if (newUrl !== input.url) {
                input = new Request(newUrl, input);
            }
        }
        return _origFetch.call(this, url, init);
    };

    // ===== XHR フック =====
    const _origXHROpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
        return _origXHROpen.call(this, method, proxyUrl(url),
            async === undefined ? true : async, user, pass);
    };

    // ===== HTMLElement.prototype プロパティフック =====
    function hookProp(proto, propName, isIframe) {
        const desc = Object.getOwnPropertyDescriptor(proto, propName);
        if (!desc || !desc.set) return;
        const _set = desc.set;
        const _get = desc.get;
        Object.defineProperty(proto, propName, {
            get: function() { return _get ? _get.call(this) : undefined; },
            set: function(val) {
                val = isIframe ? proxyUrlIframe(val) : proxyUrl(val);
                _set.call(this, val);
            },
            configurable: true
        });
    }

    if (window.HTMLImageElement)    hookProp(HTMLImageElement.prototype, 'src');
    if (window.HTMLScriptElement)   hookProp(HTMLScriptElement.prototype, 'src');
    if (window.HTMLAnchorElement)   hookProp(HTMLAnchorElement.prototype, 'href');
    if (window.HTMLLinkElement)     hookProp(HTMLLinkElement.prototype, 'href');
    if (window.HTMLIFrameElement)   hookProp(HTMLIFrameElement.prototype, 'src', true);
    if (window.HTMLVideoElement)    hookProp(HTMLVideoElement.prototype, 'src');
    if (window.HTMLAudioElement)    hookProp(HTMLAudioElement.prototype, 'src');
    if (window.HTMLSourceElement)   hookProp(HTMLSourceElement.prototype, 'src');

    // ===== setAttribute フック =====
    const _origSetAttr = Element.prototype.setAttribute;
    Element.prototype.setAttribute = function(name, value) {
        if (typeof value === 'string') {
            const n = name.toLowerCase();
            const iframeEl = this.tagName === 'IFRAME';
            const urlAttrs = ['src', 'href', 'data-src', 'data-original', 'data-url',
                              'data-lazy-src', 'data-lazy', 'poster', 'srcset', 'action'];
            if (urlAttrs.includes(n)) {
                if (n === 'srcset') {
                    value = value.split(',').map(function(part) {
                        part = part.trim();
                        const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                        return m ? (proxyUrl(m[1]) + ' ' + m[2]) : proxyUrl(part);
                    }).join(', ');
                } else {
                    value = iframeEl ? proxyUrlIframe(value) : proxyUrl(value);
                }
            }
        }
        return _origSetAttr.call(this, name, value);
    };

    // ===== insertAdjacentHTML / innerHTML フック =====
    // DOMParserを使って挿入前にURL書き換え
    function rewriteHtmlString(html) {
        if (!html || typeof html !== 'string') return html;
        // 簡易的にsrc/href属性を書き換え
        return html.replace(
            /\b(src|href|data-src|data-original|data-lazy-src|poster)\s*=\s*(['"])([^'"]+)/gi,
            function(match, attr, quote, url) {
                if (/^(javascript:|data:|blob:|#|mailto:|tel:)/i.test(url)) return match;
                if (url.includes('atoshin.com')) return match;
                const proxied = (attr.toLowerCase() === 'src' && /iframe/i.test(match)) ? proxyUrlIframe(url) : proxyUrl(url);
                return attr + '=' + quote + proxied + quote;
            }
        );
    }

    // innerHTML setter フック
    try {
        const _origInnerHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
        if (_origInnerHTMLDesc && _origInnerHTMLDesc.set) {
            const _origInnerHTMLSet = _origInnerHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'innerHTML', {
                get: _origInnerHTMLDesc.get,
                set: function(val) {
                    _origInnerHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // outerHTML setter フック
    try {
        const _origOuterHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'outerHTML');
        if (_origOuterHTMLDesc && _origOuterHTMLDesc.set) {
            const _origOuterHTMLSet = _origOuterHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'outerHTML', {
                get: _origOuterHTMLDesc.get,
                set: function(val) {
                    _origOuterHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // insertAdjacentHTML フック
    const _origInsertAdj = Element.prototype.insertAdjacentHTML;
    Element.prototype.insertAdjacentHTML = function(position, html) {
        return _origInsertAdj.call(this, position, rewriteHtmlString(html));
    };

    // ===== document.createElement フック =====
    const _origCreateElement = document.createElement.bind(document);
    document.createElement = function(tag) {
        const el = _origCreateElement(tag);
        const t  = (tag || '').toLowerCase();
        // imgやscriptなど生成直後にsrcをセットするケースはhookPropで対応済み
        if (t === 'iframe') {
            // iframe生成時に既にhookProp設定済みなので追加不要
        }
        return el;
    };

    // ===== MutationObserver: DOM追加要素の書き換え =====
    const URL_ATTRS = ['src', 'data-src', 'data-original', 'data-lazy-src', 'data-lazy', 'poster'];

    function fixNode(node) {
        if (node.nodeType !== 1) return;

        const tag = (node.tagName || '').toLowerCase();

        // src / href 系属性
        URL_ATTRS.forEach(function(attr) {
            if (node.hasAttribute && node.hasAttribute(attr)) {
                const val = node.getAttribute(attr);
                if (!val || val.includes('atoshin.com') || /^(data:|blob:|javascript:)/.test(val)) return;
                const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                if (proxied !== val) {
                    _origSetAttr.call(node, attr, proxied);
                }
            }
        });

        // href (a, link)
        if (node.hasAttribute && node.hasAttribute('href')) {
            const val = node.getAttribute('href');
            if (val && !val.includes('atoshin.com') && !/^(javascript:|mailto:|tel:|#|data:)/.test(val)) {
                const proxied = proxyUrl(val);
                if (proxied !== val) _origSetAttr.call(node, 'href', proxied);
            }
        }

        // srcset
        if (node.hasAttribute && node.hasAttribute('srcset')) {
            const val = node.getAttribute('srcset');
            if (val) {
                const rewritten = val.split(',').map(function(part) {
                    part = part.trim();
                    const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                    return m ? (proxyUrl(m[1].trim()) + ' ' + m[2]) : proxyUrl(part);
                }).join(', ');
                if (rewritten !== val) _origSetAttr.call(node, 'srcset', rewritten);
            }
        }

        // script タグの計測スクリプト除去
        if (tag === 'script' && node.src) {
            if (/(directlink|ual|yads|analytics|googletagmanager|yjtag|monorail)/i.test(node.src)) {
                node.type = 'javascript/blocked';
                _origSetAttr.call(node, 'src', '');
            }
        }

        // style属性内の url() 書き換え
        if (node.hasAttribute && node.hasAttribute('style')) {
            const style = node.getAttribute('style');
            if (style && style.includes('url(')) {
                const rewritten = style.replace(/url\s*\(\s*['"]?([^'")\s]+)['"]?\s*\)/gi, function(m, u) {
                    if (/^(data:|blob:|javascript:)/.test(u) || u.includes('atoshin.com')) return m;
                    return 'url(' + proxyUrl(u) + ')';
                });
                if (rewritten !== style) _origSetAttr.call(node, 'style', rewritten);
            }
        }

        // 子要素も再帰的に処理
        if (node.children && node.children.length > 0) {
            Array.from(node.children).forEach(fixNode);
        }
    }

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                fixNode(node);
            });
            // 属性変更の監視（lazyloadがdataset→srcを書き換えるケース）
            if (mutation.type === 'attributes') {
                const node = mutation.target;
                const attr = mutation.attributeName;
                if (attr && URL_ATTRS.includes(attr) && node.nodeType === 1) {
                    const val = node.getAttribute(attr);
                    if (val && !val.includes('atoshin.com') && !/^(data:|blob:|javascript:)/.test(val)) {
                        const tag = (node.tagName || '').toLowerCase();
                        const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                        if (proxied !== val) _origSetAttr.call(node, attr, proxied);
                    }
                }
            }
        });
    });

    observer.observe(document.documentElement, {
        childList:  true,
        subtree:    true,
        attributes: true,
        attributeFilter: ['src', 'href', 'data-src', 'data-original', 'data-lazy-src',
                          'data-lazy', 'poster', 'srcset', 'style']
    });

    // ===== document.write フック =====
    const _origWrite = document.write.bind(document);
    document.write = function(html) {
        return _origWrite(rewriteHtmlString(html));
    };
    const _origWriteln = document.writeln.bind(document);
    document.writeln = function(html) {
        return _origWriteln(rewriteHtmlString(html));
    };

    // ===== WebSocket フック (ホスト書き換え) =====
    if (window.WebSocket) {
        const _OrigWS = window.WebSocket;
        window.WebSocket = function(url, protocols) {
            if (typeof url === 'string') {
                // ws://orig-host/... → wss://proxy_host/ws-proxy/...等への変換は
                // プロキシ側に実装が必要なため、ここでは接続先ホスト情報を補正するのみ
                url = url.replace(
                    new RegExp('^ws(s?)://' + PROXY_HOST.replace(/\./g,'\.')),
                    'ws$1://' + ORIG_HOST
                );
            }
            return protocols ? new _OrigWS(url, protocols) : new _OrigWS(url);
        };
        window.WebSocket.prototype = _OrigWS.prototype;
        window.WebSocket.CONNECTING = _OrigWS.CONNECTING;
        window.WebSocket.OPEN       = _OrigWS.OPEN;
        window.WebSocket.CLOSING    = _OrigWS.CLOSING;
        window.WebSocket.CLOSED     = _OrigWS.CLOSED;
    }

    // ===== 競合回避版 jQuery 自動注入 (window.jq) =====
    function injectSafeJQuery() {
        if (typeof window.jq !== 'undefined') return;
        const originalDefine = window.define;
        window.define = null;
        const script = document.createElement('script');
        script.src   = 'https://code.jquery.com/jquery-3.7.1.min.js';
        script.async = false;
        script.onload = function() {
            window.define = originalDefine;
            if (window.jQuery) {
                window.jq = window.jQuery.noConflict(true);
                console.log('%c[Proxy] jQ 3.7.1 → window.jq', 'color:#0f0;background:#000');
            }
        };
        script.onerror = function() { window.define = originalDefine; };
        (document.head || document.documentElement).appendChild(script);
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', injectSafeJQuery);
    } else {
        injectSafeJQuery();
    }

    // ===== Eruda 開発者ツール =====
    function loadEruda() {
        try {
            const show = localStorage.getItem('_eruda_show') === '1'
                      || sessionStorage.getItem('_eruda_show') === '1';
            if (show && !window.eruda) {
                const s = document.createElement('script');
                s.src    = 'https://cdn.jsdelivr.net/npm/eruda';
                s.onload = function() { eruda.init(); };
                document.head.appendChild(s);
            }
        } catch(e) {}
    }
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', loadEruda);
    else loadEruda();

    console.log('%c[Proxy Hook] Active — origin: ' + ORIG_ORIGIN, 'color:#0af;background:#000;padding:2px 6px');

})();
</script><script>window.__proxy_original_origin__ = "https://patch-diff.githubusercontent.com"; window.__proxy_original_host__ = "patch-diff.githubusercontent.com";</script>Health Potion</Heading>
+        <Text>Health Potion</Text>
         <Spacer />
         <Text>3θ</Text>
       </HStack>
diff --git a/packages/client/src/components/StatsPanel/Inventory.tsx b/packages/client/src/components/StatsPanel/Inventory.tsx
new file mode 100644
index 000000000..f22706ed3
--- /dev/null
+++ b/packages/client/src/components/StatsPanel/Inventory.tsx
@@ -0,0 +1,30 @@
+import { Box, Button, HStack, Spacer, Text, VStack } from '@chakra-ui/react';
+
+export const Inventory = (): JSX.Element => {
+  return (
+    <Box padding="5px" w="100%">
+      <VStack align="stretch" spacing={2}>
+        <HStack alignItems="start" fontWeight="bold">
+          <Text>Active Items</Text>
+          <Spacer />
+          <Text>1/3</Text>
+        </HStack>
+        <HStack alignItems="center" fontSize="xs" fontWeight="bold">
+          <Text>Rusty Dagger</Text>
+          <Spacer />
+          <Button padding="0 2px" size="sm" variant="disabled">⁂</Button>
+        </HStack>
+        <HStack alignItems="center" fontSize="xs">
+          <Text>Empty Slot</Text>
+          <Spacer />
+          <Button padding="0 2px" size="sm" variant="ghost">+</Button>
+        </HStack>
+        <HStack alignItems="center" fontSize="xs">
+          <Text>Empty Slot</Text>
+          <Spacer />
+          <Button padding="0 2px" size="sm" variant="ghost">+</Button>
+        </HStack>
+      </VStack>
+    </Box>
+  );
+};
diff --git a/packages/client/src/components/Stats/Level.tsx b/packages/client/src/components/StatsPanel/Level.tsx
similarity index 69%
rename from packages/client/src/components/Stats/Level.tsx
rename to packages/client/src/components/StatsPanel/Level.tsx
index 2695206e6..3cc0e5869 100644
--- a/packages/client/src/components/Stats/Level.tsx
+++ b/packages/client/src/components/StatsPanel/Level.tsx
@@ -3,23 +3,29 @@ import { Box, HStack, Progress, Spacer, Text } from '@chakra-ui/react';
 export const Level = (): JSX.Element => {
   const percent = 50;
   return (
-    <Box padding="5px" position="relative" w="100%">
-      <Text position="absolute" right={100 - percent - 2 + '%'} top="-20px">
+    <Box
+      marginTop="20px"
+      padding="5px"
+      position="relative"
+      w="100%"
+      fontSize="10px"
+    >
+      <Text position="absolute" right={100 - percent - 2 + '%'} top="-10px">
         {percent}
       </Text>
       <Text
         display={percent > 90 ? 'none' : 'block'}
         position="absolute"
         right="0%"
-        top="-20px"
+        top="-10px"
       >
         100
       </Text>
       <Progress value={percent} />
       <HStack>
-        <Text fontSize="small">Level 1</Text>
+        <Text>Level 1</Text>
         <Spacer />
-        <Text fontSize="small">Level 2</Text>
+        <Text>Level 2</Text>
       </HStack>
     </Box>
   );
diff --git a/packages/client/src/components/Stats/Money.tsx b/packages/client/src/components/StatsPanel/Money.tsx
similarity index 100%
rename from packages/client/src/components/Stats/Money.tsx
rename to packages/client/src/components/StatsPanel/Money.tsx
diff --git a/packages/client/src/components/Stats/Navigation.tsx b/packages/client/src/components/StatsPanel/Navigation.tsx
similarity index 100%
rename from packages/client/src/components/Stats/Navigation.tsx
rename to packages/client/src/components/StatsPanel/Navigation.tsx
diff --git a/packages/client/src/components/Stats/Socials.tsx b/packages/client/src/components/StatsPanel/Socials.tsx
similarity index 85%
rename from packages/client/src/components/Stats/Socials.tsx
rename to packages/client/src/components/StatsPanel/Socials.tsx
index cce7d7418..45c367e62 100644
--- a/packages/client/src/components/Stats/Socials.tsx
+++ b/packages/client/src/components/StatsPanel/Socials.tsx
@@ -5,11 +5,11 @@ export const Socials = (): JSX.Element => {
   return (
     <Stack direction="row" padding="5px" w="100%">
       <Link>
-        <FaDiscord />
+        <FaDiscord size={20} />
       </Link>
       <Spacer />
       <Link>
-        <FaTwitter />
+        <FaTwitter size={20} />
       </Link>
       <Spacer />
       <Link fontWeight="700">T&C</Link>
diff --git a/packages/client/src/components/Stats/Stats.tsx b/packages/client/src/components/StatsPanel/Stats.tsx
similarity index 69%
rename from packages/client/src/components/Stats/Stats.tsx
rename to packages/client/src/components/StatsPanel/Stats.tsx
index 979b64d45..9cf470ce6 100644
--- a/packages/client/src/components/Stats/Stats.tsx
+++ b/packages/client/src/components/StatsPanel/Stats.tsx
@@ -10,25 +10,33 @@ export const Stats = (): JSX.Element => {
         width="75%"
       >
         <GridItem>
-          <Text fontWeight="bold">HP</Text>
+          <Text fontWeight="bold" size="lg">
+            HP
+          </Text>
         </GridItem>
         <GridItem>
           <Text>1</Text>
         </GridItem>
         <GridItem>
-          <Text fontWeight="bold">STR</Text>
+          <Text fontWeight="bold" size="lg">
+            STR
+          </Text>
         </GridItem>
         <GridItem>
           <Text>3</Text>
         </GridItem>
         <GridItem>
-          <Text fontWeight="bold">AGI</Text>
+          <Text fontWeight="bold" size="lg">
+            AGI
+          </Text>
         </GridItem>
         <GridItem>
           <Text>4</Text>
         </GridItem>
         <GridItem>
-          <Text fontWeight="bold">INT</Text>
+          <Text fontWeight="bold" size="lg">
+            INT
+          </Text>
         </GridItem>
         <GridItem>
           <Text>5</Text>
diff --git a/packages/client/src/components/Stats/TopBar.tsx b/packages/client/src/components/StatsPanel/TopBar.tsx
similarity index 82%
rename from packages/client/src/components/Stats/TopBar.tsx
rename to packages/client/src/components/StatsPanel/TopBar.tsx
index 5ae28a6c1..3383b1f2e 100644
--- a/packages/client/src/components/Stats/TopBar.tsx
+++ b/packages/client/src/components/StatsPanel/TopBar.tsx
@@ -5,10 +5,10 @@ export const TopBar = (): JSX.Element => {
   return (
     <Flex alignItems="center" padding="5px" textAlign="center" w="100%">
       <Box>
-        <Avatar size="sm" />
+        <Avatar size="md" />
       </Box>
       <Box w="100%">
-        <Text>0lffaa_08 ※</Text>
+        <Text fontWeight="700">0lffaa_08 ※</Text>
       </Box>
       <Box textAlign="right">
         <IoIosArrowForward />
diff --git a/packages/client/src/components/StatsPanel/index.tsx b/packages/client/src/components/StatsPanel/index.tsx
new file mode 100644
index 000000000..703916484
--- /dev/null
+++ b/packages/client/src/components/StatsPanel/index.tsx
@@ -0,0 +1,32 @@
+import { Spacer, VStack } from '@chakra-ui/react';
+
+import { HealthPotion } from './HealthPotion';
+import { Inventory } from './Inventory';
+import { Level } from './Level';
+import { Money } from './Money';
+import { Navigation } from './Navigation';
+import { Socials } from './Socials';
+import { Stats } from './Stats';
+import { TopBar } from './TopBar';
+
+export const StatsPanel = (): JSX.Element => {
+  return (
+    <VStack h="100%" p={3}>
+      <TopBar />
+      <Spacer />
+      <Stats />
+      <Spacer />
+      <Level />
+      <Spacer />
+      <Money />
+      <Spacer />
+      <Inventory />
+      <Spacer />
+      <HealthPotion />
+      <Spacer />
+      <Navigation />
+      <Spacer />
+      <Socials />
+    </VStack>
+  );
+};
diff --git a/packages/client/src/pages/GameBoard.tsx b/packages/client/src/pages/GameBoard.tsx
index 682ddc14f..8a90a6aff 100644
--- a/packages/client/src/pages/GameBoard.tsx
+++ b/packages/client/src/pages/GameBoard.tsx
@@ -1,13 +1,6 @@
-import { Grid, GridItem, Heading, Spacer, VStack } from '@chakra-ui/react';
+import { Grid, GridItem, Heading } from '@chakra-ui/react';
 
-import { HealthPotion } from '../components/Stats/HealthPotion';
-import { Inventory } from '../components/Stats/Inventory';
-import { Level } from '../components/Stats/Level';
-import { Money } from '../components/Stats/Money';
-import { Navigation } from '../components/Stats/Navigation';
-import { Socials } from '../components/Stats/Socials';
-import { Stats } from '../components/Stats/Stats';
-import { TopBar } from '../components/Stats/TopBar';
+import { StatsPanel } from '../components/StatsPanel';
 
 export const GameBoard = (): JSX.Element => {
   return (
@@ -25,23 +18,7 @@ export const GameBoard = (): JSX.Element => {
         padding="5px"
         rowSpan={{ base: 12, md: 12 }}
       >
-        <VStack h="100%">
-          <TopBar />
-          <Spacer />
-          <Stats />
-          <Spacer />
-          <Level />
-          <Spacer />
-          <Money />
-          <Spacer />
-          <Inventory />
-          <Spacer />
-          <HealthPotion />
-          <Spacer />
-          <Navigation />
-          <Spacer />
-          <Socials />
-        </VStack>
+        <StatsPanel />
       </GridItem>
       <GridItem
         background="mintcream"
diff --git a/packages/client/src/utils/theme.ts b/packages/client/src/utils/theme.ts
index 97fe3fbd4..e7dc5b365 100644
--- a/packages/client/src/utils/theme.ts
+++ b/packages/client/src/utils/theme.ts
@@ -11,16 +11,7 @@ export const globalStyles = css`
     font-size: 1rem;
   }
 `;
-const Progress = {
-  baseStyle: {
-    track: {
-      borderRadius: 5,
-    },
-    filledTrack: {
-      bg: 'black',
-    },
-  },
-};
+
 const Button = {
   baseStyle: {
     borderRadius: 5,
@@ -95,7 +86,16 @@ const Input = {
     },
   },
 };
-
+const Progress = {
+  baseStyle: {
+    track: {
+      borderRadius: 5,
+    },
+    filledTrack: {
+      bg: 'black',
+    },
+  },
+};
 const Text = {
   sizes: {
     xs: {
@@ -107,6 +107,9 @@ const Text = {
     md: {
       fontSize: '16px',
     },
+    lg: {
+      fontSize: '18px',
+    },
   },
 };
 

From 2701a18f822c4612288e3840448066b045e7387c Mon Sep 17 00:00:00 2001
From: Fluffy9 <29765579+Fluffy9@users.noreply.github.com>
Date: Fri, 7 Jun 2024 14:13:29 -0400
Subject: [PATCH 6/6] Text to buttons

---
 .../client/src/components/StatsPanel/Inventory.tsx   | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/StatsPanel/Inventory.tsx b/packages/client/src/components/StatsPanel/Inventory.tsx
index f22706ed3..35dde5512 100644
--- a/packages/client/src/components/StatsPanel/Inventory.tsx
+++ b/packages/client/src/components/StatsPanel/Inventory.tsx
@@ -12,17 +12,23 @@ export const Inventory = (): JSX.Element => {
         <HStack alignItems="center" fontSize="xs" fontWeight="bold">
           <Text>Rusty Dagger</Text>
           <Spacer />
-          <Button padding="0 2px" size="sm" variant="disabled">⁂</Button>
+          <Button padding="0 2px" size="sm" variant="disabled">
+            ⁂
+          </Button>
         </HStack>
         <HStack alignItems="center" fontSize="xs">
           <Text>Empty Slot</Text>
           <Spacer />
-          <Button padding="0 2px" size="sm" variant="ghost">+</Button>
+          <Button padding="0 2px" size="sm" variant="ghost">
+            +
+          </Button>
         </HStack>
         <HStack alignItems="center" fontSize="xs">
           <Text>Empty Slot</Text>
           <Spacer />
-          <Button padding="0 2px" size="sm" variant="ghost">+</Button>
+          <Button padding="0 2px" size="sm" variant="ghost">
+            +
+          </Button>
         </HStack>
       </VStack>
     </Box>