Giter Club home page Giter Club logo

simpleroulette's Introduction

Images

Pod Platform Pod License Pod Version Carthage Compatible Swift Package Manager compatible

SimpleRoulette

SimpleRoulette helps you to create customizable Roulette, with SwiftUI. (Compatible with both macOS and iOS.)

Demo

iOS

macOS

Install

Swift Package Manager

Create Package.swift and add dependency like the following.

dependencies: [
    .package(url: "https://github.com/fummicc1/SimpleRoulette.git", from: "1.3.0")
    // or
    .package(url: "https://github.com/fummicc1/SimpleRoulette.git", branch: "main")
]

Cocoapods

Create Podfile and add dependency like the following.

pod 'SimpleRoulette', '~> 1.3'

Carthage

Create Cartfile and add dependency like the following.

github "fummicc1/SimpleRoulette"

Usage

RouletteView

All you need to know is just RouletteView and PartData. RouletteView confirms to View, so you can use it like the follwing.

```swift
struct ContentView: View {

    var body: some View {
        RouletteView(
            parts: partDatas
        )
        .startOnAppear(automaticallyStopAfter: 5) { part in
            guard let text = part.content.text else {
                return
            }
            title = text
        }
    }

    var partDatas: [PartData] {
        [
            PartData(
                content: .label("Swift"),
                area: .flex(3),
                fillColor: Color.red
            ),
            PartData(
                content: .label("Kotlin"),
                area: .flex(1),
                fillColor: Color.purple
            ),
            PartData(
                content: .label("JavaScript"),
                area: .flex(2),
                fillColor: Color.yellow
            ),
            PartData(
                content: .label("Dart"),
                area: .flex(1),
                fillColor: Color.green
            ),
            PartData(
                content: .label("Python"),
                area: .flex(2),
                fillColor: Color.blue
            ),
            PartData(
                content: .label("C++"),
                area: .degree(60),
                fillColor: Color.orange
            ),
        ]
    }
}

RouletteModel

If you want to pause / restart roulette. Please use RouletteModel like the following.

struct ContentView: View {

    @StateObject var model: RouletteModel

    var body: some View {
        VStack {
            RouletteView(model: model)
        }.onAppear {
            model.start()
            DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
                model.pause() // you can pause
                DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
                    model.restart() // you can restart
                }
            }
        }
    }
}

// Call ContentView
ContentView(
    model: RouletteModel(
        PartData(
            content: .label("Swift"),
            area: .flex(3),
            fillColor: Color.red
        ),
        PartData(
            content: .label("Kotlin"),
            area: .flex(1),
            fillColor: Color.purple
        ),
        PartData(
            content: .label("JavaScript"),
            area: .flex(2),
            fillColor: Color.yellow
        ),
        PartData(
            content: .label("Dart"),
            area: .flex(1),
            fillColor: Color.green
        ),
        PartData(
            content: .label("Python"),
            area: .flex(2),
            fillColor: Color.blue
        ),
        PartData(
            content: .label("C++"),
            area: .degree(60),
            fillColor: Color.orange
        ),
    )
)

Documentation

Contributing

Pull requests, bug reports and feature requests are welcome 🚀

License

MIT LICENSE

simpleroulette's People

Contributors

dependabot[bot] avatar fummicc1 avatar jeehut avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

simpleroulette's Issues

[improvement] remove the difference between `HugePart` and `AnglePart`.

Motivation

In this state (v1.0.1), it is not possible for single Roulette to combine with both Huge and Angle part` at the same time.
I think this problem could be sovled with the following way.

How

All of the part should be handled as Angle part, because, in internal method, HugePart has own angle and its size is calculated with numerical operation.

Text position, orientation (& donut hole radius)

@fummicc1 First of all: Thank you for this awesome library!

When I used this library to create a simple "roulette" with characters, I noticed a couple of drawbacks that make it not look like a "real" roulette and pretty much feel like an incomplete implementation:

  1. The letters I put into the parts are placed somewhere close to the middle of each part instead of at the outer end.
  2. The orientation of the text was looking into the same direction for each text, very unlike in a real roulette.

Here's an example state after I stopped my roulette (note that I reduce the opacity in the "stopped" state):
Bildschirmfoto 2023-09-19 um 09 02 03

And here's an actual roulette where everything looks as expected (letters at outer end, oriented to the direction of the part):
image

I understand that different people might have different use cases, but I would expect a library called "roulette" to at least have the option to render like most roulettes are designed. Would be great to have these options added!

P.S. A third thing I would love to see is to define a radius for the middle part where there are no lines drawn, as the lines all coming together in the middle looks a bit weird and stresses the eye especially when rotating. Again, like in the real roulette design I've added above, where the middle part has no lines for a reason.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.