danoniplus 19.5.14

package/js/lib/danoni_legacy_function.js

@@ -0,0 +1,435 @@
+'use strict';
+/**
+ * Dancing☆Onigiri (CW Edition)
+ * 旧バージョン定義変数・関数
+ *
+ * Source by tickle
+ * Created : 2019/11/19
+ * Revised : 2021/01/17 (v19.0.0)
+ *
+ * https://github.com/cwtickle/danoniplus
+ */
+
+// ユーザインタフェース
+// カスタム側で変更できるようにletで定義している（v10以降のカラーコード類は互換関数以外の利用用途なし）
+let C_CLR_DEFAULT = `#333333`;
+let C_CLR_DEFAULTA = `#111133`;
+let C_CLR_DEFAULTB = `#333311`;
+let C_CLR_DEFAULTC = `#331111`;
+let C_CLR_DEFAULTD = `#113311`;
+let C_CLR_DEFAULTE = `#113333`;
+let C_CLR_DEFHOVER = `#666666`;
+let C_CLR_BACK = `#000099`;
+let C_CLR_NEXT = `#990000`;
+let C_CLR_SETTING = `#999900`;
+let C_CLR_RESET = `#009900`;
+let C_CLR_TWEET = `#009999`;
+
+let C_CLR_TEXT = `#ffffff`;
+let C_CLR_TITLE = `#cccccc`;
+let C_CLR_LOADING_BAR = `#eeeeee`;
+let C_CLR_LNK = `#111111`;
+
+// 判定キャラクタの色 (v10以降はcssで定義)
+const C_CLR_II = `#66ffff`;
+const C_CLR_SHAKIN = `#99ff99`;
+const C_CLR_MATARI = `#ff9966`;
+const C_CLR_UWAN = `#ff9999`;
+const C_CLR_SHOBON = `#ccccff`;
+const C_CLR_KITA = `#ffff99`;
+const C_CLR_SFSF = ``;
+const C_CLR_IKNAI = `#99ff66`;
+
+// ライフゲージの色 (v10以降はcssで定義)
+let C_CLR_MAXLIFE = `#444400`;
+let C_CLR_CLEARLIFE = `#004444`;
+let C_CLR_DEFAULTLIFE = `#444444`;
+let C_CLR_BACKLIFE = `#222222`;
+
+/**
+* 子div要素のラベル文字作成 (v9互換用)
+* - ここで指定するテキストはhtmlタグが使える
+* @param {string} _id 
+* @param {number} _x 
+* @param {number} _y 
+* @param {number} _width 
+* @param {number} _height 
+* @param {number} _fontsize 
+* @param {string} _color
+* @param {string} _text 
+*/
+function createDivLabel(_id, _x, _y, _width, _height, _fontsize, _color, _text) {
+    const div = createDiv(_id, _x, _y, _width, _height);
+    const style = div.style;
+    style.fontSize = `${_fontsize}px`;
+    style.color = _color;
+    style.fontFamily = getBasicFont();
+    style.textAlign = C_ALIGN_CENTER;
+    div.innerHTML = _text;
+
+    return div;
+}
+
+
+/**
+ * 子div要素のラベル文字作成 (CSS版, v16互換)
+ * @param {string} _id 
+ * @param {number} _x 
+ * @param {number} _y 
+ * @param {number} _width 
+ * @param {number} _height 
+ * @param {number} _fontsize 
+ * @param {string} _text
+ * @param {string} _class 
+ */
+function createDivCssLabel(_id, _x, _y, _width, _height, _fontsize, _text, _class = g_cssObj.title_base) {
+    const div = createDiv(_id, _x, _y, _width, _height);
+    div.classList.add(_class);
+
+    const style = div.style;
+    style.fontSize = `${_fontsize}px`;
+    style.fontFamily = getBasicFont();
+    style.textAlign = C_ALIGN_CENTER;
+    div.innerHTML = _text;
+
+    return div;
+}
+
+/**
+ * 矢印オブジェクトの作成（色付きマスク版）- v10以降は未使用
+ * @param {string} _id 
+ * @param {string} _color 
+ * @param {number} _x 
+ * @param {number} _y 
+ * @param {number} _size 
+ * @param {number, string} _rotate 
+ */
+function createArrowEffect(_id, _color, _x, _y, _size, _rotate) {
+
+    const div = createDiv(_id, _x, _y, _size, _size);
+
+    // 矢印・おにぎり判定
+    let charaStyle;
+    if (isNaN(Number(_rotate))) {
+        charaStyle = `${_rotate}`;
+    } else {
+        charaStyle = `arrow`;
+        div.style.transform = `rotate(${_rotate}deg)`;
+    }
+    div.align = C_ALIGN_CENTER;
+
+    if (_color !== ``) {
+        div.style.backgroundColor = _color;
+    }
+
+    div.style.maskImage = `url("${g_imgObj[charaStyle]}")`;
+    div.style.maskSize = `contain`;
+    div.style.webkitMaskImage = `url("${g_imgObj[charaStyle]}")`;
+    div.style.webkitMaskSize = `contain`;
+    div.setAttribute(`color`, _color);
+
+    return div;
+}
+
+/**
+ * 色付きオブジェクトの作成 (v16互換)
+ * @param {string} _id 
+ * @param {string} _color 
+ * @param {number} _x 
+ * @param {number} _y 
+ * @param {number} _width 
+ * @param {number} _height 
+ * @param {string} _rotate オブジェクト名／回転角度 (default : ``)
+ * @param {string} _styleName オブジェクト種類 (default : ``)
+ */
+function createColorObject(_id, _color, _x, _y, _width, _height,
+    _rotate = ``, _styleName = ``) {
+
+    const div = createDiv(_id, _x, _y, _width, _height);
+
+    // 矢印・オブジェクト判定
+    let charaStyle;
+    if (isNaN(Number(_rotate)) || _rotate === ``) {
+        charaStyle = `${_rotate}${_styleName}`;
+    } else {
+        charaStyle = `arrow${_styleName}`;
+        div.style.transform = `rotate(${_rotate}deg)`;
+    }
+
+    if (_color !== ``) {
+        div.style.background = _color;
+    }
+    div.style.maskImage = `url("${g_imgObj[charaStyle]}")`;
+    div.style.maskSize = `contain`;
+    div.style.webkitMaskImage = `url("${g_imgObj[charaStyle]}")`;
+    div.style.webkitMaskSize = `contain`;
+    div.setAttribute(`color`, _color);
+    div.setAttribute(`type`, charaStyle);
+
+    return div;
+}
+
+/**
+ * ボタンの作成 (v9互換版)
+ * - ボタンの位置、色といった基本設定をここで指定
+ * - 実際のボタンは以下のように設定して使用すること（表示されなくなる）
+ * - ボタンの表示テキスト及びフォントは固定
+ * 
+ * -  使い方：
+ *		const btnBack = createButton({
+ *			// ボタンオブジェクト名
+ *			id: `btnBack`,
+ *			// ボタンに表示する名前
+ *			name: `Back`,
+ *			// 作成先のx座標 (appendChildする親に対する位置)
+ *			x: 0,
+ *			// 作成先のy座標 (appendChildする親に対する位置)
+ *			y: g_sHeight-100,
+ *			// 幅
+ *			width: g_sWidth/3, 
+ *			// 高さ
+ *			height: C_BTN_HEIGHT, 
+ *			// フォントサイズ
+ *			fontsize: C_LBL_BTNSIZE,
+ *			// 通常時の背景色 (カラーコード:#ffffff 形式)
+ *			normalColor: C_CLR_DEFAULT, 
+ *			// オンマウス時の背景色 (カラーコード:#ffffff 形式)
+ *			hoverColor: C_CLR_BACK, 
+ *			// 表示位置
+ *			align: C_ALIGN_CENTER
+ *		}, _ => {
+ *			// ボタン押下後の処理
+ *			clearWindow();
+ *			titleInit();
+ *		});
+ *		divRoot.appendChild(btnBack);
+ *   
+ * @param {object} _obj ボタンオブジェクト
+ * @param {function} _func ボタン押下後の処理（マウスハンドラ）
+ */
+function createButton(_obj, _func) {
+
+    // ボタン用の子要素divを作成
+    const div = createDiv(_obj.id, _obj.x, _obj.y, _obj.width, _obj.height);
+
+    // ボタンの装飾を定義
+    const style = div.style;
+    div.innerHTML = _obj.name;
+    style.textAlign = _obj.align;
+    style.verticalAlign = C_VALIGN_MIDDLE;
+    style.color = C_CLR_TEXT;
+    style.fontSize = `${_obj.fontsize}px`;
+    style.fontFamily = getBasicFont();
+    style.backgroundColor = _obj.normalColor;
+    style.transition = `background-color 0.25s linear`;
+    if (setVal(_obj.animationName, ``, C_TYP_STRING) !== ``) {
+        style.animationName = _obj.animationName;
+        style.animationDuration = `1s`;
+    }
+    style.display = `flex`;
+    style.flexDirection = `column`;
+    style.justifyContent = `center`;
+
+    // オンマウス・タップ時の挙動 (背景色変更、カーソル変化)
+    div.onmouseover = _ => {
+        style.backgroundColor = _obj.hoverColor;
+        style.cursor = `pointer`;
+    }
+    const lsnrkeyTS = g_handler.addListener(div, `touchstart`, _ => {
+        style.backgroundColor = _obj.hoverColor;
+        style.cursor = `pointer`;
+    });
+
+    // 通常時の挙動 (背景色変更、カーソル変化)
+    div.onmouseout = _ => {
+        style.backgroundColor = _obj.normalColor;
+        style.cursor = `default`;
+    }
+    const lsnrkeyTE = g_handler.addListener(div, `touchend`, _ => {
+        style.backgroundColor = _obj.normalColor;
+        style.cursor = `default`;
+    });
+
+    // ボタンを押したときの動作
+    const lsnrkey = g_handler.addListener(div, `click`, _ => _func());
+
+    // イベントリスナー用のキーをセット
+    div.setAttribute(`lsnrkey`, lsnrkey);
+    div.setAttribute(`lsnrkeyTS`, lsnrkeyTS);
+    div.setAttribute(`lsnrkeyTE`, lsnrkeyTE);
+
+    return div;
+}
+
+/**
+ * ボタンの作成 (CSS版, v16互換)
+ * - ボタンの位置、色といった基本設定をここで指定
+ * - 実際のボタンは以下のように設定して使用すること（表示されなくなる）
+ * - ボタンの表示テキスト及びフォントは固定
+ * 
+ * -  使い方：
+ *		const btnBack = createButton({
+ *			// ボタンオブジェクト名
+ *			id: `btnBack`,
+ *			// ボタンに表示する名前
+ *			name: `Back`,
+ *			// 作成先のx座標 (appendChildする親に対する位置)
+ *			x: 0,
+ *			// 作成先のy座標 (appendChildする親に対する位置)
+ *			y: g_sHeight-100,
+ *			// 幅
+ *			width: g_sWidth/3, 
+ *			// 高さ
+ *			height: C_BTN_HEIGHT, 
+ *			// フォントサイズ
+ *			fontsize: C_LBL_BTNSIZE,
+ *			// 表示位置
+ *			align: C_ALIGN_CENTER,
+ *			// CSSクラス名
+ *			class: `class_name`,
+ *		}, _ => {
+ *			// ボタン押下後の処理
+ *			clearWindow();
+ *			titleInit();
+ *		});
+ *		divRoot.appendChild(btnBack);
+ *   
+ * @param {object} _obj ボタンオブジェクト
+ * @param {function} _func ボタン押下後の処理（マウスハンドラ）
+ */
+function createCssButton(_obj, _func) {
+
+    // ボタン用の子要素divを作成
+    const div = createDiv(_obj.id, _obj.x, _obj.y, _obj.width, _obj.height);
+    div.classList.add(`button_common`, _obj.class);
+
+    // ボタンの装飾を定義
+    const style = div.style;
+    div.innerHTML = _obj.name;
+    style.textAlign = _obj.align;
+    style.verticalAlign = C_VALIGN_MIDDLE;
+    style.fontSize = `${_obj.fontsize}px`;
+    style.fontFamily = getBasicFont();
+    if (hasVal(_obj.animationName)) {
+        style.animationName = _obj.animationName;
+        style.animationDuration = `1s`;
+    }
+    div.ontouchstart = ``;
+
+    // ボタンを押したときの動作
+    const lsnrkey = g_handler.addListener(div, `click`, _ => _func());
+
+    // イベントリスナー用のキーをセット
+    div.setAttribute(`lsnrkey`, lsnrkey);
+
+    return div;
+}
+
+/**
+ * 設定・オプション表示用ボタン - v9互換用
+ * @param {string} _id 
+ * @param {string} _name 初期設定文字
+ * @param {number} _heightPos 上からの配置順
+ * @param {function} _func 
+ */
+function makeSettingLblButton(_id, _name, _heightPos, _func) {
+    const settingLblButton = createButton({
+        id: _id,
+        name: _name,
+        x: C_LEN_SETLBL_LEFT,
+        y: C_LEN_SETLBL_HEIGHT * _heightPos,
+        width: C_LEN_SETLBL_WIDTH,
+        height: C_LEN_SETLBL_HEIGHT,
+        fontsize: C_SIZ_SETLBL,
+        normalColor: C_CLR_LNK,
+        hoverColor: C_CLR_DEFHOVER,
+        align: C_ALIGN_CENTER
+    }, _func);
+
+    return settingLblButton;
+}
+
+/**
+ * 譜面変更セレクター用ボタン - v9互換用
+ * @param {string} _id
+ * @param {string} _name 初期設定文字
+ * @param {number} _heightPos 上からの配置順
+ * @param {function} _func
+ */
+function makeDifLblButton(_id, _name, _heightPos, _func) {
+    const difLblButton = createButton({
+        id: _id,
+        name: _name,
+        x: 0,
+        y: C_LEN_SETLBL_HEIGHT * _heightPos,
+        width: C_LEN_SETLBL_WIDTH,
+        height: C_LEN_SETLBL_HEIGHT,
+        fontsize: C_SIZ_DIFSELECTOR,
+        normalColor: C_CLR_LNK,
+        hoverColor: C_CLR_DEFHOVER,
+        align: C_ALIGN_CENTER
+    }, _func);
+    difLblButton.style.borderStyle = `solid`;
+    difLblButton.style.borderColor = `#000000 #cccccc`;
+
+    return difLblButton;
+}
+
+/**
+ * 設定・オプション用の設定変更ミニボタン - v9互換用
+ * @param {string} _id 
+ * @param {string} _directionFlg 表示用ボタンのどちら側に置くかを設定。(R, RR:右、L, LL:左)
+ * @param {number} _heightPos 上からの配置順
+ * @param {function} _func 
+ */
+function makeMiniButton(_id, _directionFlg, _heightPos, _func) {
+    const miniButton = createButton({
+        id: _id + _directionFlg,
+        name: eval(`C_LBL_SETMINI${_directionFlg}`),
+        x: eval(`C_LEN_SETMINI${_directionFlg}_LEFT`),
+        y: C_LEN_SETLBL_HEIGHT * _heightPos,
+        width: C_LEN_SETMINI_WIDTH,
+        height: C_LEN_SETLBL_HEIGHT,
+        fontsize: C_SIZ_SETLBL,
+        normalColor: C_CLR_DEFAULT,
+        hoverColor: C_CLR_SETTING,
+        align: C_ALIGN_CENTER
+    }, _func);
+
+    return miniButton;
+}
+
+/**
+ * 結果表示作成（曲名、オプション）- v9互換用
+ * @param {string} _id 
+ * @param {number} _x
+ * @param {string} _color 
+ * @param {number} _heightPos 
+ * @param {string, number} _text
+ * @param {string} _align
+ */
+function makeResultPlayData(_id, _x, _color, _heightPos, _text, _align) {
+    const symbol = createDivLabel(_id, _x, 18 * _heightPos,
+        400, 18, 14, _color, _text);
+    symbol.style.textAlign = _align;
+
+    return symbol;
+}
+
+/**
+ * 結果表示作成（キャラクタ）- v9互換用
+ * @param {string} _id 
+ * @param {number} _x
+ * @param {string} _color 
+ * @param {number} _heightPos 
+ * @param {string, number} _text
+ * @param {string} _align
+ */
+function makeResultSymbol(_id, _x, _color, _heightPos, _text, _align) {
+    const symbol = createDivLabel(_id, _x, 18 * _heightPos,
+        150, 18, 16, _color, _text);
+    symbol.style.textAlign = _align;
+
+    return symbol;
+}
+

