Text Only | Text with Attachments

QB64.org Forum

Active Forums => Programs => Topic started by: SMcNeill on November 28, 2019, 02:05:13 pm

Title: Log In and Error Message Screens
Post by: SMcNeill on November 28, 2019, 02:05:13 pm
I'm working on making a couple of games which run on the internet; but I wanted to make them a bit more professional looking than just the little demo which I posted with the "Click It!" game...   One feature which I've incorporated is a simple little LOG IN/ REGISTER screen, which I thought I'd share independently, in case anyone would ever want to include it into one of their programs in the future.  Test it out and see how it works for you, and let me know if there's anything missing which I need to add to the little function.

Code: [Select]
$COLOR:32
SCREEN _NEWIMAGE(1024, 720, 32)

CLS
result = LogIn(Detail$)
PRINT Detail$


FUNCTION LogIn (Detail$)
    CONST True = -1, False = 0
    DIM DC AS _UNSIGNED LONG, BGC AS _UNSIGNED LONG
    D = _DEST: Disp = _AUTODISPLAY
    DC = _DEFAULTCOLOR: BGC = _BACKGROUNDCOLOR
    BG = _COPYIMAGE(D)


    'DO
    '    count = count + 1
    '    Client = _OPENCLIENT("TCP/IP:7993:172.93.60.23") 'attempt to join as client
    '    _LIMIT 10
    'LOOP UNTIL Client <> 0 OR count > 100
    'OK$ = Verify$
    'IF LEFT$(OK$, 4) <> "[OK]" THEN LogIn = 0: EXIT FUNCTION

    LogInScreen = _NEWIMAGE(200, 240, 32)

    _DEST LogInScreen
    _KEYCLEAR 'clear the buffer before we start accepting stray input as being part of our login
    Xoffset = (_WIDTH(D) - _WIDTH(LogInScreen)) / 2
    Yoffset = (_HEIGHT(D) - _HEIGHT(LogInScreen)) / 2
    DO
        CLS , DarkGray
        LINE (3, 3)-(_WIDTH - 4, _HEIGHT - 4), LightGray, BF
        LINE (20, 40)-(180, 200), DarkGray, BF
        LINE (23, 68)-(177, 92), DarkGray, BF
        LINE (23, 128)-(172, 152), DarkGray, BF
        LINE (25, 70)-(175, 90), Black, BF
        LINE (25, 130)-(175, 150), Black, BF
        LINE (20, 210)-(100, 230), DarkGray, BF
        LINE (22, 212)-(98, 228), Green, BF
        LINE (101, 210)-(180, 230), DarkGray, BF
        LINE (103, 212)-(178, 228), Red, BF

        COLOR DarkBlue, 0
        _PRINTSTRING (100 - _PRINTWIDTH("CHECKERS") / 2, 15), "CHECKERS"
        _PRINTSTRING (100 - _PRINTWIDTH("User Name") / 2, 95), "User Name"
        _PRINTSTRING (100 - _PRINTWIDTH("Password") / 2, 155), "Password"
        COLOR Yellow
        _PRINTSTRING (60 - _PRINTWIDTH("LOG IN") / 2, 212), "LOG IN"
        _PRINTSTRING (141 - _PRINTWIDTH("REGISTER") / 2, 212), "REGISTER"
        count = (count + 1) MOD 30
        IF count MOD 15 = 0 THEN blink = NOT blink
        k = _KEYHIT
        SELECT CASE k
            CASE 9, 13 'tab or enter to toggle between the two fields.
                S = NOT S
            CASE 8 'backspace
                IF S THEN p$ = LEFT$(p$, LEN(p$) - 1) ELSE n$ = LEFT$(n$, LEN(n$) - 1)
            CASE 27 'Escape quits before we login
                'Detail$ = "[ERROR]User Exited Log In Manually"
                GOTO function_exit
            CASE 32 TO 255 'visable characters
                IF S THEN p$ = p$ + CHR$(k) ELSE n$ = n$ + CHR$(k)
        END SELECT
        COLOR White

        _PRINTSTRING (27, 72), RIGHT$(n$, 18): _PRINTSTRING (27, 132), RIGHT$(p$, 18)
        IF blink THEN
            IF S THEN l = _PRINTWIDTH(p$) ELSE l = _PRINTWIDTH(n$)
            _PRINTSTRING (27 + l, 72 - 60 * S), "_"
        END IF
        _PUTIMAGE (Xoffset, Yoffset), LogInScreen, D
        WHILE _MOUSEINPUT: WEND

        mb = _MOUSEBUTTON(1): mx = _MOUSEX - Xoffset: my = _MOUSEY - Yoffset
        IF mb = True AND oldmouse = False THEN
            IF my >= 210 AND my <= 230 THEN 'we're in the right X/Y position
                IF mx >= 20 AND mx <= 100 THEN
                    'Run log in code
                    'Send Client, "[LOG IN]" + n$ + "," + p$ 'Register a new account
                    'OK$ = Verify$
                    'Detail$ = OK$
                    'IF LEFT$(OK$, 4) = "[OK]" THEN LogIn = -1: GOTO function_exit 'Success
                    Detail$ = "User: " + n$ + CHR$(13) + "Password: " + p$
                    LogIn = 0
                    GOTO function_exit 'Failure
                END IF
                IF mx >= 101 AND mx <= 180 THEN
                    'Run register code
                    'Send Client, "[REGISTER]" + n$ + "," + p$ 'Login from an existing account
                    'OK$ = Verify$
                    'Detail$ = OK$
                    'IF LEFT$(OK$, 4) = "[OK]" THEN LogIn = -1: GOTO function_exit
                    Detail$ = "User: " + n$ + CHR$(13) + "Password: " + p$
                    LogIn = 0
                    GOTO function_exit
                END IF
            ELSEIF my >= 70 AND my <= 90 AND mx >= 20 AND mx <= 180 THEN
                S = 0
            ELSEIF my >= 130 AND my <= 150 AND mx >= 20 AND mx <= 180 THEN
                S = -1
            END IF
        END IF
        '_DISPLAY
        _LIMIT 30
        oldmouse = mb
    LOOP

    function_exit: 'Safely restore our settings.

    _DEST D
    IF Disp THEN _AUTODISPLAY

    _PUTIMAGE , BG, D 'restore the background
    COLOR DC, BGC
    _FREEIMAGE BG
