Skip to content

Commit 4795181

Browse files
DayjoDayjo
authored
Merge pull request #46 from Sidsector9/feat/character-palette
feat/character-palette: Adds a character palette
2 parents 9dd4ef4 + a30ca7b commit 4795181

File tree

3 files changed

+106
-1
lines changed

3 files changed

+106
-1
lines changed

‎src/component/CharacterMap.js

+96
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,24 @@ import './style.css';
1111
class CharacterMap extends React.Component {
1212
constructor(props) {
1313
super(props);
14+
15+
try {
16+
this.paletteCache = JSON.parse( localStorage.getItem('tenupISCcharPalette') );
17+
this.paletteCache = this.paletteCache.length ? this.paletteCache : [];
18+
} catch(error) {
19+
this.paletteCache = [];
20+
}
21+
22+
this.secondaryPaletteCache = [];
23+
this.leastUsedCharFromPalette = false;
24+
this.dirtyPalette = false;
1425
this.state = {
1526
active: 0,
1627
search: '',
1728
categoryList: '',
1829
charList: '',
1930
fullCharList: '',
31+
charPalette: this.paletteCache,
2032
};
2133
this.resultsCache=[];
2234
this.handleSearchChange = this.handleSearchChange.bind( this );
@@ -74,9 +86,83 @@ class CharacterMap extends React.Component {
7486
// Handle clicks to the characters, running the callback function.
7587
charClickHandler(e, char){
7688
e.preventDefault();
89+
this.setPalette(char);
7790
return this.props.onSelect(char, e.target);
7891
}
7992

93+
/**
94+
* Sets the charPalette state.
95+
*
96+
* @param {object} char The character object
97+
*/
98+
setPalette(char) {
99+
const paletteMaxSize = 5;
100+
const charAtIndex = this.paletteCache.findIndex(p => p.hex === char.hex);
101+
102+
/* If the primary palette cache is not fully filled OR if the character is already
103+
* present in primary, then add the character to it.
104+
*/
105+
if ( this.paletteCache.length < paletteMaxSize || -1 !== charAtIndex ) {
106+
this.paletteCache = this.addToPalette(char, this.paletteCache);
107+
/* Else add it to the secondary cache. */
108+
} else if ( -1 === charAtIndex ) {
109+
this.secondaryPaletteCache = this.addToPalette(char, this.secondaryPaletteCache);
110+
}
111+
112+
/* If the primary cache is fully filled, then save the least used
113+
* character from the cache for future reference.
114+
*/
115+
if ( this.paletteCache.length === paletteMaxSize ) {
116+
this.leastUsedCharFromPalette = this.paletteCache[ paletteMaxSize - 1 ];
117+
}
118+
119+
/*
120+
* Sort the palettes in descending order of the count.
121+
*/
122+
this.paletteCache.sort( ( a, b ) => b.count - a.count );
123+
this.secondaryPaletteCache.sort( ( a, b ) => b.count - a.count );
124+
125+
if (this.secondaryPaletteCache.length > 0) {
126+
/* If the count of the max used character in secondary is more than
127+
* the count of the least used character in the primary, then remove
128+
* that character from secondary and replace the least used character
129+
* from primary with it.
130+
*/
131+
if (this.secondaryPaletteCache[0].count > this.paletteCache[paletteMaxSize - 1].count) {
132+
const maxCountCharInSecondaryPalette = this.secondaryPaletteCache.shift();
133+
this.paletteCache[paletteMaxSize - 1] = maxCountCharInSecondaryPalette;
134+
}
135+
}
136+
137+
localStorage.setItem('tenupISCcharPalette', JSON.stringify(this.paletteCache));
138+
this.setState( { 'charPalette': this.paletteCache } );
139+
}
140+
141+
/**
142+
* Adds a character to the character palette.
143+
*
144+
* @param {object} char The character object.
145+
* @param {array} palette The char palette array.
146+
* @returns {array}
147+
*/
148+
addToPalette(char, palette) {
149+
const charAtIndex = palette.findIndex(p => p.hex === char.hex);
150+
151+
if ( charAtIndex !== -1 ) {
152+
++palette[ charAtIndex ].count;
153+
} else {
154+
palette.push( {
155+
'char': char.char,
156+
'entity': char.entity,
157+
'hex': char.hex,
158+
'name': char.name,
159+
'count': 1,
160+
} )
161+
}
162+
163+
return palette;
164+
}
165+
80166
/**
81167
* Perform the character search.
82168
*
@@ -215,6 +301,8 @@ class CharacterMap extends React.Component {
215301
const filterLabelText = this.props.filterLabelText || 'Filter';
216302
const categoriesLabelText = this.props.categoriesLabelText || 'Categories';
217303
const characterListLabelText = this.props.characterListLabelText || 'Character List';
304+
const mostUsedPaletteText = this.props.mostUsedPaletteText || 'Most used';
305+
const {charList: charPalette} = this.charListFromCharacters( { 'Palette': this.paletteCache }, 0);
218306

219307
return (
220308
<div className="charMap--container">
@@ -230,6 +318,14 @@ class CharacterMap extends React.Component {
230318
ref={this.bindInputRef}
231319
/>
232320
</ul>
321+
{ this.props.mostUsedPalette && this.paletteCache.length && (
322+
<div className="charMap--last-used-palette-wrapper">
323+
<label>{`${mostUsedPaletteText}: `}</label>
324+
<ul className="charMap--last-used-palette" aria-label={mostUsedPaletteText}>
325+
{ charPalette }
326+
</ul>
327+
</div>
328+
) }
233329
{ '' === search &&
234330
<ul className="charMap--category-menu" aria-label={categoriesLabelText}>
235331
{ categoryList}

‎src/index.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
import CharacterMap from './component/CharacterMap';
2-
export { CharacterMap };
2+
import deleteCharPaletteData from "./utilities";
3+
4+
export { CharacterMap, deleteCharPaletteData };

‎src/utilities.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/**
2+
* Utility function to programatically delete character palette
3+
* local storagee data.
4+
*/
5+
export default function deleteCharPaletteData() {
6+
localStorage.removeItem('tenupISCcharPalette');
7+
}

0 commit comments

Comments
 (0)