Kristian Razum

At the time of writing this, it’s 2023 and most companies are conducting their business online. And, as we know, the Internet is a wonderful place, but full of potential threats. Danger is lurking at every corner and, if you own a business, you should always try to be one step ahead of the “bad actors”.

There are thousands of bots constantly trying to exploit your systems, they never rest (and that’s just one spot where ISO 27001 might come in handy).

For example, if I provision a virtual server with a public IPv4 address, and leave the SSH service running for a week on a default port (without a firewall filtering those requests) there are going to be over a million failed login attempts (dependent on the IP range). Crazy! 

exploding_head

If you want to read more, take a peek at 

So, what can you do to protect yourself and your company? Well, one option is to try and comply with all of the ISO 27001 standards. ISO 27001 is an international information security standard. It shows that your company follows the best security practices. Before we go into it, 

I’ve started implementing ISO 27001 for Ars Futura because we wanted to take security to the next level, and of course, get audited and certified by a team of technical professionals. Our goal was not to just obtain the certification so we could flash it in front of our client’s eyes, but to benefit from the implemented controls in the long run.

This is not my first time implementing ISO 27001 - so I’ve wanted to share some advice and a rundown of what can be expected when taking this path.

Before you even start the certification process, you should nominate somebody internally, a person who will be in charge of the technical implementation of ISO 27001. Try choosing someone who understands security and has extensive knowledge in the IT field, otherwise, you’re risking having security gaps.

The second step is to conduct a “Gap Analysis”. This is crucial because it’s going to show you the weaknesses of your organization. Its intent is to benchmark your current organization state versus the requirements of ISO 27001. There are many 

 that you can use while doing Gap Analysis.

The third step is to identify key missing aspects such as:

How will ISO 27001 compliance help us in the long run?

Implementing an ISO 27001-compliant information security management system (ISMS) has had a number of benefits for our organization. Some of them are:

Overall, implementing an ISO 27001-compliant ISMS has a number of benefits. It has helped us improve the security of our information assets, build trust with our clients, streamline our processes, and improve compliance. Give it a try, you won’t regret it!

Implementing ISO 27001 & all that comes with it

How to establish ISO 27001 compliance

Luka Drezga

More than just a stream: Innovating the Esports Experience

With this blog, I'll try to spark conversation and imagination by discussing how we can innovate the Esports Experience.

Ars Futura is a digital design and development agency that, amongst other industries, does a lot of Esports work. We're super proud to say that we're an official partner of Activision Blizzard Esports, building everything digital from design to development on their flagship products. We've enjoyed working with other big names, like Halo Championship Series, Vindex, Esports Engine, Belong, etc. 

But we’re not discussing Ars Futura,  we’re here to see how we can innovate the Esports Experience and bring it to the next level. Before we jump to that, let’s talk about the love-and-hate relationship between Esports and sports.

When we're looking at Esports, we still see a lot of sports influence, which is fine. Esports is a sport of sorts. It relies on teams and players, the matches and leagues, and the crowd that follows everything. But, there are a lot of crucial differences that we need to take into account. 

Esports is played in both the live and the digital environment, whereas traditional sports are only live. Esports has a global audience, doesn't care about geographical boundaries, and is more accessible. You don't need cable TV, and you have no channel restrictions. The only thing required is a computer or console.

The second key thing we must understand is the difference between Esports and Traditional Sports fans. 

The average age of an NFL fan is 47; for hockey, it's 50; for baseball, it's 57. At the same time, an average Esports fan is around 26. This is a gap of almost 30 years.

Esports fans are digital natives. They were born in the late 90s and have grown up surrounded by technology. They're tech-savvy and early adopters compared to their boomer sports counterparts.

Esports fans are versatile, following multiple games and genres, leagues, and teams. Their loyalty isn't to a team that's grown in their hometown. They follow and cheer for different players all across the globe, and they usually follow more than one team.

This is where the traditional Esports Experience is lacking. While having a good old regular live stream, VOD, standings, schedule, and others is a must-have, the industry is evolving rapidly, prompting a need for innovation.

We must offer these tech-savvy, hungry beasts something more than just watching.

Beyond Passive Viewing: The Future is Fan Interaction

This is why I believe that with this desire for active participation, immersion, and control, the future of Esports should prioritize increased fan interaction through innovative digital products that foster stronger communities. Now, there are a million different things that we, as Esports builders, can entertain. I'll try to focus on a couple of feasible options that can be accomplished in the foreseeable future.

The Rise of Fantasy - Interactive Fantasy Leagues

One of the first things that jump to mind are Fantasy Leagues and Pick 'em experiences. By providing these digital solutions for fans in pre-, live, and post-match states, we involve them in the game even more. By making predictions and building fantasy teams, you, as an Esports fan, are investing yourself more than before. Doing this live, you witness your imaginary team's and your pick's success parallel to the main event, bridging the gap between the actual game and the fantasy world through an adrenaline-fueled experience. 

Continuing the previous topic about empowering viewers and enhancing the interaction with the game, there is much to be said about the viewer experience. 

As an Esports fan, I sit on my couch and look at this directed live stream on Twitch or YouTube, see what the producers show, and hear what the casters say. Why not take it a step further and allow the viewers to choose player perspectives and switch between streams in real-time, self-direct their viewing experience, and take a first-person look at what their favorite player is doing. Let's take it another step further and let fans tap into the comms of their favorite teams. Let them listen in on team chats, gaining insight into the communication and strategies of a particular team. 

These innovations add a new layer of immersion, proximity to the action, and understanding of the game. Redefining how fans interact with esports content, making it more engaging and informative. Viewer empowerment is at the forefront of esports innovation, offering fans unprecedented control and insight.

Going into GOD MODE - Immersive 3D Perspective

Another layer of viewer empowerment worth mentioning is the 3D space of a map — a feature-rich user interface that enhances immersion. Imagine dropping in Inferno and witnessing the action first-hand from the first-person experience. Being able to jump between all the players on the map and seeing their POV. There are significant advances in this tech done by platforms like Virtex Stadium and Skybox.gg.

Now we've covered a bit about the viewing experience, adding pick 'em and fantasy, allowing fans more control over their content, etc. Let's see how we can engage them even more.

