// ==UserScript==
// @name pso2 catalog2table
// @name-jp PSO2 スクラッチカタログのメモシート化
// @namespace http://tampermonkey.net/
// @version 0.3
// @description スク品のメモ蝶とワンクリックでアイテム名コピー
// @author You
// @match http://pso2.jp/players/catalog/scratch/ac/*/
// @match http://pso2.jp/players/catalog/scratch/gold/*/
// @grant none
// ==/UserScript==
var isgold = !!~document.URL.indexOf('scratch/gold/');
var keyword = isgold ? 'gold/' : 'ac/';
var catalogid = document.URL.split(keyword)[1].split('/')[0];
if(isgold)catalogid = 'gold'+catalogid;
//build page
//button to toggle table display
var mbtoggletable = createbutton('☨表召喚☨');
mbtoggletable.addEventListener('click',toggletable);
mbtoggletable.style.width = 'auto';
mbtoggletable.style.position = 'fixed';
mbtoggletable.style.top = '0px';
mbtoggletable.style.right = '10px';
mbtoggletable.style.zIndex = '10001';
document.body.appendChild(mbtoggletable);
var mbexport = createbutton('export');
mbexport.addEventListener('click',converttotext);
mbexport.style.width = 'auto';
mbexport.style.position = 'fixed';
mbexport.style.top = '20px';
mbexport.style.right = '10px';
mbexport.style.zIndex = '10001';
document.body.appendChild(mbexport);
var mbclear = createbutton('clear');
mbclear.addEventListener('click',clearprices);
mbclear.style.width = 'auto';
mbclear.style.position = 'fixed';
mbclear.style.top = '40px';
mbclear.style.right = '10px';
mbclear.style.zIndex = '10001';
document.body.appendChild(mbclear);
function clearprices(){
var alltr = table.querySelectorAll('tr');
var alltd;
allstates.forEach(function(item,index){
if(!item){
alltd = alltr[index+1].querySelectorAll('td');
for (let i = 2, end = 12; i<end;i++){
alltd[i].querySelector('input').value = '';
}
}
});
}
function toggletable(){
overlay.style.display = overlay.style.display == 'none' ? '' : 'none';
mbtoggletable.value = overlay.style.display == 'none' ? '☨表召喚☨' : '卍表派遣卍';
}
//table wrapper & extras
var overlay = document.createElement('div');
overlay.style.position = 'fixed';
overlay.style.top = '0px';
overlay.style.right = '0px';
overlay.style.height = '100%';
overlay.style.width = '100%';
overlay.style.zIndex = '9997';
overlay.style.overflow = 'auto';
overlay.style.display = 'none';
var overlaycontents = document.createElement('div');
overlaycontents.style.position = 'absolute';
overlaycontents.style.width = '100%';
overlaycontents.style.margin = 'auto';
var overlaysubcontents = document.createElement('div');
overlaysubcontents.style.textAlign = 'center';
overlaycontents.appendChild(overlaysubcontents);
var optdiv = document.createElement('div');
optdiv.style.align = 'center';
optdiv.style.left = '50%';
optdiv.style.top = '50%';
optdiv.style.display = 'inline-block';
overlaysubcontents.appendChild(optdiv);
var legend = document.createElement('span');
legend.style.backgroundColor = '#333333';
legend.innerHTML = `<font color ='white'>画像左右クリックで色の切替<br>
画像中クリックでプレビュー<br>
名前クリックでｸﾘｯﾌﾟﾎﾞｰﾄﾞ<br></font>
<b><font color="yellow">購入予定</font>
<font color="green">購入済</font>
<font color="red">予定外</font></b>
`;
legend.style.display = 'inline-block';
overlaysubcontents.appendChild(legend);
overlay.appendChild(overlaycontents);
document.body.appendChild(overlay);
var exporter = overlay.cloneNode();
exporter.style.zIndex = '9998';
exporter.style.width = 'auto';
exporter.style.height = 'auto';
exporter.style.top = '50%';
exporter.style.left = '50%';
exporter.style.overflow = '';
exporter.style.transform = 'translate(-50%,-50%)';
var exporterfield = document.createElement('textarea');
exporterfield.cols = 96;
exporterfield.rows = 40;
var mbcloseexport = createbutton('close');
mbcloseexport.addEventListener('click', function(){exporter.style.display = 'none';});
exporter.appendChild(mbcloseexport);
var mbtest = createbutton('copy');
mbtest.addEventListener('click', function(){copyelemtext(exporterfield);});
exporter.appendChild(mbtest);
exporter.insertAdjacentHTML('beforeend','<br>');
exporter.appendChild(exporterfield);
document.body.appendChild(exporter);
//script start
var allitems = Array.from(document.querySelectorAll('.item-list-l')); //all item data
var allstates = []; //icon column colors
var allselections = []; //ship column colors
var allimages = []; //item icons
var allnames = []; //item names
var allgenres = []; //item types
var alldansei = []; //filter setting flags
var allcostume = [];
var allnonfashion = [];
var allbought = [];
var allnoplan = [];
var allcheapest = []; //cheapest column entries
var allitemsoriginal = Array.from(allitems);
for (let index = allitems.length-1; index >= 0; index--){
var item = allitems[index];
var genre = item.querySelector('dd.detail > table > tbody > tr:nth-child(1) > td').innerText;
var description = item.querySelector('dd.description > p').innerText;
var newarray = [];
let itemclone;
if (~genre.indexOf('（セット）') || ~description.indexOf('セットを使用すると')){
var allsubs = item.querySelectorAll('ul.image > li');
for (let i = 0, iend = allsubs.length; i < iend; i++){
var children = allsubs[i].children
for (let j = 0, jend = children.length; j < jend; j++){
allsubs[i].removeChild(children[j]);
}
itemclone = item.cloneNode(true);
itemclone.querySelector('dl.item-list-l>dt').innerText = allsubs[i].innerText.split('「').pop().split('」').shift();
newarray.push(itemclone);
}
allitems.splice(index,1);
for(let i = 0, end = newarray.length; i < end; i++){
allitems.splice(index+i,0,newarray[i]);
if(i>0)allitemsoriginal.splice(index+i,0,allitemsoriginal[index]);
}
}
}
//parse item data to fill up above arrays
allitems.forEach(function(item,index){
//image
var image = item.querySelector('dd.detail').querySelector('img');
if (image) {image = image.src} else {image = ''}
allimages.push(image);
//name
var name = item.querySelector('dt').innerText;
allnames.push(name);
//genre
var genre = item.querySelector('dd.detail > table > tbody > tr:nth-child(1) > td').innerText;
var genreabbrev = genre.split('\n')[0];
allgenres.push(genreabbrev);
//dansei
var flavor = item.querySelector('dd.description').innerText;
var cond1 = genre.indexOf('男性') > -1;
var cond2 = flavor.indexOf('男性のみ使用可能') > -1;
var dansei = false;
if (cond1 || cond2) {dansei = true};
alldansei.push(dansei);
//costume
var cond3 = name.indexOf('[Ou]') > -1;
var cond4 = (genre.indexOf('コスチューム') > -1) || (genre.indexOf('パーツ') > -1);
var costume = false;
if (cond3 || cond4) {costume = true};
allcostume.push(costume);
//nonfashion
var nonfashion = containsany(genre,['マグ','アイテム強化']);
allnonfashion.push(nonfashion);
});
console.log({allimages},{allnames},{allgenres},{alldansei});
//construct table
var table = document.createElement('table');
table.style.tableLayout = 'auto';
table.className = 'pricetable';
table.style.borderSpacing = '0';
table.style.borderCollapse = 'collapse';
//header
var header = document.createElement('tr');
header.innerHTML = '<th>img</th><td>name</td>'
for (let col = 0, colend=10; col < colend; col++){
var th = document.createElement('th');
th.innerText = 'ship'+(col+1);
th.className = 'ship'+(col+1);
header.appendChild(th);
}
var cheapheader = document.createElement('td');
cheapheader.innerText = 'cheapest';
cheapheader.addEventListener('click',function(){changed = true;autosuggestcheap();});
header.appendChild(cheapheader);
table.appendChild(header);
//generate rows
for (let row = 0, rowend = allitems.length; row < rowend; row++){
var tr = document.createElement('tr');
tr.style.whiteSpace = 'nowrap';
//add image
var tdimg = document.createElement('td');
tdimg.className = 'itemimg';
var tempimg = document.createElement('img');
tempimg.width = 50;
tempimg.height = 50;
tempimg.src = allimages[row];
//add events on img click
tdimg.addEventListener('click',function(){ toggleitemstate(row,); });
tdimg.addEventListener('contextmenu',function(e){ toggleitemstate(row,-1,true,e); });
tdimg.addEventListener('mousedown',function(e){if(e.which == 2){e.preventDefault();openpreview(row)};});
tdimg.appendChild(tempimg);
tr.appendChild(tdimg);
//add name
let tdname = document.createElement('td');
tdname.className = 'itemname';
tdname.innerHTML = allnames[row];
tdname.addEventListener('click',function(){ copytoclip(tdname); });
tr.appendChild(tdname);
//add ship columns
for (let col = 0, colend = 10; col < colend; col++){
let tdprices = document.createElement('td');
tdprices.className = 'ship'+(col+1);
let input = document.createElement('input');
input.size = 4;
input.maxLength = 8;
input.addEventListener('input',function(){changed = true; checkcheapest(row); });
//add events on price click
tdprices.addEventListener('click',function(){ togglepricestate(row,tdprices); });
tdprices.addEventListener('contextmenu',function(e){ togglepricestate(row,tdprices,-1,true,e); });
tdprices.addEventListener('mousedown',function(e){if(e.which == 2){e.preventDefault();focusinside(tdprices);}});
tdprices.appendChild(input);
tr.appendChild(tdprices);
}
//add cheapest column
let cheaptd = document.createElement('td');
cheaptd.className = 'cheapest';
cheaptd.addEventListener('click',function(){changed = true; autosuggestcheap(row)});
tr.appendChild(cheaptd);
table.appendChild(tr);
}
overlaycontents.appendChild(table);
function hideships(targets){
//loop through designated ships 1-10 columns to toggle their display
for (let i in targets){
var target = targets[i];
var cells = document.querySelectorAll('.ship'+target);
cells.forEach(function(item,index){
var currentdisplay = item.style.display;
item.style.display = (currentdisplay == 'none') ? '' : 'none';
});
}
}
function openpreview(row){
allitemsoriginal[row].querySelector('a').click();
if(allgenres[row]=='ボイス'){
allitemsoriginal[row].querySelector('.voice__list li').click();
}
}
function togglerows(){
//loop through designated item rows to display according to settings
var allrows = table.querySelectorAll('tr');
var conditions = types;
for (let row = 1, rowend = allrows.length; row < rowend; row++){
var hidethisrow = false;
for (let i in conditions){
var mask = 1 << (i*1);
if ( (typeoptions & mask) != 0 && conditions[i][row-1] ){
hidethisrow = true;
break
}
}
if (hidethisrow) {allrows[row].style.display = 'none';}
else {allrows[row].style.display = '';}
}
}
function toggleitemstate(row,direction,disable,e){
changed = true;
//wrapper for toggling color when clicking
direction = direction || 1;
if (disable) e.preventDefault();
var curr = allstates[row];
if (curr === undefined) {curr = 0;}
allstates[row] = maptorange(curr+direction,3,0,true);
colorrowbytoggle([row]);
}
function colorrowbytoggle(rows,all){
//toggle color
var colors2use = ['white','yellow','green','red'];
var allrows = table.querySelectorAll('.itemimg');
if (all){
for (let i = 0, end = allrows.length-1; i < end; i++){
var row = i+1;
colorthis(allrows[row],row);
}
} else {
for (let i in rows){
var row = rows[i];
colorthis(allrows[row],row);
}
}
function colorthis(item,index){
var state = allstates[index];
item.style.background = colors2use[state];
allbought[index] = state==2;
allnoplan[index] = state==3;
}
}
function togglepricestate(row,cell,direction,disable,e){
changed = true;
direction = direction || 1;
if (event.target.tagName == 'INPUT') return
if (disable) e.preventDefault();
var shipnum = cell.className.split('ship')[1]*1;
var mask0 = 1<<((shipnum-1)*2);
var mask1 = mask0*2;
var wholesel = allselections[row] || 0;
var currsel = ( (wholesel & mask0)+(wholesel & mask1) ) / mask0;
var newsel = maptorange(currsel+direction,3,0,true);
allselections[row] = allselections[row] & ~mask0 & ~mask1; //clear both bits before setting
allselections[row] |= (newsel * mask0);
//var updatedwholesel = allselections[row];
// console.log({shipnum},{wholesel},{mask0},{mask1},{currsel},{newsel},{updatedwholesel});
// var colors2use = ['white','yellow','green','red'];
// cell.style.background = colors2use[newsel];
colorpricebytoggle([row+1],false); //+1 to account for header row
}
function forcechangepricestate(row,shipnum,newvalue,reqvalue){
var mask0 = 1<<((shipnum-1)*2);
var mask1 = mask0*2;
var wholesel = allselections[row] || 0;
var currsel = ( (wholesel & mask0)+(wholesel & mask1) ) / mask0;
if ((reqvalue != undefined) && (currsel != reqvalue)) return;
var newsel = maptorange(newvalue,3,0,true);
allselections[row] = allselections[row] & ~mask0 & ~mask1; //clear both bits before setting
allselections[row] |= (newsel * mask0);
colorpricebytoggle([row+1],false);
}
function colorpricebytoggle(rows,all){
var allrows = table.querySelectorAll('tr');
var colors2use = ['white','yellow','green','blue'];
if (all){
for (let row = 1, rowend = allrows.length; row < rowend; row++){
colorthis(row);
}
} else {
for (let i in rows){
var row = rows[i];
colorthis(row);
}
}
function colorthis(row){
var rowsel = allselections[row-1] || 0;
var currcols = allrows[row].querySelectorAll('td');
for (let col = 2, colend = 12; col < colend; col++){
var cell = currcols[col];
var mask = (2<<(col-1)) + (2<<(col-2)); //col 2 = ship1
var mask0 = 1<<((col-2)*2); //col 2 = ship1 = 0th&1st bits
var mask1 = mask0 * 2;
var cellsel = ((rowsel & mask0) + (rowsel & mask1)) / mask0;
cell.style.background = colors2use[cellsel];
}
}
}
function focusinside(elem){
elem.querySelector('input').focus();
}
function checkcheapest(row){
row += 1;
var allrows = table.querySelectorAll('tr');
var currrow = allrows[row];
var cheaptd = currrow.querySelector('.cheapest');
var rowinputs = currrow.querySelectorAll('input');
var rowprices = [];
var shipscounted = 0;
//get all prices and check if completed
for (let i = 0, end = 10; i<end; i++){
var parenttd = rowinputs[i].closest('td');
if (parenttd.style.display == 'none'){
shipscounted++;
} else {
if (rowinputs[i].value != undefined && rowinputs[i].value != 0) {
shipscounted++;
rowprices[i] = rowinputs[i].value;
}
}
}
if (shipscounted >= 10){
var buyhere = getminindices(rowprices,1);
cheaptd.innerText = buyhere;
allcheapest[row-1] = buyhere;
} else {
cheaptd.innerText = '';
allcheapest[row-1] = undefined;
}
}
function checkallcheapest(){
var allrows = table.querySelectorAll('tr');
for (let i = 1, end = allrows.length; i<end; i++){
checkcheapest(i-1);
}
}
function autosuggestcheap(row){
var allrows = table.querySelectorAll('tr');
let start = row == undefined ? 1 : row+1;
let end = row == undefined ? allrows.length : start+1;
for (let i = start; i < end; i++){
var cheapest = allcheapest[i-1];
if (!cheapest || (allstates[i-1] >=2)) continue;
var allcols = allrows[i].querySelectorAll('td');
for (let j = 0, end = cheapest.length;j<end;j++){
forcechangepricestate(i-1,cheapest[j],1,0);
}
}
}
function converttotext(){
var allrows = table.querySelectorAll('tr');
var text ='';
var boughtmarker = 'x';
for (let row = 0, rowend = allrows.length; row<rowend; row++){
//check if item is neither filtered nor unplanned, or is bought
if((allrows[row].style.display != 'none' || allstates[row-1] == 2) && allstates[row-1] != 3){
var rowcols = allrows[row].querySelectorAll('td,th');
if (row == 0){
text += ' \t\t';
} else {
if (text) text += '\n';
text += rowcols[1].innerText;
//align names with tab
for (let i = 0, end = (21 - rowcols[1].innerText.length) / 7 -1; i < end; i++){
text += '\t';
}
}
//add x if bought
if(allstates[row-1]==2) text += boughtmarker;
for (let col = 2, colend = 12; col < colend; col++){
if (rowcols[col].style.display != 'none'){
if (row ==0){
text += '\tship'+(col-1);
if(col==11) text += '\n';
continue
}
text += '\t' +rowcols[col].querySelector('input').value;
switch (getselectionofcell(row-1,col-1)){
case 3:
text +=boughtmarker;
case 2:
text +=boughtmarker;
}
}
}
}
}
exporterfield.value = text;
exporter.style.display = exporter.style.display == 'none'? '' : 'none';
}
function getselectionofcell(item,ship){
var rowsel = allselections[item];
var mask0 = 1<<((ship-1)*2); //col 2 = ship1 = 0th&1st bits
var mask1 = mask0 * 2;
var output = ((rowsel & mask0) + (rowsel & mask1)) / mask0;
return output;
}
//general functions
function containsany(str, items){
for(var i in items){
var item = items[i];
if (str.indexOf(item) > -1){
return true;
}
}
return false;
}
function copytoclip(item){
document.oncopy = function(event) {
event.clipboardData.setData("Text", item.innerText || item.value);
event.preventDefault();
};
document.execCommand("Copy");
document.oncopy = undefined;
selectText(item);
}
function copyelemtext(elem){
elem.select();
// selectText(elem);
document.execCommand('copy')
}
function selectText(el){
var sel, range;
if (window.getSelection && document.createRange) {
sel = window.getSelection();
if(sel.toString() == ''){
window.setTimeout(function(){
range = document.createRange();
range.selectNodeContents(el);
sel.removeAllRanges();
sel.addRange(range);
},1);
}
}else if (document.selection) {
sel = document.selection.createRange();
if(sel.text == ''){
range = document.body.createTextRange();
range.moveToElementText(el);
range.select();
}
}
}
function maptorange(value,max,min,wrap){
value = value || 0;
max = max || 0;
min = min || 0;
wrap = wrap || true;
console.log("maptorange: ",{wrap},{value},{max},{min});
if (!wrap) return Math.min(Math.max(value, min), max);
value = value % (max+1);
if (value < min) value += max - min + 1;
console.log({value});
return value;
}
function createbutton(value,f){
var tempbutton = document.createElement('input');
tempbutton.type = 'button';
tempbutton.value = value;
tempbutton.style.width = '50px';
return tempbutton
}
function getminindices(array,offset){
if (array.length <= 0) return
offset = offset || 0;
var indices = [];
var check = array[0];
for (let i in array){
if ((array[i]*1) == check){
indices.push(i*1+offset);
}
if ((array[i]*1) < check){
check = array[i];
indices = [i*1+offset]
}
}
return indices
}
//options
//ship display
var shipsbinary = 0;
var shipbuttons = [];
for (let i = 1, end = 10; i<=end; i++){
if (i == 6){
optdiv.insertAdjacentHTML('beforeend', '<br>')
}
let temp = createbutton('ship'+i);
temp.addEventListener('click',function(){mbhideship(i,temp);});
optdiv.appendChild(temp);
shipbuttons.push(temp);
}
function mbhideship(shipnum,button){
shipsbinary ^= (1 << shipnum);
var tempcollection = document.querySelectorAll('.ship'+shipnum);
tempcollection.forEach(function(item,index){
item.style.display = item.style.display == 'none'? '' : 'none';
});
button.style.color = button.style.color == 'red'? '' : 'red';
}
//type display
var typeoptions = 0;
var types = [alldansei, allcostume, allnonfashion,allbought,allnoplan];
var typenames = ['男性','ｺｽﾁｭﾑ','非ﾌｧｯｼｮﾝ','購入済','予定外'];
var typebuttons = [];
optdiv.insertAdjacentHTML('beforeend', '<br>')
for (let i = 0, end = types.length; i < end; i++){
let temp = createbutton(typenames[i]);
temp.addEventListener('click',function(){mbtoggletype(i,temp);});
optdiv.appendChild(temp);
typebuttons.push(temp);
}
function mbtoggletype(type,button){
typeoptions ^= (1 << type);
togglerows();
button.style.color = button.style.color == 'red'? '' : 'red';
}
//save function
//load from storage to rebuild table prices and display states
save2table();
save2option();
//save to storage on exit
window.onbeforeunload = function() {
table2save();
option2save();
}
//autosave every 5 minutes if change has been made to table
var changed = false;
var autosave = setInterval(autosavewrapper,1000*60*5);
function autosavewrapper(){
if (changed) {
all2save()
changed = false;
console.log('autosaved');
};
}
function all2save(){
table2save();
option2save();
}
function table2save(){
var prices = [];
var tablerows = table.querySelectorAll('tr');
//loop through rows, skipping header
for (let row = 1, rowend = tablerows.length; row < rowend; row++){
var tablecols = tablerows[row].querySelectorAll('td');
var temparray = [];
var itemname = tablecols[1].innerText;
temparray.push(itemname);
//loop through cols, skipping img and name
for (let col = 2, colend = 12; col < colend; col++){
var currprice = tablecols[col].querySelector('input').value;
temparray.push(currprice);
}
prices.push(temparray);
}
console.log({prices});
//var catalogid = document.URL.split('ac/')[1].split('/')[0];
localStorage.setItem(catalogid, JSON.stringify(prices) );
//save states
localStorage.setItem(catalogid+'states', JSON.stringify(allstates));
//save selections
localStorage.setItem(catalogid+'selections', JSON.stringify(allselections));
}
function option2save(){
localStorage.setItem('shipoptions',shipsbinary);
localStorage.setItem('typeoptions',typeoptions);
}
function save2table(){
var temp = localStorage.getItem(catalogid);
if (!temp) return
var prices = JSON.parse( localStorage.getItem(catalogid) );
var tablerows = table.querySelectorAll('tr');
//loop through rows, skipping header
for (let row = 1, rowend = tablerows.length; row < rowend; row++){
var tablecols = tablerows[row].querySelectorAll('td');
var itemname = tablecols[1].innerText;
if (itemname != prices[row-1][0]) continue
//loop through cols, skipping img and name
for (let col = 2, colend = 12; col < colend; col++){
var currprice = prices[row-1][col-1];
var currinput = tablecols[col].querySelector('input');
currinput.value = currprice;
}
}
console.log({prices});
setTimeout(function(){checkallcheapest();},1000);
//load states
temp = localStorage.getItem(catalogid+'states');
if (temp) allstates = JSON.parse(temp);
console.log({allstates});
colorrowbytoggle('',true);
//load selections
temp = localStorage.getItem(catalogid+'selections');
console.log('load selections: ',{temp});
if (temp) allselections = JSON.parse(temp);
console.log({allselections});
colorpricebytoggle('',true);
}
function save2option(){
//ship display
var temp = localStorage.getItem('shipoptions');
if (!temp) return
shipsbinary = temp * 1;
console.log({shipsbinary});
var hidetargets = [];
for (let i = 1, end = 10; i <= end; i++){
var mask = 1 << i;
if ((shipsbinary & mask) != 0){
hidetargets.push(i);
shipbuttons[i-1].style.color = shipbuttons[i-1].style.color == 'red' ? '' : 'red';
}
}
hideships(hidetargets);
console.log({hidetargets});
//type diplay
temp = localStorage.getItem('typeoptions');
// if(!temp) return
typeoptions = temp * 1;
console.log({typeoptions});
togglerows();
for (let i = 0, end = types.length; i < end; i++){
var typemask = 1 << i;
if ( (typeoptions & typemask) != 0){
typebuttons[i].style.color = 'red';
}
}
}
