Internal: Playing cards

assets/dev/js/frontend/elements-handlers-manager.js

@@ -24,6 +24,7 @@ module.exports = function( $ ) {
 		'image-carousel.default': () => import( /* webpackChunkName: 'image-carousel' */ './handlers/image-carousel' ),
 		'text-editor.default': () => import( /* webpackChunkName: 'text-editor' */ './handlers/text-editor' ),
 		'wp-widget-media_audio.default': () => import( /* webpackChunkName: 'wp-audio' */ './handlers/wp-audio' ),
+		'playing-cards.default': () => import( /* webpackChunkName: 'playing-cards' */ 'elementor/modules/playing-cards/assets/js/frontend/handlers/playing-cards-handler' ),
 	};
 
 	if ( elementorFrontendConfig.experimentalFeatures[ 'nested-elements' ] ) {

core/modules-manager.php

@@ -126,6 +126,7 @@ public function get_modules_names() {
 			'global-classes',
 			'wc-product-editor',
 			'checklist',
+			'playing-cards',
 		];
 	}
 

modules/playing-cards/assets/js/frontend/handlers/playing-cards-handler.js

@@ -0,0 +1,45 @@
+export default class PlayingCardHandler extends elementorModules.frontend.handlers.Base {
+	onInit() {
+		this.clickHandler = this.onClick.bind( this );
+		super.onInit();
+
+		this.elements = this.getDefaultElements();
+	}
+
+	getDefaultSettings() {
+		const cardItemPrefix = 'e-playing-cards-item';
+
+		return {
+			selectors: {
+				playingCardContainer: '.e-playing-cards',
+				playingCardItem: `.${ cardItemPrefix }`,
+			},
+			classes: {
+				playingCardBack: `${ cardItemPrefix }-back_suit`,
+			},
+		};
+	}
+
+	getDefaultElements() {
+		const { selectors } = this.getSettings();
+
+		return { $playingCardContainer: this.findElement( selectors.playingCardContainer ) };
+	}
+
+	bindEvents() {
+		this.elements.$playingCardContainer.on( 'click', this.clickHandler );
+	}
+
+	unbindEvents() {
+		this.elements.$playingCardContainer.off();
+	}
+
+	onClick( e ) {
+		const { selectors, classes } = this.getSettings();
+		const clickedCard = e.target.closest( selectors.playingCardItem );
+
+		if ( clickedCard ) {
+			clickedCard.classList.toggle( classes.playingCardBack );
+		}
+	}
+}

modules/playing-cards/assets/scss/frontend.scss

@@ -0,0 +1 @@
+@import "widgets/playing-cards";

modules/playing-cards/assets/scss/widgets/playing-cards.scss

@@ -0,0 +1,77 @@
+.e-playing-cards {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: var(--e-playing-cards-gap);
+
+	&-item {
+		width: var(--e-playing-card-width);
+		aspect-ratio: .5;
+		border-radius: var(--e-playing-card-border-radius);
+		border: 2px solid #ddd;
+		box-shadow: 1px 3px 5px rgba(184, 184, 184, 0.75);
+		transform-style: preserve-3d;
+		transition: transform 0.6s ease;
+		position: relative;
+
+		&.e-playing-cards-item-back_suit {
+			transform: rotateY(180deg);
+		}
+
+		&::before {
+			content: '';
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			border-radius: var(--e-playing-card-border-radius);
+			background: var(--e-playing-card-background-back-url) no-repeat center center;
+			background-size: cover;
+			backface-visibility: hidden;
+			transform: rotateY(180deg);
+		}
+
+		&-face {
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			align-items: center;
+			width: 100%;
+			height: 100%;
+			border-radius: var(--e-playing-card-border-radius);
+			background: linear-gradient(145deg, #f4f4f4, #e0e0e0);
+			backface-visibility: hidden;
+			position: absolute;
+			font-size: 3rem;
+			font-weight: bold;
+		}
+
+		&-top {
+			align-self: flex-start;
+		}
+
+		&-center {
+			font-size: 5rem;
+			font-weight: bold;
+			transition: color 0.3s ease, transform 0.3s ease;
+
+			&:hover {
+				transform: scale(1.1);
+				color: #007acc;
+			}
+		}
+
+		&-bottom {
+			align-self: flex-end;
+		}
+	}
+
+	.red_suit {
+		color: red;
+		text-shadow: 1px 1px 3px rgba(255, 0, 0, 0.5);
+	}
+
+	.black_suit {
+		color: black;
+		text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
+	}
+}

modules/playing-cards/module.php

@@ -0,0 +1,50 @@
+<?php
+namespace Elementor\Modules\PlayingCards;
+
+use Elementor\Core\Base\Module AS BaseModule;
+use Elementor\Plugin;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+class Module extends BaseModule {
+	public function get_name() {
+		return 'playing-cards';
+	}
+
+	protected function get_widgets() {
+		return [
+			'Playing_Cards',
+		];
+	}
+	public function __construct() {
+		parent::__construct();
+		add_action( 'elementor/frontend/after_register_scripts', [ $this, 'register_scripts' ] );
+		add_action( 'elementor/frontend/after_register_styles', [ $this, 'register_styles' ] );
+	}
+
+	public function register_styles() {
+		$direction_suffix = is_rtl() ? '-rtl' : '';
+		$has_custom_breakpoints = Plugin::$instance->breakpoints->has_custom_breakpoints();
+
+		$widget_style_name = 'widget-playing-cards';
+
+		wp_register_style(
+			$widget_style_name,
+			$this->get_frontend_file_url( "{$widget_style_name}{$direction_suffix}.min.css", $has_custom_breakpoints ),
+			[ 'elementor-frontend' ],
+			ELEMENTOR_VERSION
+		);
+	}
+
+	public function register_scripts() {
+		wp_register_script(
+			'playing-cards-frontend',
+			$this->get_js_assets_url( 'playing-cards' ),
+			[ 'elementor-frontend' ],
+			ELEMENTOR_VERSION,
+			true
+		);
+	}
+}