We're all well familiar with Battle Passes, achievements, and challenges. We've seen this all throughout gaming, but this powerful tool has yet to peak in Esports. We can incentivize viewers to interact more with esports content, competitions, and communities through gamification. Give them more opportunities to return and spend time on our websites and apps. One of the cool things we did with CDL and World Series of Warzone is that we've created these interactive components that can be set up with every stream or VOD that would reward users for consuming content on our websites. The more videos you've watched, the better the rewards will become. CDL Pick 'em introduced challenges and rewards to their fans; the more picks you made and the better they'd be, you'd gain achievements and win prizes. The prizes would range from discounts on shops with CDL partners to in-game rewards like skins, double XP days, etc. This type of mechanic significantly boosted the user's engagement on the website. They spent more time there and submitted more picks than in the prior seasons.

Medals of Honor - Exclusive Event Engagement

There is this thing called FOMO, and a lot of us are suffering from it. And boy, oh boy, is it a powerful engagement driver. Last year, we developed a feature for the OWL mobile app that is basically a scavenger hunt; you'd have these QR codes spread throughout the Anaheim arena and shown on live streams. Each QR code awarded something different, from fan-designed assets to in-game skins and OWL Tokens. If you collect all rewards, you'll win a golden perk!

The results from just this one event are mind-blowing. The adoption rate for this feature was an astonishing 80%, meaning that 80% of the people who were a part of the OWL 2022 finals updated or installed the app and used this feature. It only took 2 months to design and develop it, and now it's used on events all across the globe.

Creating these one-of-a-kind promotions, unique items, and offers exclusive to specific events contributes to a sense of community and fan loyalty.

Decision Making - Interactive Fan Involvement

Lastly, something we're seeing on the rise just now is empowering fans and viewers to participate in the decision-making on a creator's stream or even with the gameplay. We're seeing more and more people using platforms like Epic Games' Unreal Editor for Fortnite (UEFN) or Roblox, where creators get to shape and build new experiences. I see that opening up APIs for these games and allowing people to participate in the game itself is the next step in this process. Imagine you're playing a Battle Royal game, and fans watching your stream get to decide what will be a part of your next drop. Incredible creator fan immersion. While this might not directly apply to Esports, something similar can be introduced in streams to tailor content per fan's wishes. Imagine watching a stream, but you decide what match gets broadcast or who gets interviewed in the break. It's all about fan empowerment.

In conclusion, the future of innovating the Esports experience is an exciting journey. The Esports industry is distinct from traditional sports in various ways, especially its digital-savvy and diverse fan base. To harness the full potential of this unique audience, we must evolve the Esports experience beyond passive viewing.

By embracing these innovations, we can elevate the Esports experience, making it more engaging, interactive, and tailored to individual fan preferences. This, in turn, promises to further solidify the bond between Esports fans and the games they love. The future of Esports is not just about watching; it's about actively participating, immersing, and empowering fans to be an integral part of the Esports ecosystem. 

Let's innovate and elevate the Esports experience together!

This blog was created from a keynote talk and presentation at ESI 2023, the world’s biggest esports and games festival.

The future of esports engagement.

More Than Just a Stream: Innovating the Esports Experience

Josip Kvaternik

Web and Mobile Automation Inside CI Environments

I’m back with another blog post (please, hold the applause  

 ). This time, I’m writing about the integration process of your mobile and web automation projects with a continuous integration cloud provider, creating a CI environment, and connecting it with Slack. I’ll cover more than just the CI, pipeline automation, cloud provider, or Slack integration, so stay tuned.

This blog is an addition to my first one, where I covered 

the basics of Cucumber BDD with Selenium and Java

. If you still haven’t read it, I strongly advise you to, and not just because I wrote it, but because you’ll understand this one much better. 

I think the quality of my jokes has decreased by 20% since my last blog post, so without further ado, let’s CI what I prepared for this one (get it?).

I’ll start by talking about the meaning and benefits of a Continuous Integration environment. 