package/js/lib/danoni_localbinary.js

@@ -0,0 +1,29 @@
+'use strict';
+/**
+ * Dancing☆Onigiri (CW Edition)
+ * ローカル起動用バイナリファイル定義
+ *
+ * Source by tickle
+ * Created : 2020/03/22
+ * Revised : 2020/05/21 (v15.1.0)
+ *
+ * https://github.com/cwtickle/danoniplus
+ */
+
+function loadBinary() {
+    if (location.href.match(`^file`)) {
+        C_IMG_ARROW = `data:image/svg+xml,${encodeURIComponent('<svg id="arrow" data-name="arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:20px;}</style></defs><polygon class="cls-1" points="288.91 42.76 32.94 249.83 288.91 456.9 249.87 314.02 466.8 314.02 466.8 187.71 249.87 187.71 288.91 42.76"/></svg>')}`
+        C_IMG_ARROWSD = `data:image/svg+xml,${encodeURIComponent('<svg id="arrowShadow" data-name="arrowShadow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><defs><style>.cls-1{stroke:#000;stroke-miterlimit:10;stroke-width:30px;}</style></defs><polygon class="cls-1" points="288.91 42.76 32.94 249.83 288.91 456.9 249.87 314.02 466.8 314.02 466.8 187.71 249.87 187.71 288.91 42.76"/></svg>')}`;
+        C_IMG_ONIGIRI = `data:image/svg+xml,${encodeURIComponent('<svg id="onigiri" data-name="onigiri" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><defs><style>.cls-1{fill:none;stroke-width:12px;}.cls-1,.cls-2{stroke:#000;stroke-miterlimit:10;}.cls-2{stroke-width:10px;}</style></defs><line class="cls-1" x1="160.22" y1="238.02" x2="124.03" y2="275.84"/><line class="cls-1" x1="354.94" y1="238.9" x2="391.19" y2="277"/><polyline class="cls-1" points="190.92 262 256.82 433 322.73 262"/><line class="cls-1" x1="205.47" y1="309" x2="308.18" y2="308"/><rect class="cls-2" x="192.63" y="42" width="128.39" height="150"/><line class="cls-1" x1="181.5" y1="42" x2="59.96" y2="195"/><line class="cls-1" x1="331.29" y1="42" x2="444.27" y2="183"/><path class="cls-1" d="M66,213c-81.9,97.55-79.69,176.84,7.71,277"/><path class="cls-1" d="M422,483.88c85.52-95,87.73-172.58,7.71-270.88"/></svg>')}`;
+        C_IMG_AASD = `data:image/svg+xml,${encodeURIComponent('<svg id="aaShadow" data-name="aaShadow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><defs><style>.cls-1{stroke:#000;stroke-miterlimit:10;}</style></defs><polygon class="cls-1" points="177.5 25.5 49.5 180.5 6.5 274.5 -0.5 347.5 13.5 416.5 82 500 410.85 499 479.85 418 500 332 480 250 438 162 333 25 177.5 25.5"/></svg>')}`;
+        C_IMG_GIKO = `data:image/svg+xml,${encodeURIComponent('<svg id="giko" data-name="giko" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:12px;}</style></defs><line class="cls-1" x1="118.5" y1="42" x2="62.41" y2="195"/><line class="cls-1" x1="388.1" y1="42.64" x2="445.06" y2="189.64"/><path class="cls-1" d="M68.45,213c-82.58,97.55-80.36,176.84,7.76,277"/><path class="cls-1" d="M427.46,483.88c86.24-95,88.46-172.58,7.77-270.88"/><path d="M262.56,262.91h80.73V416.82l10,.22-.95,54H342l-.79-39.36H249L248,471H237.76l-.95-54,8.85-.22c11.37-31.18,16.9-51.08,16.9-111.45Zm12.33,15.26v33.39c0,55.28-7.27,81.82-15.64,104.82H330.5V278.17Z"/><ellipse class="cls-1" cx="394.24" cy="248.5" rx="12.95" ry="15"/><ellipse class="cls-1" cx="209.12" cy="249" rx="12.95" ry="15"/><line class="cls-1" x1="388.6" y1="39.28" x2="332.51" y2="192.28"/><line class="cls-1" x1="116.25" y1="44.64" x2="173.2" y2="191.64"/><line class="cls-1" x1="49.46" y1="295" x2="152.16" y2="294"/><line class="cls-1" x1="38.24" y1="387" x2="138.35" y2="387"/><line class="cls-1" x1="97.79" y1="225" x2="53.78" y2="449"/><line class="cls-1" x1="144.39" y1="225" x2="102.11" y2="449"/></svg>')}`;
+        C_IMG_IYO = `data:image/svg+xml,${encodeURIComponent('<svg id="iyo" data-name="iyo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:12px;}</style></defs><line class="cls-1" x1="116.37" y1="42" x2="60.85" y2="195"/><line class="cls-1" x1="383.19" y1="42.64" x2="439.56" y2="189.64"/><path class="cls-1" d="M66.83,213C-14.9,310.55-12.7,389.84,74.52,490"/><path class="cls-1" d="M422.15,483.88c85.34-95,87.55-172.58,7.69-270.88"/><ellipse class="cls-1" cx="389.27" cy="248.5" rx="12.81" ry="15"/><ellipse class="cls-1" cx="206.05" cy="249" rx="12.81" ry="15"/><line class="cls-1" x1="383.69" y1="39.28" x2="328.17" y2="192.28"/><line class="cls-1" x1="114.13" y1="44.64" x2="170.51" y2="191.64"/><line class="cls-1" x1="48.04" y1="295" x2="149.68" y2="294"/><line class="cls-1" x1="36.93" y1="387" x2="136.01" y2="387"/><path d="M303.57,373.7c-.59,5.76-1,10.13-1,14.28.15,10.6,2.36,23,14.57,23,13.69,0,27.08-30.64,27.08-68,0-16.82-3.23-34.79-10.45-46.54l.15-.7h10.89c5.15,7.15,10.75,25.35,10.75,47,0,45.62-16.78,83.18-38.27,83.18-12.07,0-19.13-9-21.49-22.81H295C290.32,416.55,283.11,426,270.6,426c-13.1,0-25.9-15.21-25.9-48.39,0-38.48,14.72-71.43,24.43-81.8H281.2l-.15.7c-10.15,12-25,42.39-25,80.41,0,25.35,9.13,34.1,17.66,34.1,10.45,0,17.22-15,19.14-34.33l5.44-46.77H309Z"/></svg>')}`;
+        C_IMG_C = `data:image/svg+xml,${encodeURIComponent('<svg id="c" data-name="c" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:12px;}</style></defs><line class="cls-1" x1="115.62" y1="42" x2="59.84" y2="195"/><line class="cls-1" x1="383.69" y1="42.64" x2="440.33" y2="189.64"/><path class="cls-1" d="M65.85,213c-82.12,97.55-79.91,176.84,7.72,277"/><path class="cls-1" d="M422.84,483.88c85.75-95,88-172.58,7.72-270.88"/><ellipse class="cls-1" cx="389.8" cy="248.5" rx="12.87" ry="15"/><ellipse class="cls-1" cx="205.73" cy="249" rx="12.87" ry="15"/><line class="cls-1" x1="384.2" y1="39.28" x2="328.42" y2="192.28"/><line class="cls-1" x1="113.37" y1="44.64" x2="170.01" y2="191.64"/><line class="cls-1" x1="75.29" y1="277" x2="161.1" y2="365"/><line class="cls-1" x1="68.42" y1="364" x2="156.81" y2="278"/><line class="cls-1" x1="113.9" y1="379" x2="115.62" y2="264"/><line class="cls-1" x1="229.75" y1="326" x2="368.78" y2="326"/><line class="cls-1" x1="228.9" y1="316" x2="234.05" y2="327"/></svg>')}`;
+        C_IMG_MORARA = `data:image/svg+xml,${encodeURIComponent('<svg id="morara" data-name="morara" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:12px;}</style></defs><line class="cls-1" x1="117.96" y1="42" x2="61.63" y2="195"/><line class="cls-1" x1="388.66" y1="42.64" x2="445.86" y2="189.64"/><path class="cls-1" d="M67.7,213C-15.22,310.55-13,389.84,75.49,490"/><path class="cls-1" d="M428.19,483.88C514.78,388.84,517,311.3,436,213"/><ellipse cx="160.42" cy="333" rx="13" ry="15"/><line class="cls-1" x1="389.17" y1="39.28" x2="332.84" y2="192.28"/><line class="cls-1" x1="115.69" y1="44.64" x2="172.88" y2="191.64"/><polyline class="cls-1" points="219.35 261 286.07 432 352.8 261"/><line class="cls-1" x1="234.08" y1="308" x2="338.07" y2="307"/><ellipse cx="400.46" cy="333" rx="13" ry="15"/><line class="cls-1" x1="172.55" y1="192" x2="332.87" y2="192"/></svg>')}`;
+        C_IMG_MONAR = `data:image/svg+xml,${encodeURIComponent('<svg id="monar" data-name="monar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:12px;}</style></defs><line class="cls-1" x1="163.22" y1="238.02" x2="127.03" y2="275.84"/><line class="cls-1" x1="357.94" y1="238.9" x2="394.19" y2="277"/><polyline class="cls-1" points="193.92 262 259.82 433 325.73 262"/><line class="cls-1" x1="208.47" y1="309" x2="311.18" y2="308"/><path class="cls-1" d="M69,213c-81.9,97.55-79.69,176.84,7.71,277"/><path class="cls-1" d="M425,483.88c85.52-95,87.73-172.58,7.71-270.88"/><line class="cls-1" x1="121.16" y1="45" x2="65.53" y2="198"/><line class="cls-1" x1="388.54" y1="45.64" x2="445.03" y2="192.64"/><line class="cls-1" x1="389.04" y1="42.28" x2="333.4" y2="195.28"/><line class="cls-1" x1="118.92" y1="47.64" x2="175.41" y2="194.64"/><line class="cls-1" x1="175.09" y1="195" x2="333.43" y2="195"/></svg>')}`;
+        C_IMG_CURSOR = `data:image/svg+xml,${encodeURIComponent('<svg id="cursor" data-name="cursor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"><defs><style>.cls-1{fill:#f7931e;stroke:#999;stroke-miterlimit:10;}</style></defs><polygon class="cls-1" points="7.5 5.5 7.5 92.5 44.5 48.5 7.5 5.5"/></svg>')}`;
+        C_IMG_FRZBAR = `data:image/svg+xml,${encodeURIComponent('<svg id="frzbar" data-name="frzbar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><rect width="500" height="500"/></svg>')}`;
+        C_IMG_LIFEBAR = C_IMG_FRZBAR;
+        C_IMG_LIFEBORDER = `data:image/svg+xml,${encodeURIComponent('<svg id="borderline" data-name="borderline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 160"><path d="M400,160H80L0,80,80.8,0H400Z"/></svg>')}`;
+    }
+}

