GomaPulseFramework-agnostic sportsbook widgets

<goma-events-horizontal id="eh"></goma-events-horizontal>

<script type="module">
  import '@gomagaming/events-horizontal'

  const el = document.getElementById('eh')
  el.config = {
    socketUrl: 'wss://sportsapi.example.com/v2',
    socketRealm: 'www.example.com',
    apiBaseUrl: 'https://api.example.com',
    bettingApiBaseUrl: 'https://sports-api.example.com',
    ucsOperatorId: '<your-operator-id>',
    locale: 'en',
  }
  el.topic = 'custom-matches-aggregator/1/all/all/all/POPULAR/LIVE/10/5'

  el.addEventListener('goma:outcome-select', (e) => {
    console.log('Betslip add:', e.detail.outcomeName, '@', e.detail.odds)
  })
</script>

<goma-sports-navigation-horizontal id="nav"></goma-sports-navigation-horizontal>

<script type="module">
  import '@gomagaming/sports-navigation-horizontal'

  const el = document.getElementById('nav')
  el.config = { iconBaseUrl: '/icons', locale: 'en' }
  el.dataSource = 'prop'
  el.sports = [
    { id: '1', name: 'Football',   iconId: 1, numberOfLiveEvents: 12 },
    { id: '3', name: 'Tennis',     iconId: 3, numberOfLiveEvents: 64 },
    { id: '6', name: 'Baseball',   iconId: 6, numberOfLiveEvents: 0  },
  ]

  el.addEventListener('goma:sport-select', (e) => {
    console.log('Sport selected:', e.detail.sportName, e.detail.sportId)
  })
</script>

<goma-sports-navigation-dialog id="picker"></goma-sports-navigation-dialog>

<script type="module">
  import '@gomagaming/sports-navigation-dialog'

  const el = document.getElementById('picker')
  el.config = {
    iconBaseUrl: '/icons',
    locale: 'en',
    // The pill should sit on the host's surface, so keep the host transparent.
    theme: { backgroundPrimary: 'transparent' },
  }
  el.dataSource = 'subscribe'
  el.liveStatus = 'LIVE'

  el.addEventListener('goma:sport-select', (e) => {
    console.log('Sport selected:', e.detail.sportName)
  })
</script>

<goma-betslip-floating id="bf"></goma-betslip-floating>

<script type="module">
  import '@gomagaming/betslip-floating'

  const el = document.getElementById('bf')
  el.placeBetMode = 'event'

  el.addEventListener('goma:place-bet-request', async (e) => {
    await fetch('/my/internal/bets', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(e.detail),
    })
  })
  el.addEventListener('goma:bet-placed', (e) => console.log('receipt', e.detail))
</script>

<div style="height: 600px; max-width: 380px;">
  <goma-betslip-sidebar id="bs"></goma-betslip-sidebar>
</div>

<script type="module">
  import '@gomagaming/betslip-sidebar'

  const el = document.getElementById('bs')
  el.placeBetMode = 'event'

  el.addEventListener('goma:place-bet-request', async (e) => {
    await fetch('/my/internal/bets', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(e.detail),
    })
  })
  el.addEventListener('goma:bet-placed', (e) => console.log('receipt', e.detail))
</script>

<div style="height: 100vh; display: grid; grid-template-rows: auto 1fr;">
  <goma-events-horizontal id="evts"></goma-events-horizontal>
  <goma-game-details id="gd"></goma-game-details>
</div>

<script type="module">
  import '@gomagaming/events-horizontal'
  import '@gomagaming/game-details'

  const cfg = { apiBaseUrl: 'wss://sports-api.example.com', locale: 'en' }
  document.getElementById('evts').config = { ...cfg, topic: 'live/1' }
  document.getElementById('gd').config = cfg
  // Tapping a card emits goma:event-navigate; game-details patches
  // its eventId via the watcher. No glue code is needed.
</script>

<goma-sports-navigation-horizontal id="sports"></goma-sports-navigation-horizontal>
<goma-region-filter id="regions" follow-sport-picker></goma-region-filter>
<goma-events-horizontal id="ev" follow-sport-picker follow-region-picker></goma-events-horizontal>

<script type="module">
  import '@gomagaming/sports-navigation-horizontal'
  import '@gomagaming/region-filter'
  import '@gomagaming/events-horizontal'

  const config = { socketUrl: 'wss://…', socketRealm: '…', apiBaseUrl: 'https://…', ucsOperatorId: '<your-operator-id>' }
  for (const id of ['sports', 'regions', 'ev']) document.getElementById(id).config = config
</script>

<goma-competition-filter id="bar"></goma-competition-filter>

<script type="module">
  import '@gomagaming/competition-filter'

  const bar = document.getElementById('bar')
  bar.items = [
    { id: 'popular', label: 'Popular' },
    { id: 'upcoming', label: 'Upcoming' },
    { id: 'top', label: 'Top Competitions' },
  ]
  bar.selectedId = 'top'

  bar.addEventListener('goma:filter-select', (e) => console.log(e.detail)) // { id, label, previousId }
</script>

<goma-time-filter id="time"></goma-time-filter>
<goma-events-horizontal id="ev" follow-time-picker></goma-events-horizontal>

