vesta/defiance
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

with svg design

Browse source
This commit is contained in:
vesta 2025-08-30 14:41:29 +02:00
parent 1489f28899
commit 627ddd0520
2 changed files with 225 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

96
html/main.html
View file

@ -32,7 +32,103 @@
</style>
</head>
<body class="bg-gray-900 text-white flex h-screen">
<svg width="0" height="0" style="position:absolute; display: none;">
<defs>
<!-- Asset Forêt -->
<g id="forest-svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="treeTrunk" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#8B4513;" />
<stop offset="100%" style="stop-color:#A0522D;" />
</linearGradient>
<linearGradient id="treeLeaves" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#2F855A;" />
<stop offset="100%" style="stop-color:#38A169;" />
</linearGradient>
</defs>
<!-- Arrière plan -->
<polygon points="50,60 65,85 35,85" fill="url(#treeTrunk)" />
<path d="M 50 20 L 80 65 L 20 65 Z" fill="url(#treeLeaves)"/>
<!-- Premier plan -->
<polygon points="30,70 40,90 20,90" fill="url(#treeTrunk)" />
<path d="M 30 40 L 55 75 L 5 75 Z" fill="url(#treeLeaves)"/>
<polygon points="70,70 80,90 60,90" fill="url(#treeTrunk)" />
<path d="M 70 40 L 95 75 L 45 75 Z" fill="url(#treeLeaves)"/>
</g>
<!-- Asset Ville -->
<g id="city-svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="stoneGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#A9A9A9;" />
<stop offset="100%" style="stop-color:#696969;" />
</linearGradient>
<linearGradient id="stoneShadowGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#808080;" />
<stop offset="100%" style="stop-color:#4A5568;" />
</linearGradient>
</defs>
<!-- Muraille -->
<path d="M 10 95 L 15 70 L 85 70 L 90 95 Z" fill="url(#stoneShadowGradient)" stroke="#1A202C" stroke-width="2" />
<!-- Crénaux muraille -->
<path d="M 15 70 L 15 65 L 25 65 L 25 70 L 35 70 L 35 65 L 45 65 L 45 70 L 55 70 L 55 65 L 65 65 L 65 70 L 75 70 L 75 65 L 85 65 L 85 70 Z" fill="url(#stoneShadowGradient)" stroke="#1A202C" stroke-width="1.5"/>
<!-- Tour gauche -->
<rect x="20" y="30" width="20" height="40" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/>
<rect x="18" y="25" width="24" height="5" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/>
<!-- Tour droite -->
<rect x="60" y="30" width="20" height="40" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/>
<rect x="58" y="25" width="24" height="5" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/>
<!-- Donjon central -->
<rect x="40" y="15" width="20" height="55" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/>
<path d="M 38 15 L 38 10 L 43 10 L 43 15 L 48 15 L 48 10 L 53 10 L 53 15 L 58 15 L 58 10 L 63 10 L 63 15 Z" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="1.5"/>
</g>
<!-- Asset Village -->
<g id="village-svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="woodGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#A0522D;" />
<stop offset="100%" style="stop-color:#8B4513;" />
</linearGradient>
<linearGradient id="thatchGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#D4A373;" />
<stop offset="100%" style="stop-color:#A0522D;" />
</linearGradient>
</defs>
<!-- Maison principale -->
<rect x="20" y="50" width="60" height="45" fill="url(#woodGradient)" stroke="#1A202C" stroke-width="2"/>
<polygon points="15,50 85,50 50,20" fill="url(#thatchGradient)" stroke="#1A202C" stroke-width="2"/>
<!-- Petite maison derrière -->
<rect x="65" y="60" width="25" height="35" fill="#8B4513" stroke="#1A202C" stroke-width="1.5"/>
<polygon points="62,60 93,60 77.5,40" fill="#A0522D" stroke="#1A202C" stroke-width="1.5"/>
<!-- Fenêtre -->
<rect x="45" y="65" width="10" height="10" fill="#2D3748"/>
</g>
<!-- Asset Joueur (Loup) -->
<g id="player-svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="wolfFurGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#A0AEC0;" />
<stop offset="100%" style="stop-color:#718096;" />
</linearGradient>
<linearGradient id="wolfShadowGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#4A5568;" />
<stop offset="100%" style="stop-color:#2D3748;" />
</linearGradient>
</defs>
<path d="M 50 20 L 90 50 L 80 95 L 20 95 L 10 50 Z" fill="url(#wolfFurGradient)" />
<path d="M 50 20 L 70 55 L 50 65 L 30 55 Z" fill="url(#wolfShadowGradient)" />
<path d="M 25 52 L 10 30 L 35 40 Z" fill="#A0AEC0" stroke="#2D3748" stroke-width="1.5"/>
<path d="M 75 52 L 90 30 L 65 40 Z" fill="#A0AEC0" stroke="#2D3748" stroke-width="1.5"/>
<path d="M 35 55 Q 40 52 45 55 Q 40 58 35 55 Z" fill="#FBBF24" />
<path d="M 65 55 Q 60 52 55 55 Q 60 58 65 55 Z" fill="#FBBF24" />
<circle cx="39" cy="55" r="1.5" fill="black" />
<circle cx="61" cy="55" r="1.5" fill="black" />
</g>
</defs>
</svg>
<!-- Panneau d'information Desktop -->
<div id="desktop-panel" class="w-1/4 max-w-sm p-6 bg-gray-800 shadow-lg overflow-y-auto flex-col hidden md:flex">
<h1 class="text-2xl font-bold mb-4 text-cyan-400">defiance v0.12.1</h1>