Continuous integration (CI) is a practice that involves software developers making small changes and checks to their code. Due to the scale of requirements and the number of steps involved, this process is automated. This is to ensure that teams can build, test, and package their applications in a reliable and repeatable way. This is what Mr. Google would say if you were to search “What is CI?”. Google is a bit formal so I’ll put it in my own words: “It is what it is” (

Let’s say you have your mobile automation test that tests login functionality for your high-end iOS application. If you were to check your login functionality, you’d have to trigger and set everything up manually (probably every day). If you integrate that project inside a CI environment, you wouldn’t have to worry about that, your tests would trigger, run, and report feedback automatically, as easy as that. When you think about it, even the name says it, Continuous Integration.

There are many continuous integration tools DevOps and people in software development  use today. From 

. In this blog, I’ll cover GitHub Actions. I find it very similar to Gitlab CI, but I’ll cover GitHub since the project from my first blog post is already on GitHub. However, if anybody asks, I prefer Gitlab CI for my test automation.

GitHub Actions is a continuous integration and continuous deployment (delivery) (CI/CD) platform that automates your build, test, and deployment pipeline. You can create workflows that build and test every pull request to your repository, or deploy merged pull requests to environments. In our case, GitHub Actions will be used to build and run our tests on a predefined schedule. 

GitHub actions provide Linux, Windows, or MacOS machines for workflow runs. We’ll use MacOS. 

Let’s talk about security. GitHub actions provide many security features, such as GitHub secrets. GitHub secrets are encrypted variables you can create in your repository environment. What does it mean? I don’t know (joking). It means you can keep any variable you want private, encrypted, and under a password. That variable can be anything, an environment password or something as simple as a String. A real-life scenario would be to keep your environment access ID and password secret. Here we won’t have that, so I’ll create a GitHub Secret for our Slack webhook, but more about that later.

As bad as the name might be, CI Testing Cloud Providers says it all. The Cloud testing service providers provide an essential testing environment as per application under test requirements. As previously mentioned, the essential environment can be a web browser on a desktop or mobile device. Let’s not forget Android and iOS applications on their respective platforms. That device is usually run on a VM (Virtual Machine) that gets killed after each test which makes the continuous integration tests reliable and less fragile.

This goes without saying, Testing Cloud Providers offer a lot more than just desktop and mobile services. Depending on the provider, some other functionalities are:

These are just some of the many Testing Clouds offers. By now, it’s pretty clear why automated testers use them. 

It’s time to mention some of the most reliable cloud providers currently on the market. I’ll start with SauceLabs and BrowserStack. They’re pretty similar and both offer many functionalities. There’s also SonarCloud, Testsigma, CloudQA and many more. 

In this blog, I’ll cover my favorite and most frequently used cloud provider, SauceLabs.

Okay, let’s talk Sauce. We have sour cream, sweet and sour cream, grilling sauce… No, wait, wrong chat…

Jokes aside, SauceLabs, in my opinion, is the best Testing Cloud provider on the market. It provides all the mentioned functionalities, has great documentation, and works on new integrations and services. SauceLabs service comes at a certain price, but if you’re working on a serious automation project, you should consider it. If you don’t prefer Sauces, perhaps try BrowserStack next.

Additionally, I'll integrate my local project to run on the SauceLabs cloud. What does that mean? Well, it means that once I click run on my local machine, the browser won’t start locally. The browser will start on the SauceLabs cloud on a newly born VM, record video playback, output the console log, run the test, and finally, kill the VM. What more could you ask for! 

Before we start, I’ll cover my project structure and technologies. 

So what does this tell us? Let’s break it down.

We have a local test automation project. In my case, the project is the same as in my first blog post. If you haven’t read it yet, now might be the time. Throughout this blog, we’ll cover everything else seen in the image.

I’ll connect my local project to SauceLabs which means my tests won’t run locally anymore. The tests will run on the SauceLabs cloud, as I explained earlier. SauceLabs cloud will provide live video playback, video reproduction, and console log output. Awesome.

Now let’s talk about GitHub. As can be seen in the image, GitHub does quite a lot of heavy lifting. I’ll create a workflow file that will trigger our tests to run on SauceLabs and put it on a schedule. Also, since I’m using Gradle and cucumber in my local project, GitHub itself will give us Gradle and cucumber console output. Finally, through the GitHub workflow file, I’ll create a connection to Slack so I can see notifications (pass/fail) immediately after the automated tests finish running. As you can see, when this is finished, you can relax and let your tests run for you. 

I believe that’s everything. Let’s start coding! 

So, my local project is Selenium with Cucumber and Java. Once we add the SauceLabs integration, our Driver (Hooks) Java class will look like this:

public class Hooks {
   public static RemoteWebDriver driver;
   public static WebDriverWait wait;
   public Config config;

   @Before
   public void setup(Scenario scenario) throws IOException {

       config = new Config();
       String browserName = config.getBrowser();
       String username = System.getenv("your sauce username");
       String accessKey = System.getenv("your sauce access key");
       String sauceUrl = "https://username:accesskey@ondemand.region.saucelabs.com:443/wd/hub";
       MutableCapabilities capabilities;
       MutableCapabilities sauceOpts = new MutableCapabilities();

       switch (browserName) {

           case "chrome":
               capabilities = new ChromeOptions();
               capabilities.setCapability("browserName", browserName);
               capabilities.setCapability("browserVersion", "latest");
               capabilities.setCapability("platformName", "Windows 10");
               sauceOpts.setCapability("username", username);
               sauceOpts.setCapability("accessKey", accessKey);
               sauceOpts.setCapability("name", "CHROME TEST" + scenario.getName());
               sauceOpts.setCapability("screenResolution" , "1920x1080");
               capabilities.setCapability("sauce:options", sauceOpts);
               URL url = new URL(sauceUrl);
               driver = new RemoteWebDriver(url, capabilities);
               wait = new WebDriverWait(driver, Duration.ofSeconds(70));
               break;


           case "safari":
               capabilities = new SafariOptions();
               capabilities.setCapability("browserName", browserName);
               capabilities.setCapability("browserVersion", "14");
               capabilities.setCapability("platformName", "macOS 11");
               sauceOpts.setCapability("username", username);
               sauceOpts.setCapability("accessKey", accessKey);
               sauceOpts.setCapability("name", "SAFARI TEST: " + scenario.getName());
               sauceOpts.setCapability("screenResolution", "1600x1200");
               capabilities.setCapability("sauce:options", sauceOpts);
               url = new URL(sauceUrl);
               driver = new RemoteWebDriver(url, capabilities);
               wait = new WebDriverWait(driver, Duration.ofSeconds(70));
               break;

           case "chromeMac":
               capabilities = new ChromeOptions();
               capabilities.setCapability("browserName", "chrome");
               capabilities.setCapability("browserVersion", "latest");
               capabilities.setCapability("platformName", "macOS 12");
               sauceOpts.setCapability("username", username);
               sauceOpts.setCapability("accessKey", accessKey);
               sauceOpts.setCapability("name","CHROME MAC TEST: " + scenario.getName());
               sauceOpts.setCapability("screenResolution" , "1600x1200");
               capabilities.setCapability("sauce:options", sauceOpts);
               url = new URL(sauceUrl);
               driver = new RemoteWebDriver(url, capabilities);
               wait = new WebDriverWait(driver, Duration.ofSeconds(70));
               break;

           default:
               capabilities = new ChromeOptions();
               capabilities.setCapability("browserName", browserName);
               capabilities.setCapability("browserVersion", "latest");
               capabilities.setCapability("platformName", "Windows 10");
               sauceOpts.setCapability("username", username);
               sauceOpts.setCapability("accessKey", accessKey);
               sauceOpts.setCapability("name", "CHROME TEST: " + scenario.getName());
               sauceOpts.setCapability("screenResolution" , "1920x1080");
               capabilities.setCapability("sauce:options", sauceOpts);
               url = new URL(sauceUrl);
               driver = new RemoteWebDriver(url, capabilities);
               wait = new WebDriverWait(driver, Duration.ofSeconds(70));
               break;
       }
   }

  @After
   public void teardown (){
       driver.quit();
   }


   @AfterStep
   public void afterStep (Scenario scenario) {

       if(scenario.isFailed()){
           driver.executeScript("sauce:job-result=" + false);
       }
       else driver.executeScript("sauce:job-result=" + true);}

}

Okay, this is a lot of code at once so I’ll break everything down. 

Roughly speaking, my Hooks class is mostly about creating a driver for SauceLabs. The driver will no longer be WebDriver, it will be RemoteWebDriver because we’re connecting to remote (SauceLabs cloud) via URL. The URL consists of your SauceLabs username, access key, and region. In my example, those values are hidden for security reasons. 

I’m using Cucumber’s “Before” and “After” hooks. All the code inside the Before hook will execute before running test scenarios. Finally, the code inside the After hook will execute at the end of running test scenarios. We want our Sauce connection established before running our scenarios, so I put them inside the Before hook. 

After the run of test scenarios, we want to finish the test and kill the driver, so that it’s inside the After hook. 

The AfterStep hook is also provided by Cucumber. This hook is very important. In this hook, we have a simple “if” loop that puts scenario results to pass or fail. This is possible because Cucumber can give us results after each step, so we just add a driver script for SauceLabs, and 

SauceLabs capabilities are pretty self-explanatory, so I won’t go into detail. We set scenario names, browser names, browser versions, platform versions, resolutions, and so on. 

In the beginning, I initialized the Config class. What is it? Config is another Java class I’ve created for navigating between browsers. Why? Well, because when my automated tests run on a schedule, they test all the browsers needed. How did I create this? Well, I did it my way. There are a lot of possibilities, but I’ll show you mine. 

To switch between browsers you have to create a file where you’ll write properties, in our case, the browser name. So, I’ve created a file in the root of my project and named it 

Finally, I’ve created a new Java class called, you guessed it, 

import java.io.FileInputStream;
import java.io.IOException;
import java.util.Properties;

public class Config{

   public  Properties properties;

   public Config() {
       properties = new Properties();
       try {
           FileInputStream inputStream = new FileInputStream("gradle.properties");
           properties.load(inputStream);
       } catch (IOException e) {
           e.printStackTrace();
       }
   }
   public  String getBrowser() {
       return properties.getProperty("browser");
   }
}

As you can see, this class is simple and effective. I used the FileInputStream method pointed at a previously created 

file. Also, I’ve created a dynamic String method called 

which will get a “browser” value from 

file will remain empty because we don’t want to run our tests locally, therefore, we’ll write browser values using the Gradle task. More on that later on.

As shown in my first blog post (see, you should’ve read it by now), I’m using the Gradle task for running my tests. Why? Well, because it is pretty easy to implement inside a CI/CD environment (I can run tests just by using a single CLI command). Now, let me show you how I write browser properties before running my tests. My Gradle task for running tests on Safari looks something like this:

task runTestsSafari (type: WriteProperties) {
   outputFile = file('gradle.properties')
   property 'browser', 'safari'
   dependsOn assemble, testClasses
   doLast {
       javaexec {
           main = "io.cucumber.core.cli.Main"
           classpath = configurations.cucumberRuntime + sourceSets.main.output + sourceSets.test.output
           args = [
                   '--plugin', 'pretty',
                   '--plugin', 'html:target/cucumber-report.html',
                   '--glue', 'stepMethods',
                   'src/test/resourcesSafari']
       }
   }
}

The task type is set to WriteProperties because, well, you know why. We need to write the property and value of “browser”. So, the first block of code will write “browser=safari” inside our 

file. With that, our Hooks class will enter our switch loop and select “case = safari”. Now, all I have to do is create as many tasks as I want for as many browsers and platforms as needed. 

Let's get to the part we’ve all been waiting for. I’ll show you how to configure the GitHub workflow file. First and foremost, I’ll upload my project to GitHub. Once that’s done, I’ll create a new folder in the root of my project called 

name: Java CI

on:
 schedule:
   - cron: '45 9 * * 1-5'

jobs:
 build:
   runs-on: ubuntu-latest

   steps:
     - uses: actions/checkout@v3
     - name: Set up JDK 17
       uses: actions/setup-java@v3
       with:
         java-version: '17'
         distribution: 'adopt'
     - name: Validate Gradle wrapper
       uses: gradle/wrapper-validation-action@e6e38bacfdf1a337459f332974bb2327a31aaf4b

- name: Build with Gradle
 uses: gradle/gradle-build-action@0d13054264b0bb894ded474f08ebb30921341cee
 with:
   arguments: runTestsSafari

Let’s break it down. In the first line, I just gave my workflow a basic name, Java CI. The following lines show I’ve put this workflow on a cron schedule. For more information about cron syntax, visit 

. My schedule is set every day from Monday till Friday at 9:45 AM. Be careful with time zones because GitHub uses UTC. I give my pipeline a job (build) and set it to run on the latest Ubuntu. Under steps, I’ve put some formal Java technologies and versions for my pipeline to use. After validating the Gradle wrapper, we can finally start building with Gradle and run our task. Set like this, my tests run daily at 9:45 and test Safari. At this point, I can see the Gradle and Cucumber output provided by GitHub, and I can see my test video playback on SauceLabs. Well, that’s not enough for me, I’m lazier than that. Let’s connect everything with Slack so I’m instantly notified if my tests have passed or failed.

To connect your GitHub project with Slack I’ll use a certain runner. I’ve tried many different runners provided by different organizations, but I only liked one. The runner I’m using is provided by rtCamp and can be found 

file, we need to do a couple of things. Firstly, we need to add an incoming Webhook connection to our Slack workspace. You can see more details 

. I can’t provide much information about this step because it’s mostly related to my organization’s Slack. Please check the link, it should be simple. When you’re finished creating your Webhook, copy it.

Next, open GitHub and click on secrets. We need to create a new secret on GitHub. So, we click to create a new secret and name it, in my case, SLACK_WEBHOOK_URL. Paste the copied value of your webhook in the previous step. After saving, GitHub will encrypt our webhook and keep it, you guessed it, a secret. 

- name: Send success
 if: success()
 uses: rtCamp/action-slack-notify@v2
 env:
   SLACK_CHANNEL: automated-tests-notifications
   SLACK_LINK_NAMES: true
   SLACK_COLOR: ${{ job.status }}
   SLACK_ICON: https://github.com/rtCamp.png?size=48
   SLACK_TITLE: Your tests have successfully passed
   SLACK_USERNAME: roBot
   SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK_URL}}