package/js/sample/danoni_custom-003.js

@@ -0,0 +1,125 @@
+'use strict';
+/**
+ * Dancing☆Onigiri カスタム例 -003
+ * 
+ * このファイルは、作品個別に設定できる項目となっています。
+ * 譜面データ側で下記のように作品別の外部jsファイルを指定することで、
+ * danoni_main.js の中身を変えることなく設定が可能です。
+ * 
+ * 設定例：
+ * |customjs=danoni_custom-003.js|
+ * 
+ * ・グローバル変数、div要素、関数は danoni_main.js のものがそのまま利用できます。
+ * ・danoni_main.jsの変数を直接書き換えると、動かなくなることがあります。
+ * 　こまめのバックアップをおススメします。
+ * ・ラベルなどのdiv要素を作る場合、「divRoot」の下にappendChild（div要素を追加）することで
+ * 　画面遷移したときにきれいに消してくれます。
+ */
+
+
+/**
+ * タイトル画面
+ */
+function customTitleInit() {
+
+	// 背景の矢印オブジェクトを表示
+	var lblC = createArrowEffect("lblC", "#ffffff", g_sWidth / 2 - 300, 0, 100, "onigiri");
+	lblC.style.opacity = 0.25;
+	divRoot.appendChild(lblC);
+
+
+	// Tweetボタン描画
+	var btnTweet = createButton({
+		id: "btnTweet",
+		name: "Info",
+		x: g_sWidth / 4 * 3,
+		y: 340,
+		width: g_sWidth / 4,
+		height: C_BTN_HEIGHT,
+		fontsize: C_LBL_BTNSIZE,
+		normalColor: C_CLR_DEFAULT,
+		hoverColor: C_CLR_TWEET,
+		align: C_ALIGN_CENTER
+	}, function () {
+		clearWindow();
+		customCommentInit();
+	});
+	divRoot.appendChild(btnTweet);
+}
+
+/**
+ * カスタム画面(コメントとか)
+ */
+function customCommentInit() {
+
+	// タイトル文字描画
+	var lblTitle = getTitleDivLabel("lblTitle",
+		"<span style='color:#6666ff;font-size:40px;'>I</span>NFO", 0, 15);
+	divRoot.appendChild(lblTitle);
+
+	var comment = "これはカスタムページのテストです。<br>" +
+		"このように、作品別に特殊なページを作ることもできます。<br><br>" +
+		"下記のような戻るボタンがあると良いですね。(・∀・)";
+
+	var lblComment = createDivLabel("lblComment", g_sWidth / 2 - 200, 100, 400, 20, 14, "#cccccc",
+		comment);
+	lblComment.style.textAlign = C_ALIGN_LEFT;
+	divRoot.appendChild(lblComment);
+
+	var lblC = createArrowEffect("lblC", "#ffffff", g_sWidth / 2 + 200, 350, 100, "onigiri");
+	divRoot.appendChild(lblC);
+
+	// 戻るボタン描画
+	var btnBack = createButton({
+		id: "btnBack",
+		name: "Back",
+		x: 0,
+		y: g_sHeight - 100,
+		width: g_sWidth / 3,
+		height: C_BTN_HEIGHT,
+		fontsize: C_LBL_BTNSIZE,
+		normalColor: C_CLR_DEFAULT,
+		hoverColor: C_CLR_BACK,
+		align: C_ALIGN_CENTER
+	}, function () {
+		// タイトル画面へ戻る
+		clearWindow();
+		titleInit();
+	});
+	divRoot.appendChild(btnBack);
+}
+
+/**
+ * オプション画面(初期表示)
+ */
+function customOptionInit() {
+
+}
+
+/**
+ * キーコンフィグ画面(初期表示)
+ */
+function customKeyConfigInit() {
+
+}
+
+/**
+ * メイン画面(初期表示)
+ */
+function customMainInit() {
+
+}
+
+/**
+ * メイン画面(フレーム毎表示)
+ */
+function customMainEnterFrame() {
+
+}
+
+/**
+ * 結果画面(初期表示)
+ */
+function customResultInit() {
+
+}