@everymatrix/lottery-program-wof 1.3.2

package/src/calc.point.ts

@@ -0,0 +1,315 @@
+import { ArrowMode, Point, PointerMode } from "./types"
+
+import { ratioGoldenMean } from "./calc"
+import { mapObjectValueToTuple } from "./util"
+
+export const getSymmetricalPointFromScalar = 
+  (length: number): Point => ({
+    x: length,
+    y: length
+  })
+
+export const getPointOnCircle = 
+  (radius: number, angle: number, center: number): Point => {
+
+    const centerPoint: Point = getSymmetricalPointFromScalar(center)
+
+    return {
+      x: centerPoint.x + radius * Math.cos(angle),
+      y: centerPoint.y + radius * Math.sin(angle)
+    }
+  }
+
+export const getPoint = 
+  (num: number, length: number, r: number, rCenter: number): Point => {
+
+    const arc = 360 / length;
+    const psai = Math.PI / 180 * (-90 + arc * (num - 1/2))
+
+    const rCenterPoint = getSymmetricalPointFromScalar(rCenter)
+    const rPoint = getSymmetricalPointFromScalar(r)
+
+    return {
+      x: rCenterPoint.x + rPoint.x * Math.cos(psai),
+      y: rCenterPoint.y + rPoint.y * Math.sin(psai)
+    }
+  }
+
+export const getPointWithNext = 
+  (num: number, length: number, r1: number, r2: number) => {
+
+    const getPointx = (num: number) => getPoint(num, length, r1, r2)
+    
+    return {
+      point: getPointx(num),
+      pointNext: getPointx(num + 1)
+    }
+  }
+
+export const getTrianglePointsY = 
+  (height: number, isPointUp: boolean, yBase: number) => {
+    return {
+      y1: yBase,
+      y2: isPointUp ? yBase - height : yBase + height,
+      y3: yBase
+    }
+  }
+
+export const getTwoPointsOfLineGradientForBgRing = (radius, angle, center) => {
+  const p1 = getPointOnCircle(radius, angle - Math.PI / 2, center)
+  const p2 = getPointOnCircle(radius, angle + Math.PI / 2, center)
+
+  return {
+    x1: p1.x,
+    y1: p1.y,
+    x2: p2.x,
+    y2: p2.y,
+  }
+}
+
+export const getTwoPointsOfLineGradient = (radius, index, length, angle) => ({
+  x1: radius,
+  y1: radius,
+  x2: radius * (1 + Math.cos(2 * Math.PI / length * index + angle)),
+  y2: radius * (1 + Math.sin(2 * Math.PI / length * index + angle)),
+})
+
+export const getTrianglePoints = 
+
+  (center: number, width: number, height: number, arrowMode: ArrowMode, rCircleCenter: number) => {
+
+    const pointCenter = getSymmetricalPointFromScalar(center)
+
+    const getYAxisMatrix = () => {
+
+      switch(arrowMode){
+        case ArrowMode.DownFromTop:    return getTrianglePointsY(height, false,  0)
+        case ArrowMode.DownFromCenter: return getTrianglePointsY(height, false,  pointCenter.y + rCircleCenter)
+        case ArrowMode.UpFromCenter:   return getTrianglePointsY(height, true,   pointCenter.y - rCircleCenter)
+        case ArrowMode.UpFromBottom:   return getTrianglePointsY(height, true,   pointCenter.y * 2)
+      }
+    }
+
+    const {y1, y2, y3} = getYAxisMatrix()
+
+    const points: Point[] = [
+      {
+        x: pointCenter.x - width/2,
+        y: y1
+      },
+      {
+        x: pointCenter.x,
+        y: y2,
+      },
+      {
+        x: pointCenter.x + width/2,
+        y: y3
+      }
+    ]
+
+    const pointsValue = 
+      points.map(point => 
+        Object.keys(point).map(key => point[key]).join(' ')
+      ).join(', ')
+
+    return pointsValue
+  }
+
+  export const getPartitionProps = 
+  (
+    index: number,
+    number: number,
+    rRingInner: number,
+    r: number,
+  ) => {
+
+    const rPoint = getSymmetricalPointFromScalar(r)
+    const rRingInnerPoint = getSymmetricalPointFromScalar(rRingInner)
+
+    const { point, pointNext } = getPointWithNext(index, number, rRingInner, r)
+
+    const ds = [
+      `M`, 
+        ...mapObjectValueToTuple(rPoint),
+      `L`, 
+        ...mapObjectValueToTuple(point),
+      `A`, 
+        ...mapObjectValueToTuple(rRingInnerPoint),
+        `0 0 1`,
+        ...mapObjectValueToTuple(pointNext),
+      `Z`,
+    ]
+
+    return {
+      d: ds.join(' ')
+    }
+  }
+
+export const getRingImageProps = (index, length, rRingOuter, rRingInner, center, ratio) => {
+  
+  const aver = (rRingOuter + rRingInner) / 2
+  const diff = (rRingOuter - rRingInner) / 2 + 4 * ratio
+
+  const { point } = getPointWithNext(index, length, aver, center)
+
+  const radius = diff * 2
+
+  return {
+    x: point.x - diff,
+    y: point.y - diff,
+    width: radius,
+    height: radius,
+    // style: `stroke-width: ${radius * ratioGoldenMean(6)}px`,
+    class: "RingImage",
+    part: "RingImage",
+  }
+}
+
+export const getImagePartitionProps = (index, length, radius) => {
+
+  const multiple = 1.5
+  const size = {
+    width:  multiple * 2 * radius * Math.sin(2 * Math.PI / length /2),
+    height: radius,
+  }
+
+  const translate = [
+    size.width / 2,
+    size.height
+    // * (1 - 168/197)
+  ].map(s => `${s * -1}px`).join(',')
+
+  const rotate = 360 / length * index
+
+  return {
+    x: radius - size.width / 2,
+    y: radius - size.height,
+    ...size,
+    style: [
+      `transform-origin: ${radius}px ${radius}px`,
+      `transform: ${[
+        `rotate(${rotate}deg)`,
+        // `translate(${translate})`,
+      ].join(' ')}`,
+      
+    ].join(';'),
+  }
+}
+
+export const getImageProps = (length, radius, center) => {
+
+  const multiple = 1
+
+  const size = {
+    width:  multiple * 2 * radius * Math.sin(2 * Math.PI / length /2),
+    height: multiple * radius,
+  }
+
+  return {
+    x: center,
+    y: center,
+    ...size,
+    style: `transform: translate(${[
+      size.width / 2,
+      size.height
+      // * (1 - 168/197)
+    ].map(s => `${s * -1}px`).join(',')})`,
+  }
+}
+
+export const getRingCircleProps = (index, length, rRingOuter, rRingInner, r) => {
+  
+  const aver = (rRingOuter + rRingInner) / 2
+  const diff = (rRingOuter - rRingInner) / 2
+
+  const { point } = getPointWithNext(index, length, aver, r)
+
+  const radius = diff * 0.618
+
+  return {
+    cx: point.x,
+    cy: point.y,
+    r: radius,
+    style: `stroke-width: ${radius * ratioGoldenMean(6)}px`,
+    class: "RingCircle",
+    part: "RingCircle",
+  }
+}
+
+const angleTransform = (pointermode, arrowmode) => {
+  switch(pointermode){
+    case PointerMode.Arrow:
+      switch(arrowmode){
+        case ArrowMode.DownFromTop:
+        case ArrowMode.UpFromCenter:
+          return - Math.PI / 2
+
+        case ArrowMode.DownFromCenter:
+        case ArrowMode.UpFromBottom: 
+          return Math.PI / 2
+      }
+
+    case PointerMode.Partition:
+      return - Math.PI / 2
+  }
+}
+
+enum RotateDirection {
+  clockwise = 1,
+  anticlockwise = -1,
+}
+
+const pointMinus = (point1: Point, point2: Point): Point => ({
+  x: point1.x - point2.x,
+  y: point1.y - point2.y
+})
+
+const pointPlus = (point1: Point, point2: Point): Point => ({
+  x: point1.x + point2.x,
+  y: point1.y + point2.y
+})
+
+const getPropsCommonTransform = (ratio: number, index: number, length: number, point: Point, offset: Point, direction: RotateDirection) => {
+  
+  const angleSelf = 360 * index / length * direction -90
+  
+  const transformOrigin: Point = pointPlus(point, offset)
+
+  return {
+    style: [
+      `font-size: ${13 * ratio}px`,
+      `transform: rotate(${angleSelf}deg)`,
+      `transform-origin: ${transformOrigin.x}px ${transformOrigin.y}px`,
+    ].join(';')
+  }
+}
+ 
+export const getPropsForPartitionInfo = (
+  ratio: number,
+  radius: number,
+  center: number, 
+  index: number, 
+  length: number, 
+  pointermode: PointerMode, 
+  arrowmode: ArrowMode, 
+  offset: any
+) => {
+  
+  const direction = RotateDirection.clockwise
+  
+  const angle = 
+    angleTransform(pointermode, arrowmode) +
+    direction * index * 2 * Math.PI / length
+
+  const point = getPointOnCircle(radius - 9 * ratio, angle, center + offset.center)
+
+  return {
+    ...pointMinus(point, offset.position),
+    ...(pointermode === PointerMode.Arrow || true ? 
+      getPropsCommonTransform(ratio, index, length, point, offset.transform, direction) 
+      : 
+      {}
+    )
+  }
+}
+