- name: Send failure
 if: failure()
 uses: rtCamp/action-slack-notify@v2
 env:
   SLACK_CHANNEL: automated-tests-notifications
   SLACK_LINK_NAMES: true
   SLACK_COLOR: ${{ job.status }}
   SLACK_ICON: https://github.com/rtCamp.png?size=48
   SLACK_TITLE: Danger, danger, automated tests have failed
   SLACK_USERNAME: roBot
   SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK_URL}}

This may seem pretty self-explanatory, but I’ve had many issues with the connection between GitHub Actions and Slack. What I’m saying is, try your best to use this as similar as I did, because even the smallest adjustments can break it. 

As you can see, I’ve created two ifs. Both ifs act on the output of our Gradle runner. Now we’re getting to the best part of Gradle. Let’s not forget, our tests are running using the Gradle tasks. So, when the Gradle task finishes running, it creates an output that can also be read by our 

file. It’s simple, but it took me a while to realize just how powerful and helpful that is. Moving on, now our 

file knows which if loop to enter based on our test results. NICE! 

As you can see, SLACK_WEBHOOK is also present here. We can get any encrypted value (secret) from our GitHub secrets using this syntax; ${{secrets.YOUR_SECRET_NAME}} 

Knowing that we can use GitHub secrets to hide any sensitive information. I’ll let you try that yourself. 

