danoniplus 19.5.14 → 24.6.4

package/js/lib/danoni_legacy_function.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2019/11/19
- * Revised : 2021/01/17 (v19.0.0)
+ * Revised : 2021/04/28 (v22.0.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -46,9 +46,62 @@ let C_CLR_CLEARLIFE = `#004444`;
 let C_CLR_DEFAULTLIFE = `#444444`;
 let C_CLR_BACKLIFE = `#222222`;
 
+/**
+ * 空スプライト(ムービークリップ相当)の作成
+ * - 作成済みの場合はすでに作成済のスプライトを返却する
+ * - ここで作成したスプライトは clearWindow() により削除される
+ * @deprecated v21以降非推奨
+ * @param {string} _parentObjName 親スプライト名
+ * @param {string} _newObjName 作成する子スプライト名
+ * @param {number} _x 作成するスプライトのx座標（親スプライト基準）
+ * @param {number} _y 作成するスプライトのy座標（親スプライト基準）
+ * @param {number} _width 幅
+ * @param {number} _height 高さ
+ */
+function createSprite(_parentObjName, _newObjName, _x, _y, _width, _height, _options = {}) {
+    let newsprite;
+    if (document.getElementById(_newObjName) === null) {
+        newsprite = createDiv(_newObjName, _x, _y, _width, _height);
+        document.getElementById(_parentObjName).appendChild(newsprite);
+    } else {
+        newsprite = document.getElementById(_newObjName);
+    }
+    if (_options.description !== undefined) {
+        newsprite.title = _options.description;
+    }
+    return newsprite;
+}
+
+/**
+ * ラベル文字作成（レイヤー直書き。htmlタグは使用できない）
+ * @deprecated v10以降非推奨
+ * @param {string} _ctx ラベルを作成する場所のコンテキスト名
+ * @param {string} _text 表示するテキスト
+ * @param {number} _x 作成先のx座標
+ * @param {number} _y 作成先のy座標
+ * @param {number} _fontsize フォントサイズ
+ * @param {number} _fontname フォント名
+ * @param {string} _color 色 (カラーコード:#ffffff 形式 or グラデーション)
+ * @param {string} _align テキストの表示位置 (left, center, right)
+ */
+function createLabel(_ctx, _text, _x, _y, _fontsize, _fontname, _color, _align) {
+    const fontFamilys = _fontname.split(`,`);
+    let fontView = ``;
+    for (let j = 0; j < fontFamilys.length; j++) {
+        fontView += `"${fontFamilys[j]}",`;
+    }
+    fontView += `sans-serif`;
+
+    _ctx.font = `${_fontsize}px ${fontView}`;
+    _ctx.textAlign = _align;
+    _ctx.fillStyle = _color;
+    _ctx.fillText(_text, _x, _y);
+}
+
 /**
 * 子div要素のラベル文字作成 (v9互換用)
 * - ここで指定するテキストはhtmlタグが使える
+* @deprecated v10以降非推奨
 * @param {string} _id 
 * @param {number} _x 
 * @param {number} _y 
@@ -73,6 +126,7 @@ function createDivLabel(_id, _x, _y, _width, _height, _fontsize, _color, _text)
 
 /**
  * 子div要素のラベル文字作成 (CSS版, v16互換)
+ * @deprecated v17以降非推奨
  * @param {string} _id 
  * @param {number} _x 
  * @param {number} _y 
@@ -97,6 +151,7 @@ function createDivCssLabel(_id, _x, _y, _width, _height, _fontsize, _text, _clas
 
 /**
  * 矢印オブジェクトの作成（色付きマスク版）- v10以降は未使用
+ * @deprecated v10以降非推奨
  * @param {string} _id 
  * @param {string} _color 
  * @param {number} _x 
@@ -133,6 +188,7 @@ function createArrowEffect(_id, _color, _x, _y, _size, _rotate) {
 
 /**
  * 色付きオブジェクトの作成 (v16互換)
+ * @deprecated v17以降非推奨
  * @param {string} _id 
  * @param {string} _color 
  * @param {number} _x 
@@ -204,6 +260,7 @@ function createColorObject(_id, _color, _x, _y, _width, _height,
  *		});
  *		divRoot.appendChild(btnBack);
  *   
+ * @deprecated v10以降非推奨
  * @param {object} _obj ボタンオブジェクト
  * @param {function} _func ボタン押下後の処理（マウスハンドラ）
  */
@@ -294,6 +351,7 @@ function createButton(_obj, _func) {
  *		});
  *		divRoot.appendChild(btnBack);
  *   
