Anmelde-Modal

javascript/script.js

@@ -8,3 +8,8 @@
  * For esbuild documentation, please see:
  * https://esbuild.github.io/
  */
+import Alpine from 'alpinejs'
+ 
+window.Alpine = Alpine
+ 
+Alpine.start()

package-lock.json

@@ -4,6 +4,9 @@
 	"requires": true,
 	"packages": {
 		"": {
+			"dependencies": {
+				"alpinejs": "^3.13.8"
+			},
 			"devDependencies": {
 				"@_tw/themejson": "^0.2.0",
 				"@_tw/typography": "^0.5.10",
@@ -792,6 +795,19 @@
 			"integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
 			"dev": true
 		},
+		"node_modules/@vue/reactivity": {
+			"version": "3.1.5",
+			"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
+			"integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
+			"dependencies": {
+				"@vue/shared": "3.1.5"
+			}
+		},
+		"node_modules/@vue/shared": {
+			"version": "3.1.5",
+			"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
+			"integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA=="
+		},
 		"node_modules/@wordpress/prettier-config": {
 			"version": "3.5.0",
 			"resolved": "https://registry.npmjs.org/@wordpress/prettier-config/-/prettier-config-3.5.0.tgz",
@@ -856,6 +872,14 @@
 				"url": "https://github.com/sponsors/epoberezkin"
 			}
 		},
+		"node_modules/alpinejs": {
+			"version": "3.13.8",
+			"resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.13.8.tgz",
+			"integrity": "sha512-XolbBJryCndomtaHd/KHQjQeD/L72FJxy/YhLLFD4Lr7zzGcpcbg+UgXteMR2pYg1KhRUr6V4O3GfN1zJAmRWw==",
+			"dependencies": {
+				"@vue/reactivity": "~3.1.1"
+			}
+		},
 		"node_modules/ansi-regex": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",

package.json

@@ -54,5 +54,8 @@
 		"zip": "node node_scripts/zip.js wowpress",
 		"bundle": "run-s production zip"
 	},
-	"prettier": "@wordpress/prettier-config"
+	"prettier": "@wordpress/prettier-config",
+	"dependencies": {
+		"alpinejs": "^3.13.8"
+	}
 }

tailwind/custom/components/buttons.css

@@ -2,12 +2,13 @@
 
 .btn{
     @apply p-3 flex flex-row items-center justify-center gap-2 border;
-    border-color: white;
+    border-color: color-mix(in srgb, var(--btn-color) 80%, white);
     background-color: var(--btn-color);
-    color: white;
+    color: black;
     &:hover, &.current-menu-item, &.current-page-item, &.current-menu-ancestor ,&.current-menu-parent{
         @apply bg-glass;
         border-color: color-mix(in srgb, var(--btn-color) 80%, black);
+        color: var(--btn-color);
     }
 }
 