This was yet another quick explanation of how to connect all our technologies to work together as one big great machine. 

Hopefully, this blog will help you in your daily struggles with web or mobile automation inside continuous integration environments and provide you with some new scalability, experiences and information. In my own experience, setting web/mobile automation inside a continuous integration environment was the pinnacle of many projects I worked on.

As I said, this blog is a bit more advanced than my previous one. I’m going to say it right away, I’ll be back with part three. Then I’ll explain more advanced and specific technologies. Not gonna lie, I did withhold some information in this one, but with a good purpose – I didn’t want to make the blog too long or complicated.

Check out the amazing features the continuous integration environment has to offer.

Roza Zanini Mozara

Ars Futura Redesign

Hello from the same, but different Ars Futura! 

 As you can see, we have some exciting news to share – our brand has had a huge redesign!

After a decade of making our mark, it was time for a refresh. Our old logo served us well, but we wanted to fill in the gaps and tidy up a few things. For instance, we never had a logomark or really defined design principles (until now!), and let’s be honest – our old merch has been looking outdated for quite some time now. 

At the end of 2020, we said “Hey, it’s about time we got ourselves a new look” and since then, it’s been quite a journey! 

To kick it off,  we sought out some help and landed on Studio Size as the perfect choice. So, to set the stage for the redesign, we answered a lot of questions, shared some dos and don'ts, and came up with a few ideas, until the vision started taking shape. After a few rounds of suggestions and feedback, we found the 

 that felt just right, and that you can see today! 

One of the key inspirations that helped shape our new design was the concept of retrofuturism. Think blending the fun from the 70s and 80s with the idea of flying cars, and you’re on the right track! The theme resonates with our visual identity and our new tagline: 

(we hope you’re ready to see it everywhere from now on because you just might 

It’s important to add that through all these changes, one thing remains the same – our core values. Yes, we’ve given them a bit of a re-vamp of their own, but we’re still committed to 

Once we’ve nailed down all the important things: our new logo, logomark, tagline, colors 

(fun fact: we chose purple because it was the first Ars Futura color, going back to the roots and stuff, you get it)

... the real fun began! We were set to design and develop our new website, think of new merch ideas and bring them to life, give our office a bit of a makeover, etc. Now, after months and months of hard work and creative brainstorming, we’re proud and happy to reveal our new brand design to the world. 

We hope you’ll love it as much as we do.

Our Future Starts Today

The New Look of Ars Futura

Ars Futura – The Redesign

Roko Jurić

In this blog, we’ll explore how to create tournament brackets in SwiftUI, just like the name says. Recently, our client wanted a new and mobile-friendly way to display brackets natively, instead of relying on a WebView and endlessly scrolling on all axes. So I started looking at libraries, and soon stumbled upon a 

 that served as an inspiration for what I’m about to show you. We’ll dive into the code pretty quickly, building a custom view that can handle user interaction, and animate transitions between rounds. Whether you're building a sports app, or just looking to enhance your SwiftUI skills, this tutorial will give you the tools to create dynamic and engaging tournament brackets that will captivate your users.

All of the code in this blog is written in Xcode 14.2 and iOS 16.

The finished product will look like this:

struct ContentView: View {
    // 1
    private let columnWidth: CGFloat = UIScreen.main.bounds.width * 0.9
    private let colors: [Color] = [Color.red, Color.green, Color.blue]
    
    var body: some View {
        // 2
        ScrollView(.horizontal, showsIndicators: false) {
            columns
        }
    }
    
    // 3
    private var columns: some View {
        HStack(spacing: 0) {
            ForEach(colors, id: \.hashValue) { color in
                color
                    .frame(width: columnWidth)
            }
        }
        .frame(width: CGFloat(colors.count) * columnWidth)
    }
    
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

If you’ve followed the steps correctly so far, your app should look like this:

After we’ve created the basic column layout and scrolling, we should add the snapping feature. Unfortunately, there isn’t a built-in way to accomplish this, so we’ll have to play around with gestures and offsets.

The way to achieve snapping is to manually control the dragging and content offset inside the 

. In order to do it, we’re going to introduce the 

 as a parameter. Also, let’s disable the 

 so that it doesn’t cancel our gestures. SwiftUI gestures come with some useful functions, and we’ll be using 

 callback, we’re going to be modifying the finger drag offset, and inside 

, we’re going to be resetting it to 0, and updating the total offset. To keep track of these inside 

, we’re going to add properties and functions, just to tidy things up a bit.

If you followed all of the steps, you should have code that closely resembles the one below:

struct ContentView: View {

    ...

    // 2
    @State private var dragOffsetX: CGFloat = 0
    @State private var focusedColumnIndex: Int = 0

    private var offsetX: CGFloat {
        // TODO: Offset Calculation for current focused column
    }

    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            columns
            // 5
                .offset(x: dragOffsetX)
        }
        .frame(width: UIScreen.main.bounds.size.width)
        // 1
        .scrollDisabled(true)
        .gesture(DragGesture(minimumDistance: 12, coordinateSpace: .global)
            .onChanged(updateCurrentOffsetX)
            .onEnded(handleDragEnded)
        )
    }

    private var columns: some View {
        HStack(spacing: 0) {
            ForEach(colors, id: \.hashValue) { color in
                color
                    .frame(width: columnWidth)
            }
        }
        .frame(width: CGFloat(numberOfColumns) * columnWidth)
    }

    private var numberOfColumns: Int {
        colors.count
    }

    // 3
    private func updateCurrentOffsetX(_ dragGestureValue: DragGesture.Value) {
        dragOffsetX = dragGestureValue.translation.width
    }

    // 4
    private func handleDragEnded(_ gestureValue: DragGesture.Value) {
        // TODO: Decide to stay at the same column, or snap to some other column.
    }

    private func moveToLeft() {
        withAnimation {
            focusedColumnIndex -= 1
            dragOffsetX = 0
        }
    }

    private func moveToRight() {
        withAnimation {
            focusedColumnIndex += 1
            dragOffsetX = 0
        }
    }

    private func stayAtSameIndex() {
        withAnimation {
            dragOffsetX = 0
        }
    }
}

    ...



In this state, the app still doesn’t scroll, nor does it snap, but we’ll get to that soon. If you think this might not work, you can return 

 and you’ll see that the gesture works, but since we haven’t implemented snapping yet, it just stays where you left it, and then snaps back to start once you start dragging again. Fix for that is coming up.

struct ContentView: View {