+ * @deprecated v17以降非推奨
  * @param {object} _obj ボタンオブジェクト
  * @param {function} _func ボタン押下後の処理（マウスハンドラ）
  */
@@ -327,6 +385,7 @@ function createCssButton(_obj, _func) {
 
 /**
  * 設定・オプション表示用ボタン - v9互換用
+ * @deprecated v10以降非推奨
  * @param {string} _id 
  * @param {string} _name 初期設定文字
  * @param {number} _heightPos 上からの配置順
@@ -351,6 +410,7 @@ function makeSettingLblButton(_id, _name, _heightPos, _func) {
 
 /**
  * 譜面変更セレクター用ボタン - v9互換用
+ * @deprecated v10以降非推奨
  * @param {string} _id
  * @param {string} _name 初期設定文字
  * @param {number} _heightPos 上からの配置順
@@ -377,6 +437,7 @@ function makeDifLblButton(_id, _name, _heightPos, _func) {
 
 /**
  * 設定・オプション用の設定変更ミニボタン - v9互換用
+ * @deprecated v10以降非推奨
  * @param {string} _id 
  * @param {string} _directionFlg 表示用ボタンのどちら側に置くかを設定。(R, RR:右、L, LL:左)
  * @param {number} _heightPos 上からの配置順
@@ -401,6 +462,7 @@ function makeMiniButton(_id, _directionFlg, _heightPos, _func) {
 
 /**
  * 結果表示作成（曲名、オプション）- v9互換用
+ * @deprecated v10以降非推奨
  * @param {string} _id 
  * @param {number} _x
  * @param {string} _color 
@@ -418,6 +480,7 @@ function makeResultPlayData(_id, _x, _color, _heightPos, _text, _align) {
 
 /**
  * 結果表示作成（キャラクタ）- v9互換用
+ * @deprecated v10以降非推奨
  * @param {string} _id 
  * @param {number} _x
  * @param {string} _color 
@@ -433,3 +496,116 @@ function makeResultSymbol(_id, _x, _color, _heightPos, _text, _align) {
     return symbol;
 }
 
+/**
+ * 配列の型及び最小配列長のチェック
+ * - チェックのみで変換は行わないため、変換が必要な場合は別途処理を組むこと。
+ * - 型は最初の要素のみチェックを行う。
+ * 
+ * @deprecated v20以降非推奨
+ * @param {array} _checkArray 
+ * @param {string} _type 
+ * @param {number} _minLength 最小配列長
+ */
+function checkArrayVal(_checkArray, _type, _minLength) {
+
+    // 値がundefined相当の場合は無条件でデフォルト値を返却
+    if (_checkArray === undefined || _checkArray === ``) {
+        return false;
+    }
+
+    // 配列かどうかをチェック
+    if (Object.prototype.toString.call(_checkArray) !== `[object Array]`) {
+        return false;
+    }
+
+    // 最小配列長が不正の場合は強制的に1を設定
+    if (isNaN(parseFloat(_minLength))) {
+        _minLength = 1;
+    }
+
+    let isNaNflg;
+    if (_type === C_TYP_FLOAT) {
+        // 数値型(小数可)の場合
+        isNaNflg = isNaN(parseFloat(_checkArray[0]));
+        if (isNaNflg) {
+            return false;
+        }
+    } else if (_type === C_TYP_NUMBER) {
+        // 数値型(整数のみ)の場合
+        isNaNflg = isNaN(parseInt(_checkArray[0]));
+        if (isNaNflg) {
+            return false;
+        }
+    }
+
+    // 配列長のチェック
+    return (_checkArray.length >= _minLength ? true : false);
+}
+
+/**
+ * 半角換算の文字数を計算
+ * @deprecated v20以降非推奨
+ * @param {string} _str 
+ */
+function getStrLength(_str) {
+    let result = 0;
+    for (let i = 0; i < _str.length; i++) {
+        const chr = _str.charCodeAt(i);
+        if ((chr >= 0x00 && chr < 0x81) ||
+            (chr === 0xf8f0) ||
+            (chr >= 0xff61 && chr < 0xffa0) ||
+            (chr >= 0xf8f1 && chr < 0xf8f4)) {
+            //半角文字の場合は1を加算
+            result += 1;
+        } else {
+            //それ以外の文字の場合は2を加算
+            result += 2;
+        }
+    }
+    //結果を返す
+    return result;
+}
+
+/**
+ * 左パディング
+ * @deprecated v20以降非推奨
+ * @param {string} _str 元の文字列 
+ * @param {number} _length パディング後の長さ 
+ * @param {string} _chr パディング文字列
+ */
+function paddingLeft(_str, _length, _chr) {
+    let paddingStr = _str;
+    while (paddingStr.length < _length) {
+        paddingStr = _chr + paddingStr;
+    }
+    return paddingStr;
+}
+
+/**
+ * 子div要素のラベル文字作成
+ * - createDivLabelに加えて、独自フォントが指定できる形式。
+ * 
+ * @deprecated v20以降非推奨
+ * @param {string} _id 
+ * @param {number} _x 
+ * @param {number} _y 
+ * @param {number} _width 
+ * @param {number} _height 
+ * @param {number} _fontsize 
+ * @param {string} _color 
+ * @param {string} _text 
+ * @param {string} _font 
+ */
+function createDivCustomLabel(_id, _x, _y, _width, _height, _fontsize, _color, _text, _font) {
+    const div = createDiv(_id, _x, _y, _width, _height);
+    const style = div.style;
+    style.fontSize = `${_fontsize}px`;
+    if (_color !== ``) {
+        style.color = _color;
+    }
+    style.fontFamily = _font;
+    style.textAlign = C_ALIGN_CENTER;
+    div.innerHTML = _text;
+
+    return div;
+}

package/js/sample/danoni_custom-003.js

@@ -22,29 +22,19 @@
  */
 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);