END FUNCTION

PS:  If you're not using the latest Development Builds, the $COLOR:32 version isn't going to work for you.  Just replace the colors inside with whatever color scheme you'd like for the pop up to have for you.  ;)
Title: Re: Log In Screen
Post by: bplus on November 28, 2019, 02:31:09 pm
This is exciting to be able to code games everyone can play, wow!

Also maybe run demo visual programs without having to download or workup gifs?
but I guess they would have to be compatible versions of QB64.
Title: Re: Log In Screen
Post by: SMcNeill on November 28, 2019, 02:47:10 pm
Quote from: bplus on November 28, 2019, 02:31:09 pm
This is exciting to be able to code games everyone can play, wow!

Also maybe run demo visual programs without having to download or workup gifs?
but I guess they would have to be compatible versions of QB64.

Nearly any version of QB64 should work... The server is simply asking for text input and then returning text back to the client.  I'm just in the habit of being lazy and making use of things like the $COLOR:32 command so I can use color names instead of needing _RGB or &HFFFFFFFF values.  Except for using it, I imagine any version of QB64 all the way back to the SDL versions should run the code without any real issues.  ;)
Title: Re: Log In and Error Message Screens
Post by: SMcNeill on November 29, 2019, 05:54:04 am
Added an Error Message Screen as well, which I thought I'd share in case anyone might ever want to make use of it independently for something.