    ...
    
    private var offsetX: CGFloat {
        // 3
        dragOffsetX
    }
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            columns
                .offset(x: offsetX)
        }
        .frame(width: UIScreen.main.bounds.size.width)
        .scrollDisabled(true)
        .gesture(DragGesture(minimumDistance: 12, coordinateSpace: .global)
            .onChanged(updateCurrentOffsetX)
            .onEnded(handleDragEnded)
        )
    }
    
    ...
    
    private func handleDragEnded(_ gestureValue: DragGesture.Value) {
        // 1
        let isScrollingRight = dragOffsetX < 0
        
        //2
        let didScrollEnough = abs(gestureValue.translation.width) > columnWidth * 0.5
        
        let isFirstColumn = focusedColumnIndex == 0
        let isLastColumn = focusedColumnIndex == numberOfColumns - 1
        
        // 3
        guard didScrollEnough else {
            return stayAtSameIndex()
        }
        
        // 4
        if isScrollingRight, !isLastColumn {
            moveToRight()
            
        //5
        } else if !isScrollingRight, !isFirstColumn {
            moveToLeft()
            
        // 6
        } else {
            stayAtSameIndex()
        }
    }
    
    ...
    
}

Now, if you’ve been following closely, you should see that we always snap back to the first column after the dragging stops. This is because we have not yet implemented the 

, make a calculation to bring the currently focused column - into focus. To scroll the 

 to the right, we need to add a negative offset, so for each column index, we need to add a negative 

 so that we can still drag the view around. You should end up with something like this:

struct ContentView: View {
    
    ...
    
    private var offsetX: CGFloat {
        -CGFloat(focusedColumnIndex) * columnWidth + dragOffsetX
    }
    
    ...
    
}

  Just like that, we have snapping! In the next section, we’ll see how to implement the actual brackets.

Colors are lovely, but after some time, they get boring. So let’s spice things up and add the actual brackets. To start things off, we’ll add some models which will help us with visualization later on. These can be customized to your needs and liking, but they’re simple enough for this example.

struct MatchData: Identifiable {
    let team1: String
    let team2: String
    let team1Score: Int
    let team2Score: Int
    
    var id: String {
        team1 + team2
    }
}

struct Bracket {
    let name: String
    let matches: [MatchData]
}

In order to keep things nice and tidy, we’ll separate the column view into its own struct, in our case, 

struct BracketColumnView: View {
    // 1
    let bracket: Bracket
    
    var body: some View {
        LazyVStack(spacing: 0) {
        
            // 2
            ForEach(bracket.matches) { matchData in
                BracketCell(matchData: matchData)
            }
        }
    }
}

struct BracketColumnView_Previews: PreviewProvider {
    private static let previewBracket: Bracket = Bracket(name: "Semi Finals",
                                                         matches: [
                                                            .init(team1: "Team 1", team2: "Team 2", team1Score: 2, team2Score: 1),
                                                            .init(team1: "Team 3", team2: "Team 4", team1Score: 1, team2Score: 2),
                                                            .init(team1: "Team 5", team2: "Team 6", team1Score: 1, team2Score: 2),
                                                            .init(team1: "Team 7", team2: "Team 8", team1Score: 3, team2Score: 0),
                                                        ])
    
    static var previews: some View {
        BracketColumnView(bracket: previewBracket)
            .padding(.horizontal)
    }
}

Now that we can see this is working, let’s replace the colors with 

. Also, we’ll wrap everything inside a vertical 

 so that we can see the matches that are offscreen. Inside 

 looks on our end, yours should look similar.

struct ContentView: View {

    ...
    
    // 1
    let brackets: [Bracket]
    
    ...
    
    var body: some View {
        // 2
        ScrollView(.vertical, showsIndicators: false) {
            ScrollView(.horizontal, showsIndicators: false) {
                columns
                    .offset(x: offsetX)
            }
            .frame(width: UIScreen.main.bounds.size.width)
            .scrollDisabled(true)
            .gesture(DragGesture(minimumDistance: 12, coordinateSpace: .global)
                .onChanged(updateCurrentOffsetX)
                .onEnded(handleDragEnded)
            )
        }
    }
    
    private var columns: some View {
        // 3
        HStack(alignment: .top, spacing: 0) {
            // 4
            ForEach(brackets, id: \.name) { bracket in
                BracketColumnView(bracket: bracket)
                    .frame(width: columnWidth)
            }
        }
        .frame(width: CGFloat(numberOfColumns) * columnWidth)
    }
    
    // 5
    private var numberOfColumns: Int {
        brackets.count
    }
    
    ...
    
}

struct ContentView_Previews: PreviewProvider {
    
    // 6
    @State static private var brackets: [Bracket] = [
        Bracket(name: "Eights", matches: [
            MatchData(team1: "Team 1", team2: "Team 2", team1Score: 3, team2Score: 0),
            MatchData(team1: "Team 3", team2: "Team 4", team1Score: 1, team2Score: 2),
            MatchData(team1: "Team 5", team2: "Team 6", team1Score: 2, team2Score: 0),
            MatchData(team1: "Team 7", team2: "Team 8", team1Score: 0, team2Score: 3),
            MatchData(team1: "Team 9", team2: "Team 10", team1Score: 1, team2Score: 2),
            MatchData(team1: "Team 11", team2: "Team 12", team1Score: 3, team2Score: 1),
            MatchData(team1: "Team 13", team2: "Team 14", team1Score: 2, team2Score: 0),
            MatchData(team1: "Team 15", team2: "Team 16", team1Score: 1, team2Score: 2)
        ]),
        Bracket(name: "Quarter Finals", matches: [
            MatchData(team1: "Team 1", team2: "Team 4", team1Score: 3, team2Score: 0),
            MatchData(team1: "Team 5", team2: "Team 8", team1Score: 1, team2Score: 2),
            MatchData(team1: "Team 10", team2: "Team 11", team1Score: 2, team2Score: 0),
            MatchData(team1: "Team 13", team2: "Team 16", team1Score: 0, team2Score: 3),
        ]),
        Bracket(name: "Semi Finals", matches: [
            MatchData(team1: "Team 1", team2: "Team 8", team1Score: 3, team2Score: 0),
            MatchData(team1: "Team 10", team2: "Team 16", team1Score: 1, team2Score: 2),
        ]),
        Bracket(name: "Grand Finals", matches: [
            MatchData(team1: "Team 1", team2: "Team 16", team1Score: 1, team2Score: 2)
        ])
    ]
    