+	multiAppend(divRoot,
+		// 背景の矢印オブジェクトを表示
+		createColorObject2(`lblC`, {
+			x: g_sWidth / 2 - 300, y: 0, w: 100, h: 100, rotate: `onigiri`, opacity: 0.25,
+			background: `#ffffff`,
+		}),
+
+		// Infoボタン描画
+		createCss2Button(`btnTweet`, `Info`, _ => clearTimeout(g_timeoutEvtTitleId), {
+			x: g_sWidth / 4 * 3, y: 340, w: g_sWidth / 4,
+			resetFunc: _ => customCommentInit(),
+		}, g_cssObj.button_Tweet)
+	);
 }
 
 /**
@@ -52,41 +42,35 @@ function customTitleInit() {
  */
 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);
+	clearWindow(true);
+
+	// テキスト
+	const comment = `これはカスタムページのテストです。<br>
+		このように、作品別に特殊なページを作ることもできます。<br><br>
+		下記のような戻るボタンがあると良いですね。(・∀・)`;
+
+	// 各種ラベル追加
+	multiAppend(divRoot,
+
+		// タイトル文字
+		getTitleDivLabel(`lblTitle`,
+			`<span style='color:#6666ff;font-size:40px;'>I</span>NFO`, 0, 15),
+
+		// コメント文
+		createDivCss2Label(`lblComment`, comment, {
+			x: g_sWidth / 2 - 200, y: 100, w: 400, h: 20, siz: 14, color: `#cccccc`,
+			align: C_ALIGN_LEFT,
+		}),
+
+		// おにぎりオブジェクトの配置
+		createColorObject2(`lblC`, {
+			x: g_sWidth / 2 + 200, y: 350, w: 100, h: 100, rotate: `onigiri`,
+			background: `#ffffff`,
+		}),
+
+		// 戻るボタン描画
+		createCss2Button(`btnBack`, g_lblNameObj.b_back, _ => true, { resetFunc: _ => titleInit() }, g_cssObj.button_Back),
+	)
 }
 
 /**

package/js/template/danoni_setting.js

@@ -1,7 +1,7 @@
 'use strict';
 /**
  * Dancing☆Onigiri 設定用jsファイル
- * Template Update: 2021/01/30 (v19.3.0)
+ * Template Update: 2021/10/24 (v24.0.0)
  * 
  * このファイルでは、作品全体に対しての初期設定を行うことができます。
  * 譜面データ側で個別に同様の項目が設定されている場合は、譜面データ側の設定が優先されます。
@@ -117,12 +117,38 @@ const g_presetSettingUse = {
 // 判定させる場合は `true` を指定
 const g_presetFrzStartjdgUse = `false`;
 
+/*
+	デフォルト画像セットの設定
+	(セット対象のフォルダ名, 拡張子, 画像回転有無(true or false), Flat時ステップ間隔の順に指定)
+
+	事前に、[img]フォルダ配下にセット対象のサブフォルダを作成し、その中に一式を入れておく必要あり
+	下記の場合は[classic]フォルダに[png]形式の画像一式をデフォルト画像セットとして使用する
+
+	未指定の場合のデフォルト値は以下の通り
+	  セット対象のフォルダ名：`` (imgフォルダ直下)
+	  拡張子：`svg`形式
+	  画像回転有無：true(回転有り)
+	  Flat時ステップ間隔：50(px) ※矢印サイズ
+	  
+*/
+// const g_presetImageSets = [``, `classic,png`, `classic-thin,png`, `note,svg,false,0`];
+
 // デフォルト画像セット (C_IMG_XXXX, 厳密にはg_imgObj) に対して拡張子の上書きを行うか設定
 // 文字列の後ろ3文字をカットして、下記の値を適用する。コメントアウトした場合は、上書きを行わない。
 // `svg`: デフォルト(svg形式)、`png`: 従来画像(png形式)
 
 // const g_presetOverrideExtension = `svg`;
 