package/src/calc.temp.ts

@@ -0,0 +1,29 @@
+const byte2Hex = (n: number) => {
+  var nybHexString = "0123456789ABCDEF";
+  const query = (m: number) => nybHexString.substr(m & 0x0F, 1)
+  
+  return String(query(n >> 4)) + query(n)
+}
+
+export function getColor(item: number, maxitem: number) {
+
+  const colorCalc = (x: number) => {
+
+    const phase = 0;
+    const center = 128;
+    const width = 127;
+  
+    const frequency = 2 * Math.PI / maxitem;
+  
+    return Math.sin(frequency * item + x + phase) * width + center
+  }
+  
+  const hex = (x: number) => byte2Hex(colorCalc(x))
+
+  return [
+    '#',
+    hex(2),
+    hex(0),
+    hex(4),
+  ].join('')
+}

package/src/calc.ts

@@ -0,0 +1,34 @@
+export const convertDegToArc = (deg: number) => deg * Math.PI / 180
+export const convertArcToDeg = (arc: number) => arc * 180 / Math.PI % 360
+
+export const getArcDelta = (n: number) => 2 * Math.PI / n
+
+export const findIndex = (deg: number, n: number) =>
+  Math.floor(
+    (360 - deg % 360) / convertArcToDeg(getArcDelta(n))
+  )
+
+export const findDeg = (index: number, n: number) => {
+  const degDelta = convertArcToDeg(getArcDelta(n))
+  return (index) * degDelta
+}
+
+export const createSVGElement = (tag: string) => {
+  const xmlns = "http://www.w3.org/2000/svg";
+  return document.createElementNS(xmlns, tag);
+}
+
+export const ratioGoldenMean = (times: number) => Math.pow(0.618, times)
+
+
+const randomDirection = () => Math.random() > 0.5 ? 1 : -1
+
+export const randomInSection = (number: number) => {
+  return 360 / number / 2 * (1 - 0.2) * Math.random() * randomDirection()
+}
+
+export const getArcLength = (radius: number, degrees: number) => {
+  const circumference = 2 * Math.PI * radius;
+  const arcLength = (degrees / 360) * circumference;
+  return arcLength;
+}

