memoryGameLwc.html

<template>
    <div class="container">
        <lightning-card title="Memory Game">
            <div class="slds-var-p-around_medium">
                <section class="score-panel">
                    <span class="moves">{moves}</span> Move(s)
                    <div class="timer">{totalTime}</div>
                    <div class="restart" onclick={shuffle}>
                        <i class="fa fa-repeat" aria-hidden="true"></i>
                    </div>
                </section>
                <section class="game-panel">
                   <ul class="deck card-deck grid-container">
                       <template for:each={cards} for:item="card">
                           <li class={card.listClass} type={card.type} key={card.id} onclick={displayCard}>
                               <i class={card.icon}></i>
                           </li>
                       </template>
                   </ul>
                   <template if:true={showCongratulations}>
                    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                        <div class="slds-modal__container">
                        <header class="slds-modal__header">
                            <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">!!! Congratulations !!!
                            </h2>
                        </header>
                        <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                            <p>You made <strong>{moves}</strong> moves in {totalTime}</p>
                            <p>Your rating:
                                <template for:each={gameRating} for:item="rating">
                                    <i class="fa fa-star" key={rating}></i>
                                </template>
                            </p>
                        </div>
                        <footer class="slds-modal__footer">
                        <button class="slds-button slds-button_brand" onclick={shuffle}>Play Again</button>
                        </footer>
                        </div>
                        </section>
                        <div class="slds-backdrop slds-backdrop_open"></div>
                   </template>
                   
                </section>
            </div>
        </lightning-card>
    </div>
</template>