feat: risks and sticky notes
This commit is contained in:
@ -1,5 +1,7 @@
|
||||
<script lang="ts">
|
||||
import Card from '$lib/Card.svelte';
|
||||
import StickyNote from '$lib/StickyNote.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
interface CardData {
|
||||
id: number;
|
||||
@ -9,25 +11,128 @@
|
||||
y: number;
|
||||
zIndex: number;
|
||||
inDeck: boolean;
|
||||
isRiskCategory?: boolean;
|
||||
}
|
||||
|
||||
const cardImages = Array.from({ length: 14 }, (_, i) => `front${i + 1}.png`);
|
||||
const backImage = 'back.png';
|
||||
interface DeckConfig {
|
||||
name: string;
|
||||
backImage: string;
|
||||
cards: string[];
|
||||
riskCategories?: string[];
|
||||
}
|
||||
|
||||
interface StickyNote {
|
||||
id: number;
|
||||
text: string;
|
||||
x: number;
|
||||
y: number;
|
||||
zIndex: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
const deckConfigs: DeckConfig[] = [
|
||||
{
|
||||
name: 'Default',
|
||||
backImage: 'back.png',
|
||||
cards: Array.from({ length: 14 }, (_, i) => `front${i + 1}.png`)
|
||||
},
|
||||
{
|
||||
name: 'Risk Cards',
|
||||
backImage: 'risks/risiko_back.png',
|
||||
cards: [
|
||||
'risks/altsysteme_und_altlasten1.png',
|
||||
'risks/altsysteme_und_altlasten2.png',
|
||||
'risks/altsysteme_und_altlasten3.png',
|
||||
'risks/altsysteme_und_altlasten4.png',
|
||||
'risks/altsysteme_und_altlasten5.png',
|
||||
'risks/betrieb_und_deployment1.png',
|
||||
'risks/betrieb_und_deployment2.png',
|
||||
'risks/betrieb_und_deployment3.png',
|
||||
'risks/betrieb_und_deployment4.png',
|
||||
'risks/betrieb_und_deployment5.png',
|
||||
'risks/fremdsysteme_und_plattformen1.png',
|
||||
'risks/fremdsysteme_und_plattformen2.png',
|
||||
'risks/fremdsysteme_und_plattformen3.png',
|
||||
'risks/fremdsysteme_und_plattformen4.png',
|
||||
'risks/fremdsysteme_und_plattformen5.png',
|
||||
'risks/kompetenz_und_erfahrung1.png',
|
||||
'risks/kompetenz_und_erfahrung2.png',
|
||||
'risks/kompetenz_und_erfahrung3.png',
|
||||
'risks/kompetenz_und_erfahrung4.png',
|
||||
'risks/kompetenz_und_erfahrung5.png',
|
||||
'risks/orga_und_prozesse1.png',
|
||||
'risks/orga_und_prozesse2.png',
|
||||
'risks/orga_und_prozesse3.png',
|
||||
'risks/orga_und_prozesse4.png',
|
||||
'risks/orga_und_prozesse5.png',
|
||||
'risks/softwareloesung1.png',
|
||||
'risks/softwareloesung2.png',
|
||||
'risks/softwareloesung3.png',
|
||||
'risks/softwareloesung4.png',
|
||||
'risks/softwareloesung5.png',
|
||||
'risks/weiche_faktoren1.png',
|
||||
'risks/weiche_faktoren2.png',
|
||||
'risks/weiche_faktoren3.png',
|
||||
'risks/weiche_faktoren4.png',
|
||||
'risks/weiche_faktoren5.png',
|
||||
'risks/zielsetzung1.png',
|
||||
'risks/zielsetzung2.png',
|
||||
'risks/zielsetzung3.png',
|
||||
'risks/zielsetzung4.png',
|
||||
'risks/zielsetzung5.png'
|
||||
],
|
||||
riskCategories: [
|
||||
'altsysteme_und_altlasten',
|
||||
'betrieb_und_deployment',
|
||||
'fremdsysteme_und_plattformen',
|
||||
'kompetenz_und_erfahrung',
|
||||
'orga_und_prozesse',
|
||||
'softwareloesung',
|
||||
'weiche_faktoren',
|
||||
'zielsetzung'
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
let selectedDeck = $state(0);
|
||||
let shuffleMode = $state('normal');
|
||||
let currentDeckConfig = $derived(deckConfigs[selectedDeck]);
|
||||
let backImage = $derived(currentDeckConfig.backImage);
|
||||
|
||||
let deckPosition = $state({ x: 50, y: 300 });
|
||||
let canvasOffset = $state({ x: 0, y: 0 });
|
||||
let isDragging = $state(false);
|
||||
let dragStart = $state({ x: 0, y: 0 });
|
||||
let dragStartOffset = $state({ x: 0, y: 0 });
|
||||
|
||||
let cards = $state<CardData[]>(
|
||||
cardImages.map((image, index) => ({
|
||||
let cards = $state<CardData[]>([]);
|
||||
let maxZIndex = $state(0);
|
||||
let stickyNotes = $state<StickyNote[]>([]);
|
||||
let nextNoteId = $state(1);
|
||||
let noteColors = ['#ffeb3b', '#4caf50', '#2196f3', '#ff9800', '#e91e63', '#9c27b0'];
|
||||
|
||||
function initializeDeck() {
|
||||
const config = deckConfigs[selectedDeck];
|
||||
cards = config.cards.map((image, index) => ({
|
||||
id: index + 1,
|
||||
frontImage: image,
|
||||
flipped: true,
|
||||
x: deckPosition.x + index * 2,
|
||||
y: deckPosition.y + index * 2,
|
||||
zIndex: index,
|
||||
inDeck: true
|
||||
}))
|
||||
);
|
||||
let maxZIndex = $state(cards.length);
|
||||
inDeck: true,
|
||||
isRiskCategory: selectedDeck === 1 && image.includes('1.png')
|
||||
}));
|
||||
maxZIndex = cards.length;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
initializeDeck();
|
||||
});
|
||||
|
||||
function handleDeckChange() {
|
||||
initializeDeck();
|
||||
}
|
||||
|
||||
function handleCardMove(id: number, x: number, y: number) {
|
||||
const card = cards.find(c => c.id === id);
|
||||
@ -41,12 +146,16 @@
|
||||
function handleCardDrop(id: number, x: number, y: number) {
|
||||
const card = cards.find(c => c.id === id);
|
||||
if (card) {
|
||||
// Check if card is dropped on deck area
|
||||
// Calculate card center position (card is 220x300px)
|
||||
const cardCenterX = x + 110;
|
||||
const cardCenterY = y + 150;
|
||||
|
||||
// Check if card center is dropped on deck area
|
||||
if (
|
||||
x >= deckPosition.x &&
|
||||
x <= deckPosition.x + 220 &&
|
||||
y >= deckPosition.y &&
|
||||
y <= deckPosition.y + 300 &&
|
||||
cardCenterX >= deckPosition.x &&
|
||||
cardCenterX <= deckPosition.x + 220 &&
|
||||
cardCenterY >= deckPosition.y &&
|
||||
cardCenterY <= deckPosition.y + 300 &&
|
||||
!card.inDeck
|
||||
) {
|
||||
// Move card to top of deck
|
||||
@ -76,6 +185,20 @@
|
||||
const deckCards = cards.filter(card => card.inDeck);
|
||||
if (deckCards.length === 0) return;
|
||||
|
||||
if (selectedDeck === 1) {
|
||||
if (shuffleMode === 'shuffle-only-risks') {
|
||||
shuffleOnlyRisks();
|
||||
} else if (shuffleMode === 'shuffle-per-category') {
|
||||
shufflePerCategory();
|
||||
} else {
|
||||
normalShuffle(deckCards);
|
||||
}
|
||||
} else {
|
||||
normalShuffle(deckCards);
|
||||
}
|
||||
}
|
||||
|
||||
function normalShuffle(deckCards: CardData[]) {
|
||||
for (let i = deckCards.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[deckCards[i], deckCards[j]] = [deckCards[j], deckCards[i]];
|
||||
@ -89,6 +212,70 @@
|
||||
});
|
||||
}
|
||||
|
||||
function shuffleOnlyRisks() {
|
||||
const deckCards = cards.filter(card => card.inDeck);
|
||||
const riskCategories = deckCards.filter(card => card.isRiskCategory);
|
||||
const riskCards = deckCards.filter(card => !card.isRiskCategory);
|
||||
|
||||
for (let i = riskCards.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[riskCards[i], riskCards[j]] = [riskCards[j], riskCards[i]];
|
||||
}
|
||||
|
||||
const shuffled = [...riskCategories, ...riskCards];
|
||||
shuffled.reverse();
|
||||
|
||||
const numCategories = riskCategories.length;
|
||||
const totalCards = shuffled.length;
|
||||
|
||||
shuffled.forEach((card, index) => {
|
||||
if (index >= totalCards - numCategories) {
|
||||
const categoryIndex = index - (totalCards - numCategories);
|
||||
card.x = 50 + 330 + (categoryIndex % 6) * 240;
|
||||
card.y = 50 + Math.floor(categoryIndex / 6) * 320;
|
||||
card.zIndex = index;
|
||||
card.flipped = false;
|
||||
card.inDeck = false;
|
||||
} else {
|
||||
card.x = deckPosition.x + index * 2;
|
||||
card.y = deckPosition.y + index * 2;
|
||||
card.zIndex = index;
|
||||
card.flipped = true;
|
||||
card.inDeck = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function shufflePerCategory() {
|
||||
const deckCards = cards.filter(card => card.inDeck);
|
||||
const categories = currentDeckConfig.riskCategories || [];
|
||||
const shuffledDeck: CardData[] = [];
|
||||
|
||||
for (const category of categories) {
|
||||
const categoryCard = deckCards.find(card => card.frontImage.includes(`${category}1.png`));
|
||||
const categoryRisks = deckCards.filter(card =>
|
||||
card.frontImage.includes(category) && !card.frontImage.includes('1.png')
|
||||
);
|
||||
|
||||
for (let i = categoryRisks.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[categoryRisks[i], categoryRisks[j]] = [categoryRisks[j], categoryRisks[i]];
|
||||
}
|
||||
|
||||
if (categoryCard) shuffledDeck.push(categoryCard);
|
||||
shuffledDeck.push(...categoryRisks);
|
||||
}
|
||||
|
||||
shuffledDeck.reverse();
|
||||
|
||||
shuffledDeck.forEach((card, index) => {
|
||||
card.x = deckPosition.x + index * 2;
|
||||
card.y = deckPosition.y + index * 2;
|
||||
card.zIndex = index;
|
||||
card.flipped = true;
|
||||
});
|
||||
}
|
||||
|
||||
function collectToDeck() {
|
||||
cards.forEach((card, index) => {
|
||||
card.x = deckPosition.x + index * 2;
|
||||
@ -101,7 +288,7 @@
|
||||
|
||||
function dealCards() {
|
||||
cards.forEach((card, index) => {
|
||||
card.x = 50 + (index % 6) * 240;
|
||||
card.x = 50 + 330 + (index % 6) * 240;
|
||||
card.y = 50 + Math.floor(index / 6) * 320;
|
||||
card.zIndex = index;
|
||||
card.flipped = false;
|
||||
@ -114,36 +301,162 @@
|
||||
card.flipped = !card.flipped;
|
||||
});
|
||||
}
|
||||
|
||||
function handleCanvasWheel(event: WheelEvent) {
|
||||
event.preventDefault();
|
||||
const scrollSpeed = 1;
|
||||
canvasOffset.x -= event.deltaX * scrollSpeed;
|
||||
canvasOffset.y -= event.deltaY * scrollSpeed;
|
||||
|
||||
canvasOffset.x = Math.max(-2000, Math.min(2000, canvasOffset.x));
|
||||
canvasOffset.y = Math.max(-2000, Math.min(2000, canvasOffset.y));
|
||||
}
|
||||
|
||||
function handleCanvasMouseDown(event: MouseEvent) {
|
||||
if (event.button === 1 || event.button === 2) {
|
||||
event.preventDefault();
|
||||
isDragging = true;
|
||||
dragStart.x = event.clientX;
|
||||
dragStart.y = event.clientY;
|
||||
dragStartOffset.x = canvasOffset.x;
|
||||
dragStartOffset.y = canvasOffset.y;
|
||||
}
|
||||
}
|
||||
|
||||
function handleCanvasMouseMove(event: MouseEvent) {
|
||||
if (isDragging) {
|
||||
event.preventDefault();
|
||||
const deltaX = event.clientX - dragStart.x;
|
||||
const deltaY = event.clientY - dragStart.y;
|
||||
|
||||
canvasOffset.x = Math.max(-2000, Math.min(2000, dragStartOffset.x + deltaX));
|
||||
canvasOffset.y = Math.max(-2000, Math.min(2000, dragStartOffset.y + deltaY));
|
||||
}
|
||||
}
|
||||
|
||||
function handleCanvasMouseUp(event: MouseEvent) {
|
||||
if (event.button === 1 || event.button === 2) {
|
||||
isDragging = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleCanvasContextMenu(event: MouseEvent) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
function addStickyNote() {
|
||||
const randomColor = noteColors[Math.floor(Math.random() * noteColors.length)];
|
||||
const newNote: StickyNote = {
|
||||
id: nextNoteId++,
|
||||
text: 'New note',
|
||||
x: 400 - canvasOffset.x,
|
||||
y: 200 - canvasOffset.y,
|
||||
zIndex: ++maxZIndex,
|
||||
color: randomColor
|
||||
};
|
||||
stickyNotes.push(newNote);
|
||||
}
|
||||
|
||||
function updateStickyNote(id: number, text: string) {
|
||||
const note = stickyNotes.find(n => n.id === id);
|
||||
if (note) {
|
||||
note.text = text;
|
||||
}
|
||||
}
|
||||
|
||||
function moveStickyNote(id: number, x: number, y: number) {
|
||||
const note = stickyNotes.find(n => n.id === id);
|
||||
if (note) {
|
||||
note.x = x;
|
||||
note.y = y;
|
||||
note.zIndex = ++maxZIndex;
|
||||
}
|
||||
}
|
||||
|
||||
function deleteStickyNote(id: number) {
|
||||
const index = stickyNotes.findIndex(n => n.id === id);
|
||||
if (index >= 0) {
|
||||
stickyNotes.splice(index, 1);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="game-container">
|
||||
<div class="controls">
|
||||
<div class="control-group">
|
||||
<label for="deck-select">Deck:</label>
|
||||
<select id="deck-select" bind:value={selectedDeck} onchange={handleDeckChange}>
|
||||
{#each deckConfigs as config, index}
|
||||
<option value={index}>{config.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{#if selectedDeck === 1}
|
||||
<div class="control-group">
|
||||
<label for="shuffle-mode">Shuffle:</label>
|
||||
<select id="shuffle-mode" bind:value={shuffleMode}>
|
||||
<option value="normal">Normal</option>
|
||||
<option value="shuffle-only-risks">Only Risks</option>
|
||||
<option value="shuffle-per-category">Per Category</option>
|
||||
</select>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<button onclick={collectToDeck}>Collect to Deck</button>
|
||||
<button onclick={shuffleDeck}>Shuffle Deck</button>
|
||||
<button onclick={dealCards}>Deal Cards</button>
|
||||
<button onclick={flipAllCards}>Flip All</button>
|
||||
<button onclick={addStickyNote}>Add Note</button>
|
||||
</div>
|
||||
|
||||
<div class="game-area">
|
||||
{#each cards as card (card.id)}
|
||||
<Card
|
||||
{...card}
|
||||
backImage={backImage}
|
||||
bind:flipped={card.flipped}
|
||||
bind:x={card.x}
|
||||
bind:y={card.y}
|
||||
bind:zIndex={card.zIndex}
|
||||
onMove={handleCardMove}
|
||||
onClick={handleCardClick}
|
||||
onDrop={handleCardDrop}
|
||||
/>
|
||||
{/each}
|
||||
|
||||
<div
|
||||
class="game-area"
|
||||
onwheel={handleCanvasWheel}
|
||||
onmousedown={handleCanvasMouseDown}
|
||||
onmousemove={handleCanvasMouseMove}
|
||||
onmouseup={handleCanvasMouseUp}
|
||||
oncontextmenu={handleCanvasContextMenu}
|
||||
>
|
||||
<div
|
||||
class="deck-area"
|
||||
style="left: {deckPosition.x}px; top: {deckPosition.y}px;"
|
||||
class="canvas-content"
|
||||
style="transform: translate({canvasOffset.x}px, {canvasOffset.y}px);"
|
||||
>
|
||||
Deck
|
||||
{#each cards as card (card.id)}
|
||||
<Card
|
||||
{...card}
|
||||
backImage={card.isRiskCategory ? 'risks/risikocat_back.png' : backImage}
|
||||
canvasOffset={canvasOffset}
|
||||
bind:flipped={card.flipped}
|
||||
bind:x={card.x}
|
||||
bind:y={card.y}
|
||||
bind:zIndex={card.zIndex}
|
||||
onMove={handleCardMove}
|
||||
onClick={handleCardClick}
|
||||
onDrop={handleCardDrop}
|
||||
/>
|
||||
{/each}
|
||||
|
||||
{#each stickyNotes as note (note.id)}
|
||||
<StickyNote
|
||||
{...note}
|
||||
canvasOffset={canvasOffset}
|
||||
bind:text={note.text}
|
||||
bind:x={note.x}
|
||||
bind:y={note.y}
|
||||
bind:zIndex={note.zIndex}
|
||||
onMove={moveStickyNote}
|
||||
onUpdate={updateStickyNote}
|
||||
onDelete={deleteStickyNote}
|
||||
/>
|
||||
{/each}
|
||||
|
||||
<div
|
||||
class="deck-area"
|
||||
style="left: {deckPosition.x}px; top: {deckPosition.y}px;"
|
||||
>
|
||||
Deck
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -164,6 +477,33 @@
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
z-index: 2000;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
padding: 8px 12px;
|
||||
border-radius: 27px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.control-group label {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.control-group select {
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.controls button {
|
||||
@ -187,6 +527,20 @@
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.game-area:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.canvas-content {
|
||||
position: relative;
|
||||
width: 500vw;
|
||||
height: 500vh;
|
||||
min-width: 500vw;
|
||||
min-height: 500vh;
|
||||
}
|
||||
|
||||
.deck-area {
|
||||
|
||||
Reference in New Issue
Block a user