package/src/class.spinable.ts

@@ -0,0 +1,65 @@
+import { convertDegToArc, easeOut } from "./class.spinable.util"
+
+export abstract class Spinnable { 
+  arcStart: number = 0
+  
+  spinTime = 0
+  spinTimeTotal = Math.random() * 3 + 8 * 1000
+  spinAngleStart = 0
+  spinTimeout
+  public spinable: boolean = true
+
+  abstract tick(): void;
+  abstract beforeStart(deg: number): void;
+  abstract afterStop(): void;
+
+  public spin(deg, fn?){
+    this.spinAngleStart = deg
+
+
+    if(!this.spinable) return;
+
+    this.spinable = false
+    console.log('x', this.arcStart);
+    console.log('x', this.spinAngleStart);
+    this.spinTimeTotal = 1000
+    this.spinTime = 0;
+    this.spinTick(fn)
+    
+  }
+
+  private spinTick(fn) {
+    this.spinTime += 30
+    
+    if(this.spinTime >= this.spinTimeTotal) {
+      this.stop(fn);
+      return;
+    }
+      
+    var spinAngle = 
+      this.spinAngleStart - 
+      easeOut(
+        this.spinTime, 
+        0, 
+        this.spinAngleStart, 
+        this.spinTimeTotal
+      );
+    console.log('ease', spinAngle);
+    
+
+    this.arcStart += convertDegToArc(spinAngle);
+    console.log('arcStart', this.arcStart);
+    
+    this.tick()
+    this.spinTimeout = setTimeout(this.spinTick.bind(this, fn), 10);
+  }
+
+  private stop (fn){
+    clearTimeout(this.spinTimeout);
+    console.log(this.arcStart);
+    
+    this.afterStop()
+    this.spinable = true
+    if(fn) fn()    
+  }
+}

