Leahnaya/chaoticbackup.github.io
1
0
Fork 0
mirror of https://github.com/chaoticbackup/chaoticbackup.github.io.git synced 2026-03-21 17:24:14 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

change thumbnail to use imgur

Browse Source
This commit is contained in:
Daniel 2022-04-20 00:13:28 -04:00
parent df48ee9c2b
commit 241ab52dc6
13 changed files with 90 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
build/465.js
View File

File diff suppressed because one or more lines are too long

2
build/465.css → build/789.css
View File

File diff suppressed because one or more lines are too long

1
build/789.js Normal file
View File

File diff suppressed because one or more lines are too long

2
build/main.js
View File

File diff suppressed because one or more lines are too long

BIN
public/img/transparent_img.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 B

5
src/components/collection/collection.scss
View File

@ -267,12 +267,9 @@
vertical-align: middle;
}
.thumb {
.card .thumb {
width: 100px;
height: 98px;
}
.card .thumb {
float: left;
}

10
src/components/collection/index.js
View File

@ -247,15 +247,15 @@ const CardList = ({ cards, ...props }) => {
return cards.map((card, i) => {
switch (card.gsx$type) {
case "Attacks":
return (<Attack card={card} key={i} {...props}/>);
return (<Attack card={card} key={card.gsx$name+card.gsx$set} {...props}/>);
case "Battlegear":
return (<Battlegear card={card} key={i} {...props}/>);
return (<Battlegear card={card} key={card.gsx$name+card.gsx$set} {...props}/>);
case "Creatures":
return (<Creature card={card} key={i} {...props}/>);
return (<Creature card={card} key={card.gsx$name+card.gsx$set} {...props}/>);
case "Locations":
return (<Location card={card} key={i} {...props}/>);
return (<Location card={card} key={card.gsx$name+card.gsx$set} {...props}/>);
case "Mugic":
return (<Mugic card={card} key={i} {...props}/>);
return (<Mugic card={card} key={card.gsx$name+card.gsx$set} {...props}/>);
default:
return (<div key={i}>Invalid Card Type</div>);
}

8
src/components/collection/types/Attack.js
View File

@ -1,7 +1,9 @@
import React from 'react';
import API from '../../SpreadsheetData';
import { observer, inject } from 'mobx-react';
import React from 'react';
import { FlavorText, Rarity, Unique, Name, ElementIcon, Ability, AttackIcon } from '../../Snippets';
import API from '../../SpreadsheetData';
import { Thumbnail } from './helpers';
@inject((stores, props, context) => props) @observer
export default class Attack extends React.Component {
@ -11,7 +13,7 @@ export default class Attack extends React.Component {
if (this.props.ext == false) return (
<div className="card attack">
<img className="thumb" src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(API.cardImage(card))} />
<Thumbnail {...this.props} />
<div className="left">
<Name name={card.gsx$name} />
<Rarity set={card.gsx$set} rarity={card.gsx$rarity} />

8
src/components/collection/types/Battlegear.js
View File

@ -1,7 +1,9 @@
import React from 'react';
import API from '../../SpreadsheetData';
import { observer, inject } from 'mobx-react';
import React from 'react';
import { FlavorText, Rarity, Unique, Name, Ability, BattlegearIcon } from '../../Snippets';
import API from '../../SpreadsheetData';
import { Thumbnail } from './helpers';
@inject((stores, props, context) => props) @observer
export default class Battlegear extends React.Component {
@ -11,7 +13,7 @@ export default class Battlegear extends React.Component {
if (this.props.ext == false) return (
<div className="card battlegear">
<img className="thumb" style={{ float: 'left' }} src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(API.cardImage(card))} />
<Thumbnail {...this.props} />
<div className="left">
<Name name={card.gsx$name} />
<Rarity set={card.gsx$set} rarity={card.gsx$rarity} />

8
src/components/collection/types/Creature.js
View File

@ -1,7 +1,9 @@
import React from 'react';
import API from '../../SpreadsheetData';
import { observer, inject } from 'mobx-react';
import React from 'react';
import { FlavorText, Rarity, Unique, Name, ElementIcon, MugicIcon, DisciplineIcon, Ability, TribeIcon } from '../../Snippets';
import API from '../../SpreadsheetData';
import { Thumbnail } from './helpers';
@inject((stores, props, context) => props) @observer
export default class Creature extends React.Component {
@ -44,7 +46,7 @@ export default class Creature extends React.Component {
if (this.props.ext == false) return (
<div className="card creature">
<img className="thumb" style={{ float: 'left' }} src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(API.cardImage(card))} />
<Thumbnail {...this.props} />
<div className="left">
<Name name={card.gsx$name} />
<Rarity set={card.gsx$set} rarity={card.gsx$rarity} />

3
src/components/collection/types/Location.js
View File

@ -3,6 +3,7 @@ import React from 'react';
import { Ability, FlavorText, Initiative, LocationIcon, Name, Rarity, Unique } from '../../Snippets';
import API from '../../SpreadsheetData';
import { Thumbnail } from './helpers';
@inject((stores, props, context) => props) @observer
export default class Location extends React.Component {
@ -12,7 +13,7 @@ export default class Location extends React.Component {
if (this.props.ext == false) return (
<div className="card location">
<img className="thumb" style={{ float: 'left', width: '100px', height: '98px' }} src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(API.cardImage(card))} />
<Thumbnail {...this.props} />
<div className="left">
<Name name={card.gsx$name} />
<Rarity set={card.gsx$set} rarity={card.gsx$rarity} />

10
src/components/collection/types/Mugic.js
View File

@ -1,8 +1,10 @@
import React from 'react';
import API from '../../SpreadsheetData';
import { observer, inject } from 'mobx-react';
import { FlavorText, Rarity, Unique, Name, MugicIcon as MugicCounter, Ability, TribeIcon } from '../../Snippets';
import React from 'react';
import MugicPlay from '../../mugicplayer/playbutton.tsx';
import { FlavorText, Rarity, Unique, Name, MugicIcon as MugicCounter, Ability, TribeIcon } from '../../Snippets';
import API from '../../SpreadsheetData';
import { Thumbnail } from './helpers';
@inject((stores, props, context) => props) @observer
export default class Mugic extends React.Component {
@ -30,7 +32,7 @@ export default class Mugic extends React.Component {
if (this.props.ext == false) return (
<div className="card mugic">
<img className="thumb" style={{ float: 'left' }} src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(API.cardImage(card))} />
<Thumbnail {...this.props} />
<div className="left">
<Name name={card.gsx$name} />
<Rarity set={card.gsx$set} rarity={card.gsx$rarity} />

58
src/components/collection/types/helpers.js Normal file
View File

@ -0,0 +1,58 @@
import React from 'react';
import API from '../../SpreadsheetData';
export function Thumbnail ({ card, setImage }) {
// If imgur image exists, crop from it instead
if (card.gsx$ic && card.gsx$ic !== '') {
const innerStyle = (() => {
switch (card.gsx$type) {
case 'Attacks':
return {
height: "206px",
width: "112px",
margin: "-22px 0px 0px -6px",
};
case 'Battlegear':
return {
height: "204px",
width: "112px",
margin: "-22px 0px 0px -6px",
};
case 'Creatures':
return {
height: "192px",
width: "109px",
margin: "-18px 0px -0px -4px",
};
case 'Locations':
return {
height: "194px",
width: "200px",
margin: "-28px 0px 0px -50px",
};
case 'Mugic':
return {
height: "188px",
width: "100px",
margin: "-18px 0px 0px 0px",
};
}
})();
return (<div className='thumb' style={{ overflow: "hidden" }}>
<img
src={card.gsx$ic}
onClick={() => setImage(card.gsx$ic)}
style={{ ...innerStyle }}
/>
</div>);
}
return <img
className="thumb"
src={API.base_image + (card.gsx$thumb||API.thumb_missing)}
onClick={() => setImage(API.cardImage(card))}
/>;
}