Skip to content

Commit

Permalink
Add a small card view in venture cards editor
Browse files Browse the repository at this point in the history
  • Loading branch information
@Deflaktor
Deflaktor committed Jun 30, 2024
1 parent 2dcae63 commit d73a30b
Show file tree
Hide file tree
Showing 6 changed files with 247 additions and 166 deletions.
293 changes: 151 additions & 142 deletions src/components/board/boardVentureCards.astro
View file

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion src/lib/getboards.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import backgrounds, { type Background } from "~/data/backgrounds.yml";
import { execSync } from 'child_process';
import { getRandomDate } from './utils';

export type MapDescriptorExtended = Omit<MapDescriptor1, 'music' | 'changelog' | 'frbFile1' | 'frbFile2' | 'frbFile3' | 'frbFile4' | 'frbFiles'> & {
export type MapDescriptorExtended = Omit<MapDescriptor1, 'music' | 'changelog' | 'frbFile1' | 'frbFile2' | 'frbFile3' | 'frbFile4' | 'frbFiles' | 'ventureCards'> & {
nameEn: string;
descEn: string;
path: string;
Expand All @@ -19,6 +19,7 @@ export type MapDescriptorExtended = Omit<MapDescriptor1, 'music' | 'changelog' |
frbFiles: string[];
uploadDate: number;
lastUpdated: number;
ventureCards: number[];
notesHtml?: string;
changelog?: {
version: number | string;
Expand Down
6 changes: 5 additions & 1 deletion src/pages/boards/[slug].astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,11 @@ const board = boards.find(board => board.slug === slug);
<div class="col mapCard">
<div class="card">
<div class="fw-bold card-header">Venture Cards</div>
<BoardVentureCards board={board}/>
<div class="card-body">
<div class="grid" style="--grid-column-count: 8; --grid-layout-gap: 0px; --grid-item--min-width: 2.5rem; --grid-item--max-width: 2.5rem">
<BoardVentureCards activeVentureCards={board.ventureCards}/>
</div>
</div>
</div>
</div>
</div>
Expand Down
47 changes: 33 additions & 14 deletions src/pages/cards.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import slug from 'slug';
import Layout from '~/layouts/layout.astro';
import cards from "~/data/venturecards.yml";
import BoardVentureCards from '~/components/board/boardVentureCards.astro';
const effects: string[] = [...new Set(cards.map(card => card.effect))].sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
const types: string[] = [...new Set(cards.map(card => card.description.split("!")[0]))].sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
Expand Down Expand Up @@ -50,16 +51,16 @@ function sentiment_to_div_class(sentiment: number) {
<h2>Grade</h2>
<div class="mb-3">
<p>Card grades are assigned by the Fortune Street modding community based on their power among cards with similar effects.</p>
<input type="checkbox" class="btn-check-outlined" id="grade0" autocomplete="off" checked onchange="cards.check_cards()"/>
<label class="btn btn-primary" for="grade0">D</label>
<input type="checkbox" class="btn-check-outlined" id="grade1" autocomplete="off" checked onchange="cards.check_cards()"/>
<label class="btn btn-primary" for="grade1">C</label>
<input type="checkbox" class="btn-check-outlined" id="grade2" autocomplete="off" checked onchange="cards.check_cards()"/>
<label class="btn btn-primary" for="grade2">B</label>
<input type="checkbox" class="btn-check-outlined" id="grade3" autocomplete="off" checked onchange="cards.check_cards()"/>
<label class="btn btn-primary" for="grade3">A</label>
<input type="checkbox" class="btn-check-outlined" id="grade4" autocomplete="off" checked onchange="cards.check_cards()"/>
<label class="btn btn-primary" for="grade4">S</label>
<input type="checkbox" class="btn-check" id="grade0" autocomplete="off" checked onchange="cards.check_cards()"/>
<label class="btn btn-outline-primary" for="grade0">D</label>
<input type="checkbox" class="btn-check" id="grade1" autocomplete="off" checked onchange="cards.check_cards()"/>
<label class="btn btn-outline-primary" for="grade1">C</label>
<input type="checkbox" class="btn-check" id="grade2" autocomplete="off" checked onchange="cards.check_cards()"/>
<label class="btn btn-outline-primary" for="grade2">B</label>
<input type="checkbox" class="btn-check" id="grade3" autocomplete="off" checked onchange="cards.check_cards()"/>
<label class="btn btn-outline-primary" for="grade3">A</label>
<input type="checkbox" class="btn-check" id="grade4" autocomplete="off" checked onchange="cards.check_cards()"/>
<label class="btn btn-outline-primary" for="grade4">S</label>
</div>
<h2>Sentiment</h2>
<div class="mb-3">
Expand Down Expand Up @@ -96,12 +97,30 @@ function sentiment_to_div_class(sentiment: number) {
</div>
</div>
<div class="col-9">
<div class="row">
<div class="mb-3">
<label class="form-label" id="cardsSelected">64 cards selected</label> <button class="btn btn-primary" id="generateYaml" onclick="cards.generate_yaml()">Generate YAML (requires 64)</button>
<div class="row row-cols-2 g-2">
<div class="col mb-3">
<ul class="nav nav-tabs">
<li class="nav-item">
<input type="radio" class="btn-check" name="cardsDisplay" id="cardsDisplayBig" autocomplete="off" checked onchange="cards.display_bigCards()">
<label class="nav-link btn btn-outline-primary" for="cardsDisplayBig">Big Cards</label>
</li>
<li class="nav-item">
<input type="radio" class="btn-check" name="cardsDisplay" id="cardsDisplaySmall" autocomplete="off" onchange="cards.display_smallCards()">
<label class="nav-link btn btn-outline-primary" for="cardsDisplaySmall">Small Cards</label>
</li>
</ul>
</div>
<div class="col mb-3 text-end">
<label class="form-label" id="cardsSelected">64 cards selected</label>
<button class="btn btn-primary" id="generateYaml" onclick="cards.generate_yaml()">Generate YAML (requires 64)</button>
</div>
</div>
<div class="row row-cols-2 g-2">
<div class="row g-2" id="ventureCardsSmall" style="display: none;">
<div class="grid" style="--grid-column-count: 15; --grid-layout-gap: 0px; --grid-item--min-width: 4rem;">
<BoardVentureCards disabled={false} onchange="cards.check_selected_cards()"/>
</div>
</div>
<div class="row row-cols-2 g-2" id="ventureCardsBig">
{cards.map((card, index) => (
<div class="col" style={"display: block; opacity: " + (card.defaultStandard ? "1" : "0.625") + ";"} id={"card" + (index + 1).toString()} data-description={card.description} data-easy={card.defaultEasy} data-standard={card.defaultStandard} data-type={slug(card.description.split("!")[0])} data-effect={slug(card.effect)} data-grade={card.grade} data-sentiment={card.sentiment}>
<div class={sentiment_to_div_class(card.sentiment)} style="height: 100%;">
Expand Down
2 changes: 2 additions & 0 deletions src/pages/cards.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,5 @@ export function select_all_cards(select?: boolean): void;
export function select_visible_cards(select?: boolean): void;
export function generate_yaml(): void;
export function copy_yaml_to_clipboard(): void;
export function display_bigCards(): void;
export function display_smallCards(): void;
62 changes: 54 additions & 8 deletions src/pages/cards.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@ export function check_cards() {
const difficulty = document.getElementById("difficulty");
for (let i = 1; i <= 128; i++) {
const card = document.getElementById("card" + i.toString());
const smallCard = document.getElementById("ventureCard-" + i.toString());
if (!card) continue;
card.style.display = "block";
smallCard.style.visibility = "visible";
const cardEasy = card.hasAttribute("data-easy");
const cardStandard = card.hasAttribute("data-standard");
const cardSentiment = parseInt(card.getAttribute("data-sentiment"));
Expand All @@ -13,43 +15,53 @@ export function check_cards() {
// Check difficulty
if (difficulty.value === "both" && (!cardEasy || !cardStandard)) {
card.style.display = "none";
smallCard.style.visibility = "hidden";
continue;
} else if (difficulty.value === "easy" && !cardEasy) {
card.style.display = "none";
smallCard.style.visibility = "hidden";
continue;
} else if (difficulty.value === "standard" && !cardStandard) {
card.style.display = "none";
smallCard.style.visibility = "hidden";
continue;
} else if (difficulty.value === "neither" && (cardEasy || cardStandard)) {
card.style.display = "none";
smallCard.style.visibility = "hidden";
continue;
}
// Check sentiment
if (!document.getElementById("sentimentPositive").checked && cardSentiment === 1) {
card.style.display = "none";
smallCard.style.visibility = "hidden";
continue;
} else if (!document.getElementById("sentimentNeutral").checked && cardSentiment === 0) {
card.style.display = "none";
smallCard.style.visibility = "hidden";
continue;
} else if (!document.getElementById("sentimentNegative").checked && cardSentiment === -1) {
card.style.display = "none";
smallCard.style.visibility = "hidden";
continue;
}
// Check grade
for (let j = 0; j <= 4; j++) {
if (!document.getElementById("grade" + j.toString()).checked && cardGrade === j) {
card.style.display = "none";
smallCard.style.visibility = "hidden";
break;
}
}
// Check type
if (document.getElementById("types").value !== "any" && cardType !== document.getElementById("types").value) {
card.style.display = "none";
smallCard.style.visibility = "hidden";
continue;
}
// Check effect
if (document.getElementById("effects").value !== "any" && cardEffect !== document.getElementById("effects").value) {
card.style.display = "none";
smallCard.style.visibility = "hidden";
continue;
}
}
Expand All @@ -70,20 +82,51 @@ export function reset_filters() {

export function reset_selected_cards() {
for (let i = 1; i <= 128; i++) {
document.getElementById("card" + i.toString() + "selected").checked = document.getElementById("card" + i.toString()).getAttribute("data-standard") === "true";
const isStandard = document.getElementById("card" + i.toString()).hasAttribute("data-standard")
document.getElementById("card" + i.toString() + "selected").checked = isStandard;
document.getElementById(`ventureCardInput-${i}`).checked = isStandard;
}
check_selected_cards();
}

export function display_bigCards() {
for (let i = 1; i <= 128; i++) {
const bigCard = document.getElementById(`card${i}selected`)
const smallCard = document.getElementById(`ventureCardInput-${i}`)
bigCard.checked = smallCard.checked
}
document.getElementById('ventureCardsSmall').style.display = "none"
document.getElementById('ventureCardsBig').style.display = ""
}

export function display_smallCards() {
for (let i = 1; i <= 128; i++) {
const bigCard = document.getElementById(`card${i}selected`)
const smallCard = document.getElementById(`ventureCardInput-${i}`)
smallCard.checked = bigCard.checked
}
document.getElementById('ventureCardsSmall').style.display = ""
document.getElementById('ventureCardsBig').style.display = "none"
}

export function check_selected_cards() {
document.getElementById("yaml").style.display = "none";
let chosenCards = 0;
for (let i = 1; i <= 128; i++) {
if (document.getElementById("card" + i.toString() + "selected").checked) {
chosenCards++;
document.getElementById("card" + i.toString()).style.opacity = 1;
} else {
document.getElementById("card" + i.toString()).style.opacity = 0.625;
const bigCards = document.getElementById("cardsDisplayBig").checked;
if (bigCards) {
for (let i = 1; i <= 128; i++) {
if (document.getElementById("card" + i.toString() + "selected").checked) {
chosenCards++;
document.getElementById("card" + i.toString()).style.opacity = 1;
} else {
document.getElementById("card" + i.toString()).style.opacity = 0.625;
}
}
} else {
for (let i = 1; i <= 128; i++) {
if (document.getElementById(`ventureCardInput-${i}`).checked) {
chosenCards++;
}
}
}
document.getElementById("cardsSelected").textContent = chosenCards.toString() + " cards selected";
Expand All @@ -98,16 +141,19 @@ export function check_selected_cards() {
export function select_all_cards(select = true) {
for (let i = 1; i <= 128; i++) {
document.getElementById("card" + i.toString() + "selected").checked = select;
document.getElementById(`ventureCardInput-${i}`).checked = select;
}
check_selected_cards();
}

export function select_visible_cards(select = true) {
for (let i = 1; i <= 128; i++) {
console.log(i, document.getElementById("card" + i.toString()).style.display);
if (document.getElementById("card" + i.toString()).style.display === "block") {
document.getElementById("card" + i.toString() + "selected").checked = select;
}
if (document.getElementById(`ventureCard-${i}`).style.visibility !== "hidden") {
document.getElementById(`ventureCardInput-${i}`).checked = select;
}
}
check_selected_cards();
}
Expand Down

0 comments on commit d73a30b

Please sign in to comment.