package/src/class.spinable.util.ts

@@ -0,0 +1,10 @@
+
+export const convertDegToArc = (deg: number) => deg * Math.PI / 180
+export const easeOut =
+(time: number, b: number, angleStart: number, timeTotal: number) => {
+  var ts = (time /= timeTotal) * time;
+  var tc = ts * time;
+  const res = b + angleStart * (tc + -3 * ts + 3 * time);
+  
+  return res
+}

package/src/class.spinner.ts

@@ -0,0 +1,145 @@
+import { easing, easingGrad, params, SpinStep, Easing, easingGradX } from "./class.spinner.util";
+
+export class Spinner {
+
+  deg: number = 0
+  // spinable: boolean = true
+  degTarget: number = undefined
+  container: HTMLElement = undefined
+  step: SpinStep = undefined
+  tick
+  cb
+  easingType: Easing = Easing.cubic
+  shouldHalt
+
+  param = params[2]
+
+  public launch(){
+    this.shouldHalt = undefined
+    this.step = SpinStep.launch
+    this.ticker()
+  }
+
+  public halt = (deg, cb = () => {}) => {
+    this.shouldHalt = () => {
+      this.step = SpinStep.halt
+      this.cb = () => {
+        cb()
+        this.setDeg(deg, 0)
+      }
+      this.degTarget = deg + 360 * this.param.haltTurns
+      this.continueRepeat()
+    }
+  }
+
+  private continueRepeat = () => requestAnimationFrame(this.ticker)
+  private ticker = () => {
+    
+    const linkSpeed = this.param.loopSpeed
+
+    const easingDuration = (deg: number) => 
+      30 * easingGrad[this.easingType] * deg / this.param.loopSpeed
+
+    const animations = {
+      launch: () => {
+        const t = easingDuration(360 * this.param.launchTurns - this.deg)
+        this.animate(t, this.deg, 360 * this.param.launchTurns - this.deg, easing.in[this.easingType], easingGradX.in[this.easingType])
+      },
+      halt: () => {
+        const t = easingDuration(this.degTarget)
+        this.animate(t, 0, this.degTarget, easing.out[this.easingType], easingGradX.out[this.easingType])
+      },
+      loop: () => {
+        this.setDeg((this.deg + linkSpeed) % 360, easingGrad[this.easingType])
+        this.continueRepeat()
+      }
+    }
+
+    const stepSwitcher = {
+      [SpinStep.launch]: () => {
+        this.cb = () => {
+          this.step = SpinStep.loop
+          this.setDeg(linkSpeed, easingGrad[this.easingType])
+          this.continueRepeat()
+        }
+        animations.launch()
+      },
+      [SpinStep.loop]: () => {
+        if(this.shouldHalt && this.deg === 0){
+          this.shouldHalt()
+        }else{
+          animations.loop()
+        }
+      },
+      [SpinStep.halt]: () => {
+        if(this.deg === 360 - linkSpeed){
+          animations.halt()
+        }else{
+          animations.loop()
+        }
+      }
+    }
+
+    stepSwitcher[this.step]()
+    
+    // switch(this.step){
+    //   case SpinStep.launch:
+        
+    //     break
+    //   case SpinStep.loop:
+        
+    //     if(this.shouldHalt && this.deg === 0){
+    //       this.shouldHalt()
+    //     }else{
+          
+    //       this.setDeg((this.deg + linkSpeed) % 360, easingGrad[this.easingType])
+    //       this.continueRepeat()
+    //     }
+    //     break
+    //   case SpinStep.halt:
+        
+    //     if(this.deg === 360 - linkSpeed){
+          
+    //       const t = 30 * easingGrad[this.easingType] * this.degTarget / this.param.loopSpeed
+    //       this.animate(t, 0, this.degTarget, easing.out[this.easingType], easingGradX.out[this.easingType])
+    //     }else{
+    //       this.setDeg((this.deg + linkSpeed) % 360, easingGrad[this.easingType])
+    //       this.continueRepeat()
+    //     }
+    //     break
+    // }
+  }
+
+  private setDeg = (deg, speed) => {
+    this.deg = deg
+    this.tick(deg, speed)
+  }
+
+  animate = (duration: number, startAngle, target: number, easing, _easingGrad) => {
+
+    let animationId = null;
+    window.cancelAnimationFrame(animationId);
+    let start = null;
+
+    const step = (timestamp) => {
+      
+      if (!start) {
+        start = timestamp;
+      }
+      
+      const progress = timestamp - start;
+      const translation = target * easing(progress / duration) + startAngle;
+      const speedCur = Math.abs(_easingGrad(progress / duration))
+      
+      this.setDeg(translation, speedCur)
+      
+      if (progress < duration) {
+        animationId = window.requestAnimationFrame(step);
+      }else{
+        this.cb()
+      }
+    }
+    
+    animationId = window.requestAnimationFrame(step);
+  }
+}

