Using AlpineJS for Scoring App

I’m working on building a score app for playing straight pool as a Laravel app. So far I’m able to count a players score for a single rack. However, there are still a few things I’d like to do that I’ve not learned yet.

  • I’d like the current rack count to stop at 1 (no negative numbers) which activates the re-rack button and resets the current rack score back to 0.
  • Each time re-rack is pressed I would like the score to add be added to whatever total is at the bottom. So if the players play a race to 100 balls I would want it to keep up with it as they go.

Currently I’m counting in 3 locations (lines 31 & 32, 58 & 60, 65 & 66). Some how I need to figure out how to add lines 58 & 60 to 65 & 66 each time the player presses re-rack in order to keep a cumulative score. I’m stuck on how to figure that out and how it ties together with the re-rack button.

Could someone provide some guidance on how I might tackle the items above? I also may not being doing this in the most efficient way and open to a better approach with using AlpineJS.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>14-1</title>

        <link rel="stylesheet" href="{{ asset('css/app.css') }}">

        <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    </head>
    <body class="font-sans text-white bg-gray-900 max-w-3xl mx-auto">
        <div
            x-data="{
                countPlayerOne: 0,
                countPlayerTwo: 0,
                startCount: 15,
                }"
            class="container text-center items-center">

            <div class="grid grid-cols-2">
                <div class="text-5xl border border-yellow-500 p-4">Sam</div>
                <div class="text-5xl border border-yellow-500 p-4">Alan</div>
            </div>

            <div class="text-3xl mt-4">Pocketed This Rack</div>

            <div class="grid grid-cols-2 text-8xl pt-4">
                <div x-text="countPlayerOne" class="border border-yellow-500 gap-4"></div>
                <div x-text="countPlayerTwo" class="border border-yellow-500 gap-4"></div>
            </div>

            <div class="grid grid-cols-4 text-5xl pt-4">
                <button @click="countPlayerOne--" class="border border-yellow-500 p-4">-</button>
                <button @click="countPlayerOne++" class="border border-yellow-500 p-4">+</button>
                <button @click="countPlayerTwo--" class="border border-yellow-500 p-4">-</button>
                <button @click="countPlayerTwo++" class="border border-yellow-500 p-4">+</button>
            </div>

            <div class="grid grid-cols-2 text-5xl pt-4">
                <div class="border border-yellow-500 p-4">Foul</div>
                <div class="border border-yellow-500 p-4">Foul</div>
            </div>

            <div class="text-3xl mt-4">Balls Remaining on Table:</div>

            <div x-text="startCount - countPlayerOne - countPlayerTwo" class="text-8xl pt-4"></div>

            <div class="grid grid-cols-1 text-5xl mt-4">
                <button @click="countPlayerOne = 0" class="bg-green-500 p-4">ReRack</button>
            </div>

            <div class="grid grid-cols-3 text-4xl mt-4">
                <div x-text="countPlayerOne"></div>
                <div>Prior Rack Total</div>
                <div x-text="countPlayerTwo"></div>
            </div>

            <div class="grid grid-cols-2 text-8xl pt-4">
                <div x-text="countPlayerOne" class="border border-yellow-500 gap-4"></div>
                <div x-text="countPlayerTwo" class="border border-yellow-500 gap-4"></div>
            </div>

            <div class="grid grid-cols-4 text-5xl pt-4">
                <button @click="" class="border border-yellow-500 p-4">-</button>
                <button @click="" class="border border-yellow-500 p-4">+</button>
                <button @click="" class="border border-yellow-500 p-4">-</button>
                <button @click="" class="border border-yellow-500 p-4">+</button>
            </div>

            <div class="grid grid-cols-1 text-5xl mt-4">
                <button class="bg-green-500 p-4">New Game</button>
            </div>
        </div>

    </body>
</html>