+/**
+ * 追加指定する画像のリスト（サーバ上の場合のみ有効）
+ * ここで設定した画像をimgフォルダに指定した名前で格納しておくことで、
+ * stepRtnX_Yで設定する名前に使用することができる
+ * 
+ * `ball`と指定した場合、下記の画像を準備する必要あり
+ * - ball.svg, ballShadow.svg, ballStepHit.svg (g_presetOverrideExtension を pngにすれば、pngに変更可)
+ */
+// const g_presetCustomImageList = [`ball`, `square`];
+
 /*
 	Reverse時の歌詞の自動反転制御設定
 
@@ -175,7 +201,12 @@ const g_presetResultVals = {
  * ※設定可能項目についてはdanoni_constants.jsをご覧ください。
  */
 const g_local_lblNameObj = {
+	Ja: {
+
+	},
+	En: {
 
+	},
 };
 
 /**
@@ -184,5 +215,21 @@ const g_local_lblNameObj = {
  * ※設定可能項目についてはdanoni_constants.jsをご覧ください。
  */
 const g_local_msgObj = {
+	Ja: {
+
+	},
+	En: {
 
+	},
 };
+
+/**
+ * 設定名の上書き可否設定
+ */
+const g_lblRenames = {
+	option: true,
+	settingsDisplay: true,
+	main: true,
+	keyConfig: true,
+	result: true,
+};

package/jsconfig.json

@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-        "target": "es6",
+        "target": "es2020",
         "baseUrl": "./"
     },
     "exclude": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "danoniplus",
-  "version": "19.5.14",
+  "version": "24.6.4",
   "description": "Dancing☆Onigiri (CW Edition) - Web-based Rhythm Game",
   "main": "index.js",
   "scripts": {

package/skin/danoni_skin_default.css

@@ -4,7 +4,7 @@
   スキンcssファイル (default)
 
   Created : 2019/11/04
-  Revised : 2020/05/01 (v14.1.0)
+  Revised : 2021/04/07 (v21.4.2)
 
   https://github.com/cwtickle/danoniplus
 ------------------------------------------ */
@@ -259,6 +259,13 @@
 	color: #ffffff;
 	background-color: #666666;
 }
+/* デフォルト(色指定なし) */
+.button_Default_NoColor {
+	background-color: #00000000;
+}
+.button_Default_NoColor:hover {
+	background-color: #666666;
+}
 /* カーソル */
 .button_Mini {
 	color: #ffffff;

package/skin/danoni_skin_light.css

@@ -4,7 +4,7 @@
   スキンcssファイル (light)
 
   Created : 2019/11/04
-  Revised : 2020/05/01 (v14.1.0)
+  Revised : 2021/04/07 (v21.4.2)
 
   https://github.com/cwtickle/danoniplus
 ------------------------------------------ */
@@ -259,6 +259,13 @@
 	color: #000000;
 	background-color: #bbbbbb;
 }