<script type="module">
  import '@gomagaming/time-filter'
  import '@gomagaming/events-horizontal'

  // el.ticks is optional: the built-in 8-tick default (Now / 1H / 3H / 6H
  // / 12H / 24H / 48H / Everything) applies if omitted.
  document.getElementById('time').addEventListener('goma:time-select', (e) => {
    console.log(e.detail) // { timeValue, timeLabel, previousTimeValue }
  })
</script>

<goma-hero-card id="hero"></goma-hero-card>

<script type="module">
  import '@gomagaming/hero-card'

  const el = document.getElementById('hero')
  el.dataSource = 'prop' // the default: no socketUrl, no REST call
  el.heroImage = 'https://cdn.example.com/arsenal-chelsea.jpg'
  el.hostEvent = {
    id: '900123456789012345',
    homeTeam: 'Arsenal',
    awayTeam: 'Chelsea',
    competition: 'Premier League',
    sportId: 1,
    venueId: 'GB',
    startTime: 1789000000000,
    isLive: false,
    markets: [
      {
        id: 'm-1x2',
        name: 'Match Result',
        bettingTypeId: 69,
        eventPartId: 3,
        outcomes: [
          { id: 'o-home', label: 'Arsenal', odds: 2.10, bettingOfferId: 'bo-home-1' },
          { id: 'o-draw', label: 'Draw',    odds: 3.40, bettingOfferId: 'bo-draw-1' },
          { id: 'o-away', label: 'Chelsea', odds: 3.20, bettingOfferId: 'bo-away-1' },
        ],
      },
    ],
  }

  el.addEventListener('goma:outcome-select', (e) => {
    console.log('Betslip add:', e.detail.outcomeName, '@', e.detail.odds)
  })
</script>

<goma-casino-games id="cg"></goma-casino-games>

<script type="module">
  import '@gomagaming/casino-games'

  const el = document.getElementById('cg')
  el.games = [
    { id: 'g1', name: 'Gates of Olympus', imageUrl: 'https://cdn.example.com/olympus.jpg', ctaUrl: 'https://cdn.example.com/play/olympus' },
    { id: 'g2', name: 'Sweet Bonanza',    imageUrl: 'https://cdn.example.com/bonanza.jpg' },
    { id: 'g3', name: 'Book of Dead',     imageUrl: 'https://cdn.example.com/bookofdead.jpg' },
  ]

  el.addEventListener('goma:casino-game-select', (e) => {
    window.location.href = e.detail.ctaUrl ?? `/casino/${e.detail.id}`
  })
</script>

<goma-live-chat
  api-url="https://api.example.com/api"
  socket-url="/"
  auth-token="USER_JWT_TOKEN"
  socket-auth-token="SOCKET_AUTH_TOKEN"
  game-id="game_12345"
  locale="en"
></goma-live-chat>

<script type="module">
  import '@gomagaming/live-chat'

  document.querySelector('goma-live-chat').addEventListener('gc:tail-bet', (e) => {
    console.log('Tail this bet:', e.detail.selections)
  })
</script>

<goma-messenger
  api-url="https://api.example.com"
  socket-url="wss://ws.example.com"
  auth-token="USER_TOKEN"
  socket-auth-token="SOCKET_TOKEN"
  user-chat-id="user-123"
  locale="en"
></goma-messenger>

<script type="module">
  import '@gomagaming/messenger'

  document.querySelector('goma-messenger').addEventListener('gc:message-received', (e) => {
    console.log('New message:', e.detail)
  })
</script>

<goma-sports-navigation-horizontal id="sports"></goma-sports-navigation-horizontal>
<goma-time-filter id="time"></goma-time-filter>
<goma-events-horizontal id="ev" follow-sport-picker follow-time-picker></goma-events-horizontal>

<div style="height: 600px; max-width: 380px;">
  <goma-betslip-sidebar id="betslip"></goma-betslip-sidebar>
</div>

<script type="module">
  import '@gomagaming/sports-navigation-horizontal'
  import '@gomagaming/time-filter'
  import '@gomagaming/events-horizontal'
  import '@gomagaming/betslip-sidebar'

  // One config object drives every widget on the page. Bundlers dedup the
  // framework deps, so mounting four widgets never loads a second Vue copy.
  const config = {
    socketUrl: 'wss://sportsapi.example.com/v2',
    socketRealm: 'www.example.com',
    apiBaseUrl: 'https://api.example.com',
    bettingApiBaseUrl: 'https://sports-api.example.com',
    ucsOperatorId: '<your-operator-id>',
    locale: 'en',
  }

  const sports = document.getElementById('sports')
  // Set the data-shape flags before `config`: assigning `config` is what
  // fires the RPC, so the first fetch already reflects them. `rpc` (not
  // `subscribe`) is what actually returns both live and upcoming tiles here.
  // `subscribe` has no combined-status feed and silently falls back to LIVE.
  sports.dataSource = 'rpc'
  sports.liveStatus = 'BOTH'
  sports.config = config

  document.getElementById('time').config = config

  const events = document.getElementById('ev')
  events.topic = 'custom-matches-aggregator/1/all/all/all/POPULAR/BOTH/10/5'
  // followSportPicker + followTimePicker (both default true, set explicitly
  // above via the kebab-case attributes) rewrite the topic's sportId and
  // hoursInterval segments in place as the strip and slider are used.
  events.config = config

  document.getElementById('betslip').config = config
  // No listener wires the betslip to the events feed. An odds tap on any
  // card in `ev` writes straight into the shared goma:betslip:v4 storage,
  // and the sidebar betslip's list updates on its own.
</script>