0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-27 13:53:09 +00:00

add more image snippets and other snippets

This commit is contained in:
Charlie Humphreys
2023-07-16 12:35:08 -05:00
parent 1b2d8d46a6
commit 77b0e93dd3
4 changed files with 78 additions and 12 deletions

View File

@@ -66,7 +66,6 @@ const ImageSelector = createClass({
const currentText = `${label}${current ?? ''}`; const currentText = `${label}${current ?? ''}`;
const index = 2; const index = 2;
const value = label + this.state.selected; const value = label + this.state.selected;
console.log(text, pattern, currentText, value, fullmatch, label, current);
cm.replaceRange(value, CodeMirror.Pos(n, index), CodeMirror.Pos(n, index + currentText.length), '+insert'); cm.replaceRange(value, CodeMirror.Pos(n, index), CodeMirror.Pos(n, index + currentText.length), '+insert');
}, },

View File

@@ -2,6 +2,8 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
max-height: 60vh;
overflow-y: scroll;
img { img {
flex: 0 0 auto; flex: 0 0 auto;

View File

@@ -78,9 +78,9 @@ const Text = createClass({
hintSelected : function(h, e) { hintSelected : function(h, e) {
let value; let value;
if(h.type === HINT_TYPE.VALUE) { if(h?.type === HINT_TYPE.VALUE) {
value = h.hint; value = h.hint;
} else if(h.type === HINT_TYPE.NUMBER_SUFFIX) { } else if(h?.type === HINT_TYPE.NUMBER_SUFFIX) {
const match = this.state.value.match(NUMBER_PATTERN); const match = this.state.value.match(NUMBER_PATTERN);
let suffix = match?.at(4) ?? ''; let suffix = match?.at(4) ?? '';
for (const char of h.hint) { for (const char of h.hint) {
@@ -102,20 +102,20 @@ const Text = createClass({
const { value } = this.state; const { value } = this.state;
const match = value?.match(NUMBER_PATTERN); const match = value?.match(NUMBER_PATTERN);
if(code === 'ArrowDown') { if(code === 'ArrowDown') {
if(match && match[3] && CSS.supports(field.name, value)) { if(match && CSS.supports(field.name, value)) {
e.preventDefault(); e.preventDefault();
this.onChange({ this.onChange({
target : { target : {
value : `${match.at(1) ?? ''}${Number(match[2]) - field.increment}${match[3]}${match.at(4) ?? ''}` value : `${match.at(1) ?? ''}${Number(match[2]) - field.increment}${match[3] ?? ''}${match.at(4) ?? ''}`
} }
}); });
} }
} else if(code === 'ArrowUp') { } else if(code === 'ArrowUp') {
if(match && match[3] && CSS.supports(field.name, value)) { if(match && CSS.supports(field.name, value)) {
e.preventDefault(); e.preventDefault();
this.onChange({ this.onChange({
target : { target : {
value : `${match.at(1) ?? ''}${Number(match[2]) + field.increment}${match[3]}${match.at(4) ?? ''}` value : `${match.at(1) ?? ''}${Number(match[2]) + field.increment}${match[3] ?? ''}${match.at(4) ?? ''}`
} }
}); });
} }
@@ -133,6 +133,7 @@ const Text = createClass({
} else { } else {
index = index + 1 + field.name.length; index = index + 1 + field.name.length;
} }
if(!value) return;
cm.replaceRange(value, CodeMirror.Pos(n, index), CodeMirror.Pos(n, index + current.length), '+insert'); cm.replaceRange(value, CodeMirror.Pos(n, index), CodeMirror.Pos(n, index + current.length), '+insert');
this.setState({ this.setState({
value : e.target.value, value : e.target.value,

View File

@@ -1,6 +1,11 @@
const _ = require('lodash'); const _ = require('lodash');
const { SNIPPET_TYPE, FIELD_TYPE } = require('../../../shared/naturalcrit/codeEditor/helpers/widget-elements/constants'); const { SNIPPET_TYPE, FIELD_TYPE } = require('../../../shared/naturalcrit/codeEditor/helpers/widget-elements/constants');
const fourDigitNumberFromValue = (value)=>typeof value === 'number' ? (()=>{
const str = String(value);
return _.range(0, 4 - str.length).map(()=>'0').join('') + str;
})() : value;
module.exports = [{ module.exports = [{
name : 'monster', name : 'monster',
type : SNIPPET_TYPE.BLOCK, type : SNIPPET_TYPE.BLOCK,
@@ -24,6 +29,30 @@ module.exports = [{
name : 'wide', name : 'wide',
type : FIELD_TYPE.CHECKBOX type : FIELD_TYPE.CHECKBOX
}] }]
}, {
name : 'runeTable',
type : SNIPPET_TYPE.BLOCK,
fields : [{
name : 'frame',
type : FIELD_TYPE.CHECKBOX
}, {
name : 'wide',
type : FIELD_TYPE.CHECKBOX
}, {
name : 'font-family',
type : FIELD_TYPE.TEXT
}]
}, {
name : 'index',
type : SNIPPET_TYPE.BLOCK,
fields : [{
name : 'wide',
type : FIELD_TYPE.CHECKBOX
}, {
name : 'columns',
type : FIELD_TYPE.TEXT,
increment : 1
}]
}, { }, {
name : 'image', name : 'image',
type : SNIPPET_TYPE.INJECTOR, type : SNIPPET_TYPE.INJECTOR,
@@ -71,11 +100,46 @@ module.exports = [{
fields : [{ fields : [{
name : 'imageMaskCenter', name : 'imageMaskCenter',
type : FIELD_TYPE.IMAGE_SELECTOR, type : FIELD_TYPE.IMAGE_SELECTOR,
preview : (value)=>`/assets/waterColorMasks/center/${typeof value === 'number' ? (()=>{ preview : (value)=>`/assets/waterColorMasks/center/${fourDigitNumberFromValue(value)}.webp`,
const str = String(value); values : _.range(1, 17)
return _.range(0, 4 - str.length).map(()=>'0').join('') + str; }, {
})() : value}.webp`, name : '--offsetX',
values : _.range(1, 17) type : FIELD_TYPE.TEXT,
increment : 5,
}, {
name : '--offsetY',
type : FIELD_TYPE.TEXT,
increment : 5,
}, {
name : '--rotation',
type : FIELD_TYPE.TEXT,
increment : 5,
}]
}, {
name : 'imageMaskEdge',
type : SNIPPET_TYPE.INLINE,
fields : [{
name : 'imageMaskEdge',
type : FIELD_TYPE.IMAGE_SELECTOR,
preview : (value)=>`/assets/waterColorMasks/edge/${fourDigitNumberFromValue(value)}.webp`,
values : _.range(1, 9)
}, {
name : '--offset',
type : FIELD_TYPE.TEXT,
increment : 5,
}, {
name : '--rotation',
type : FIELD_TYPE.TEXT,
increment : 5,
}]
}, {
name : 'imageMaskCorner',
type : SNIPPET_TYPE.INLINE,
fields : [{
name : 'imageMaskCorner',
type : FIELD_TYPE.IMAGE_SELECTOR,
preview : (value)=>`/assets/waterColorMasks/corner/${fourDigitNumberFromValue(value)}.webp`,
values : _.range(1, 38)
}, { }, {
name : '--offsetX', name : '--offsetX',
type : FIELD_TYPE.TEXT, type : FIELD_TYPE.TEXT,