    static var previews: some View {
        ContentView(brackets: brackets)
    }
}

Step 4: Cells, lines, and an algebra remider 

You might be wondering: “This is nice, but so far it’s an appetizer, let’s get to the main course already”. We agree, but let us try to explain the concepts first, and then once we understand that, we can dive into the code.

In order to know how to draw the lines (which connect the cells), we need to set some ground rules (again).

The first column cells shouldn’t have a left line (as they’re the first matches).

But how do we achieve the “compacting” and “decompacting” of cells when you scroll left and right?

Decide the height of the cell you can use for the cells in focus (in our case 100pt).

In theory, with all of this knowledge, we should get cells and lines that look nice.

struct BracketCell: View {
    
    ...
    
    // 1
    let heightScalingExponent: Int
    let isTopMatch: Bool
    let isCollapsed: Bool
    let isFirstColumn: Bool
    let isLastColumn: Bool
    
    private var lineColor: Color {
        .black
    }
    
    // 2
    var body: some View {
        HStack(spacing: 0) {
            leftLineArea
            
            VStack(spacing: 0) {
                if !isCollapsed {
                    topLabelArea
                }
                
                team1ScoreArea
                team2ScoreArea
                
                if !isCollapsed {
                    touchForMoreInfoArea
                }
            }
            
            rightLineArea
        }
        .listRowSeparator(.hidden)
        .listRowInsets(EdgeInsets())
        
        // 3
        .frame(height: height)
        .transition(.opacity.combined(with: .scale(scale: 1, anchor: .top)))
    }
    
    private var height: CGFloat {
        100 * pow(2, CGFloat(heightScalingExponent))
    }
    
    // 4
    private var leftLineArea: some View {
        Group {
            if !isFirstColumn {
                Rectangle()
                    .foregroundColor(lineColor)
            } else {
                Spacer()
            }
        }
        .frame(width: UIScreen.main.bounds.width * 0.05, height: 2)
    }
    
    // 5
    private var rightLineArea: some View {
        Group {
            if !isLastColumn {
                rightLine
            } else {
                Spacer()
                    .frame(width: UIScreen.main.bounds.width * 0.05, height: 2)
            }
        }
    }
    
    private var rightLine: some View {
        HStack(spacing: 0) {
            rightHorizontalLine
            
            // 6
            if isTopMatch {
                topMatchRightVerticalLine
                
            // 7
            } else {
                bottomMatchRightVerticalLine
            }
        }
    }
    
    private var rightHorizontalLine: some View {
        Rectangle()
            .frame(width: UIScreen.main.bounds.width * 0.05, height: 2)
            .foregroundColor(lineColor)
    }
    
    private var topMatchRightVerticalLine: some View { //place vertical line in lower half of view
        VStack(spacing: 0) {
            Spacer()
                .frame(height: height / 2)
            Rectangle()
                .frame(width: 2, height: height / 2 + 2)
                .foregroundColor(lineColor)
        }
    }
    
    private var bottomMatchRightVerticalLine: some View { //place vertical line in upper half of view
        VStack(spacing: 0) {
            Rectangle()
                .frame(width: 2, height: height / 2 + 2)
                .foregroundColor(lineColor)
            Spacer()
                .frame(height: height / 2)
        }
    }
    
    ...
    
}

struct BracketCell_Previews: PreviewProvider {
    private static let previewMatchData = MatchData(team1: "Team 1", team2: "Team 2", team1Score: 2, team2Score: 1)
    
    static var previews: some View {
        BracketCell(matchData: previewMatchData,
                              heightScalingExponent: 0,
                              isTopMatch: true,
                              isCollapsed: false,
                              isFirstColumn: true,
                              isLastColumn: false)
    }
}

, but where do they get all of this data from? We have to pass this data from 

. In order to calculate all the necessary things, it’ll need some data.

struct BracketColumnView: View {

    ...

    // 1
    let columnIndex: Int
    let focusedColumnIndex: Int
    let lastColumnIndex: Int
    
    var body: some View {
        LazyVStack(spacing: 0) {
            // 2
            ForEach(0 ..< bracket.matches.count, id: \.self) { matchIndex in
                BracketCell(matchData: bracket.matches[matchIndex],
                                      // 3
                                      heightScalingExponent: columnIndex - focusedColumnIndex,
                                      isTopMatch: matchIndex % 2 == 0,
                                      // 4
                                      isCollapsed: columnIndex < focusedColumnIndex,
                                      isFirstColumn: columnIndex == 0,
                                      isLastColumn: columnIndex == lastColumnIndex)
            }
        }
    }
}

struct BracketColumnView_Previews: PreviewProvider {
    
    ...
    
    static var previews: some View {
        BracketColumnView(bracket: previewBracket,
                                    columnIndex: 0,
                                    focusedColumnIndex: 0,
                                    lastColumnIndex: 2)
            .padding(.horizontal)
    }
}

 to the vertical ScrollView. Since we’ve decided to condense the cells once we scroll onto the column, we’re going to scroll the vertical 

 up so that the user doesn’t have to do it manually. Also, we’ll add some alignments to our snap scrolling so that we can see all of this in action better.

struct ContentView: View {
    
    ...
    
    // 1
    private var offsetX: CGFloat {
        -CGFloat(focusedColumnIndex) * columnWidth + dragOffsetX + leadingOffsetXForCurrentColumn
    }
    
    private var leadingOffsetXForCurrentColumn: CGFloat {
        if focusedColumnIndex == 0 {
            return 0
        } else if focusedColumnIndex == numberOfColumns - 1 {
            return UIScreen.main.bounds.width * 0.10
        } else {
            return UIScreen.main.bounds.width * 0.05
        }

    }
    
    var body: some View {
        // 2
        ScrollViewReader { scrollViewProxy in
            ScrollView(.vertical, showsIndicators: false) {
                // 3
                EmptyView()
                    .id("scroll-to-top-anchor")
                ScrollView(.horizontal, showsIndicators: false) {
                    columns
                        .offset(x: offsetX)
                }
                .frame(width: UIScreen.main.bounds.size.width)
                .scrollDisabled(true)
                .gesture(DragGesture(minimumDistance: 12, coordinateSpace: .global)
                    .onChanged(updateCurrentOffsetX)
                    .onEnded(handleDragEnded)
                )
            }
            // 4
            .onChange(of: focusedColumnIndex) { _ in
                withAnimation {
                    scrollViewProxy.scrollTo("scroll-to-top-anchor")
                }
            }
        }
        
    }
    