package/src/class.spinner.util.ts

@@ -0,0 +1,92 @@
+
+export enum SpinStep {
+  launch = 'launch',
+  loop = 'loop',
+  halt = 'halt',
+}
+
+export enum Easing {
+  quad  = 'quad',
+  cubic = 'cubic',
+  quart = 'quart',
+  quint = 'quint',
+  // 
+  expo = 'expo',
+  sine = 'sine',
+  circ = 'circ',
+}
+
+export const easing = {
+  in: {
+    quad:       (x: number) => Math.pow(x, 2),
+    cubic:      (x: number) => Math.pow(x, 3),
+    quart:      (x: number) => Math.pow(x, 4),
+    quint:      (x: number) => Math.pow(x, 5),
+    //
+    sine:       (x: number) => 1 - Math.cos((x * Math.PI) / 2),
+    expo:       (x: number) => x === 0 ? 0 : Math.pow(2, 10 * x - 10),
+    circ:       (x: number) => 1 - Math.sqrt(1 - Math.pow(x, 2)),
+  },
+  out: {
+    quad:      (x: number) => 1 - Math.pow(1 - x, 2),
+    cubic:     (x: number) => 1 - Math.pow(1 - x, 3),
+    quart:     (x: number) => 1 - Math.pow(1 - x, 4),
+    quint:     (x: number) => 1 - Math.pow(1 - x, 5),
+    //
+    sine:      (x: number) => Math.sin((x * Math.PI) / 2),
+    expo:      (x: number) => x === 1 ? 1 : 1 - Math.pow(2, -10 * x),
+    circ:      (x: number) => Math.sqrt(1 - Math.pow(x - 1, 2)),
+  }
+}
+
+export const easingGrad = {
+  quad:  2,
+  cubic: 3,
+  quart: 4,
+  quint: 5,
+  sine:  Math.PI / 2,
+  expo:  Math.LN2,
+  circ:  Infinity,
+}
+
+export const easingGradX = {
+  in: {
+    quad:  (x: number) => 2 * x,
+    cubic: (x: number) => 3 * x ** 2,
+    quart: (x: number) => 4 * x ** 3,
+    quint: (x: number) => 5 * x ** 4,
+    sine:  (x: number) => Math.PI / 2 * Math.sin(Math.PI / 2 * x),
+    expo:  (x: number) => Math.LN2 * 10 * 2 ** (10 * x - 10),
+    circ:  (x: number) => -1 / 2 * (1 - x ** 2) ** (- 1 / 2),
+  },
+  out: {
+    cubic: (x: number) => 3 * x ** 2 - 6 * x + 3,
+  }
+}
+
+export const params = [
+  // basic
+  {
+    launchTurns: 5,
+    launchSpeed: 0.2,
+    loopSpeed: 15,
+    haltTurns: 2,
+    haltSpeed: 0.16,
+  },
+  // faster
+  {
+    launchTurns: 2,
+    launchSpeed: 0.5,
+    loopSpeed: 20,
+    haltTurns: 2,
+    haltSpeed: 0.22,
+  },
+  // faster with more turns
+  {
+    launchTurns: 6,
+    launchSpeed: 1.38,
+    loopSpeed: 60,
+    haltTurns: 6,
+    haltSpeed: 0.50,
+  },
+]

package/src/css.state.ts

@@ -0,0 +1,13 @@
+
+export const getStatePropsForSpin = (deg: number, rotation: number, duration: number) => {
+  return {
+    before: {
+      style: `transition-timing-function: ease-in-out; transition-duration: ${duration}s;`,
+      transform: `rotate(${deg + 360 * rotation})`,
+    },
+    after: {
+      style: '',
+      transform: `rotate(${deg})`,
+    }
+  }
+}

package/src/fakeDraw.ts

@@ -0,0 +1,9 @@
+export default {
+  success: true,
+  item: {
+    state: "fulfilled",
+    result: {
+      wheelOfFortunePartitionIndex: 1
+    }
+  }
+}