danoniplus 27.1.0 → 27.2.0

package/css/danoni_main.css

@@ -4,7 +4,7 @@
   本体cssファイル
 
   Created : 2018/10/08
-  Revised : 2021/04/07 (v21.4.2)
+  Revised : 2022/03/27 (v27.2.0)
 
   https://github.com/cwtickle/danoniplus
 ------------------------------------------ */
@@ -49,6 +49,12 @@ input[type=range]:focus {
 	outline: 0;
 }
 
+input[type=color] {
+	width:25px;
+	height:25px;
+	border:none;
+}
+
 /* 左から右へ */
 @keyframes leftToRight {
 	0% {

package/js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2022/03/25
+ * Revised : 2022/03/27
  * 
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 27.1.0`;
-const g_revisedDate = `2022/03/25`;
+const g_version = `Ver 27.2.0`;
+const g_revisedDate = `2022/03/27`;
 const g_alphaVersion = ``;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
@@ -965,6 +965,24 @@ const createImg = (_id, _imgPath, _x, _y, _width, _height) => {
 	return div;
 };
 
+/**
+ * ColorPickerの作成
+ * @param {string} _id 
+ * @param {string} _color 
+ * @param {object} _obj 
+ * @returns 
+ */
+const createColorPicker = (_parentObj, _id, { x = 0, y = 0 } = {}) => {
+	const picker = document.createElement(`input`);
+	picker.setAttribute(`type`, `color`);
+	picker.id = _id;
+	picker.style.left = `${x}px`;
+	picker.style.top = `${y}px`;
+	picker.style.position = `absolute`;
+	_parentObj.appendChild(picker);
+	return picker;
+};
+
 /**
  * 色付きオブジェクトの作成 (拡張属性対応)
  * @param {string} _id 
@@ -1225,6 +1243,7 @@ const clearWindow = (_redrawFlg = false, _customDisplayName = ``) => {
 		// レイヤー情報取得
 		const layer0 = document.querySelector(`#layer0`);
 		const l0ctx = layer0.getContext(`2d`);
+		layer0.width = g_sWidth;
 
 		// 線画、図形をクリア
 		l0ctx.clearRect(0, 0, g_sWidth, g_sHeight);
@@ -1232,24 +1251,26 @@ const clearWindow = (_redrawFlg = false, _customDisplayName = ``) => {
 		if (document.querySelector(`#layer1`) !== null) {
 			const layer1 = document.querySelector(`#layer1`);
 			const l1ctx = layer1.getContext(`2d`);
+			layer1.width = g_sWidth;
 			l1ctx.clearRect(0, 0, g_sWidth, g_sHeight);
 
 			// 線画 (title-line)
 			l1ctx.beginPath();
 			l1ctx.strokeStyle = `#cccccc`;
 			l1ctx.moveTo(0, 0);
-			l1ctx.lineTo(g_sWidth, 0);
+			l1ctx.lineTo(layer1.width, 0);
 			l1ctx.stroke();
 
 			l1ctx.beginPath();
 			l1ctx.strokeStyle = `#cccccc`;
 			l1ctx.moveTo(0, g_sHeight);
-			l1ctx.lineTo(g_sWidth, g_sHeight);
+			l1ctx.lineTo(layer1.width, g_sHeight);
 			l1ctx.stroke();
 		}
 		if (document.querySelector(`#layer2`) !== null) {
 			const layer2 = document.querySelector(`#layer2`);
 			const l2ctx = layer2.getContext(`2d`);
+			layer2.width = g_sWidth;
 			l2ctx.clearRect(0, 0, g_sWidth, g_sHeight);
 		}
 	}
@@ -2604,10 +2625,9 @@ const headerConvert = _dosObj => {
 	}
 
 	// 初期色情報
+	const baseColor = (obj.baseBrightFlg ? `light` : `dark`);
+	Object.assign(g_dfColorObj, g_dfColorBaseObj[baseColor]);
 	Object.keys(g_dfColorObj).forEach(key => obj[key] = g_dfColorObj[key].concat());
-	if (obj.baseBrightFlg) {
-		Object.keys(g_dfColorLightObj).forEach(key => obj[key] = g_dfColorLightObj[key].concat());
-	}
 	obj.frzColorDefault = [];
 
 	// ダミー用初期矢印色
@@ -5895,11 +5915,26 @@ const keyConfigInit = (_kcType = g_kcType) => {
 		lnkKcType.textContent = getStgDetailName(g_kcType);
 	};
 
+	/**
+	 * ColorPickerの色切替
+	 * @param {number} _j 
+	 * @param {string} _type 
+	 * @param {string} _color 
+	 */
+	const changeColorPicker = (_j, _type, _color) => {
+		if (_color !== ``) {
+			document.getElementById(`pick${_type}${_j}`).value = _color.slice(0, 7);
+			document.getElementById(`pick${_type}${_j}`).style.display = C_DIS_INHERIT;
+		} else {
+			document.getElementById(`pick${_type}${_j}`).style.display = C_DIS_NONE;
+		}
+	};
+
 	/**
 	 * ColorTypeの制御
 	 * @param {number} _scrollNum 
 	 */
-	const setColorType = (_scrollNum = 1) => {
+	const setColorType = (_scrollNum = 1, _reloadFlg = true) => {
 		const nextNum = getNextNum(_scrollNum, `colorTypes`, g_colorType);
 		g_colorType = g_keycons.colorTypes[nextNum];
 		if (g_headerObj.colorUse) {
@@ -5908,6 +5943,15 @@ const keyConfigInit = (_kcType = g_kcType) => {
 		changeSetColor();
 		viewGroupObj.color(`_${g_keycons.colorGroupNum}`);
 		lnkColorType.textContent = `${getStgDetailName(g_colorType)}${g_localStorage.colorType === g_colorType ? ' *' : ''}`;
+		if (_reloadFlg) {
+			colorPickSprite.style.display = ([`Default`, `Type0`].includes(g_colorType) ? C_DIS_NONE : C_DIS_INHERIT);
+			for (let j = 0; j < g_headerObj.setColor.length; j++) {
+				changeColorPicker(j, `arrow`, g_headerObj.setColor[j]);
+				changeColorPicker(j, `arrowShadow`, g_headerObj.setShadowColor[j]);
+				changeColorPicker(j, `frz`, g_headerObj.frzColor[j][0]);
+				changeColorPicker(j, `frzBar`, g_headerObj.frzColor[j][1]);
+			}
+		}
 	};
 
 	const setImgType = (_scrollNum = 1) => {
@@ -5920,6 +5964,53 @@ const keyConfigInit = (_kcType = g_kcType) => {
 		keyConfigInit(g_kcType);
 	};
 
+	const colorPickSprite = createEmptySprite(divRoot, `colorPickSprite`, g_windowObj.colorPickSprite);
+	if ([`Default`, `Type0`].includes(g_colorType)) {
+		colorPickSprite.style.display = C_DIS_NONE;
+	}
+	const pickPos = { x: 0, w: 50, h: 15, siz: 11, align: C_ALIGN_LEFT, background: `#${g_headerObj.baseBrightFlg ? `eeeeee` : `111111`}80` };
+	multiAppend(colorPickSprite,
+		createDivCss2Label(`lblPickArrow`, g_lblNameObj.s_arrow, Object.assign({ y: 0 }, pickPos)),
+		createDivCss2Label(`lblPickFrz`, g_lblNameObj.s_frz, Object.assign({ y: 140 }, pickPos)),
+		createCss2Button(`lnkColorCopy`, `[↓]`, _ => {
+			if (window.confirm(g_msgObj.colorCopyConfirm)) {
+				for (let j = 0; j < g_headerObj.setColor.length; j++) {
+					g_headerObj[`frzColor${g_colorType}`][j] = [...Array(g_headerObj[`frzColor${g_colorType}`][j].length)].fill(g_headerObj[`setColor${g_colorType}`][j]);
+					[``, `Bar`].forEach((val, k) =>
+						document.getElementById(`pickfrz${val}${j}`).value = g_headerObj[`frzColor${g_colorType}`][j][k]);
+				}
+			}
+		}, { x: 35, y: -5, w: 30, h: 20, siz: 14 }, g_cssObj.button_Start),
+	);
+
+	/**
+	 * ColorPicker部分の作成
+	 * @param {number} _j 
+	 * @param {string} _type 
+	 * @param {function} _func 
+	 * @param {object} _obj 
+	 */
+	const createColorPickWindow = (_j, _type, _func, { x = 0, y = 15 } = {}) => {
+		const picker = createColorPicker(colorPickSprite, `pick${_type}${_j}`, { x, y: y + 25 * _j });
+		picker.addEventListener(`change`, _func);
+	};
+
+	for (let j = 0; j < g_headerObj.setColor.length; j++) {
+		createColorPickWindow(j, `arrow`, _ => {
+			g_headerObj[`setColor${g_colorType}`][j] = document.getElementById(`pickarrow${j}`).value;
+			setColorType(0, false);
+		});
+
+		createColorPickWindow(j, `arrowShadow`, _ => {
+			g_headerObj[`setShadowColor${g_colorType}`][j] = `${document.getElementById(`pickarrowShadow${j}`).value}80`;
+			setColorType(0, false);
+		}, { x: 25 });
+
+		[``, `Bar`].forEach((val, k) =>
+			createColorPickWindow(j, `frz${val}`, _ =>
+				g_headerObj[`frzColor${g_colorType}`][j][k] = document.getElementById(`pickfrz${val}${j}`).value, { x: 25 * k, y: 155 }));
+	}
+
 	// ConfigType, ColorTypeの初期設定
 	setConfigType(0);
 	setColorType(0);

package/js/lib/danoni_constants.js

@@ -5,7 +5,7 @@
  *
  * Source by tickle
  * Created : 2019/11/19
- * Revised : 2022/03/25 (v27.1.0)
+ * Revised : 2022/03/27 (v27.2.0)
  *
  * https://github.com/cwtickle/danoniplus
  */
@@ -92,6 +92,7 @@ const g_windowObj = {
 
     displaySprite: { x: 25, y: 30, h: C_LEN_SETLBL_HEIGHT * 5 },
     keyconSprite: { overflow: `auto` },
+    colorPickSprite: { x: 0, y: 90, w: 50, h: 280 },
 
     loader: { h: 10, backgroundColor: `#333333` },
 
@@ -2369,88 +2370,94 @@ const g_dfColorObj = {
     setColorInit: [`#6666ff`, `#99ffff`, `#ffffff`, `#ffff99`, `#ff9966`],
     setShadowColorInit: [``, ``, ``, ``, ``],
 
-    setColorType1: [`#6666ff`, `#99ffff`, `#ffffff`, `#ffff99`, `#ff9966`],
-    setColorType2: [`#ffffff`, `#9999ff`, `#99ccff`, `#ffccff`, `#ff9999`],
-    setColorType3: [`#ccccff`, `#ccffff`, `#ffffff`, `#ffffcc`, `#ffcc99`],
-    setColorType4: [`#ffffff`, `#ccccff`, `#99ccff`, `#ffccff`, `#ffcccc`],
-
-    setShadowColorType1: [`#00000080`, `#00000080`, `#00000080`, `#00000080`, `#00000080`],
-    setShadowColorType2: [`#00000080`, `#00000080`, `#00000080`, `#00000080`, `#00000080`],
-    setShadowColorType3: [`#6666ff60`, `#33999960`, `#66666660`, `#99993360`, `#cc663360`],
-    setShadowColorType4: [`#66666660`, `#6666ff60`, `#3366cc60`, `#99339960`, `#99333360`],
-
     // フリーズアロー初期色情報
     frzColorInit: [`#66ffff`, `#6600ff`, `#cccc33`, `#999933`],
     frzShadowColorInit: [``, ``, ``, ``],
-    frzColorType1: [
-        [`#66ffff`, `#6600ff`, `#cccc33`, `#999933`],
-        [`#00ffcc`, `#339999`, `#cccc33`, `#999933`],
-        [`#66ffff`, `#6600ff`, `#cccc33`, `#999933`],
-        [`#cc99ff`, `#9966ff`, `#cccc33`, `#999933`],
-        [`#ff99cc`, `#ff6699`, `#cccc33`, `#999933`]
-    ],
-    frzColorType2: [
-        [`#cccccc`, `#999999`, `#cccc33`, `#999933`],
-        [`#66ffff`, `#6600ff`, `#cccc33`, `#999933`],
-        [`#66ffff`, `#6600ff`, `#cccc33`, `#999933`],
-        [`#cc99cc`, `#ff99ff`, `#cccc33`, `#999933`],
-        [`#ff6666`, `#ff9999`, `#cccc33`, `#999933`]
-    ],
-    frzColorType3: [
-        [`#66ffff`, `#6600ff`, `#cccc33`, `#999933`],
-        [`#00ffcc`, `#339999`, `#cccc33`, `#999933`],
-        [`#66ffff`, `#6600ff`, `#cccc33`, `#999933`],
-        [`#cc99ff`, `#9966ff`, `#cccc33`, `#999933`],
-        [`#ff99cc`, `#ff6699`, `#cccc33`, `#999933`]
-    ],
-    frzColorType4: [
-        [`#cccccc`, `#999999`, `#cccc33`, `#999933`],
-        [`#66ffff`, `#6600ff`, `#cccc33`, `#999933`],
-        [`#66ffff`, `#6600ff`, `#cccc33`, `#999933`],
-        [`#cc99cc`, `#ff99ff`, `#cccc33`, `#999933`],
-        [`#ff6666`, `#ff9999`, `#cccc33`, `#999933`]
-    ],
+
 };
 
-const g_dfColorLightObj = {
-    setColorType1: [`#6666ff`, `#66cccc`, `#000000`, `#999966`, `#cc6600`],
-    setColorType2: [`#000000`, `#6666ff`, `#cc0000`, `#cc99cc`, `#cc3366`],
-    setColorType3: [`#000000`, `#000000`, `#000000`, `#000000`, `#000000`],
-    setColorType4: [`#000000`, `#000000`, `#000000`, `#000000`, `#000000`],
-
-    setShadowColorType1: [`#ffffff80`, `#ffffff80`, `#ffffff80`, `#ffffff80`, `#ffffff80`],
-    setShadowColorType2: [`#ffffff80`, `#ffffff80`, `#ffffff80`, `#ffffff80`, `#ffffff80`],
-    setShadowColorType3: [`#6666ff80`, `#66cccc80`, `#ffffff80`, `#99996680`, `#cc660080`],
-    setShadowColorType4: [`#00000080`, `#6666ff80`, `#cc000080`, `#cc99cc80`, `#cc336680`],
-
-    frzColorType1: [
-        [`#66ffff`, `#6600ff`, `#ffff00`, `#999900`],
-        [`#00ffcc`, `#339999`, `#ffff00`, `#999900`],
-        [`#66ffff`, `#6600ff`, `#ffff00`, `#999900`],
-        [`#cc99ff`, `#9966ff`, `#ffff00`, `#999900`],
-        [`#ff99cc`, `#ff6699`, `#ffff00`, `#999900`]
-    ],
-    frzColorType2: [
-        [`#cccccc`, `#999999`, `#ffff00`, `#999900`],
-        [`#66ffff`, `#6600ff`, `#ffff00`, `#999900`],
-        [`#66ffff`, `#6600ff`, `#ffff00`, `#999900`],
-        [`#cc99cc`, `#ff99ff`, `#ffff00`, `#999900`],
-        [`#ff6666`, `#ff9999`, `#ffff00`, `#999900`]
-    ],
-    frzColorType3: [
-        [`#66ffff`, `#6600ff`, `#ffff00`, `#999900`],
-        [`#00ffcc`, `#339999`, `#ffff00`, `#999900`],
-        [`#66ffff`, `#6600ff`, `#ffff00`, `#999900`],
-        [`#cc99ff`, `#9966ff`, `#ffff00`, `#999900`],
-        [`#ff99cc`, `#ff6699`, `#ffff00`, `#999900`]
-    ],
-    frzColorType4: [
-        [`#cccccc`, `#999999`, `#ffff00`, `#999900`],
-        [`#66ffff`, `#6600ff`, `#ffff00`, `#999900`],
-        [`#66ffff`, `#6600ff`, `#ffff00`, `#999900`],
-        [`#cc99cc`, `#ff99ff`, `#ffff00`, `#999900`],
-        [`#ff6666`, `#ff9999`, `#ffff00`, `#999900`]
-    ],
+const g_dfColorBaseObj = {
+
+    dark: {
+        setColorType1: [`#6666ff`, `#99ffff`, `#ffffff`, `#ffff99`, `#ff9966`],
+        setColorType2: [`#ffffff`, `#9999ff`, `#99ccff`, `#ffccff`, `#ff9999`],
+        setColorType3: [`#ccccff`, `#ccffff`, `#ffffff`, `#ffffcc`, `#ffcc99`],
+        setColorType4: [`#ffffff`, `#ccccff`, `#99ccff`, `#ffccff`, `#ffcccc`],
+
+        setShadowColorType1: [`#00000080`, `#00000080`, `#00000080`, `#00000080`, `#00000080`],
+        setShadowColorType2: [`#00000080`, `#00000080`, `#00000080`, `#00000080`, `#00000080`],
+        setShadowColorType3: [`#6666ff60`, `#33999960`, `#66666660`, `#99993360`, `#cc663360`],
+        setShadowColorType4: [`#66666660`, `#6666ff60`, `#3366cc60`, `#99339960`, `#99333360`],
+
+        frzColorType1: [
+            [`#66ffff`, `#6600ff`, `#cccc33`, `#999933`],
+            [`#00ffcc`, `#339999`, `#cccc33`, `#999933`],
+            [`#66ffff`, `#6600ff`, `#cccc33`, `#999933`],
+            [`#cc99ff`, `#9966ff`, `#cccc33`, `#999933`],
+            [`#ff99cc`, `#ff6699`, `#cccc33`, `#999933`]
+        ],
+        frzColorType2: [
+            [`#cccccc`, `#999999`, `#cccc33`, `#999933`],
+            [`#66ffff`, `#6600ff`, `#cccc33`, `#999933`],
+            [`#66ffff`, `#6600ff`, `#cccc33`, `#999933`],
+            [`#cc99cc`, `#ff99ff`, `#cccc33`, `#999933`],
+            [`#ff6666`, `#ff9999`, `#cccc33`, `#999933`]
+        ],
+        frzColorType3: [
+            [`#66ffff`, `#6600ff`, `#cccc33`, `#999933`],
+            [`#00ffcc`, `#339999`, `#cccc33`, `#999933`],
+            [`#66ffff`, `#6600ff`, `#cccc33`, `#999933`],
+            [`#cc99ff`, `#9966ff`, `#cccc33`, `#999933`],
+            [`#ff99cc`, `#ff6699`, `#cccc33`, `#999933`]
+        ],
+        frzColorType4: [
+            [`#cccccc`, `#999999`, `#cccc33`, `#999933`],
+            [`#66ffff`, `#6600ff`, `#cccc33`, `#999933`],
+            [`#66ffff`, `#6600ff`, `#cccc33`, `#999933`],
+            [`#cc99cc`, `#ff99ff`, `#cccc33`, `#999933`],
+            [`#ff6666`, `#ff9999`, `#cccc33`, `#999933`]
+        ],
+    },
+    light: {
+        setColorType1: [`#6666ff`, `#66cccc`, `#000000`, `#999966`, `#cc6600`],
+        setColorType2: [`#000000`, `#6666ff`, `#cc0000`, `#cc99cc`, `#cc3366`],
+        setColorType3: [`#000000`, `#000000`, `#000000`, `#000000`, `#000000`],
+        setColorType4: [`#000000`, `#000000`, `#000000`, `#000000`, `#000000`],
+
+        setShadowColorType1: [`#ffffff80`, `#ffffff80`, `#ffffff80`, `#ffffff80`, `#ffffff80`],
+        setShadowColorType2: [`#ffffff80`, `#ffffff80`, `#ffffff80`, `#ffffff80`, `#ffffff80`],
+        setShadowColorType3: [`#6666ff80`, `#66cccc80`, `#ffffff80`, `#99996680`, `#cc660080`],
+        setShadowColorType4: [`#00000080`, `#6666ff80`, `#cc000080`, `#cc99cc80`, `#cc336680`],
+
+        frzColorType1: [
+            [`#66ffff`, `#6600ff`, `#ffff00`, `#999900`],
+            [`#00ffcc`, `#339999`, `#ffff00`, `#999900`],
+            [`#66ffff`, `#6600ff`, `#ffff00`, `#999900`],
+            [`#cc99ff`, `#9966ff`, `#ffff00`, `#999900`],
+            [`#ff99cc`, `#ff6699`, `#ffff00`, `#999900`]
+        ],
+        frzColorType2: [
+            [`#cccccc`, `#999999`, `#ffff00`, `#999900`],
+            [`#66ffff`, `#6600ff`, `#ffff00`, `#999900`],
+            [`#66ffff`, `#6600ff`, `#ffff00`, `#999900`],
+            [`#cc99cc`, `#ff99ff`, `#ffff00`, `#999900`],
+            [`#ff6666`, `#ff9999`, `#ffff00`, `#999900`]
+        ],
+        frzColorType3: [
+            [`#66ffff`, `#6600ff`, `#ffff00`, `#999900`],
+            [`#00ffcc`, `#339999`, `#ffff00`, `#999900`],
+            [`#66ffff`, `#6600ff`, `#ffff00`, `#999900`],
+            [`#cc99ff`, `#9966ff`, `#ffff00`, `#999900`],
+            [`#ff99cc`, `#ff6699`, `#ffff00`, `#999900`]
+        ],
+        frzColorType4: [
+            [`#cccccc`, `#999999`, `#ffff00`, `#999900`],
+            [`#66ffff`, `#6600ff`, `#ffff00`, `#999900`],
+            [`#66ffff`, `#6600ff`, `#ffff00`, `#999900`],
+            [`#cc99cc`, `#ff99ff`, `#ffff00`, `#999900`],
+            [`#ff6666`, `#ff9999`, `#ffff00`, `#999900`]
+        ],
+    },
 };
 
 /**
@@ -2884,6 +2891,7 @@ const g_lang_msgObj = {
 
         dataResetConfirm: `この作品のローカル設定をクリアします。よろしいですか？\n(ハイスコアやAdjustment等のデータがクリアされます)`,
         keyResetConfirm: `キーを初期配置に戻します。よろしいですか？`,
+        colorCopyConfirm: `フリーズアローの配色を矢印色に置き換えます\n(通常・ヒット時双方を置き換えます)。よろしいですか？`,
 
         difficulty: `譜面を選択します。`,
         speed: `矢印の流れる速度を設定します。\n外側のボタンは1x単位、内側は0.25x単位で変更できます。`,
@@ -2934,6 +2942,7 @@ const g_lang_msgObj = {
 
         dataResetConfirm: `Delete the local settings in this game. Is it OK?\n(High score, adjustment, volume and some settings will be initialized)`,
         keyResetConfirm: `Resets the assigned key to the initial state. Is it OK?`,
+        colorCopyConfirm: `Replace freeze arrow color scheme with arrow color\n(replace both normal and hit). Is this OK?`,
 
         difficulty: `Select a chart.`,
         speed: `Set the speed of the sequences.\nThe outer button can be changed in 1x increments and the inner button in 0.25x increments.`,

package/package.json

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