feat: faction icon, font, and more
This commit is contained in:
@@ -1,2 +1,2 @@
|
||||
<?xml version="1.0" encoding="utf-8" ?>
|
||||
<svg baseProfile="tiny" height="417px" version="1.2" width="298px" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink"><defs /><rect fill="rgb(206, 182, 167)" height="417px" rx="10" ry="10" width="298px" x="0" y="0" /><rect fill="white" height="50px" width="298px" x="0" y="0" /><text fill="black" font-size="24px" font-weight="bold" text-anchor="middle" x="130" y="30">Rallier les Troupes</text><text fill="black" font-size="16px" x="10" y="70">Action, Charme</text><circle cx="268" cy="25" fill="yellow" r="20" /><text fill="black" font-size="24px" font-weight="bold" x="263" y="32">4</text><image height="180" width="298" x="0" xlink:href="lancersiz3.png" y="80" /><circle cx="100" cy="305" fill="red" r="25" /><text fill="white" font-size="24px" font-weight="bold" text-anchor="middle" x="100" y="314">5</text><circle cx="210" cy="305" fill="green" r="25" /><text fill="white" font-size="24px" font-weight="bold" text-anchor="middle" x="210" y="314">5</text><line stroke="black" stroke-width="1" x1="20" x2="278" y1="360" y2="360" /><text fill="black" font-size="16px" text-anchor="middle" x="149.0" y="390">Mobilisez un Champion.</text></svg>
|
||||
<svg baseProfile="tiny" height="417px" version="1.2" width="298px" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="grad1" x1="0" x2="1" y1="0" y2="0"><stop offset="0" stop-color="yellow" stop-opacity="1" /><stop offset="1" stop-color="yellow" stop-opacity="0" /></linearGradient><linearGradient id="grad2" x1="0" x2="0" y1="1" y2="0"><stop offset="0" stop-color="#ff9935" stop-opacity="1" /><stop offset="1" stop-color="#ffe744" stop-opacity="1" /></linearGradient></defs><rect fill="black" height="417px" rx="15" ry="18" width="298px" x="0" y="0" /><rect fill="rgb(206, 182, 167)" height="388px" rx="0" ry="0" width="274px" x="12" y="12" /><text fill="black" font-family="Helvetica" font-size="19px" font-weight="bold" text-anchor="middle" x="149.0" y="36">Rallier les Troupes</text><text fill="black" font-family="Helvetica" font-size="13px" text-anchor="middle" x="149.0" y="53">Action, Charme</text><circle cx="36" cy="37" fill="black" r="20" /><circle cx="35" cy="36" fill="url(#grad2)" r="20" /><circle cx="262" cy="38" fill="rgb(202, 129, 25)" r="21" /><circle cx="260" cy="36" fill="yellow" r="20" /><text fill="black" font-family="Helvetica" font-size="24px" font-weight="bold" text-anchor="middle" x="260" y="43">4</text><rect fill="black" height="200px" width="298px" x="0" y="65" /><image height="200" width="298" x="0" xlink:href="lancersiz3.png" y="65" /><rect fill="url(#grad1)" height="135px" width="30px" x="12" y="265" /><circle cx="129.0" cy="302" fill="red" r="22" /><text fill="white" font-family="Helvetica" font-size="24px" font-weight="bold" text-anchor="middle" x="129.0" y="311">5</text><circle cx="189.0" cy="302" fill="green" r="22" /><text fill="white" font-family="Helvetica" font-size="24px" font-weight="bold" text-anchor="middle" x="189.0" y="311">5</text><line stroke="black" stroke-width="1" x1="20" x2="278" y1="345" y2="345" /><circle cx="48" cy="371" fill="black" r="15" /><circle cx="47" cy="370" fill="url(#grad2)" r="15" /><text fill="black" font-family="Helvetica" font-size="14px" text-anchor="middle" x="149.0" y="375">Mobilisez un Champion.</text></svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 2.2 KiB |
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"id": 10,
|
||||
"role": "market",
|
||||
"card_type": "action",
|
||||
"faction": "yellow",
|
||||
"name": "Rally the Troops",
|
||||
"cost": 4,
|
||||
"init_amount": 1,
|
||||
"effects": [
|
||||
{
|
||||
"effect": "heal",
|
||||
"amount": 5
|
||||
},
|
||||
{
|
||||
"effect": "damage",
|
||||
"amount": 5
|
||||
},
|
||||
{
|
||||
"effect": "prepare",
|
||||
"amount": 1,
|
||||
"effect_type": "faction_combo"
|
||||
}
|
||||
]
|
||||
}
|
||||
+96
-16
@@ -72,10 +72,18 @@ with open('src/card_data.json') as f:
|
||||
# Params
|
||||
x_width = 298
|
||||
y_height = 417
|
||||
stats_radius = 25
|
||||
border_width_x = 12
|
||||
border_width_y = 17
|
||||
border_upper_offset = 5
|
||||
title_y_offset = 24
|
||||
title_font_size = 19
|
||||
subtitle_font_size = 13
|
||||
cost_right_offset = 38
|
||||
stats_radius = 22
|
||||
effect_text_size = 14
|
||||
row_1_base_y = 280
|
||||
row_2_base_y = 390
|
||||
row_1_to_2_separator_y = 360
|
||||
row_2_base_y = 375
|
||||
row_1_to_2_separator_y = 345
|
||||
row_1_to_2_separator_shorten_by = 20
|
||||
|
||||
background_colors = {
|
||||
@@ -86,40 +94,112 @@ background_colors = {
|
||||
'base': 'lightgrey'
|
||||
}
|
||||
|
||||
gradient_colors = {
|
||||
'red': 'red',
|
||||
'blue': 'blue',
|
||||
'yellow': 'yellow',
|
||||
'green': 'green'
|
||||
}
|
||||
|
||||
icon_colors = {
|
||||
'yellow': ['#ff9935', '#ffe744']
|
||||
}
|
||||
|
||||
|
||||
# Create a new SVG drawing
|
||||
dwg = svgwrite.Drawing('card.svg', profile='tiny', size=(str(x_width) + 'px', str(y_height) + 'px'))
|
||||
|
||||
# Define linear colored gradient
|
||||
gradient = dwg.linearGradient(start=(0, 0), end=(1, 0), id="grad1")
|
||||
gradient.add_stop_color(0, gradient_colors[card_data['faction']], opacity=1)
|
||||
gradient.add_stop_color(1, gradient_colors[card_data['faction']], opacity=0)
|
||||
dwg.defs.add(gradient)
|
||||
|
||||
# Define linear colored gradient for faction icon
|
||||
gradient_faction_icon = dwg.linearGradient(start=(0, 1), end=(0, 0), id="grad2")
|
||||
gradient_faction_icon.add_stop_color(0, icon_colors[card_data['faction']][0], opacity=1)
|
||||
gradient_faction_icon.add_stop_color(1, icon_colors[card_data['faction']][1], opacity=1)
|
||||
dwg.defs.add(gradient_faction_icon)
|
||||
|
||||
# # Define a drop shadow filter
|
||||
# filter_shadow = dwg.defs.add(dwg.filter(id='dropShadow'))
|
||||
# filter_shadow.feGaussianBlur(in_='SourceAlpha', stdDeviation=3)
|
||||
# filter_shadow.feOffset(dx=3, dy=3, result='offsetblur')
|
||||
# filter_shadow.feFlood(flood_color='black', flood_opacity=0.5)
|
||||
# filter_shadow.feComposite(in2='offsetblur', operator='in')
|
||||
# filter_shadow.feMerge().feMergeNode(in_='SourceGraphic')
|
||||
|
||||
# Draw card background
|
||||
dwg.add(dwg.rect(insert=(0, 0), size=(str(x_width) + 'px', str(y_height) + 'px'), rx=10, ry=10, fill=background_colors[card_data['faction']]))
|
||||
dwg.add(dwg.rect(insert=(0, 0), size=(str(x_width) + 'px', str(y_height) + 'px'), rx=15, ry=18, fill='black'))
|
||||
dwg.add(dwg.rect(insert=(border_width_x, border_width_y - border_upper_offset), size=(str(x_width - border_width_x*2) + 'px', str(y_height - border_width_y*2 + border_upper_offset) + 'px'), rx=0, ry=0, fill=background_colors[card_data['faction']]))
|
||||
|
||||
# Draw title area
|
||||
dwg.add(dwg.rect(insert=(0, 0), size=(str(x_width) + 'px', '50px'), fill='white'))
|
||||
dwg.add(dwg.text(card_data['title'], insert=(130, 30), text_anchor='middle', fill='black', font_size='24px', font_weight="bold"))
|
||||
# dwg.add(dwg.rect(insert=(0, 0), size=(str(x_width) + 'px', '50px'), fill='white'))
|
||||
dwg.add(dwg.text(card_data['title'], insert=(x_width/2, title_y_offset + border_width_y - border_upper_offset), text_anchor='middle', fill='black', font_size=str(title_font_size) + 'px', font_weight="bold", font_family='Helvetica'))
|
||||
|
||||
# Draw type area
|
||||
dwg.add(dwg.text(card_data['type'], insert=(10, 70), fill='black', font_size='16px'))
|
||||
dwg.add(dwg.text(card_data['type'], insert=(x_width/2, title_y_offset + title_font_size + 10), text_anchor='middle', fill='black', font_size=str(subtitle_font_size) + 'px', font_family='Helvetica'))
|
||||
|
||||
# Draw faction icon
|
||||
dwg.add(dwg.circle(center=(border_width_x + 23 + 1, border_width_y - border_upper_offset + 20 + 4 + 1), r=20, fill='black'))
|
||||
dwg.add(dwg.circle(center=(border_width_x + 23, border_width_y - border_upper_offset + 20 + 4), r=20, fill='url(#grad2)'))
|
||||
# dwg.add(dwg.image(card_data['faction_icon'], insert=(x_width - 30 - 15, 30 - 15), size=(30, 30)))
|
||||
|
||||
# Draw cost circle
|
||||
dwg.add(dwg.circle(center=(x_width - 30, 25), r=20, fill='yellow'))
|
||||
dwg.add(dwg.text(str(card_data['cost']), insert=(x_width - 35, 32), fill='black', font_size='24px', font_weight="bold"))
|
||||
dwg.add(dwg.circle(center=(x_width - cost_right_offset + 2, 19 + border_width_y + 2), r=21, fill='rgb(202, 129, 25)'))
|
||||
dwg.add(dwg.circle(center=(x_width - cost_right_offset, 19 + border_width_y), r=20, fill='yellow'))
|
||||
dwg.add(dwg.text(str(card_data['cost']), insert=(x_width - cost_right_offset, 26 + border_width_y), text_anchor='middle', fill='black', font_size='24px', font_weight="bold", font_family='Helvetica'))
|
||||
|
||||
# Draw image area
|
||||
dwg.add(dwg.image(card_data['image_path'], insert=(0, 80), size=(x_width, 180)))
|
||||
dwg.add(dwg.rect(insert=(0, 65), size=(str(x_width) + 'px', '200px'), fill='black'))
|
||||
dwg.add(dwg.image(card_data['image_path'], insert=(0, 65), size=(x_width, 200)))
|
||||
|
||||
dwg.add(dwg.rect(insert=(border_width_x, 265), size=(str(30) + 'px', str(y_height - 265 - border_width_y) + 'px'), fill='url(#grad1)'))
|
||||
|
||||
# TODO: figure out nb of effects and adjust row_1_x_offset accordingly
|
||||
# Draw row 1 stats
|
||||
dwg.add(dwg.circle(center=(100, row_1_base_y + stats_radius), r=25, fill='red'))
|
||||
dwg.add(dwg.text(str(card_data['row_1']['damage']), insert=(100, row_1_base_y + stats_radius + 9), text_anchor='middle', fill='white', font_size='24px', font_weight="bold"))
|
||||
card_effects = card_data['row_1']
|
||||
row_1_nb_effects = len(card_data['row_1'].keys())
|
||||
|
||||
dwg.add(dwg.circle(center=(210, row_1_base_y + stats_radius), r=25, fill='green'))
|
||||
dwg.add(dwg.text(str(card_data['row_1']['heal']), insert=(210, row_1_base_y + stats_radius + 9), text_anchor='middle', fill='white', font_size='24px', font_weight="bold"))
|
||||
row_1_x_offset = -20
|
||||
row_1_x_step = 60
|
||||
if row_1_nb_effects == 1:
|
||||
row_1_x_offset = 0
|
||||
elif row_1_nb_effects == 2:
|
||||
row_1_x_offset = -20
|
||||
elif row_1_nb_effects == 3:
|
||||
row_1_x_offset = -40
|
||||
row_1_nb_effects_applied = 0
|
||||
|
||||
# Draw row 1 stats
|
||||
if card_effects.get('damage'):
|
||||
x_effect_pos = x_width/2 + row_1_x_offset + row_1_x_step*row_1_nb_effects_applied
|
||||
dwg.add(dwg.circle(center=(x_effect_pos, row_1_base_y + stats_radius), r=stats_radius, fill='red'))
|
||||
dwg.add(dwg.text(str(card_data['row_1']['damage']), insert=(x_effect_pos, row_1_base_y + stats_radius + 9), text_anchor='middle', fill='white', font_size='24px', font_weight="bold", font_family='Helvetica'))
|
||||
row_1_nb_effects_applied += 1
|
||||
|
||||
if card_effects.get('gold'):
|
||||
x_effect_pos = x_width/2 + row_1_x_offset + row_1_x_step*row_1_nb_effects_applied
|
||||
dwg.add(dwg.circle(center=(x_effect_pos, row_1_base_y + stats_radius), r=stats_radius, fill='yellow'))
|
||||
dwg.add(dwg.text(str(card_data['row_1']['gold']), insert=(x_effect_pos, row_1_base_y + stats_radius + 9), text_anchor='middle', fill='black', font_size='24px', font_weight="bold", font_family='Helvetica'))
|
||||
row_1_nb_effects_applied += 1
|
||||
|
||||
if card_effects.get('heal'):
|
||||
x_effect_pos = x_width/2 + row_1_x_offset + row_1_x_step*row_1_nb_effects_applied
|
||||
dwg.add(dwg.circle(center=(x_effect_pos, row_1_base_y + stats_radius), r=stats_radius, fill='green'))
|
||||
dwg.add(dwg.text(str(card_data['row_1']['heal']), insert=(x_effect_pos, row_1_base_y + stats_radius + 9), text_anchor='middle', fill='white', font_size='24px', font_weight="bold", font_family='Helvetica'))
|
||||
row_1_nb_effects_applied += 1
|
||||
|
||||
if card_data['row_2']:
|
||||
# Draw row 1 to row 2 separator
|
||||
dwg.add(dwg.line(start=(0 + row_1_to_2_separator_shorten_by, row_1_to_2_separator_y), end=(x_width - row_1_to_2_separator_shorten_by, row_1_to_2_separator_y), stroke='black', stroke_width=1))
|
||||
# Draw row 2 effect text
|
||||
dwg.add(dwg.text(card_data['row_2']['effect'], insert=(x_width/2, row_2_base_y), text_anchor='middle', fill='black', font_size='16px'))
|
||||
# If ally effect, draw ally icon (TODO condition)
|
||||
row_2_icon_x = border_width_x + 35
|
||||
row_2_icon_y = row_2_base_y - 5
|
||||
dwg.add(dwg.circle(center=(row_2_icon_x + 1, row_2_icon_y + 1), r=15, fill='black'))
|
||||
dwg.add(dwg.circle(center=(row_2_icon_x, row_2_icon_y), r=15, fill='url(#grad2)'))
|
||||
# dwg.add(dwg.image(card_data['faction_icon'], insert=(x_width - 30 - 15, 30 - 15), size=(30, 30)))
|
||||
dwg.add(dwg.text(card_data['row_2']['effect'], insert=(x_width/2, row_2_base_y), text_anchor='middle', fill='black', font_size=str(effect_text_size) + 'px', font_family='Helvetica'))
|
||||
|
||||
# Save the SVG file
|
||||
dwg.save()
|
||||
|
||||
Reference in New Issue
Block a user