@@ -31,20 +32,3 @@ nav{
 .nav-btn{
     @apply btn btn-outline;
 }
-
-.btn-druid{
-        --btn-color: var(--wp--preset--color--druid);
-}
-
-.btn-deathknight{
-        --btn-color: var(--wp--preset--color--deathknight);
-}
-
-.btn-shaman{
-    --btn-color: var(--wp--preset--color--shaman);
-}
-
-
-.btn-hunter{
-    --btn-color: var(--wp--preset--color--hunter);
-}

tailwind/tailwind.css

@@ -51,6 +51,9 @@
   --color-shaman: #0070DD;
   --color-warlock: #8788EE;
   --color-warrior: #C69B6D;
+  --color-deepblue: #000032;
+  --color-background: var(--color-deepblue);
+  --color-glass:color-mix(in lch, transparent 75%, var(--color-background) );
 }
 
 .p-auto{
@@ -63,14 +66,14 @@
 
 body {
     background-color: unset;
-    --body-bg: url('https://nebelkrieger.de/wp-content/uploads/2023/05/F8lCEpyWoAAFCFS-scaled.jpg');
+    --body-bg: url('https://bnetcmsus-a.akamaihd.net/cms/blog_header/3i/3ITOIMA3P61U1699028715242.png');
     position: relative;
 z-index: -10;
     @apply min-h-screen;
 }
 
 .bg-glass {
-    background-color: rgba(0, 0, 50, 0.4);
+    background-color: var(--color-glass);
     backdrop-filter: blur(10px);
 }
 
@@ -97,11 +100,6 @@ body:before {
 }
 
 
-header#masthead {
-    @apply bg-glass;
-}
-
-
 
 .content-wrapper {
     position: relative;

theme/components/class-button.php

@@ -0,0 +1,3 @@
+<?php
+?>
+<button class="btn btn-<?=$this->color?> w-full"><img src="<?=$this->classIcon?>" class="h-8"><?=$this->name?></button>

theme/components/raid-signup.php

@@ -0,0 +1,99 @@
+<?php
+
+use WoWPress\Frontend\Icon;
+use WoWPress\Frontend\ToggleButton;
+
+?>
+
+<div class="flex flex-row" x-data="{open : false}">
+    <button x-on:click="open = true" class="btn btn-<?= $character->color ?> w-full"><img src="<?= $character->classIcon ?>" class="h-8"><?= $character->name ?></button>
+    <div class="border border-<?= $character->color ?> flex flex-row text-slate-500 items-center justify-center p-auto border-s-0"><?= Icon::get('o-minus-circle') ?></div>
+    <div class="border border-<?= $character->color ?> flex flex-row text-slate-500 items-center justify-center p-auto border-s-0"><?= Icon::get('o-minus-circle') ?></div>
+    <template x-teleport="body">
+        <div x-show="open" class="fixed inset-0 px-2 z-10 overflow-hidden flex items-center justify-center">
+            <div x-show="open" x-on:click="open = false" x-transition:enter="transition-opacity ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-in duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+            <!-- Modal Content -->
+            <div x-show="open" x-transition:enter="transition-transform ease-out duration-300" x-transition:enter-start="transform scale-75" x-transition:enter-end="transform scale-100" x-transition:leave="transition-transform ease-in duration-300" x-transition:leave-start="transform scale-100" x-transition:leave-end="transform scale-75" class="bg-glass shadow overflow-hidden max-w-md w-full sm:w-96 md:w-1/2 lg:w-2/3 xl:w-1/3 z-50">
+                <!-- Modal Body -->
+                <div class="grid grid-cols-2 gap-auto p-auto">
+                    <button class="col-span-2 btn btn-<?= $character->color ?> w-full"><img src="<?= $character->classIcon ?>" class="h-8"><?= $character->name ?></button>
+                    <div class="col-span-2 text-center">Anwesenheit</div>
+                    <?= (new ToggleButton([
+                        'type' => 'radio',
+                        'name' => 'raid_status',
+                        'text' => 'Anwesend',
+                        'color' => 'monk',
+                        'icon_yes' => 'o-check-circle',
+                        'checked' => true,
+                        'row' => false,
+                    ]))->render() ?>
+                    <?= (new ToggleButton([
+                        'type' => 'radio',
+                        'name' => 'raid_status',
+                        'text' => 'Abwesend',
+                        'color' => 'deathknight',
+                        'icon_yes' => 'o-x-circle',
+                        'row' => false,
+                    ]))->render() ?>
+                    <?= (new ToggleButton([
+                        'type' => 'radio',
+                        'name' => 'raid_status',
+                        'text' => 'Ersatzbank',
+                        'color' => 'druid',
+                        'icon_yes' => 'o-question-mark-circle',
+                        'row' => false,
+                    ]))->render() ?>
+                    <?= (new ToggleButton([
+                        'type' => 'radio',
+                        'name' => 'raid_status',
+                        'text' => 'Verspätet',
+                        'color' => 'demonhunter',
+                        'icon_yes' => 'o-clock',
+                        'row' => false,
+                    ]))->render() ?>
+                    <div class="col-span-2 text-center">Rolle</div>
+                    <?= (new ToggleButton([
+                        'type' => 'radio',
+                        'name' => 'raid_role',
+                        'text' => 'Tank',
+                        'color' => 'priest',
+                        'icon_yes' => 'o-shield-exclamation',
+                        'row' => false,
+                    ]))->render() ?>
+                    <?= (new ToggleButton([
+                        'type' => 'radio',
+                        'name' => 'raid_role',
+                        'text' => 'Heal',
+                        'color' => 'priest',
+                        'icon_yes' => 'o-heart',
+                        'row' => false,
+                    ]))->render() ?>
+                    <?= (new ToggleButton([
+                        'type' => 'radio',
+                        'name' => 'raid_role',
+                        'text' => 'Ranged',
+                        'color' => 'priest',
+                        'icon_yes' => 'o-bolt',
+                        'checked' => true,
+                        'row' => false,
+                    ]))->render() ?>
+                    <?= (new ToggleButton([
+                        'type' => 'radio',
+                        'name' => 'raid_role',
+                        'text' => 'Melee',
+                        'color' => 'priest',
+                        'icon_yes' => 'o-hand-raised',
+                        'row' => false,
+                    ]))->render() ?>
+                </div>
+                <!-- Modal Footer -->
+                <div class="border-t p-auto">
+                    <button x-on:click="open = false" class="btn btn-outline btn-monk w-full">
+                        <?= Icon::get('o-paper-airplane') ?>
+                        <span>Status Speichern</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </template>
+</div>

theme/header.php

@@ -21,6 +21,11 @@
 	<link rel="profile" href="https://gmpg.org/xfn/11">
 	<script src="<?= get_template_directory_uri() ?>/plugins/alpine.min.js" defer></script>
 	<?php wp_head(); ?>
+	<style>
+		:root{
+			--color-background: var(--color-deepblue);
+		}
+	</style>
 </head>
 
 <body <?php body_class('dark'); ?>>

theme/pages/raids.php

@@ -9,6 +9,7 @@ global $month;
 set_sidebar_status('top', false);
 
 
+
 $raids = Raid::where("start", ">", "$year-$month-01 00:00:00")->get();
 
 get_header();

theme/pages/single_raid.php

@@ -2,6 +2,7 @@
 
 use WoWPress\Frontend\Icon;
 use WoWPress\Frontend\ToggleButton;
+use WoWPress\Models\Character;
 use WoWPress\Models\Raid;
 
 
@@ -28,6 +29,19 @@ get_header();
     <main id="main">
         <div class="flex flex-col lg:flex-row gap-auto">
             <div class="bg-glass shadow p-auto w-full lg:w-1/5 order-2 lg:order-1">
+                <h3 class="text-xl font-bold text-center">Bosse</h3>
+                <div class="grid gap-auto">
+                    <button class="btn btn-outline btn-alliance">Alle</button>
+                    <button class="btn btn-outline btn-priest">Fahrs'tuhl der Raidzerstörer</button>
+                    <button class="btn btn-outline btn-priest">Hogger</button>
+                    <button class="btn btn-outline btn-priest">Sylvanas linker Zeh</button>
+                    <button class="btn btn-outline btn-priest">RC Loot Council (Endboss)</button>
+
+                </div>
+            </div>
+            <div class="w-full flex flex-col gap-auto order-3 lg:order-2">
+                <div class="flex flex-col lg:flex-row gap-auto">
+                    <div class="bg-glass shadow p-auto w-full lg:w-1/5">
                         <div class="grid text-center gap-1">
                             <div class="bg-<?= $raid->color ?> text-black text-2xl "><?= format_date($raid->start, "EEEE") ?></div>
                             <div class="border border-<?= $raid->color ?>">
@@ -40,131 +54,47 @@ get_header();
                             <?php endif; ?>
                         </div>
                     </div>
-            <div class="w-full flex flex-col gap-auto order-3 lg:order-2">
+                    <div class="bg-glass shadow p-auto w-full">
-                <div class="bg-glass shadow p-auto">
                         <h3 class="text-xl font-bold">Informationen:</h3>
-                </div>
-                <div class="flex flex-col lg:flex-row gap-auto">
-                    <div class="bg-glass shadow p-auto flex flex-col gap-auto">
-                        <h3 class="text-xl font-bold text-center">Bosse</h3>
-                        <div class="grid gap-auto">
-                            <button class="btn btn-outline btn-alliance">Alle</button>
-                            <button class="btn btn-outline btn-priest">Fahrs'tuhl der Raidzerstörer</button>
-                            <button class="btn btn-outline btn-priest">Hogger</button>
-                            <button class="btn btn-outline btn-priest">Sylvanas linker Zeh</button>
-                            <button class="btn btn-outline btn-priest">RC Loot Council (Endboss)</button>
 
                     </div>
                 </div>
+
+
+                <div class="flex flex-col lg:flex-row gap-auto">
                     <div class="w-full grid grid-cols-1 lg:grid-cols-4 gap-auto">
                         <div class="bg-glass shadow p-auto flex flex-col gap-auto">
                             <h3 class="text-xl font-bold text-center">Tank</h3>
-                            <button class="btn btn-outline btn-deathknight">Zauron</button>
+
-                            <button class="btn btn-outline btn-paladin">Moodyblues</button>
 
                         </div>
                         <div class="bg-glass shadow p-auto flex flex-col gap-auto">
                             <h3 class="text-xl font-bold text-center">Heal</h3>
-                            <button class="btn btn-outline btn-monk">Pandacetamol</button>
+                            <?= $raid->showSignup(Character::whereName('Pandacetamol')->first()) ?>
-                            
                         </div>
                         <div class="bg-glass shadow p-auto flex flex-col gap-auto">
                             <h3 class="text-xl font-bold text-center">Range</h3>
-                            <button class="btn btn-outline btn-hunter">Bleihagel</button>
+                            <?= $raid->showSignup(Character::whereName('Bleihagel')->first()) ?>
+
+
 
                         </div>
                         <div class="bg-glass shadow p-auto flex flex-col gap-auto">
                             <h3 class="text-xl font-bold text-center">Melee</h3>
-                            <button class="btn btn-outline btn-shaman">Yorndar</button>
+                            <?= $raid->showSignup(Character::whereName('Moodyblues')->first()) ?>
+
 
                         </div>
                     </div>
                 </div>
             </div>
             <div class="flex flex-col gap-auto w-full lg:w-1/5 order-1 lg:order-3">
-                <div class="bg-glass shadow p-auto flex flex-col gap-auto">
+                <div class="bg-glass shadow p-auto">
+                    <div class="flex flex-col gap-auto">
                         <h3 class="text-xl font-bold text-center">Status</h3>
-                    <div class="text-center text-monk flex flex-row gap-auto justify-center p-auto border border-monk">
+                        <?= $raid->showSignup(Character::first()) ?>
-                        <?= Icon::get('c-check') ?>
-                        <span>Angemeldet</span>
                     </div>
                 </div>
-
-                <div class="bg-glass shadow p-auto flex flex-col gap-auto">
-                    <h3 class="text-xl font-bold text-center">Status ändern</h3>
-                    <div class="grid grid-cols-2 gap-auto">
-                        <div class="col-span-2 text-center">Anwesenheit</div>
-                        <?= (new ToggleButton([
-                            'type' => 'radio',
-                            'name' => 'raid_status',
-                            'text' => 'Anwesend',
-                            'color' => 'monk',
-                            'icon_yes' => 'o-check-circle',
-                            'row' => false,
-                        ]))->render() ?>
-                        <?= (new ToggleButton([
-                            'type' => 'radio',
-                            'name' => 'raid_status',
-                            'text' => 'Abwesend',
-                            'color' => 'deathknight',
-                            'icon_yes' => 'o-x-circle',
-                            'row' => false,
-                        ]))->render() ?>
-                        <?= (new ToggleButton([
-                            'type' => 'radio',
-                            'name' => 'raid_status',
-                            'text' => 'Ersatzbank',
-                            'color' => 'druid',
-                            'icon_yes' => 'o-question-mark-circle',
-                            'row' => false,
-                        ]))->render() ?>
-                        <?= (new ToggleButton([
-                            'type' => 'radio',
-                            'name' => 'raid_status',
-                            'text' => 'Verspätet',
-                            'color' => 'demonhunter',
-                            'icon_yes' => 'o-clock',
-                            'row' => false,
-                        ]))->render() ?>
-                        <div class="col-span-2 text-center">Rolle</div>
-                        <?= (new ToggleButton([
-                            'type' => 'radio',
-                            'name' => 'raid_role',
-                            'text' => 'Tank',
-                            'color' => 'priest',
-                            'icon_yes' => 'o-shield-exclamation',
-                            'row' => false,
-                        ]))->render() ?>
-                        <?= (new ToggleButton([
-                            'type' => 'radio',
-                            'name' => 'raid_role',
-                            'text' => 'Heal',
-                            'color' => 'priest',
-                            'icon_yes' => 'o-heart',
-                            'row' => false,
-                        ]))->render() ?>
-                        <?= (new ToggleButton([
-                            'type' => 'radio',
-                            'name' => 'raid_role',
-                            'text' => 'Ranged',
-                            'color' => 'priest',
-                            'icon_yes' => 'o-bolt',
-                            'row' => false,
-                        ]))->render() ?>
-                        <?= (new ToggleButton([
-                            'type' => 'radio',
-                            'name' => 'raid_role',
-                            'text' => 'Melee',
-                            'color' => 'priest',
-                            'icon_yes' => 'o-hand-raised',
-                            'row' => false, 
-                        ]))->render() ?>
-                    </div>
-                    <button class="btn btn-outline btn-monk">
-                        <?=Icon::get('o-paper-airplane')?>
-                        <span>Status Speichern</span>
-                    </button>
-                </div>
             </div>
         </div>
         <div class="w-full order-4 bg-glass shadow p-auto flex flex-col gap-auto">

theme/template-parts/layout/header-content.php

@@ -10,7 +10,8 @@
 
 ?>
 
-<header id="masthead">
+<header id="masthead" class="bg-glass">
+
 
 	<div>
 		<?php

theme/wowpress/Models/Character.php

@@ -114,4 +114,9 @@ class Character extends Model
         }
         
     }
+
+
+    public function getClassButtonAttribute(){
+        require(get_template_directory()."/components/class-button.php");
+    }
 }

theme/wowpress/Models/Raid.php

@@ -67,4 +67,8 @@ class Raid extends Model
         return false;
     }
 
+    public function showSignup(Character $character){
+        require(get_template_directory()."/components/raid-signup.php");
+    }
+
 }