diff --git a/app/public/background/tower.png b/app/public/background/tower.png
index b823a92..cb7352c 100644
Binary files a/app/public/background/tower.png and b/app/public/background/tower.png differ
diff --git a/app/public/roles/alchemist.svg b/app/public/roles/alchemist.svg
new file mode 100644
index 0000000..ae80b21
--- /dev/null
+++ b/app/public/roles/alchemist.svg
@@ -0,0 +1,545 @@
+
diff --git a/app/public/roles/archer.svg b/app/public/roles/archer.svg
new file mode 100644
index 0000000..94c7e35
--- /dev/null
+++ b/app/public/roles/archer.svg
@@ -0,0 +1,469 @@
+
diff --git a/app/public/roles/cleric.svg b/app/public/roles/cleric.svg
new file mode 100644
index 0000000..c2a0e18
--- /dev/null
+++ b/app/public/roles/cleric.svg
@@ -0,0 +1,648 @@
+
diff --git a/app/public/roles/druid.svg b/app/public/roles/druid.svg
new file mode 100644
index 0000000..639b349
--- /dev/null
+++ b/app/public/roles/druid.svg
@@ -0,0 +1,822 @@
+
diff --git a/app/public/roles/dwarf.svg b/app/public/roles/dwarf.svg
new file mode 100644
index 0000000..247715f
--- /dev/null
+++ b/app/public/roles/dwarf.svg
@@ -0,0 +1,727 @@
+
diff --git a/app/public/roles/healer.svg b/app/public/roles/healer.svg
new file mode 100644
index 0000000..bc17e06
--- /dev/null
+++ b/app/public/roles/healer.svg
@@ -0,0 +1,465 @@
+
diff --git a/app/public/roles/hunter.svg b/app/public/roles/hunter.svg
new file mode 100644
index 0000000..2563bb6
--- /dev/null
+++ b/app/public/roles/hunter.svg
@@ -0,0 +1,1207 @@
+
diff --git a/app/public/roles/monk.svg b/app/public/roles/monk.svg
new file mode 100644
index 0000000..887585d
--- /dev/null
+++ b/app/public/roles/monk.svg
@@ -0,0 +1,439 @@
+
diff --git a/app/public/roles/necromancer.svg b/app/public/roles/necromancer.svg
new file mode 100644
index 0000000..1fad459
--- /dev/null
+++ b/app/public/roles/necromancer.svg
@@ -0,0 +1,573 @@
+
diff --git a/app/public/roles/paladin.svg b/app/public/roles/paladin.svg
new file mode 100644
index 0000000..1c22da1
--- /dev/null
+++ b/app/public/roles/paladin.svg
@@ -0,0 +1,727 @@
+
diff --git a/app/public/roles/ranger.svg b/app/public/roles/ranger.svg
new file mode 100644
index 0000000..508dd22
--- /dev/null
+++ b/app/public/roles/ranger.svg
@@ -0,0 +1,747 @@
+
diff --git a/app/public/roles/rogue.svg b/app/public/roles/rogue.svg
new file mode 100644
index 0000000..5463a79
--- /dev/null
+++ b/app/public/roles/rogue.svg
@@ -0,0 +1,608 @@
+
diff --git a/app/public/roles/scribe.svg b/app/public/roles/scribe.svg
new file mode 100644
index 0000000..a845af7
--- /dev/null
+++ b/app/public/roles/scribe.svg
@@ -0,0 +1,712 @@
+
diff --git a/app/public/roles/tavern-keeper.svg b/app/public/roles/tavern-keeper.svg
new file mode 100644
index 0000000..a89abfe
--- /dev/null
+++ b/app/public/roles/tavern-keeper.svg
@@ -0,0 +1,660 @@
+
diff --git a/app/public/roles/warrior.svg b/app/public/roles/warrior.svg
new file mode 100644
index 0000000..e382eac
--- /dev/null
+++ b/app/public/roles/warrior.svg
@@ -0,0 +1,527 @@
+
diff --git a/app/public/roles/wizard.svg b/app/public/roles/wizard.svg
new file mode 100644
index 0000000..bd9c9d9
--- /dev/null
+++ b/app/public/roles/wizard.svg
@@ -0,0 +1,542 @@
+
diff --git a/app/src/components/Background.tsx b/app/src/components/Background.tsx
index 74d0660..74605ff 100644
--- a/app/src/components/Background.tsx
+++ b/app/src/components/Background.tsx
@@ -8,9 +8,8 @@ const Background = () => {
-
-
+
}
diff --git a/app/src/styles/Background.module.css b/app/src/styles/Background.module.css
index b01acf3..40b1cd7 100644
--- a/app/src/styles/Background.module.css
+++ b/app/src/styles/Background.module.css
@@ -4,10 +4,8 @@
height: 100%;
border-width: 8px;
border-image: url("/background/frame.png") 22 fill / auto space;
- width: 100%;
- max-width: 720px;
- height: 100vh;
- z-index: -1;
+ width: 720px;
+ height: 960px;
}
.background_asset {
@@ -52,18 +50,33 @@
height: 240px;
top: 200px;
animation: thunder_hue_hard 12s linear infinite;
+ transition: all ease-in-out 0.2s;
+ &:hover {
+ cursor: pointer;
+ transform: scale(1.05, 1.1);
+ transform-origin: bottom center;
+ &::after {
+ text-shadow: #0f0 1px 1px 10px;
+ animation: excited 0.5s infinite linear;
+ }
+ }
+ &:active {
+ transform: scale(1.1, 1.22);
+ }
}
+.tower::after {
+ position: absolute;
+ content: "RAID";
+ left: 50px;
+ top: 22px;
+}
+
.mountains {
background-image: url("/background/mountains.png");
height: 181px;
top: 285px;
animation: thunder_hue 12s linear infinite;
-}
-.forest {
- background-image: url("/background/forest.png");
-}
-.road {
- background-image: url("/background/road.png");
+ pointer-events: none;
}
.village {
background-image: url("/background/village.png");
@@ -81,6 +94,66 @@
bonfire 12s linear infinite,
bonfire_skew 5s infinite linear;
}
+.person {
+ position: absolute;
+ width: 80px;
+ height: 80px;
+ background-size: contain;
+ background-position: bottom center;
+ background-repeat: no-repeat;
+}
+.tavern_keeper {
+ background-image: url("/roles/tavern-keeper.svg");
+}
+.alchemist {
+ background-image: url("/roles/alchemist.svg");
+}
+.archer {
+ background-image: url("/roles/archer.svg");
+}
+.cleric {
+ background-image: url("/roles/cleric.svg");
+}
+.druid {
+ background-image: url("/roles/druid.svg");
+}
+.dwarf {
+ background-image: url("/roles/dwarf.svg");
+}
+.monk {
+ background-image: url("/roles/monk.svg");
+}
+.necromancer {
+ background-image: url("/roles/necromancer.svg");
+}
+.paladin {
+ background-image: url("/roles/paladin.svg");
+}
+.ranger {
+ background-image: url("/roles/ranger.svg");
+}
+.rogue {
+ background-image: url("/roles/rogue.svg");
+}
+.scribe {
+ background-image: url("/roles/scribe.svg");
+}
+.warrior {
+ background-image: url("/roles/warrior.svg");
+}
+.wizard {
+ background-image: url("/roles/wizard.svg");
+}
+.healer {
+ background-image: url("/roles/healer.svg");
+}
+.hunter {
+ background-image: url("/roles/hunter.svg");
+}
+.static_keeper {
+ right: 130px;
+ bottom: 160px;
+}
@keyframes scrollBackground {
0% {
@@ -196,3 +269,16 @@
transform: scale(1.02, 1.03) skew(0deg, -1deg);
}
}
+
+@keyframes excited {
+ 0%,
+ 100% {
+ transform: scale(1, 1) skew(0deg, 0deg);
+ }
+ 10% {
+ transform: scale(1.2, 1.2) skew(0.5deg, -0.5deg);
+ }
+ 90% {
+ transform: scale(1.02, 1.03) skew(0deg, -1deg);
+ }
+}
diff --git a/app/src/styles/Header.module.css b/app/src/styles/Header.module.css
index 2347a78..a804f07 100644
--- a/app/src/styles/Header.module.css
+++ b/app/src/styles/Header.module.css
@@ -1,5 +1,7 @@
.header {
+ position: relative;
margin-top: 5rem;
+ z-index: 1;
}
.title {
font-size: 1.5rem;
diff --git a/app/src/styles/Home.module.css b/app/src/styles/Home.module.css
index a279521..b58b128 100644
--- a/app/src/styles/Home.module.css
+++ b/app/src/styles/Home.module.css
@@ -3,6 +3,7 @@
}
.connect {
+ z-index: 1;
position: absolute;
top: 2rem;
right: 2rem;