    private var columns: some View {
        HStack(alignment: .top, spacing: 0) {
            
            // 5
            ForEach(0..<brackets.count, id: \.self) { columnIndex in
                
                //6
                BracketColumnView(bracket: brackets[columnIndex],
                                            columnIndex: columnIndex,
                                            focusedColumnIndex: focusedColumnIndex,
                                            lastColumnIndex: numberOfColumns - 1)
                    .frame(width: columnWidth)
            }
        }
        .frame(width: CGFloat(numberOfColumns) * columnWidth)
    }
    
    ...
    
}

This is how the app should look and behave after implementing all of the changes above:

Thank you for taking the time to read this blog. I hope you found the information useful and that it helped you solve your problem, or at least develop your skills in SwiftUI. Stay tuned for an upcoming bonus chapter, where we'll be making a scrollable column indicator, and a match display screen. Happy coding!

Bonus: Column indicator and match display

If you remember the final product, there was a view that displayed the column names. It was scrollable, and would highlight the current column name. It was also tappable and would animate transitioning to that column.

struct SelectedColumnIndicator: View {
    let columnNames: [String]
    
    // 1
    @Binding var focusedColumnIndex: Int
    
    var body: some View {
        // 2
        ScrollViewReader { scrollProxy in
            ScrollView(.horizontal, showsIndicators: false) {
                scrollViewContent
            }
            
            // 3
            .onChange(of: focusedColumnIndex) { newIndex in scroll(to: newIndex, using: scrollProxy)}
        }
    }

    var scrollViewContent: some View {
        HStack(spacing: 24) {
            
            // 4
            ForEach(0..<columnNames.count, id: \.self) { columnIndex in
                indicator(for: columnIndex)
            }
        }
        .padding(24)
    }
    
    // 5
    private func indicator(for columnIndex: Int) -> some View {
        Button(action: { didTapColumnIndicator(at: columnIndex) }) {
            Text(columnNames[columnIndex].uppercased())
                .font(.system(size: 24))
                .bold()
                .foregroundColor(columnIndex == focusedColumnIndex ? .black : .gray)
                .id(columnIndex)
        }
    }
    
    private func scroll(to index: Int, using scrollProxy: ScrollViewProxy) {
        withAnimation {
            scrollProxy.scrollTo(index, anchor: .center)
        }
    }
    
    // 6
    private func didTapColumnIndicator(at index: Int) {
        withAnimation {
            focusedColumnIndex = index
        }
    }
}

struct SelectedColumnIndicator_Previews: PreviewProvider {
    @State private static var focusedColumnIndex = 0
    
    static var previews: some View {
        SelectedColumnIndicator(columnNames: ["Eights", "Quarterfinals", "Semifinals", "Finals"], focusedColumnIndex: $focusedColumnIndex)
    }
}

struct ContentView: View {
   
    ...
   
    var body: some View {
        ScrollViewReader { scrollViewProxy in
            ScrollView(.vertical, showsIndicators: false) {
                
                // 1
                SelectedColumnIndicator(columnNames: brackets.map({ bracket in bracket.name }),
                                        focusedColumnIndex: $focusedColumnIndex)
                .id("scroll-to-top-anchor")
                
                ScrollView(.horizontal, showsIndicators: false) {
                    columns
                        .offset(x: offsetX)
                }
                .frame(width: UIScreen.main.bounds.size.width)
                .scrollDisabled(true)
                .gesture(DragGesture(minimumDistance: 12, coordinateSpace: .global)
                    .onChanged(updateCurrentOffsetX)
                    .onEnded(handleDragEnded)
                )
            }
            .onChange(of: focusedColumnIndex) { _ in
                withAnimation {
                    scrollViewProxy.scrollTo("scroll-to-top-anchor")
                }
            }
        }
        
    }
    
    ...
    
}

Now that’s done, we'll also add the option of tapping on a match to see details. Create 

 object as data. This view can be styled to your liking, mine can be seen below.

struct MatchDetailsView: View {
    let matchData: MatchData
    
    var body: some View {
        VStack(spacing: 16) {
            teamNamesArea
            teamScoresArea
        }
    }
    
    private var teamNamesArea: some View {
        HStack(spacing: 40) {
            Text(matchData.team1.uppercased())
                .bold()
                .opacity(matchData.team1Score > matchData.team2Score ? 1 : 0.3)
            
            Text("vs")
                .font(.system(size: 16))
            
            Text(matchData.team2.uppercased())
                .bold()
                .opacity(matchData.team2Score > matchData.team1Score ? 1 : 0.3)
        }
        .font(.system(size: 32))
    }
    
    private var teamScoresArea: some View {
        HStack(spacing: 20) {
            Text("\(matchData.team1Score)".uppercased())
                .bold()
                .opacity(matchData.team1Score > matchData.team2Score ? 1 : 0.3)
            
            Text(":")
                .font(.system(size: 16))
            
            Text("\(matchData.team2Score)".uppercased())
                .bold()
                .opacity(matchData.team2Score > matchData.team1Score ? 1 : 0.3)
        }
        .font(.system(size: 48))
    }
}

struct MatchDetailsView_Previews: PreviewProvider {
    static var previews: some View {
        MatchDetailsView(matchData: .init(team1: "Team 1", team2: "Team 2", team1Score: 3, team2Score: 0))
    }
}

struct BracketColumnView: View {

    ...
    
    // 1
    let didTapCell: (MatchData) -> Void
    
    var body: some View {
        LazyVStack(spacing: 0) {
            ForEach(0 ..< bracket.matches.count, id: \.self) { matchIndex in
                BracketCell(matchData: bracket.matches[matchIndex],
                                      heightScalingExponent: columnIndex - focusedColumnIndex,
                                      isTopMatch: matchIndex % 2 == 0,
                                      isCollapsed: columnIndex < focusedColumnIndex,
                                      isFirstColumn: columnIndex == 0,
                                      isLastColumn: columnIndex == lastColumnIndex)
                
                // 2
                .onTapGesture {
                    didTapCell(bracket.matches[matchIndex])
                }
            }
        }
    }
}

struct BracketColumnView_Previews: PreviewProvider {
    
    ...
    
    static var previews: some View {
        BracketColumnView(bracket: previewBracket,
                                    columnIndex: 0,
                                    focusedColumnIndex: 0,
                                    lastColumnIndex: 2,
                                    didTapCell: { _ in })
            .padding(.horizontal)
    }
}

We say a
lot about...
everything

Popular Articles

We say alot about...everything

Popular Articles

We say a
lot about...
everything