Hey, what time is it?

Question

Challenge

Given a number width, number height, hours and minutes print the time using the following format style:

------  -  ------  ------  -    -  ------  ------  ------  ------  ------
|    |  |       |       |  |    |  |       |            |  |    |  |    |
|    |  |  ------  ------  ------  ------  ------       |  ------  ------
|    |  |  |            |       |       |  |    |       |  |    |       |
|    |  |  |            |       |       |  |    |       |  |    |       |
------  -  ------  ------       -  ------  ------       -  ------  ------

For numbers with a mid line, when the height is odd just place it in the middle (example for height = 3):

------
|    |
------
|    |
------

However, when the height is even you can choose up or down:

------  ------
|    |  |    |
|    |  ------
------  |    |
|    |  |    |
------  ------

Of course, you need to specify this and use it every time.

---

Input

• W: The width of each number
• H: The height of each number
• HRS: Time hours
• MINS: Time minutes

---

Output

You can either print the time, return a string (including the newlines) or return a list of strings (one string per line).

---

Rules

1. Assume number width > 2
2. Assume number height > 2
3. The space between numbers is fixed to 2
4. The space between hours and minutes is fixed to 4
5. If hours or minutes are < 10 (single digit), make sure to add a 0 (see example)
6. Assume that input hours and minutes will always be valid time
7. Digit 1 is a special case which always has the same width 1 and only it's height changes.
8. Height is considered the inner height, excluding the upper and lower rows of --- (see example)

---

Example

Here's an example for W=6, H=4, hrs=2, mins=18:

------  ------    -  ------
|    |       |    |  |    |
|    |  ------    |  ------
|    |  |         |  |    |
|    |  |         |  |    |
------  ------    -  ------

Answer 1

JavaScript (ES8), 258 245 242 239 bytes

(w,h,H,M)=>[2,h-1,2,h,2].map((r,y)=>`${(g=x=>((k=[876,,1284,260,8461,276,788,8484,780,268][x%10|0])?(s=x=>' -|'[[21,8,5,10,4,2][k*2>>y*3&7]>>x&3])().padEnd(w-2,s(4))+s(2):'-|||-'[y])+'  ')(H/10)+g(H)}  ${g(M/10)+g(M)}
`.repeat(r/2)).join``

Try it online!

Character encoding

Digits are made of 3 distinct characters:

• 0: space
• 1: -
• 2: |

Pattern encoding

Each digit is made of 5 patterns:

0:  -----  <-- top pattern
1:  |   |  <-- upper side repeated pattern
2:  -----  <-- middle pattern
3:      |  <-- lower side repeated pattern
4:  -----  <-- bottom pattern

Each pattern is made of a leading character \$L\$, followed by a repeated middle character \$R\$, followed by a trailing character \$T\$.

All digits can be built by using only 6 distinct patterns, which are encoded as:

$$L+R\times16+T\times4$$

 ID | Leading | Repeated | Trailing | Codes | Encoded as
----+---------+----------+----------+-------+------------
  0 |   "-"   |   "-"    |   "-"    | 1,1,1 |    21
  1 |   " "   |   " "    |   "|"    | 0,0,2 |     8
  2 |   "-"   |   " "    |   "-"    | 1,0,1 |     5
  3 |   "|"   |   " "    |   "|"    | 2,0,2 |    10
  4 |   " "   |   " "    |   "-"    | 0,0,1 |     4
  5 |   "|"   |   " "    |   " "    | 2,0,0 |     2

Digit encoding

Because of its non-standard width, \$1\$ is a special case and is processed separately.

All other digits are encoded as:

$$\frac{1}{2}\sum\limits_{n=0}^{4}2^{3n}P_n$$

where \$P_n\$ is the \$n\$-th pattern for this digit (0-indexed, from top to bottom).

 Digit | Patterns  | Encoded as
-------+-----------+------------ 
   0   | 0,3,3,3,0 |     876
   1   |    n/a    |     n/a
   2   | 0,1,0,5,0 |    1284
   3   | 0,1,0,1,0 |     260
   4   | 2,3,0,1,4 |    8461
   5   | 0,5,0,1,0 |     276
   6   | 0,5,0,3,0 |     788
   7   | 0,1,1,1,4 |    8484
   8   | 0,3,0,3,0 |     780
   9   | 0,3,0,1,0 |     268

Answer 2

Python 2, 296 270 256 249 244 241 bytes

w,h,H,M=input()
a,d,e='| -'
b,c=d*(w-2),e*w
f,g=e+b+e,d+b+e
l,r,m=a+b+d,d+b+a,a+b+a
E=eval
for L in['ceccfccccc']+~-h/2*['marrmllrmm']+['macccccrcc']+h/2*['malrrrmrmr']+['ceccgccgcc']:print E(L[H/10]),d+E(L[H%10]),d+d,E(L[M/10]),d+E(L[M%10])