+/* デフォルト(色指定なし) */
+.button_Default_NoColor {
+	background-color: #00000000;
+}
+.button_Default_NoColor:hover {
+	background-color: #bbbbbb;
+}
 /* カーソル */
 .button_Mini {
 	color: #000000;

package/skin/danoni_skin_light.js

@@ -11,19 +11,6 @@ function skinTitleInit() {
     // 背景矢印
     // $id(`lblArrow`).left = `0px`;
 
-    g_headerObj.setColorType1 = [`#6666ff`, `#66cccc`, `#000000`, `#999966`, `#cc6600`];
-    g_headerObj.setColorType2 = [`#000000`, `#6666ff`, `#cc0000`, `#cc99cc`, `#cc3366`];
-    g_headerObj.frzColorType1 = [[`#66ffff`, `#6600ff`, `#cccc33`, `#999933`],
-    [`#00ffcc`, `#339999`, `#cccc33`, `#999933`],
-    [`#66ffff`, `#6600ff`, `#cccc33`, `#999933`],
-    [`#cc99ff`, `#9966ff`, `#cccc33`, `#999933`],
-    [`#ff99cc`, `#ff6699`, `#cccc33`, `#999933`]];
-    g_headerObj.frzColorType2 = [[`#cccccc`, `#999999`, `#cccc33`, `#999933`],
-    [`#66ffff`, `#6600ff`, `#cccc33`, `#999933`],
-    [`#66ffff`, `#6600ff`, `#cccc33`, `#999933`],
-    [`#cc99cc`, `#ff99ff`, `#cccc33`, `#999933`],
-    [`#ff6666`, `#ff9999`, `#cccc33`, `#999933`]];
-
 }
 
 /**

package/skin/danoni_skin_skyblue.css

@@ -4,7 +4,7 @@
   スキンcssファイル (skyblue)
 
   Created : 2019/11/04
-  Revised : 2020/05/01 (v14.1.0)
+  Revised : 2021/04/07 (v21.4.2)
 
   https://github.com/cwtickle/danoniplus
 ------------------------------------------ */
@@ -259,6 +259,13 @@
 	color: #000000;
 	background-color: #99ccff;
 }
+/* デフォルト(色指定なし) */
+.button_Default_NoColor {
+	background-color: #00000000;
+}
+.button_Default_NoColor:hover {
+	background-color: #99ccff;
+}
 /* カーソル */
 .button_Mini {
 	color: #000000;

package/skin/danoni_skin_skyblue.js

@@ -11,19 +11,6 @@ function skinTitleInit() {
     // 背景矢印
     // $id(`lblArrow`).left = `0px`;
 
-    g_headerObj.setColorType1 = [`#6666ff`, `#66cccc`, `#000000`, `#999966`, `#cc6600`];
-    g_headerObj.setColorType2 = [`#000000`, `#6666ff`, `#cc0000`, `#cc99cc`, `#cc3366`];
-    g_headerObj.frzColorType1 = [[`#66ffff`, `#6600ff`, `#cccc33`, `#999933`],
-    [`#00ffcc`, `#339999`, `#cccc33`, `#999933`],
-    [`#66ffff`, `#6600ff`, `#cccc33`, `#999933`],
-    [`#cc99ff`, `#9966ff`, `#cccc33`, `#999933`],
-    [`#ff99cc`, `#ff6699`, `#cccc33`, `#999933`]];
-    g_headerObj.frzColorType2 = [[`#cccccc`, `#999999`, `#cccc33`, `#999933`],
-    [`#66ffff`, `#6600ff`, `#cccc33`, `#999933`],
-    [`#66ffff`, `#6600ff`, `#cccc33`, `#999933`],
-    [`#cc99cc`, `#ff99ff`, `#cccc33`, `#999933`],
-    [`#ff6666`, `#ff9999`, `#cccc33`, `#999933`]];
-
 }
 
 /**