Code: QB64: [Select]
  3. SCREEN _NEWIMAGE(800, 600, 32)
  4. 'draw some junk for the background
  5.  
  6. FOR x = 1 TO 100
  7.     LINE (RND * 400, RND * 300)-(RND * _WIDTH, RND * _HEIGHT), _RGB32(RND * 256, RND * 256, RND * 256), BF
  9.  
  10. E$ = "You ate too much macaronni and chesse, turkey, and pumpkin pie for Thanksgiving!  Try not to die!"
  11. DisplayError E$
  12.  
  13.  
  14.  
  15.  
  16.  
  17. SUB DisplayError (ErrorMessage$)
  18.     D = _DEST: Disp = _AUTODISPLAY
  20.     BG = _COPYIMAGE(D)
  21.     E$ = ErrorMessage$ 'back up the string so we don't corrupt it any way.
  22.  
  23.     LogInScreen = _NEWIMAGE(200, 240, 32)
  24.     _DEST LogInScreen
  25.     _KEYCLEAR 'clear the buffer before we start accepting stray input as being part of our login
  26.     Xoffset = (_WIDTH(D) - _WIDTH(LogInScreen)) / 2
  27.     Yoffset = (_HEIGHT(D) - _HEIGHT(LogInScreen)) / 2
  28.  
  29.     CLS , DarkGray
  30.     LINE (3, 3)-(_WIDTH - 4, _HEIGHT - 4), LightGray, BF
  31.     LINE (5, 5)-(_WIDTH - 6, 27), DarkGray, BF
  32.     LINE (6, 6)-(_WIDTH - 7, 26), White, BF
  33.     LINE (5, 30)-(_WIDTH - 6, 180), DarkGray, BF
  34.     LINE (6, 31)-(_WIDTH - 7, 179), Black, BF
  35.     LINE (75, 190)-(125, 225), DarkGray, BF
  36.     LINE (78, 193)-(122, 222), Green, BF
  37.     ViewWidth = _WIDTH - 13 - _FONTWIDTH '(_WIDTH -7, -6 from above for our print box area)
  38.     ViewHeight = 179 - 31 '(again, from the 179, 31 above)
  39.  
  40.     U = ViewHeight \ _FONTHEIGHT - 1
  41.     IF U < 0 THEN U = 0 'we can't have negative lines to print to!
  42.     DIM A(U) AS STRING 'the most lines we can print too
  43.  
  44.     COLOR Red, 0
  45.  
  46.     i = 0: out$ = ""
  47.     FOR j = 1 TO LEN(E$)
  48.         out$ = out$ + MID$(E$, j, 1)
  49.         IF _PRINTWIDTH(out$) >= ViewWidth THEN 'we're printing off the screen
  50.             j1 = 0 'back up to our next valid breakpoint.
  51.             DO
  52.                 j = j - 1: j1 = j1 + 1
  53.                 SELECT CASE MID$(out$, LEN(out$) - j1, 1)
  54.                     CASE " ", ".", ";", "-", "!", "?": EXIT DO 'valid end of line breaks.
  55.                 END SELECT
  56.             LOOP UNTIL j1 >= ViewWidth
  57.             IF j1 >= ViewWidth THEN j = j + j1: j1 = 0
  58.             'if we have such a long word that we can't break it
  59.             '(perhaps like a html link), then print as much of it on one line as we can and carry on
  60.             'with business like usual.
  61.             A(i) = _TRIM$(LEFT$(out$, LEN(out$) - j1))
  62.             out$ = ""
  63.             i = i + 1
  64.             IF i > U THEN EXIT FOR
  65.         END IF
  66.     NEXT
  67.     IF i < U AND out$ <> "" THEN A(i) = out$
  68.  
  69.     p1 = (U - i) / 2
  70.     FOR p = 0 TO U 'center the text as much as possible inside our error box
  71.         _PRINTSTRING (100 - _PRINTWIDTH(A(p)) / 2, 33 + _FONTHEIGHT * (p + p1)), A(p)
  72.     NEXT
  73.  
  74.     COLOR Black, 0
  75.     _PRINTSTRING (100 - _PRINTWIDTH("OK") / 2, 200), "OK"
  76.  
  77.     DO
  78.         count = (count + 1) MOD 2
  79.         IF count MOD 2 = 0 THEN blink = NOT blink
  80.         IF blink THEN COLOR Red, 0 ELSE COLOR Black, 0
  81.         _PRINTSTRING (100 - _PRINTWIDTH("WARNING: ERROR") / 2, 10), "WARNING: ERROR"
  82.         k = _KEYHIT
  83.         SELECT CASE k
  84.             CASE 13, 27, 32: EXIT DO 'Space,Enter, Escape will click "OK" and close the window
  85.         END SELECT
  86.  
  87.         WHILE _MOUSEINPUT: WEND
  88.         mb = _MOUSEBUTTON(1): mx = _MOUSEX - Xoffset: my = _MOUSEY - Yoffset
  89.         IF mb = -1 AND oldmouse = 0 THEN
  90.             IF mx >= 75 AND mx <= 125 AND my >= 190 AND my <= 225 THEN
  91.                 EXIT DO 'we clicked our "OK"
  92.             END IF
  93.         END IF
  94.         oldmouse = mb
  95.         _PUTIMAGE (Xoffset, Yoffset), LogInScreen, D
  96.         _DISPLAY
  97.         _LIMIT 10
  98.     LOOP
  99.  
  100.     _DEST D
  101.     IF Disp THEN _AUTODISPLAY
  102.     COLOR DC, BGC
  103.     _PUTIMAGE , BG, D 'restore the background
  104.     _FREEIMAGE BG

Once again, if you're not using the latest development build, you'll need to replace the color names with values which you prefer instead.  ;)
Title: Re: Log In and Error Message Screens
Post by: TempodiBasic on December 01, 2019, 10:05:45 am
Great Steve.
One day I can follow you in this project.
Quote
I'm just in the habit of being lazy
But why lazyness? I imagine that game on server must reduce to minimum the amount of data to exchange on the connection so that the server must be not so hardly overloaded. So in this my imagination in a game online the client part works for sound, music and graphics on the local machine and send string message events to the server that must cohordinate the several clients connected... with a strong structure based on timedconnection and a strong structured map of the game. In a wide world I think it is spending / wasting resources and time  to search a collision with standard method used for a single player local game. Think just 100 connected players to a Minecraft server, Unreal arena, Age of Empire arena, or modern FortNite! Or a chess server  to play online!
So  server or limits itself to group and share data on the world  and client detects events byself or send a data plus a probability of event to check in the local machines.
But this is only what I can think in general about gaming online.

Sorry I's forgetting the core of my post:
please change code here:
from this
Code: QB64: [Select]
  1. E$ = "You ate too much macaronni and chesse, turkey, and pumpkin pie for Thanksgiving!  Try not to die!"

to this
Code: QB64: [Select]
  1. E$ = "You ate too much maccaroni and parmiggiano, turkey, and pumpkin pie for Thanksgiving!  Try not to die!"
Text Only | Text with Attachments