Try it online!

Answer 3

Charcoal, 101 bytes

ＮθＮη⊞υ¶Ｆ-|Ｆ⟦ι◧ιθ⁺◨ι⊖θι×ιθ⟧⊞υ⁺κ¶ＦＥ⪫Ｅ²◧ＩＮ²:⭆§⪪”)⧴9;ïjÞ⊟Pj%Uδ>LτS·Ｑr^ψＱ”⁵﹪℅ι¹⁶×÷§⟦²⊖η²η⟧첧υＩλ«Ｐι§⪪ι¶⁰→→

Try it online! Link is to verbose version of code. Explanation:

ＮθＮη

Input the height and width.

⊞υ¶

Push a newline to the predefined empty list.

Ｆ-|

Loop over the characters - and |.

Ｆ⟦ι◧ιθ⁺◨ι⊖θι×ιθ⟧

Loop over the four values given by the character, the character padded to the width, the character on both sides of the width, and the character repeated across the width.

⊞υ⁺κ¶

Push those values plus a newline to the list. This results in the following elements for a width of 6:

-
     -
-    -
------
|
     |
|    |
||||||

(Note that the last one is unused, and the first and fifth elements are only one character wide.)

ＦＥ⪫Ｅ²◧ＩＮ²:

Input two numbers, convert to string, left pad to a width of 2, join them with :, then loop over the characters in that string.

⭆§⪪”)⧴9;ïjÞ⊟Pj%Uδ>LτS·Ｑr^ψＱ”⁵﹪℅ι¹⁶

Split the compressed literal 4777415551464544646437462454644547446662474744746400000 into blocks of 5, then take the block indexed by the code point of the current character modulo 16, thus mapping space to 0 and : to 10. Map over those characters.

×÷§⟦²⊖η²η⟧첧υＩλ

Look up the character in the predefined list, then multiply it according to its index; the first, middle and last strings get multiplied by 2/2 while the intermediate strings get multiplied according to the height.

«Ｐι§⪪ι¶⁰→→

Print the string without moving the cursor, then print the first line of the string again, then move the cursor a further two squares to the right. This means that 1 is special-cased because its first line is only a - while : is special-cased to have no intrinsic with at all and merely ends up doubling the space between digits.

Answer 4

Canvas, 101 98 96 bytes

┘｛ｌ２∔0×；＋｛ø；┤“\⤢ＹJ>`Ｓ‰/„２┬７ｎ＠｛⁴Ｙ？ｙ５＜？⁸»├⁸⇵|＊-∔ｙ３＜？↕；┐１；｝１ｙ２％‽⁷＋╷｝┘╋］⁷-×１ｙ５－⁸╵×⇵╵╋╋｝｝｝｝  ×＋｝ ４××＋

Try it here!

Nothing too fancy - stores the 7 bytes of info of each number and draws according to them.
While making this I fixed 3 bugs in Canvas (though only one resulted in shortening the answer; this is how the result would've looked without that commit)

Explanation:

┘{                   for each item of the 3rd input
  l2∔0×;+              prepend 2-length 0s to the item
  {                    for each character
    ø;                   push an empty canvas below the character
    ┤                    cast the character to a digit
    “...„２┬７n            the number 741859858201224148989 base-2 decoded & split into chunks of 7 - the digit data
    @                    pick the item in that list corresponding to the current number
    {                    for each bit there
      ⁴Y                 store the index in the loop in Y
      ?                  if the current bit is set:
        ｙ5<?               if y < 5 (aka one of the vertical parts)
          ⁸»├                push height>>1 + 2 (y position of the part)
          ⁸⇵|*               push a list of ceil(height/2) "|"s
          -∔                 prepend a "-" to that
          y3<?               if y < 3 (aka the top parts)
            ↕                  reverse that list
            ;┐１;               replace the y position with 1
          }                  
          1                  push 1 (x position of the part)
          y2%‽               if y%2 is 0
            ⁷+╷                add the width to that, then decrement
          }                  
          ┘╋                 at those coordinates enter that array in the canvas pushed earlier
        ]                  else (aka y >= 5, the horizontal parts)
          ⁷-×                repeat "-" width times
          1                  push 1
          y5-⁸╵×⇵╵           push ceil((y-5) * (height+1) / 2) + 1
          ╋╋                 at (1; above line) in the canvas, place the dashes, without smart overlapping
        }            
      }              
    }                
  }                  
    ×＋                 join the 2 digits with 2 spaces
}                    
  4××＋               join the 2 numbers with 4 spaces